Bootstrap-柵格系統

Bootstrap-柵格系統

• 基本格式
• 基礎例子
• 等寬
• 指定寬度
• 自動寬度
• 響應屏幕大小
• 列偏移
• 列嵌套行
• 預置類實現特殊布局例子
• 自動margin
• order類

 

基本格式

• 柵格系統由container(容器)、row(行)、col(列)組成，row必須在container里面，row只能包含col且col必須在row里面
• 一個row由12列組成
• Bootstrap柵格系統有2種容器：.container(非全寬,固定寬度)和.container-fluid(全寬,彈性寬度)

<div class="container">
  <div class="row">
    <div class="col">
      One of two columns
    </div>
    <div class="col">
      One of two columns
    </div>
  </div>
</div>

基礎例子

等寬

不指定寬度則行內所有列平分該行寬度

<div class="container">
  <div class="row">
    <div class="col">
      One of two columns
    </div>
    <div class="col">
      One of two columns
    </div>
  </div>
</div>

指定寬度

一行內的列指定的寬度相加可以<=12，若>12則自動換行

<div class="container">
  <!-- 指定寬度<12 -->
  <div class="row">
    <div class="col-8">
      col-8
    </div>
    <div class="col-4">
      col-4
    </div>
  </div>
  <!-- 指定寬度>12 -->
  <div class="row">
    <div class="col-6">
      col-6
    </div>
    <div class="col-4">
      col-4
    </div>
    <div class="col-4">
      col-4
    </div>
  </div>
  <!-- 指定寬度<12 -->
  <div class="row">
    <div class="col-5">
      col-5
    </div>
    <div class="col">
      auto
    </div>
  </div>
</div>

自動寬度

根據內容自適應寬度

<div class="container">
  <div class="row">
    <div class="col-auto">
      col-auto
    </div>
    <div class="col-4">
      col-4
    </div>
  </div>
</div>

響應屏幕大小

Bootstrap中根據屏幕大小設置了一系列媒體查詢，具體預設類如下：

	超小(<576px)	小(≥576px)	中等(≥768px)	大(≥992px)	超大(≥1200px)
類前綴	.col	.col-sm	.col-md	.col-lg	.col-xl

屏幕≥768px:

屏幕<768px：

對於沒有設置的屏幕類型，例如本例子的xl或lg或sm會使用小於它的相鄰的設置，若沒設置超小屏幕，則超小屏幕默認都是每列100%

<div class="container">
  <div class="row">
    <div class="col-6 col-md-2">
      col-6 col-md-2
    </div>
    <div class="col-6 col-md-10">
      col-6 col-md-10
    </div>
  </div>
</div>

列偏移

offset類可以使列向右偏移

<div class="container">
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4 offset-4">.col-4 .offset-4</div>
  </div>
</div>

列嵌套行

嵌套在列內的行的12列是相對於列的

<div class="container">
  <div class="row">
    <div class="col-9">
      .col-9
      <div class="row">
        <div class="col-9">.col-9</div>
        <div class="col-3">.col-3</div>
      </div>
    </div>
    <div class="col-3">.col-3</div>
  </div>
</div>

預置類實現特殊布局例子

自動margin

類名	功能
.ml-auto	margin-left:auto
.mr-auto	margin-right:auto

<div class="container">
  <!-- 右側 margin-left=auto則自動空出多余列 -->
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4 ml-auto">.col-4 .ml-auto</div>
  </div>
  <!-- 左側 margin-right=auto則自動空出多余列 -->
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
  <!-- 左側 mr-auto ml-auto，右側 mr-auto則左中右三空列寬度相等 -->
  <div class="row">
    <div class="col-4 mr-auto ml-auto">.col-4 .mr-auto .ml-auto</div>
    <div class="col-4 mr-auto">.col-4 .mr-auto</div>
  </div>
</div>

order類

類名	功能
order-n	n=1 to 12 ，order=n
order-first	order=-1
order-last	order=13

默認order=0，因為bootstrap中最多12列，所以first=-1，last=13，n=1 to 12

<div class="container">
  <div class="row">
    <div class="col order-5">1 order-5</div>
    <div class="col">2 未設置(oreder=0)</div>
    <div class="col order-first">3 order-first</div>
    <!-- 若相同 order則按先后順序排列 -->
    <div class="col order-5">4 order-5</div>
  </div>
</div>