Bootstrap入門（二）柵格

Bootstrap入門（二）柵格

全局CSS樣式--柵格

先引入本地的CSS文件（根據自己的文件夾，有不同的引入地址，我是放在一個新建的名為css的文件夾中）

<link href="css/bootstrap.min.css" rel="stylesheet">

 

container 容器，柵格系統是依賴容器存在的

<div class="container"> ... </div>

 

Bootstrap 提供的柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。 柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局。參數：

 

	超小屏幕 手機 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面顯示器 (≥992px)	大屏幕 大桌面顯示器 (≥1200px)
柵格系統行為	總是水平排列	開始是堆疊在一起的，當大於這些閾值時將變為水平排列C	開始是堆疊在一起的，當大於這些閾值時將變為水平排列C	開始是堆疊在一起的，當大於這些閾值時將變為水平排列C
.container 最大寬度	None （自動）	750px	970px	1170px
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-

 

 

代碼操作

為方便查看柵格效果，為柵格添加一組樣式

        <style> .row{ margin-bottom: 20px;
            } .row .row{ margin-top: 10px; margin-bottom: 0;
            } [class*="col-"]{ padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86,61,124,.15); border:1px solid #ddd; border:1px solid rgba(86,61,124,.2);
            }
        </style>    

 

先創建一個class為container的div

<div class="container"> ... </div>   

 

然后添加13個小柵格

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>

 

第13個自動換行，確實一行最多12份，效果：

 

再添加兩組div

            <div class="row">
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
            </div>
 
            <div class="row">
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
            </div>

發現少了的，是不會有任何顯示的，效果：

添加其中一個柵格的內容量，發現自動換行，效果：

 

 

添加兩組帶偏移效果的div（“col-md-offset-X”屬性 X為將分成12份后，偏移多少的位置）

　　　　　　　<div class="row">
                <div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
            </div>
 
            <div class="row">
                <div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
            </div>

效果：

 

---

 

嵌套使用

           <div class="row">
                <div class="col-sm-9"> col-sm-9 <div class="row">
                        <div class="col-xs-8"> col-xs-8 </div>
                        <div class="col-xs-4"> col-xs-4 </div>
                    </div>   
                </div>
            </div>    

效果：

 

列排序（“col-md-push- ”、“col-md-pull- ”屬性改變列的排序，“col-md-push- X” 向后移動X個單位，“col-md-pull- X”向前移動X個單位）

            <div class="row">
                <div class="col-md-9">col-md-9</div>
                <div class="col-md-3">col-md-3</div>
            </div>
 
            <div class="row">
                <div class="col-md-9 col-md-push-3">col-md-9 col-md-push-3</div>
                <div class="col-md-3 col-md-pull-9">col-md-3 col-md-pull-9</div>
            </div>    

效果：