高级的CSS组件

导入的链接

    <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="jquery-3.3.1.slim.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

表单

1 定义表单控件

表单控件（例如<input>、<select>、<textarea>）统一采用.form-control类样式进行处理优化，包括常规外观、focus选中状态、尺寸大小等。并且表单一般都放在表单组（form-group）中，表单组也是bootstrap 4为表单控件设置的类，默认设置1rem的底外边距。

<form>
    <div class="form-group">
        <label for="formGroup1">姓名</label>
        <input type="text" class="form-control" id="formGroup1" placeholder="Name">
    </div>
    <div class="form-group">
        <label for="formGroup2">密码</label>
        <!--这个是在输入框的上方，那表单的旁边文字怎么显示-->
     <input type="password" class="form-control" id="formGroup2" placeholder="Password">
     <!--form-control-->
    </div>
</form>

1. 表单控件的大小

<form>
    <input class="form-control form-control-lg" type="text" placeholder="大尺寸（form-control-lg）"><br/>
    <input class="form-control" type="text" placeholder="默认大小"><br/>
    <input class="form-control form-control-sm" type="text" placeholder="小尺寸（form-control-sm）">
</form>

2. 设置表单控件只读

<form>
    <input class="form-control" type="text" placeholder="只读表单" readonly>
</form>

3. 设置只读纯文本

<form>
    <div class="form-group row">
        <label for="email" class="col-sm-2 col-form-label">邮箱</label>
        <div class="col-sm-10">
            <!--form-control-plaintext删除默认的表单字段样式-->
            <input type="text" readonly class="form-control-plaintext" id="email" value="email@example.com">
        </div>
    </div>
    <div class="form-group row">
        <label for="password" class="col-sm-2 col-form-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
    </div>
</form>

4. 范围输入

<form>
    <input type="range" class="form-control-range">
    <!--form-control-range设置水平滚动范围-->
</form>

2 设计单选框/复选框布局和样式

使用.form-check类可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框用于列表中选择一个选项。复选框和单选框也是可以使用disabled类设置禁用状态。
1.默认堆叠方式

<form>
    <p>只能选择一种的水果：</p>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="fruits" id="fruit1" >
        <label class="form-check-label" for="fruit1">
            香瓜
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="fruits" id="fruit2">
        <label class="form-check-label" for="fruit2">
            哈密瓜
        </label>
    </div>
    <div class="form-check">
        <!--radio单选-->
        <input class="form-check-input" type="radio" name="fruits" id="fruit3" disabled>
        <label class="form-check-label" for="fruit3">
            西瓜（禁选）
        </label>
    </div>
</form>
<form>
    <p class="mt-4">可以多选的水果：</p>
    <div class="form-check">
        <!--checkbox复选框-->
        <input class="form-check-input" type="checkbox" id="fruit4">
        <label class="form-check-label" for="fruit4">
            苹果
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="fruit5">
        <label class="form-check-label" for="fruit5">
            香蕉
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="fruit6" disabled>
        <label class="form-check-label" for="fruit6">
            菠萝（禁选）
        </label>
    </div>
</form>

2.水平排列方式

<form>
    <p class="mt-4">可以多选的水果：</p>
    <!--form-check-inline类水平排列-->
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="fruit4">
        <label class="form-check-label" for="fruit4">
            苹果
        </label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" value="" id="fruit5">
        <label class="form-check-label" for="fruit5">
            香蕉
        </label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="fruit6" disabled>
        <label class="form-check-label" for="fruit6">
            菠萝（禁选）
        </label>
    </div>
</form>

3.无文本格式

<form>
    <div class="form-check">
        <!--position-static无文本形式-->
        <input class="form-check-input position-static" type="checkbox" value="option1">
    </div>
    <div class="form-check">
        <input class="form-check-input position-static" type="radio" value="option1">
    </div>
</form>

3 表单布局风格

自从Bootstrap使用display: block和 100%在input控件上后，表单默认都是基于垂直堆叠排列的，可以使用bootstrap中其他样式类来改变表单的布局。
1.表单网格

<form>
    <!--在Bootstrap中表格默认都是垂直堆叠排列的；要水平排列可以使用其他样式类或使用网格系统-->
    <div class="row">
        <div class="col">
            <input type="text" class="form-control" placeholder="Name">
        </div>
        <div class="col">
            <input type="password" class="form-control" placeholder="Password">
        </div>
    </div>
</form>

设置更小边距

<form>
    <div class="form-row">
        <!--form-row更小边距-->
        <div class="col">
            <input type="text" class="form-control" placeholder="Name">
        </div>
        <div class="col">
            <input type="password" class="form-control" placeholder="Password">
        </div>
    </div>
