前言

今天看我們 Bootstrap 其他功能吧

一、基本語法

<div class="col-12 "> Lorem </div>

格線系統常見的總欄數為 12 欄，也有 16 欄、 24 欄。
那基本上我都是以12欄為主，所以就會寫成 "col-12"

二、版型

可以分為手機、平板、電腦

程式碼 | 裝置 | 方向
------------- | -------------
.col-佔欄數 | 手機 | 直
.col-sm-佔欄數 | 手機(≥576px) | 橫
.col-md-佔欄數 | 平板(≥768px) | 直
.col-lg-佔欄數 | 平板(≥992px) | 橫
.col-xl-佔欄數 | 桌機(≥1200px) | /

那最主要的 RWD 也是利用這種方式去製作

三、必備結構

一定要有 container 和 row 這兩個 Div(class名稱可隨意取)

<div class="container">
    <div class="row">
        <div class="col-12 "> Lorem 
        </div>
    </div>
</div>

四、我今天想用 Bootstrap 做個 RWD 要怎麼做呢?

那今天一樣以768px的為主，那這時候的版型就會使用

.col-md-佔欄數

所以放進程式碼後就會是(直接加在 col-12 後面就可以了)

<div class="col-12 .col-md-佔欄數 "> Lorem </div>

所以當今天超出設定的界線時就會自動做排版

-----------------------------------------------------------我是分隔線-----------------------------------------------------------

(不囉嗦直接附上程式碼

<div class="container">
    <div class="row">
        <div class="col-12 col-md-4  aa">
          <div class="item">
            <img src="https://picsum.photos/300/200?random1" class="img-fluid">
          <h2>title</h2>
          <p>
            A  Lorem ipsum dolor sit amet, consectetur ad
            Sapiente dolorem facilis magni. Laboriosam s!
            Quo eum laborum non voluptatibus doloribus sint officiis, earum i 
          </p>
        </div>
        
        <div class="col-12 col-md-4  bb">
          <div class="item">
            <img src="https://picsum.photos/300/200?random1" class="img-fluid">
          <h2>title</h2>
          <p>
            A  Lorem ipsum dolor sit amet, consectetur ad
            Sapiente dolorem facilis magni. Laboriosam s!
            Quo eum laborum non voluptatibus doloribus sint officiis, earum i 
          </p>
        </div>
        
        <div class="col-12 col-md-4  cc">
          <div class="item">
            <img src="https://picsum.photos/300/200?random1" class="img-fluid">
          <h2>title</h2>
          <p>
            A  Lorem ipsum dolor sit amet, consectetur ad
            Sapiente dolorem facilis magni. Laboriosam s!
            Quo eum laborum non voluptatibus doloribus sint officiis, earum i 
          </p>
        </div>
    </div>
</div>

1.當大於等於768px時，Div 呈現一行

2.當小於768px時，Div 自動換行

這樣就可以很順利的使用 Bootstrap 做出 RWD 啦 ~
今天就先到這邊，那我們鐵人賽Day23見囉!!