33.bootstrap

bootstrap

一、bootstrap的栅格系统

栅格系统 的最外层必须有一个类名 container

每一行的类名为 row

每一列的类名为 col

使栅格系统在不同的屏幕宽度下，显示不同的布局方式，可以使用 col-前缀 添加列宽 列数 来设置

列宽设置依据

1. sm 屏幕最小是 576px
2. md 屏幕最小是 768px
3. lg 屏幕最小是 992px
4. xl 屏幕最小是 1200px
5. xxl 屏幕最小是 1400px

col-lg-4 含义是，在大于 992px 小于1200px 的宽度下，占据4列栅格

栅格系统，把屏幕的总宽度默认分割成12列，元素可以在这12列中布局

 <div class="container wp">
    <div class="row">
        <div class="col col-sm-5 col-lg-6">黑云压城城欲摧</div>
        <div class="col col-sm-5 col-lg-3">黑云压城城欲摧</div>
        <div class="col">黑云压城城欲摧</div>
        <div class="col">黑云压城城欲摧</div>
    </div>
</div>

二、bootstrap按钮

在bootstrap 中使用 按钮步骤

1. 给需要设置成为按钮的标签，设置 基础类名 btn
2. 根据按钮功能，设置不同功能名字的 类名

<button type="button" class="btn btn-primary">按钮</button>
<button type="button" class="btn btn-secondary">按钮</button>
<button type="button" class="btn btn-success">按钮</button>
<button type="button" class="btn btn-warning">按钮</button>
<button type="button" class="btn btn-danger">按钮</button>
<hr>
<!-- 轮廓线 -->
<button type="button" class="btn btn-outline-danger">按钮</button>
<a href="###" class="btn btn-outline-warning">百度</a>
<!-- 禁用 -->
<button type="button" class="btn btn-outline-danger" disabled>按钮</button>
<!-- 由于a没有disabled属性，所以给a添加类名disabled -->
<a href="###" class="btn btn-outline-warning disabled">百度</a>

三、字体图标

<i class="txt bi-alarm"></i>
<i class="txt bi-search"></i>
<i class="txt1 bi-truck front fill"></i>
<i class="txt2 bi-trash-fill"></i>
<i class="txt3 bi-suit-heart-fill"></i>