bootstrap學習筆記

1、引入的檔案

script>  script>

bootstrap把頁面設定為12列，通過改變列的數字來進行布局。

-- col-xs-4 : 指小於768px的小裝置

11-- col-sm-4 ：指》=768px的裝置
22-- col-md-4 ：指》=992px裝置
33-- col-lg-4 ：值1200px裝置

container有乙個maigin，自己把這個margin去了或者把container去了也可以。

3、平移列

offset

<

div 
class
="row"
>
<
div 
class
="col-xs-4"
>11
div>
<
div 
class
="col-xs-4"
>22
div>
<
div 
class
="col-xs-offset-2 col-xs-4"
>33
div>---指33向右平移了兩列
div>

112233

11 11
2233

第一行為什麼沒有按比例分？

5、列排序

主要是使用col-xs-push-*  col-xs-pull-*(*表示0-11的數字)

<

div 
class
="row"
>
<
div 
class
="col-xs-4"
>21
div>
<
div 
class
="col-xs-8"
>24
div>
div>
<
div 
class
="row"
>
<
div 
class
="col-xs-4 col-xs-push-8"
>21
div>
<
div 
class
="col-xs-4 col-xs-pull-4"
>24
div>
div>

1：列寬使用百分比，而不是畫素

2：將row類換成row-fluid

3:其它基本功能與上面的固定布局一樣，支援響應式。

4：平分某乙個列時，由於流式布局採用的是百分比，所以應該按照6來計算。

2

2

<

div 
class
="container"
>
<
div 
class
="col-xs-6"
>333
div>
<
div 
class
="col-xs-6"
>444
div>
div>
<
div 
class
="container-fluid"
> ---宣告container-fluid類，表明內容是流式布局，作用：作為乙個包含塊，來包含流式內容
<
div 
class
="row-fluid"
>
<
div 
class
="col-xs-6 col-md-12"
>333
div>
<
div 
class
="col-xs-6 col-md-12"
>444
div>
div>
div>
<
div 
class
="row-fluid"
> ----沒用宣告container和container-fluid類，此時為螢幕的寬度
<
div 
class
="col-xs-6"
>333
div>
<
div 
class
="col-xs-6"
>444
div>
div>

當螢幕大於992px時，效果如下：此時獨佔一行

row-fluid類（非常重要），決定是否是流布局。然後裡面的內容塊**編寫與網格系統一致，依然是從col-md-1到col-md-12，分別對應於不同的百分比

.

四：響應式設計 

簡單來說就是支援不同裝置（手機，pc）的解析度(960px,1366px,978px等等)進行自適應響應。 

<

div 
class
="row"
>
<
div 
class
="col-xs-6 col-md-12"
>21
div>
<
div 
class
="col-xs-6 col-md-12"
>24
div>
div>

當裝置》=992px時。效果如下：

上面兩種類，分別表示的解析度不一樣。col-md-12此時表示每列獨佔一行即12列。

bootstrap學習筆記

學習 然後對bootstrap進行引用 柵格系統中，列數是12，行數不固定 例項 手機 平板 桌面 在上面案例的基礎上，通過使用針對平板裝置的 col sm 類，我們來建立更加動態和強大的布局吧。col xs 12 col sm 6 col md 8 col xs 6 col md 4 col xs...

bootstrap學習筆記

1 bootstrap簡介 1 是乙個前端自適應ui框架 2 由全域性css樣式，元件，js外掛程式組成 基於jquery 2 組成 1 全域性css樣式 1 寫好的一些html標籤的展示效果，可以全域性進行呼叫，標籤通過class屬性來獲採樣式 2 元件 1 寫好的以下可以直接在頁面上展示的元素，...

bootstrap框架學習筆記

一.在.spann n為1 12的整數 的標籤內加.offsetn n為1 12的整數 可以使標籤左邊距 margin left 增加 spann n為1 12的整數 的距離。二.row以不同的固定寬度定位，而.row fluid以百分比定位。三.muted可以使標籤背景顏色為灰色 999999 四...