</form>

复杂的表单网络布局

<form>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" placeholder="Name">
        </div>
        <div class="form-group col-md-6">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" id="email" placeholder="example@qq.com">
    </div>
    <div class="form-group">
        <label for="address">户籍</label>
        <input type="text" class="form-control" id="address" placeholder="户籍所在地">
    </div>
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="inputCity">现居城市</label>
            <input type="text" class="form-control" id="inputCity"  placeholder="现在所居住的城市">
        </div>
        <div class="form-group col-md-4">
            <label for="inputState">乡、镇</label>
            <select id="inputState" class="form-control">
                <option selected>选择</option>
                <option>选择</option>
            </select>
        </div>
        <div class="form-group col-md-4">
            <label for="inputZip">邮编</label>
            <input type="text" class="form-control" id="inputZip" placeholder="例如：833300">
        </div>
    </div>
    <div class="form-group">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
                记住我
            </label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">注册</button>
</form>

2.设置列的宽度

<form>
    <div class="form-row">
        <!--col-4之后col平均分-->
        <div class="col-4">
            <input type="text" class="form-control" placeholder="姓名">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="语文成绩">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="数学成绩">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="英语成绩">
        </div>
    </div>
</form>

4 帮助文本

可以使用form-text类创建表单中的帮助文本。可以使用任何内联HTML元素和通用样式（如.text-muted）来设计帮助提示文本。

<form>
    <div class="form-group row">
        <label for="password">密码</label>
        <input type="password" id="password" class="form-control">
        <small class="form-text text-muted">
            <!--form-text text-muted类创建帮助文本-->
            密码必须有8-18个字符，包含字母和数字，并且不能包含空格、特殊字符或表情符号。
        </small>
    </div>
</form>

5 禁用表单

通过在input中添加disabled属性，就能防止用户操作表单，此时表单呈现灰色背景颜色。

<form>
    <fieldset disabled><!--fieldset disabled父元素全部禁止了-->
        <!--fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
    -->
        <div class="form-group">
            <label for="testInput">禁用表单</label>
            <input type="text" id="testInput" class="form-control" placeholder="Disabled input">
        </div>
        <div class="form-group">
            <label for="testSelect">禁用选择菜单</label>
            <select id="testSelect" class="form-control">
                <option>Disabled select</option>
            </select>
        </div>
        <div class="form-group">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="testCheck">
                <label class="form-check-label" for="testCheck">
                    禁用复选框
                </label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </fieldset>
</form>

列表组

1 定义列表组

最基本的列表组就是在<ul>元素上添加list-group类，在<li>元素上添加list-group-item类和list-group-item-action类。list-group-item类设计列表项的字体颜色、宽度和对齐方式，list-group-item-action类设计列表项在悬浮时的浅灰色背景

<ul class="list-group"><!--list-group定义列表组-->
    <li class="list-group-item list-group-item-action">全心全力 见心见行</li>
    <li class="list-group-item list-group-item-action">同心同德 起帆远航</li>
    <li class="list-group-item list-group-item-action">同心同行 共创未来</li>
    <li class="list-group-item list-group-item-action">激情闪耀 共创辉煌</li>
    <li class="list-group-item list-group-item-action">超越梦想 再创辉煌</li>
</ul>

2 设计列表组的风格样式

1.激活和禁用状态

<ul class="list-group"><!--list-group-item类设计列表项的字体颜色、宽度和对齐方式-->
    <li class="list-group-item active">全心全力 见心见行（激活状态）</li>
    <li class="list-group-item">同心同德 起帆远航</li>
    <li class="list-group-item disabled">同心同行 共创未来（禁用状态）</li>
    <li class="list-group-item">激情闪耀 共创辉煌</li>
    <li class="list-group-item">超越梦想 再创辉煌</li>
</ul>

2.去除边框和圆角

<ul class="list-group list-group-flush"><!--ist-group-flush可以溢出部分边框和圆角；产生边缘贴齐的列表组-->
    <li class="list-group-item list-group-item-action">全心全力 见心见行</li>
    <li class="list-group-item list-group-item-action">同心同德 起帆远航</li>
    <!--list-group-item-action设置列表在悬浮时的浅灰色背景-->
    <li class="list-group-item list-group-item-action">同心同行 共创未来</li>
    <li class="list-group-item list-group-item-action">激情闪耀 共创辉煌</li>
    <li class="list-group-item list-group-item-action">超越梦想 再创辉煌</li>
</ul>

3.设计列表项的颜色

