BootstrapDay01

容器类包含两个类名:

.container是固体自适应方法，最大宽度为1320px;

.container-fluid是流体自适应方式，宽度为100%

两者区别:

1.container类的div左右两边有一个15px的padding（内边距) container-fluid类没有内边距

2..container类在屏幕宽度小于等于767px的时候，宽度=屏幕宽度的，也就是100%,container-fluid类不管屏幕宽度大小，一直是100%,屏幕宽767px;

列表:

1.用.col将得到等分的几列，并且不分屏幕大小,都能自适应.

    <div class="container">
        <div class="row">
            <div class="col">
                第一列
            </div>
            <div class="col">
                第二列
            </div>
            <div class="col">
                第三列
            </div>
        </div>
    </div>

2.使用.col-sm，在小屏幕上会自动转成一竖列，.col-lg;.col-xl,.col-md用法类似，只是针对的屏幕大小不同

    <div class="container">
        <div class="row">
            <div class="col-sm">
                第一列
            </div>
            <div class="col-sm">
                第二列
            </div>
            <div class="col-sm">
                第三列
            </div>
        </div>
    </div>
    <br>
   <div class="container-fluid">
        <div class="row">
            <div class="col-sm">
                第一列
            </div>
            <div class="col-sm">
                第二列
            </div>
            <div class="col-sm">
                第三列
            </div>
        </div>
    </div>
    <br> 

3.通过设置最后的数值来代表占据几列，列数加起来的总和不能超过12 

    <div class="container">
        <div class="row">
            <div class="col-sm-2">
                第一列
            </div>
            <div class="col-sm-6">
                第二列
            </div>
            <div class="col-sm-4">
                第三列
            </div>
        </div>
    </div>

混合使用栅格

  <div class="container">
        <div class="row">
            <div class="c col-sm-4 col-lg-6  col-xl-12">第一列</div>
            <div class="c col-sm-4 col-lg-6  col-xl-12">第二列</div>
            <div class="c col-sm-4 col-lg-12 col-xl-12">第三列</div>
        </div>
    </div>
    <br>

    col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px) -->

    <!-- col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px) -->

    <!-- col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) -->

    <!-- col-sm- 平板 - 屏幕宽度等于或大于 576px -->

    <!-- col- 针对所有设备 -->

    <!--xl的时候等分的六列，lg的时候第一行3列第二行3列，md的时候222，sm六行，每行里一列

    <div class="container">
        <div class="row">
            <div class="c col-sm-12 col-md-6 col-lg-4 col-xl-2">第一列</div>
            <div class="c col-sm-12 col-md-6 col-lg-4 col-xl-2">第二列</div>
            <div class="c col-sm-12 col-md-6 col-lg-4 col-xl-2">第三列</div>
            <div class="c col-sm-12 col-md-6 col-lg-4 col-xl-2">第四列</div>
            <div class="c col-sm-12 col-md-6 col-lg-4 col-xl-2">第五列</div>
            <div class="c col-sm-12 col-md-6 col-lg-4 col-xl-2">第六列</div>
        </div>
    </div>

如果只给其中一列设置大小，那剩下的列会平分剩下的大小，奇数偶数都可以

    <div class="container">
        <div class="row">
            <div class="c  col-xl">第一列</div>
            <div class="c  col-xl-7">第二列</div>
            <div class="c  col-xl">第三列</div>
        </div>
    </div>

.w-100等于width:100%,用在栅格里相当于强制换行

   <div class="container">
        <div class="row">
            <div class="c  col">第一列</div>
            <div class="c  col">第二列</div>
            <div class="c  col">第三列</div>
            <div class="w-100"></div>
            <div class="c  col">第四列</div>
            <div class="c  col">第五列</div>
            <div class="c  col">第六列</div>
        </div>
    </div>

栅格系统中  对行可以进行垂直对齐操作 居顶(默认)

居顶（默认）.align-items-start

居中.align-items-center,

居底.align-items-end

 <div class="container">
      <div class="row align-items-start">
             <div class="c  col">第一列</div>
             <div class="c  col">第二列</div>
             <div class="c  col">第三列</div>   
      </div>
  </div>

栅格系统中对列可以进行垂直对齐操作

居顶（默认）.align-self-start,

居中.align-self-center,

居底:.align-self-end

 <div class="container">
          <div class="row align-items-start">
                <div class="c  col align-self-start">第一列</div>
                <div class="c  col align-self-center">第二列</div>
                <div class="c  col align-self-end">第三列</div>   
            </div>   
    </div>

当栅格没有占满100%的时候，可以实现不同的水平对齐方式

居左：.justify-content-start

居中：.justify-content-center

居右：.justify-content-end

间隔相等:.justify-content-around

两端对齐:.justify-content-between

<div class="container">
        <div class="row justify-content-between">
                <div class="c  col-3">第一列</div>
                <div class="c  col-3">第二列</div>
                <div class="c  col-3">第三列</div>   
            </div>   
</div>   

.order-n,n是个数字，代表列所在的位置，n的最大值12

    <div class="container">
        <div class="row">
            <div class="col-3 order-3">
                第一列
            </div>
            <div class="col-3 order-1">
                第二列
            </div>
            <div class="col-3 order-2">
                第三列
            </div>
        </div>
    </div>

order-first将一列强制设置为第一列，order-last强制设为最后一列

    <div class="container">
        <div class="row">
            <div class="col">
                第一列
            </div>
            <div class="col order-last"> <!--把第二列强制放在最后了-->
                第二列
            </div>
            <div class="col">
                第三列
            </div>
            <div class="col">
                第四列
            </div>
            <div class="col">
                第五列
            </div>
            <div class="col order-first"> <!--把第六列强制放在第一列了-->
                第六列
            </div>
        </div>
    </div>

