# Bootstrap Grid

###### tags: `Bootstrap`

---
官網:
https://getbootstrap.com/

圖片置中寫法:
<span class="code1">class="mx-auto d-block"</span> 或 <span class="code1">class="text-center"</span>

### Bootstrap Grid
[官網Grid system說明](https://getbootstrap.com/docs/4.4/layout/grid/)
* 以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|
|手機|平板|平板-橫|電腦|
範例:
<span class="code1">&lt;div class="col-sm-2 col-md-3 col-lg-4 col-xl-6 box"&gt;&lt;/div&gt;</span>

* 分界尺寸背起來，才不用每次都要查，很好用。
* 小於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>


---
<span class="code1"></span>
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>