Bootstrap

.container  (固定宽度)
.container-fluid(全屏宽度)

栅格

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

栅格布局：

.row   类设置行的类

宽度不等

    <div class="row">
            <div class="col-sm-3">col-sm-3</div>
            <div class="col-sm-2">col-sm-2</div>
            <div class="col-sm-1">ol-sm-1</div>
            <div class="col-sm-4">col-sm-4</div>
        </div>

不同设备

 
        <div class="row">
            <div class="col-sm-2 col-md-2 col-lg-2 col-xl-2">
                <p>demo</p>
            </div>
            <div class="col-sm-2 col-md-3 col-lg-4 col-xl-10">
                教程
            </div>
        </div>

(1) 偏移列
offset类可以使列向右偏移
.offset-*-*
第一个 *是 sm md lg xl 设备类型
第二个*偏移列数 （1-11位）
发生偏移时，整体往后移动，如果网页宽度不够，会自动到下一行
（2）排序
默认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>

(3)混合布局
justify-content-center 水平居中
align-items-center 垂直居中
align-self-end 向下

<div class="row align-items-center col" >
            <div class="col-sm-2 align-self-end">start</div>
           <div class="col-sm-2" >start</div>
           <div class="col-sm-2" >start</div>
        </div>

Screenshot.png

图片

.rounded 让图片显示圆角效果
.rounded-circle 设置圆形图片
.img-thumbnail 设置图片缩略图（图片有淡灰色边缘）
.float-right 设置图片右对齐
.img-fluid 通过在<img>标签中添加 .img-fluid类来设置响应式图片，根据屏幕大小自动适应，.img-fluid 类中设置了 max-width:100%,height:auto

    <div class="container">

        <img class="rounded" src="http://img4.imgtn.bdimg.com/it/u=2065338355,3844329913&fm=26&gp=0.jpg" alt="">
        <img class="rounded-circle" src="http://img1.imgtn.bdimg.com/it/u=2837995259,4208854182&fm=26&gp=0.jpg" alt="">

        <img class="img-thumbnail" src="http://image.biaobaiju.com/uploads/20181008/13/1538976127-nMuOTGyztK.jpg"
            alt="">

        <img class="float-right" src="http://image.biaobaiju.com/uploads/20181008/13/1538976127-nMuOTGyztK.jpg" alt="">

    </div>

Screenshot1.png

文本

020686e8bee523c4510ff522e951984.jpg
23bf53647328e90265bf80dec499108.jpg
8a7f9f5dc904d0cf8865cad0bbfb45d.jpg

<div >   
            <div class=" small">本行内容实在标签内</div>
            <div class=" font-italic">本行内容实在标签内</div>
            <div class="lead">本行内容实在标签内</div>
            <div class="text-left">本行内容实在标签内</div>
            <div class="text-center">本行内容实在标签内</div>
            <div class="text-right">本行内容实在标签内</div>
            <div class="text-muted">本行内容实在标签内</div>
            <div class="text-primary">本行内容实在标签内</div>
            <div class="text-success">本行内容实在标签内</div>
            <div class="text-danger">本行内容实在标签内</div>
            <div class="text-dark">本行内容实在标签内</div>
            <div class="text-info">本行内容实在标签内</div>
        </div>

表格

c36661e029b71e73ae2dc0be5ab01bd.jpg
bf011881f0c98ceb9623386d2016907.jpg

rowspan="3" 列合并
colspan="2" 行合并

 <div>
            <p class="row font-weight-light small justify-content-center "> 图书统计表</p>
        <table class="table small table-bordered table-hover table-sm ">
            <thead class="table table-secondary">
                <tr>
                    <th>分类</th>
                    <th>书名</th>
                    <th>册数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="3">数据库</td>
                    <td>aa</td>
                    <td>1</td>
                </tr>
                <tr>

                    <td>aa</td>
                    <td>2</td>
                </tr>
                <tr>

                    <td class="table-danger">SQL数据库基础教程</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Java</td>
                    <td>aa</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td colspan="2"> 总计</td>
                    <td>9</td>
                </tr>
            </tbody>
        </table>
        </div>

Screenshot.png