前言

今天看我们 Bootstrap 其他功能吧

一、基本语法

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

格线系统常见的总栏数为 12 栏，也有 16 栏、 24 栏。
那基本上我都是以12栏为主，所以就会写成 "col-12"

二、版型

可以分为手机、平板、电脑

那最主要的 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见罗!!