bootstrap

bootstrap:是全球最受欢迎的前端组件，用于开发响应式布局、移动设备优先的web项目。
引入css文件：link。
响应式meta标签：用于手机自适应，用于ios9以上

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

3、布局模式：固定布局，流动布局
（1）固定布局：container
css的媒体查询：做移动设备优先，匹配适应屏幕。

@media (max-width: 1200px) and (min-width: 993px) {
            .block{
                width: 1140px;
            }
        }
 @media (max-width: 992px) and (min-width: 769px) {
            .block{
                width: 980px;
            }
        }
@media (max-width: 768px) and (min-width: 577px) {
            .block{
                width: 750px;
            }
        }
@media (max-width: 576px) {
            .block{
                width: 560px;
            }
        }

（2）流动布局：container-fluid，没有媒体查询
3、网格系统：类似于table标签。一行最大12个列，多出的列会自动折行，属于flex布局。
row 行
col-- 列
col-：自动，超小、col-sm-小、col-md：中等，、col-lg大、col-xl超大，都代表屏幕的分辨率
auto：例如：col-xl-auto：根据文本的内容自动分配网格的大小
col-*-num ： 列、后边的代表跨几列

<div class="row tb_row">
        <div class="col-sm-2 col-lg-1 col-md-4 col-xl-3">1</div>
        <div class="col-sm-8 col-lg-6 col-md-4 col-xl-2">2</div>
        <div class="col-sm-2 col-lg-5 col-md-4 col-xl-7">3</div>
</div>

offset-1：设置marginleft 8.333%
offset-*-2 ：不同的屏幕marginleft

<div class="row tb_row">
        <div class=" offset-3 col-xl-2">1</div>
        <div class=" col-xl-2">2</div>
        <div class=" col-xl-5">3</div>
 </div>

invisible 隐藏元素
visible 显示元素
p-0 padding:0
p-1 padding:0.25rem;
px、py、pt、pr、pb、pl
w-100 宽度100%
w-75 75%
h-100 高度100%
h-50 高度50%
align-items-center 相对父容器垂直居中
align-items-start 相对父容器顶部对齐
align-items-end 相对父容器底部对齐
align-content-center 考虑多行
align-self-center 自身在flexbox中的y轴分布
justify-content-center 子元素在父容器里面的x轴的排布情况

<div class="row" style="border: 1px solid red; height: 300px">
        <div class="col-lg-1  align-self-center" style="height: 60px; border: 1px solid black">1</div>
        <div class="col-lg-1  align-self-end" style="height: 60px; border: 1px solid black">2</div>
        <div class="col-lg-1" style="height: 60px; border: 1px solid black">3</div>
</div>

float-left：左浮动
float-right：右浮动
clearfix 清除浮动

<div class="container c_p clearfix">
    <div class="b1 float-left"></div>
    <div class="b2 float-right"></div>
</div>

text-center：水平居中
text-left：左对齐
text-right：右对齐
text-justify：两端对齐，分别对应sm xl md lg

<div class="container">
    <div class="row">
        <div class="col-xl-6 text-center" style="border: 1px solid black; height: 50px">123</div>
        <div class="col-xl-6" style="border: 1px solid black; height: 50px">123</div>
    </div>
</div> 

h1、h2、h3、h4、h5、h6：标题
small：字体变小，是正常网页字体的80%
close：关闭按钮

<div>
        <span class="h1">bootstrap</span>
        <span class="h2">bootstrap</span>
        <span class="h3">bootstrap</span>
        <span class="h4">bootstrap</span>
        <span class="small">bootstrap</span>
        <span class="close">&times;</span>
</div>

list-inline：去点和去边距值

<ul class="list-inline">
            <li>bootstrap</li>
            <li>bootstrap</li>
            <li>bootstrap</li>
            <li>bootstrap</li>
            <li>bootstrap</li>
</ul>

list-inline-item：转化为行级块

<ul>
            <li class="list-inline-item">bootstrap</li>
            <li class="list-inline-item">bootstrap</li>
            <li class="list-inline-item">bootstrap</li>
            <li class="list-inline-item">bootstrap</li>
            <li class="list-inline-item">bootstrap</li>
</ul>

img-fluid：图片响应式，图片的大小随着父容器的大小而自动伸缩，col均等分配
img-thumbnail：图片外边框+圆角
rounded：圆角

<div class="row">
            <div class="col"><img class="img-fluid  img-thumbnail" src="./img/boot.png" alt=""/></div>
            <div class="col"><img class="img-fluid img-thumbnail" src="./img/boot.png" alt=""/></div>
</div>

table：转为table表格
table-hover：当鼠标悬停时列变为灰色
table-responsive：表格式响应
table-bordered：打印成表格的形式
table-striped：隔行变色

<table class="table table-hover table-bordered table-striped">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
</table>

media、media-body：转为flex布局，并且每个flex为1

<div class="container">
    <div class="media">
        <img class="mr-1 img-fluid" src="./img/boot.png" alt=""/>
        <div class="media-body">
        Cras sit amet  nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
        </div>
    </div>
</div>

figure-img、figure-caption：给图片加一段文字说明

<div>
        <div class="figure">
            <img class="figure-img img-fluid" src="./img/boot.png" alt=""/>
            <div class="figure-caption text-center">
                This text is meant to be treated as sample output from a computer program
            </div>
        </div>
</div>

d-block、mx-auto：若想要给图片居中，直接给父元素taxt-center不能够使其居中，必须式图片先转为块级元素，再使其居中。

<div class="row">
        <img class="img-thumbnail img-fluid d-block mx-auto" src="./img/boot.png" alt=""/>
</div>

button：btn-group按钮组

<div class="btn-group">
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-link">按钮</button>
</div>

badge：徽章（badge-pill胶囊）

<div>
    <h3>bootstrap <span class="badge badge-pill badge-primary">New</span></h3>
</div>

progress：进度条（progress-bar-striped条纹、progress-bar-animated动画）

<div class="progress">
    <div class="progress-bar progress-bar-striped w-25 progress-bar-animated"></div>
</div>

pagination：当前页页码状态（active显示在当前页、disabled显示的页面点击无效）

<div>
    <ul class="pagination">
        <li class="page-item disabled"><a href="#" class="page-link">prev</a></li>
        <li class="page-item active"><a href="#" class="page-link">1</a></li>
        <li class="page-item"><a href="#" class="page-link">2</a></li>
        <li class="page-item"><a href="#" class="page-link">3</a></li>
        <li class="page-item"><a href="#" class="page-link">4</a></li>
        <li class="page-item"><a href="#" class="page-link">5</a></li>
        <li class="page-item"><a href="#" class="page-link">next</a></li>
    </ul>
</div>

图片轮播

<div>
    <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>
        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
            </div>
            <div class="carousel-item">
                <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
            </div>
            <div class="carousel-item">
                <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            </div>
        </div>
        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>