offset-N,n代表几个栅格,距离左侧偏移,相当于margin-left

    <div class="container">
        <div class="row">
            <div class="col-3 offset-2">
                第一列
            </div>
            <div class="col-3">
                第二列
            </div>
            <div class="col-3 offset-2">
                第三列
            </div>
        </div>
    </div>

m-auto等于margin:auto;ml-N，mr-N代表微小的间距

    <div class="container">
        <div class="row">
            <div class="col-3 ml-2">
                第一列
            </div>
            <div class="col-3 mr-auto">
                第二列
            </div>
            <div class="col-3">
                第三列
            </div>
        </div>
    </div>

 <!--h1类名，与h1标签效果一致-->

<h1>Bootstrap</h1>====== <p class="h1">Bootstrap</p>

text-muted类名，用来构建一个附属小标题

<p class="h1">今日头条<small class="text-muted">南京确诊13人</small></p>

更醒目的标题，display-1

    <h1 class="display-1">今日头条</h1>
    <h1 class="display-2">今日头条</h1>
    <h1 class="display-3">今日头条</h1>

指定段落中的重要内容使用.lead

 <p class="lead">这是测试文本这是测试文本</p>

<!-- 自动添加背景色 -->

<p class="mark">这是测试文本这是测试文本</p>

使用title样式和abbr标签对缩略文本进行提示

    <abbr title="这是测试这是测试">这是测试。。。</abbr>

使用blockquote设置来源备注或引用

<blockquote class="blockquote">

文本居中居右，text-center,text-right,text-left

 <p class="text-center">这是文本</p>

ul li初始化list-unstyled,去掉列表前的小圆点

<ul class="list-unstyled"></ul>

使用list-inline和list-inline-item结合使用，使列表并排显示

    <ul class="list-inline">
        <li class="list-inline-item">A</li>
        <li class="list-inline-item">B</li>
        <li class="list-inline-item">C</li>
        <li class="list-inline-item">D</li>
    </ul>

我们可以使用dl，dt，dd可以实现水平描述，使用.text-truncate可以省略溢出

    <div class="container">
        <dl class="row">
            <dt class="col-3">描述列表</dt>
            <dd class="col-9">这是一段描述</dd>
        </dl>
        <dl class="row">
            <dt class="col-3">描述列表</dt>
            <dd class="col-4 text-truncate">这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述</dd>
        </dl>
        <dl class="row">
            <dt class="col-3">描述列表</dt>
            <dd class="col-9">这是一段描述</dd>
        </dl>
    </div>

    <!--.table给table设置一个基础样式-->

    <!--.table-dark设置颜色反转-->

    <!--.table-striped设置条纹状表格-->

    <!--.table-bordered给表格设置边框，.table-bordeless去掉边框-->

    <!--.table-hover实现行悬停效果-->

    <!--.table-sm实现紧凑型表格-->

<div class="table-responsive-sm">
        <table class="table table-striped table-bordered table-hover table-responsive-sm">
            <!--使用thead-light或者thead-dark实现浅色或者深色的表头-->
                <thead class="thead-dark">
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>总成绩</th>   
                    </tr>
                </thead>
                <tbody>
                    <!--使用table-success等语义化类名实现不同颜色的效果-->
                    <tr class="table-success">
                        <td>1</td>
                        <td>张三</td>
                        <td>男</td>
                        <td>98</td>
                    </tr>
                    <tr>
                        <td class="table-warning">2</td>
                        <td>李四</td>
                        <td>男</td>
                        <td>95</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>王五</td>
                        <td>女</td>
                        <td>96</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td class="table-responsive-sm">赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六</td>
                        <td>男</td>
                        <td>88</td>
                    </tr>
                </tbody>
            </table>
    </div>

  <!--form-group,form-control来设计表单的样式-->

    <!--input,select,textarea都可以加上form-control-->

    <!--form-control-sm实现缩小效果,form-control-lg实现放大效果-->

    <!--plaintext和readonly配合使用实现只读效果-->

    <!--col-form-label和栅格配合使用可以使label垂直居中-->

 <div class="container">
        <form action="">
            <div class="row form-group">
                <label for="email" class="col-3 col-form-label">请输入邮箱地址：</label>
                <input type="text" id="email" value="111@qq.com" readonly class="col-9 form-control">
            </div>
            <div class="row form-group">
                <label for="password" class="col-3">请输入密码：</label>
                <input type="text" id="password" class="col-9 form-control form-control-sm" placeholder="请输入密码">
            </div>
             <!--form-control-range实现一个范围条-->
            <div class=" form-group">
                <input type="range" class="form-control-range">
            </div>
            <!--用form-control实现select-->
            <div class="form-group">
                <label for="city">请选择您去过的城市：</label>
                <select name="city" id="city"  class="form-control">
                    <option value="1">北京</option>
                    <option value="2">南京</option>
                    <option value="3">上海</option>
                </select>
            </div>
            <!--用form-control实现textarea-->
            <div class="form-group">
                <label for="city">感想：</label>
                <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
            </div>
            <!--用form-check设计复选框和单选框-->
            <div class="form-check">
                <input type="checkbox" class="form-control-input" id="check">
                <label for="check" class="form-check-label">苹果</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-control-input" id="check2">
                <label for="check2" class="form-check-label">香蕉</label>
            </div>
                
            <div class="form-check">
                <input type="checkbox" class="form-control-input" id="chek3">
                <label for="check3" class="form-check-label">水蜜桃</label>
            </div>
            <!--文件上传form-control-file-->
            <div class="form-group">
                <label for="file">上传</label>
                <input type="file" class="form-control-file">
            </div>
        </form>
    </div>