Bootstrap Grid

tags: Bootstrap

---

官網:
https://getbootstrap.com/

圖片置中寫法:
class="mx-auto d-block" 或 class="text-center"

Bootstrap Grid

官網Grid system說明

• 以12格下去切割
• 自適應

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

練習切表格~重點:內縮的格子是用div包覆

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

sm	md	lg	xl
576px	768px	992px	1200px
手機	平板	平板-橫	電腦
範例:
<div class="col-sm-2 col-md-3 col-lg-4 col-xl-6 box"></div>

• 分界尺寸背起來，才不用每次都要查，很好用。
• 小於576px就會滿版，預設手機尺寸
• 大於1200px預設是電腦尺寸
• 在bootstrap 4 xs被省略，只有使用sm、md、lg、xl
  
  

  <div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <img src="http://fakeimg.pl/800x600/00CED1/FFF/?text=001" class="img-fluid">
      <p>修改新技術加</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <img src="http://fakeimg.pl/800x600/00CED1/FFF/?text=001" class="img-fluid">
      <p>編程爆炸渠道</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <img src="http://fakeimg.pl/800x600/00CED1/FFF/?text=001" class="img-fluid">
      <p>友情連結自從</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <img src="http://fakeimg.pl/800x600/00CED1/FFF/?text=001" class="img-fluid">
      <p>如同投入日誌</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <img src="http://fakeimg.pl/800x600/00CED1/FFF/?text=001" class="img-fluid">
      <p>轉帖一本情緒</p>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <img src="http://fakeimg.pl/800x600/00CED1/FFF/?text=001" class="img-fluid">
      <p>注意小姐地理</p>
    </div>
  </div>
</div>

---