佈局容器和柵格網格系統

佈局容器和柵格網格系統

佈局容器

​ 一、.container 類用於固定寬度並支持響應式佈局的容器。

<div class="container">
  ...
</div>
複製代碼

​ 二、.container-fluid類用於100% 寬度，佔據所有視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>
複製代碼

柵格網格系統

​ Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。

​ 網格系統的實現原理很是簡單，僅僅是經過定義容器大小，平分12份(也有平分紅24份或32份，但12份是最多見的)，再調整內外邊距，最後結合媒體查詢，就製做出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分紅12份。

​ 注意: 網格系統必須使用到css

​ container、row 、xs (xsmall phones)，sm (small tablets)，md (middle desktops)，lg (larger desktops) 即: 超小屏(自動)，小屏(750px)，中屏(970px)和大屏(1170px)

​ 數據行(.row)必須包含在容器（.container）中，以便爲其賦予合適的對齊方式和內距(padding)。

​ 在行(.row)中能夠添加列(.column), 只有列（column）才能夠做爲行容器(.row)的直接子元素，但列數之和不能超過平分的總列數，好比12。若是大於12,則自動換到下一行。

​ 具體內容應當放置在列容器（column）以內

<div class="container">
    <div class="row">
      <div class="col-md-4">4列</div>
      <div class="col-md-8">8列</div>
    </div>
</div>
複製代碼

#### 列組合

​ 列組合簡單理解就是更改數字來合併列（原則：列總和數不能超12，大於12,則自動換到下一行。），有點相似於表格的colspan屬性。

<div class="container">
    <div class="row">
    	<div class="col-md-4">4列</div>
    	<div class="col-md-8">8列</div>
	</div>
    <div class="row">
      	<div class="col-md-2">2列</div>
      	<div class="col-md-10">10列</div>
    </div>
</div>
複製代碼

列偏移

​ 若是咱們不但願相鄰的兩個列緊靠在一塊兒，但又不想使用margin或者其餘的技術手段來。這個時候就可使用列偏移（offset）功能來實現。使用列偏移也很是簡單，只須要在列元素上添加類名"col-md-offset-*"(其中星號表明要偏移的列組合數)，那麼具備這個類名的列就會向右偏移。例如，你在列元素上添加"col-md-offset-8"，表示該列向右移動8個列的寬度(要保證列與偏移列的總數不超過12，否則會致列斷行|換行顯示)。

<div class="container">
    <div class="row">
      	<div class="col-md-1">1列</div>
      	<div class="col-md-1">2列</div>
      	<div class="col-md-1 col-md-offset-8">11列</div>
      	<div class="col-md-1">12列</div>
	</div>
</div>
複製代碼

列排序

​ 列排序其實就是改變列的方向，就是改變左右浮動，而且設置浮動的距離。在Bootstrap框架的網格系統中是經過添加類名 col-md-push-* 和 col-md-pull-* (其中星號表明移動的列組合數)。往前pull，日後push。

<div class="container">
    <div class="row">
		<div class="col-md-1 col-md-push-10">1列</div>
		<div class="col-md-1 col-md-pull-1">2列</div>	
	</div>
</div>
複製代碼

列嵌套

​ Bootstrap框架的網格系統還支持列的嵌套。你能夠在一個列中添加一個或者多個行（row）容器，而後在這個行容器中插入列.

<div class="container">
    <div class="row">
        <div class="col-md-2">
            個人裏面嵌套了一個網格
            <div class="row">
                <div class="col-md-9">9</div>
                <div class="col-md-3">3</div>
            </div>
        </div>
        <div class="col-md-10">個人裏面嵌套了一個網格
            <div class="row">
                <div class="col-md-10">10</div>
                <div class="col-md-2">2</div>
            </div>
        </div>				
    </div>
</div>
複製代碼