<ul class="list-group">
    <li class="list-group-item list-group-item-primary">全心全力 见心见行</li>
    <li class="list-group-item list-group-item-secondary">同心同德 起帆远航</li>
    <li class="list-group-item list-group-item-success">同心同行 共创未来</li>
    <li class="list-group-item list-group-item-danger">激情闪耀 共创辉煌</li>
    <li class="list-group-item list-group-item-warning">超越梦想 再创辉煌</li>
    <li class="list-group-item list-group-item-info">飞跃巅峰 纵横四海</li>
    <li class="list-group-item list-group-item-light">融合梦想 努力超越</li>
    <li class="list-group-item list-group-item-dark">超越第一 实现梦想</li>
</ul>

4.添加徽章

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        激情闪耀 共创辉煌
        <span class="badge badge-primary badge-pill">30</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        超越梦想 再创辉煌
        <span class="badge badge-primary badge-pill">50</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        超越第一 实现梦想
        <span class="badge badge-primary badge-pill">20</span>
    </li>
</ul>

3 定制内容

在Flexbox通用样式定义的支持下，列表组中几乎可以添加任意的HTML内容，包括标签、内容和链接等。下面就来定制一个招聘信息的列表。

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">
        <div class="d-flex w-100 justify-content-between">
            <!--d-flex代表：d-*-flex类在屏幕尺寸上设置flexbox容器-->
            <h5 class="mb-1">公司名称</h5>
            <small>发布时间</small>
        </div>
        <p class="mb-1">描述</p>
        <p>薪资</p>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">顺畅建筑有限公司</h5>
            <small class="text-muted">一天前</small>
        </div>
        <p class="mb-1">公司在全国各地都有项目，现招一位项目经理，工作地点在新疆...</p>
        <p>10k—15k</p>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">梦想网络有限公司</h5>
            <small class="text-muted">一天前</small>
        </div>
        <p class="mb-1">本公司位于北京，现招一位web前段工程师，要求有2年以上工作经验...</p>
        <p>8k-12k</p>
    </a>
</div>

面包屑

1 定义面包屑

面包屑（Breadcrumbs）是一种基于网站层次信息的显示方式。Bootstrap中的面包屑是一个带有breadcrumb类的列表。Bootstrap中的面包屑是一个带有breadcrumb类的列表，分隔符会通过CSS中的::before和content来添加。

<nav aria-label="breadcrumb">
    <!--breadcrumb面包屑-->
    <ol class="breadcrumb">
        <li class="breadcrumb-item active">首页</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item active">图书馆</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item"><a href="#">图书馆</a></li>
        <li class="breadcrumb-item active">工程类</li>
    </ol>
</nav>

2 设计分隔符

分隔符通过::before和CSS中content自动添加，如果想设置不同的分隔符，可以在CSS文件中添加以下代码覆盖掉bootstrap中的样式：

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: ">";
}

通过修改其中的content:" ";来设计不同的分隔符，这里更改为“>”符号。

<style>
        .breadcrumb-item + .breadcrumb-item::before {
            display: inline-block;
            padding-right: 0.5rem;
            color: #6c757d;
            content: "=";
        }
    </style>

分页

1 定义分页

在Bootstrap 4可以很简单的实现分页效果，在<ul>元素上添加pagination类，然后在<li>元素上添加page-item类，在超链接中添加page-link类，即可实现一个简单的分页。
基本结构如下：

<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

在bootstrap4中，一般情况下都是使用

来设计分页，也可以使用其他元素。

<ul class="pagination"><!--pagination-->
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>

2 使用图标

在分页中，可以使用图标来代替“上一页”或“下一页”。上一页使用“«”图标来设计，下一页使用“»”图标来设计。当然，还可以使用字体图标库中的图标来设计，例如Font Awesome图标库。

<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
        <!--span中包含内容-->
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>

3 设计分页风格

1.设置大小
bootstrap中提供了下面两个类来设置分页的大小：
（1）pagination-lg：大号分页样式。
（2）pagination-sm：小号分页样式。

<!--大号分页样式pagination-lg-->
<ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
<!--默认分页效果-->
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
<!--小号分页效果pagination-sm-->
<ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>

2.激活和禁用分页项
可以使用active类来高亮显示当前所在的分页项，使用disabled类设置禁用的分页项。

<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <!--page-link添加链接类-->
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <!--active类来高亮显示当前所在的分页项,使用disabled类设置禁用的分页项-->
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item disabled"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>

3.设置对齐方式
默认状态下，分页是左对齐，可以使用Flexbox弹性布局通用样式，来设置分页组件的居中对齐和右对齐。justify-content-center类设置居中对齐，justify-content-end类设置右对齐。

<!--使用flexbox弹性布局通用样式-->
<ul class="pagination mb-5 justify-content-center">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
<h3 class="mb-4">右对齐</h3>
<ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span>&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#"><span >&raquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>