Bootstrap4常用样式总结

布局

container ：响应式布局 居中 会随着窗口的变化儿变化
container-fluid：流动式布局 容器会铺满100%
col-8：把一行分为八份， offset-2主键向右偏移2份
row: 行 col-3：会把row分为三份 col-3会等分row的宽度
row 、col 注解：col会把row分为12份 col去平分row col-2指定主键占2份row

响应式布局

col-sm // 窗口大于或等于576px ，col-sm才会等分宽度，小于576px会堆叠显示

垂直对齐

设置容器全部的对齐方式

align-items-start // 垂直顶部对齐
align-items-center//垂直居中
align-items-end // 垂直底部对齐

单独一个主键的对齐方式（不受其他对齐方式的影响）

align-self-start // 垂直顶部对齐
align-self-center//垂直居中
align-self-end // 垂直底部对齐

水平对齐

justify-content-start //默认水平向左
justify-content-center //水平居中
justify-content-end //水平向右
justify-content-between //左右两边对对齐把剩余的空间放在中间
justify-content-around //把剩余的空间分布在周围

卡片

<div class="container"style="width: 500px">
    <div class="card ">
        <div class="card-header">头部</div>
        <div class="card-body">内容</div>
        <div class="card-footer">尾部</div>
    </div>
</div>

card: 创建一张卡片
card-header:卡片头部
card-body:卡片内容
card-footer:卡片尾部

表格

 <table class="table table-bordered">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        </thead>
        <tbody >
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
        </tr>
        </tbody>
    </table>

table： 创建一个表格
table-bordered：给表格加上边框

表单

  <form action="" >

                    <div class="row