BootStrap框架模块

官网

Bootstrap · The most popular HTML, CSS, and JS library in the world.

中文网

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

下载

引入Bootstrap

1. 下载Bootstrap后，复制里面的css、js、font三个文件夹到目录下

2. 引入css下面的bootstrap.min.css

3. 引入js下面的bootstrap.min.js

4. 字体的话，按需引入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    
</body>
</html>
支持性

温馨提示

在windows上，我们支持到IE8-11版本

BootStrap容器

深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践

HTML5 文档类型

首先确保是HTML5的版本

<!doctype html>
<html lang="en">
  ...
</html>

移动设备优先

Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放，需要在 <head> 之中为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套

`.container` 类用于固定宽度并支持响应式布局的容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 左右两边是有一定的间隙，内容看起来在窗口的中间 -->
    <div class="container">
        <p>hello</p>
    </div>
</body>
</html>

`.container-fluid` 类用于 100% 宽度，占据全部视口（viewport）的容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 左右两边是有一定的间隙，内容看起来在窗口的中间 -->
    <div class="container">
        <p>hello</p>
    </div>
    <!-- 左右两边也是有一定的间隙，但没有.container那么大，类似宽度100% -->
    <div class="container-fluid">
        <p>hello</p>
    </div>
</body>
</html>

栅格系统基础

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的

栅格系统（可以等比列，也可以不等比列）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
    <style>
        .show-grid [class^=col-] {
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 等比例 -->
        <div class="row show-grid">
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
            <div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">xs</div>
        </div>
        <!-- 不是等比列 -->
        <div class="row show-grid">
            <div class="col-xs-10">xs</div>
            <div class="col-xs-2">xs</div>
        </div>
    </div>

栅格系统实例练习

实例1：手机、平板、小屏幕、大屏幕

要求1：

1.手机一行放两个，等比例

2.平板一行放三个，等比列

3.小屏幕一行放六个，第一个占一半的位置，其他占一个位置

4.大屏幕一行放12个

要求2：

多余的列（column）将另起一行排列

1.平板放三行，第一个占3个位置，其他占九个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .show-grid [class^=col-] {
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>
<body>
    <!-- 
        要求1：

        1.手机一行放两个，等比例

        2.平板一行放三个，等比列

        3.小屏幕一行放六个，第一个占一半的位置，其他占一个位置

        4.大屏幕一行放12个
     -->
    <div class="container">
        <div class="row show-grid">
            <div class="col-xs-6 col-sm-4 col-md-6 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-6 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
            <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        </div>
        <!-- 
            要求：

            多余的列（column）将另起一行排列
            1.平板放三行，第一个占3个位置，其他占九个位置
         -->
         <div class="row show-grid">
            <div class="col-sm-3">平板</div>
            <div class="col-sm-9">平板</div>
            <div class="col-sm-9">平板</div>
            <div class="col-sm-9">平板</div>
         </div>
    </div>
</body>
</html>

栅格系统属性

1.row-no-gutters （去除内边距）

2.col-xs-offset-数字（偏移）

3.嵌套

4.列排序

1.col-xs-pull-数字（前面）

2.col-xs-push-数字（后面）

1.删除网格间距（`.row-no-gutters）`

如果不希望容器内存在内边距，可以使用.row-no-gutters 类

<div class="container show-grid">
  <div class="row row-no-gutters">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  </div>
</div>

2.列偏移（`.col-md-offset-*）`

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如：.col-md-offset-4 是将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

列偏移可以等比列也可以不等比例

<div class="container show-grid">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
</div>

3.嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）

<div class="container">
        <div class="row show-grid">
            <div class="col-md-2">平板</div>
            <div class="col-md-2">
                <!-- 嵌套 -->
                <div class="col-xs-3">盒子</div>
                <div class="col-xs-3">盒子</div>
                <div class="col-xs-3">盒子</div>
                <div class="col-xs-3">盒子</div>
            </div>
            <div class="col-md-2">平板</div>
            <div class="col-md-2">平板</div>
            <div class="col-md-2">平板</div>
            <div class="col-md-2">平板</div>
        </div>
    </div>

4.列排序（ `.col-md-push-` 和 `.col-md-pull-）`

通过使用 .col-md-push-* 和 .col-md-pull-* 就可以很容易的改变列（column）的顺序

<div class="container show-grid">
  <div class="row">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  </div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .show-grid [class^=col-] {
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- row-no-gutters ： 去除内边距 -->
        <div class="row show-grid row-no-gutters">
            <div class="col-xs-4">盒子</div>
            <div class="col-xs-4">盒子</div>
            <div class="col-xs-4">盒子</div>
            <!-- col-xs-offset-2  ：偏移  后面的数字代表偏移的格子数 -->
            <div class="col-xs-4 col-xs-offset-2">盒子</div>
        </div>
    </div>

    <div class="container">
        <div class="row show-grid">
            <div class="col-md-2">平板</div>
            <div class="col-md-2">
                <!-- 嵌套 -->
                <div class="col-xs-3">盒子</div>
                <div class="col-xs-3">盒子</div>
                <div class="col-xs-3">盒子</div>
                <div class="col-xs-3">盒子</div>
            </div>
            <div class="col-md-2">平板</div>
            <div class="col-md-2">平板</div>
            <div class="col-md-2">平板</div>
            <div class="col-md-2">平板</div>
        </div>
    </div>
    <div class="container">
        <div class="row show-grid">
            <!-- 列排序 ：push是后面  pull是前面 -->
            <div class="col-sm-3 col-sm-push-9">盒子</div>
            <div class="col-sm-9 col-sm-pull-3">盒子</div>
        </div>
    </div>
</body>
</html>

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题

<div class="container">
        <!-- 标题  引入<small></small>可以出现副标题 -->
        <h1>一级标题<small>副标题</small></h1>
        <h2>二级标题<small>副标题</small></h2>
        <h3>三级标题<small>副标题</small></h3>
        <h4>四级标题<small>副标题</small></h4>
        <h5>五级标题<small>副标题</small></h5>
        <h6>六级标题<small>副标题</small></h6>
    </div>

对齐

通过文本对齐类，可以简单方便的将文字重新对齐

<div class="container">
        <!-- 对齐 -->
        <p class="text-left">左对齐</p>
        <p class="text-center">居中对齐</p>
        <p class="text-right">右对齐</p>
    </div>

改变大小写

通过这几个类可以改变文本的大小写

<div class="container">
        <!-- 大小写转化 -->
        <p class="text-lowercase">HELLO world</p>
        <p class="text-uppercase">hello WORLD</p>
        <p class="text-capitalize">hello world</p>
</div>

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容

<div class="container">
        <!-- 缩略语  <abbr title="xxx">xxx</abbr> -->
        <p>苏州天气：<abbr title="预计今晚凌晨到明早四点，望大家做好防护">大风预警</abbr></p>
        <p>xx:<abbr title="缩略的内容">xxx天气</abbr></p>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <!-- 标题  引入<small></small>可以出现副标题 -->
        <h1>一级标题<small>副标题</small></h1>
        <h2>二级标题<small>副标题</small></h2>
        <h3>三级标题<small>副标题</small></h3>
        <h4>四级标题<small>副标题</small></h4>
        <h5>五级标题<small>副标题</small></h5>
        <h6>六级标题<small>副标题</small></h6>
    </div>
    <div class="container">
        <!-- 对齐 -->
        <p class="text-left">左对齐</p>
        <p class="text-center">居中对齐</p>
        <p class="text-right">右对齐</p>
    </div>

    <div class="container">
        <!-- 大小写转化 -->
        <p class="text-lowercase">HELLO world</p>
        <p class="text-uppercase">hello WORLD</p>
        <p class="text-capitalize">hello world</p>
    </div>

    <div class="container">
        <!-- 缩略语  <abbr title="xxx">xxx</abbr> -->
        <p>苏州天气：<abbr title="预计今晚凌晨到明早四点，望大家做好防护">大风预警</abbr></p>
        <p>xx:<abbr title="缩略的内容">xxx天气</abbr></p>
    </div>
</body>
</html>

代码

内联代码 <code></code>

通过 <code> 标签包裹内联样式的代码片段
<div class="container">
        
        <p>使用<code>cnm</code>快捷操作</p>
</div>
用户输入 <kbd></kbd>

通过 <kbd> 标签标记用户通过键盘输入的内容
<div class="container">
        
        <p>使用<kbd>cnm</kbd>快捷操作</p>
</div>
代码块 <pre></pre>

多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理
<div class="container">
        
        <pre>npm install jquery.1.2.14</pre>
</div>
变量 <var></var> 效果数学公式

通过 <var> 标签标记变量
<div class="container">
        
        <var>x</var> + <var>y</var> = <var>z</var>
</div>
程序输出 <samp></samp>

通过 <samp> 标签来标记程序输出的内容
<div class="container">
        
        <p>2023年，找到前端开发的工作</p>
        <samp>2023年，找到前端开发的工作</samp>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <!-- 内联代码 <code></code>-->
        <p>使用<code>cnm</code>快捷操作</p>
    </div>
    <div class="container">
        <!-- 用户输入 <kbd></kbd>-->
        <p>使用<kbd>cnm</kbd>快捷操作</p>
    </div>
    <div class="container">
        <!-- 代码块 <pre></pre>-->
        <pre>npm install jquery.1.2.14</pre>
    </div>
    <div class="container">
        <!-- 变量声明 <var></var>  效果数学公式 -->
        <var>x</var> + <var>y</var> = <var>z</var>
    </div>
    <div class="container">
        <!-- 程序输出：<samp></samp> -->
        <p>2023年，找到前端开发的工作</p>
        <samp>2023年，找到前端开发的工作</samp>
    </div>
</body>
</html>

表格

1.基本表格 class="table"

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来

        <table class="table">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
2.条纹状表格 class="table table-striped"

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

        <table class="table table-striped">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
3.带边框的表格 class="table table-bordered"

添加 .table-bordered 类为表格和其中的每个单元格增加边框
 
        <table class="table table-striped table-bordered">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
4.鼠标悬停 class="table table-hover"

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响

        <table class="table table-bordered table-hover">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
5.紧缩表格 table-condensed

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

        <table class="table table-condensed table-bordered">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
6.状态类

给每一行添加颜色

1.active：悬停，灰色

2.success：选中，淡绿色

3.info：信息，淡蓝色

4.warning：警告，淡黄色

5.danger：危险，淡粉色

通过这些状态类可以为行或单元格设置颜色

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

table class="table table-bordered">
            <!-- 
                给每一行添加颜色
                    1.active：悬停，灰色
                    2.success：选中，淡绿色
                    3.info：信息，淡蓝色
                    4.warning：警告，淡黄色
                    5.danger：危险，淡粉色
         -->
            <tr class="active">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr class="success">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr class="info">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr class="warning">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr class="danger">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>

7.响应式表格 .table-responsive 需要在table外面包裹一层

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

<div class="table-responsive">
            <!-- 响应式表格：table-responsive 需要在table外面包裹一层 -->
            <table class="table table-bordered">
                <tr class="active">
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                </tr>
                <tr class="info">
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                </tr>
                <tr class="success">
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                </tr>
            </table>
        </div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <!-- 基础表格 -->
        <table class="table">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
        <!-- 带有条纹的表格  相邻行的表格颜色不一致 -->
        <table class="table table-striped">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
        <!-- 条纹 + 边框 表格 -->
        <table class="table table-striped table-bordered">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
        <!-- 边框 + 鼠标悬停 表格 -->
        <table class="table table-bordered table-hover">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
        <!-- 紧缩性表格  table-condensed -->
        <table class="table table-condensed table-bordered">
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>

        <table class="table table-bordered">
            <!-- 
                给每一行添加颜色
                    1.active：悬停，灰色
                    2.success：选中，淡绿色
                    3.info：信息，淡蓝色
                    4.warning：警告，淡黄色
                    5.danger：危险，淡粉色
         -->
            <tr class="active">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr class="success">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr class="info">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr class="warning">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr class="danger">
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>
        <div class="table-responsive">
            <!-- 响应式表格：table-responsive 需要在table外面包裹一层 -->
            <table class="table table-bordered">
                <tr class="active">
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                </tr>
                <tr class="info">
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                </tr>
                <tr class="success">
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                    <td>2023年，未来可期，生活、事业、红红火火，努力提升自己。凡是向内求</td>
                </tr>
            </table>
        </div>
    </div>
</body>

</html>

表单_基础表单

基础表单

基础表单

1.给form增加class="form-group"

2.label的for跟input的id同名

3.给input增加class="form-control"

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列
<div class="container">
        <form class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </form>
        <form class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" id="password" placeholder="请输入密码">
        </form>
        <div class="checkbox">
            <label>
                <input type="checkbox">同意并勾选协议
            </label>
        </div>
        <button class="btn btn-default">提交</button>
    </div>
内联表单

内联表单

1.给外层的form添加：class="form-inline"

2.用div包裹label和input，div增加class="form-group"

3.label的for跟input的id同名

4.给input增加class="form-control"

5..input-group-addon 的外层需要包裹一层容器，class="input-group"

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
<div class="container">
        <form class="form-inline">
            <div class="form-group">
                <label for="username">请输入用户名：</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">请输入密码：</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input type="text" class="form-control" id="price" placeholder="请输入价格">
                    <div class="input-group-addon">.00</div>
                </div>
            </div>
            <button class="btn btn-default">登录</button>
        </form>
    </div>
水平排列的表单

水平排列表单

1.给外层的form增加class="form-horizontal"

2.用div包裹label和input

3.控制位置的时候使用了栅格系统，需要将input包裹在容器中，class为所占的位置

4.lable里面增加class="control-label col-lg-4" col-lg-4代表占的位置

5.class="col-lg-offset-4" 代表不是等比列排放，也是为了调位置

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了
<div class="container">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="username" class="control-label col-lg-4">请输入用户名：</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="control-label col-lg-4">请输入密码：</label>
                <div class="col-lg-8">
                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-offset-4">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">同意并勾选协议
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-offset-4">
                    <button class="btn btn-default">百度一下</button>
                </div>
            </div>
        </form>
    </div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <!-- 
            基础表单
                1.给form增加class="form-group" 
                2.label的for跟input的id同名
                3.给input增加class="form-control"
            -->
        <form class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </form>
        <form class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" id="password" placeholder="请输入密码">
        </form>
        <div class="checkbox">
            <label>
                <input type="checkbox">同意并勾选协议
            </label>
        </div>
        <button class="btn btn-default">提交</button>
    </div>

    <hr>
    <!-- 
            内联表单
                1.给外层的form添加：class="form-inline"
                2.用div包裹label和input，div增加class="form-group"
                3.label的for跟input的id同名
                4.给input增加class="form-control"
                5..input-group-addon 的外层需要包裹一层容器，class="input-group"
         -->
    <div class="container">
        <form class="form-inline">
            <div class="form-group">
                <label for="username">请输入用户名：</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">请输入密码：</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input type="text" class="form-control" id="price" placeholder="请输入价格">
                    <div class="input-group-addon">.00</div>
                </div>
            </div>
            <button class="btn btn-default">登录</button>
        </form>
    </div>

    <hr>

    <!-- 
        水平排列表单
            1.给外层的form增加class="form-horizontal"
            2.用div包裹label和input
            3.控制位置的时候使用了栅格系统，需要将input包裹在容器中，class为所占的位置
            4.lable里面增加class="control-label col-lg-4"  col-lg-4代表占的位置
            5.class="col-lg-offset-4" 代表不是等比列排放，也是为了调位置
     -->
    <div class="container">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="username" class="control-label col-lg-4">请输入用户名：</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="control-label col-lg-4">请输入密码：</label>
                <div class="col-lg-8">
                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-offset-4">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">同意并勾选协议
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-offset-4">
                    <button class="btn btn-default">百度一下</button>
                </div>
            </div>
        </form>
    </div>
</body>

</html>

表单_被支持的控件

表单布局实例中展示了其所支持的标准表单控件

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color

必须添加类型声明

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

<div class="container">
        <form class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" id="username">
        </form>
        <form class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" id="password">
        </form>
    </div>

文本域

支持多行文本的表单控件。可根据需要改变 rows 属性

<div class="container">
        <form class="textarea">
            <textarea cols="100" rows="10"></textarea>
        </form>
</div>

多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个

<!-- 复选框 -->
    <div class="container">
        <form class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox">同意并勾选协议
                </label>
            </div>
            <button class="btn btn-default">点击勾选</button>
        </form>
        <form action="" class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox" disabled>默认已勾选的协议
                </label>
            </div>
            <button class="btn btn-default">已点击勾选</button>
        </form>
    </div>
    <hr>
    <!-- 单选框  -->
    <div class="container">
        <form action="" class="form-group">
            <div class="radio">
                <label>
                    <input type="radio" name="sex">man
                </label>
                <label>
                    <input type="radio" name="sex">woman
                </label>
            </div>
            <button class="btn btn-default">确定</button>
        </form>
    </div>

下拉列表（select）

注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的

<!-- 下拉列表 -->
    <div class="container">
        <form action="" class="form-group">
            <select name="" id="">
                <option value="">苹果14</option>
                <option value="">苹果14 Plus</option>
                <option value="">苹果14 Pro</option>
                <option value="">苹果14 ProMax</option>
            </select>
        </form>
    </div>

静态控件（`.form-control-static` ）

静态控件：

1.如果不加.form-control-static 这个属性，文本不在一个水平上

2.需要包裹在一个form中，增加属性class="form-horizontal"让其水平排列

3.label和p放到一个容器中，给容器添加class="form-group"

4.使用栅格系统调节位置的时候，需要给label增加class="control-lable"

5.使用栅格系统调节位置的时候，需要将p放到一个容器中调节位置

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可

<!-- 
        静态控件：
        1.如果不加.form-control-static 这个属性，文本不在一个水平上
        2.需要包裹在一个form中，增加属性class="form-horizontal"让其水平排列
        3.label和p放到一个容器中，给容器添加class="form-group"
        4.使用栅格系统调节位置的时候，需要给label增加class="control-lable"
        5.使用栅格系统调节位置的时候，需要将p放到一个容器中调节位置
    -->
    <div class="container">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="Email" class="col-xs-4 control-lable col-lg-4">Email</label>
                <div class="col-xs-8 col-lg-8">
                    <p class="form-control-static">iwen-jsdxgping@126.com</p>
                </div>
            </div>
        </form>
    </div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <!-- 输入框 -->
    <div class="container">
        <form class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" id="username">
        </form>
        <form class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" id="password">
        </form>
    </div>
    <hr>
    <!-- 文本区域 -->
    <div class="container">
        <form class="textarea">
            <textarea cols="100"></textarea>
        </form>
    </div>
    <hr>
    <!-- 复选框 -->
    <div class="container">
        <form class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox">同意并勾选协议
                </label>
            </div>
            <button class="btn btn-default">点击勾选</button>
        </form>
        <form action="" class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox" disabled>默认已勾选的协议
                </label>
            </div>
            <button class="btn btn-default">已点击勾选</button>
        </form>
    </div>
    <hr>
    <!-- 单选框  -->
    <div class="container">
        <form action="" class="form-group">
            <div class="radio">
                <label>
                    <input type="radio" name="sex">man
                </label>
                <label>
                    <input type="radio" name="sex">woman
                </label>
            </div>
            <button class="btn btn-default">确定</button>
        </form>
    </div>

    <hr>
    <!-- 下拉列表 -->
    <div class="container">
        <form action="" class="form-group">
            <select name="" id="">
                <option value="">请选择</option>
                <option value="">苹果14</option>
                <option value="">苹果14 Plus</option>
                <option value="">苹果14 Pro</option>
                <option value="">苹果14 ProMax</option>
            </select>
        </form>
    </div>
    <hr>
    
    <!-- 
        静态控件：
        1.如果不加.form-control-static 这个属性，文本不在一个水平上
        2.需要包裹在一个form中，增加属性class="form-horizontal"让其水平排列
        3.label和p放到一个容器中，给容器添加class="form-group"
        4.使用栅格系统调节位置的时候，需要给label增加class="control-lable"
        5.使用栅格系统调节位置的时候，需要将p放到一个容器中调节位置
    -->
    <div class="container">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="Email" class="col-xs-4 control-lable col-lg-4">Email</label>
                <div class="col-xs-8 col-lg-8">
                    <p class="form-control-static">iwen-jsdxgping@126.com</p>
                </div>
            </div>
        </form>
    </div>
</body>

</html>

表单_表单状态

焦点状态

我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性

<div class="form-group">
                <label for="focus-none">焦点状态</label>
                <input type="text" class="form-control" id="focus-none">
            </div>

禁用状态（input里面添加disabled）

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态

<div class="form-group">
                <label for="disable-dis">禁用状态</label>
                <input type="text" class="form-control" id="disable-dis" value="测试" disabled>
            </div>

只读状态(input 里面添加readonly）

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态

<div class="form-group">
                <label for="read-only">只读状态</label>
                <input type="text" class="form-control" id="read-only" value="测试" readonly>
            </div>

<!-- 焦点状态 -->
    <div class="container">
        <form>
            <div class="form-group">
                <label for="focus-none">焦点状态</label>
                <input type="text" class="form-control" id="focus-none">
            </div>
            <div class="form-group">
                <label for="disable-dis">禁用状态</label>
                <input type="text" class="form-control" id="disable-dis" value="测试" disabled>
            </div>
            <div class="form-group">
                <label for="read-only">只读状态</label>
                <input type="text" class="form-control" id="read-only" value="测试" readonly>
            </div>
        </form>
   </div>

校验状态(`.has-warning`、`.has-error` 或 `.has-success)`

---> 就是给输入框添加阴影颜色需要添加到input的父级里面

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式

<!-- 校验状态：就是给输入框添加阴影颜色  需要添加到input的父级里面 -->
    <div class="container">
        <form>
            <div class="form-group has-warning">
                <label for="focus-none">焦点状态</label>
                <input type="text" class="form-control" id="focus-none">
            </div>
            <div class="form-group has-success">
                <label for="disable-dis">禁用状态</label>
                <input type="text" class="form-control" id="disable-dis" disabled value="测试">
            </div>
            <div class="form-group has-error">
                <label for="read-only">只读状态</label>
                <input type="text" class="form-control" id="read-only" readonly value="测试">
            </div>
        </form>
    </div>

控件尺寸( `.input-lg)`

通过 .input-lg 类似的类可以为控件设置高度

<!-- 控制尺寸 -->
    <div class="container">
        <form>
            <div class="form-group">
                <label for="change-size">控制尺寸</label>
                <input type="text" class="form-control input-lg" id="change-size" value="大尺寸">
                <input type="text" class="form-control" id="change-size" value="默认">
                <input type="text" class="form-control input-xs" id="change-size" value="小尺寸">
            </div>
        </form>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">k
</head>
<body>
    <!-- 焦点状态 -->
    <div class="container">
        <form>
            <div class="form-group">
                <label for="focus-none">焦点状态</label>
                <input type="text" class="form-control" id="focus-none">
            </div>
            <div class="form-group">
                <label for="disable-dis">禁用状态</label>
                <input type="text" class="form-control" id="disable-dis" value="测试" disabled>
            </div>
            <div class="form-group">
                <label for="read-only">只读状态</label>
                <input type="text" class="form-control" id="read-only" value="测试" readonly>
            </div>
        </form>
    </div>
    <!-- 校验状态：就是给输入框添加阴影颜色  需要添加到input的父级里面 -->
    <div class="container">
        <form>
            <div class="form-group has-warning">
                <label for="focus-none">焦点状态</label>
                <input type="text" class="form-control" id="focus-none">
            </div>
            <div class="form-group has-success">
                <label for="disable-dis">禁用状态</label>
                <input type="text" class="form-control" id="disable-dis" disabled value="测试">
            </div>
            <div class="form-group has-error">
                <label for="read-only">只读状态</label>
                <input type="text" class="form-control" id="read-only" readonly value="测试">
            </div>
        </form>
    </div>
    <!-- 控制尺寸 -->
    <div class="container">
        <form>
            <div class="form-group">
                <label for="change-size">控制尺寸</label>
                <input type="text" class="form-control input-lg" id="change-size" value="大尺寸">
                <input type="text" class="form-control" id="change-size" value="默认">
                <input type="text" class="form-control input-xs" id="change-size" value="小尺寸">
            </div>
        </form>
    </div>
</body>
</html>

按钮

可作为按钮使用的标签或元素

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

<!-- 按钮的三种实现方式 -->
    <div class="container">
        <a href="#" class="btn btn-default">按钮</a>
        <button class="btn btn-default">按钮</button>
        <input type="submit" class="btn btn-default" value="按钮">
    </div>

预定义样式

意思就是让按钮显示不同的颜色效果

1.默认效果：.btn-default

2.首选项：.btn-primary

3.成功：.btn-success

4.一般信息：.btn-info

5.警告：.btn-warning

6.危险：.btn-danger

7.链接：.btn-link

使用下面列出的类可以快速创建一个带有预定义样式的按钮

<div class="container">
        <button class="btn btn-default">按钮</button>
        <button class="btn btn-primary">按钮</button>
        <button class="btn btn-success">按钮</button>
        <button class="btn btn-info">按钮</button>
        <button class="btn btn-warning">按钮</button>
        <button class="btn btn-danger">按钮</button>
        <button class="btn btn-link">链接</button>
     </div>

尺寸

按钮尺寸

就是在button的class中增加btn-lg btn-md btn-sm btn-xs

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

<div class="container">
        <button class="btn btn-success btn-lg">大按钮</button>
        <button class="btn btn-success btn-md">默认按钮</button>
        <button class="btn btn-success btn-sm">小按钮</button>
        <button class="btn btn-success btn-xs">最小按钮</button>
     </div>

按钮尺寸

1.就是在button的class中增加btn-lg btn-md btn-sm btn-xs

2.也可以给button增加class="btn-block" 把宽度撑开到父级一样宽（移动端比较多见）

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素

<div class="container">
        <button class="btn btn-success btn-lg btn-block">大按钮</button>
        <button class="btn btn-success btn-md btn-block">默认按钮</button>
        <button class="btn btn-success btn-sm btn-block">小按钮</button>
        <button class="btn btn-success btn-xs btn-block">最小按钮</button>
     </div>

禁用状态（给button增加 disabled)

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果

为 <button> 元素添加 disabled 属性，使其表现出禁用状态

<!-- 禁用状态  diabaled -->
     <div class="container">
        <button class="btn btn-danger">默认</button>
        <button class="btn btn-danger" disabled>禁用</button>
     </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <!-- 按钮的三种实现方式 -->
    <div class="container">
        <a href="#" class="btn btn-default">按钮</a>
        <button class="btn btn-default">按钮</button>
        <input type="submit" class="btn btn-default" value="按钮">
    </div>
    <hr>
    <!-- 
        预定义样式
            意思就是让按钮显示不同的颜色效果
            1.默认效果  ：.btn-default
            2.首选项    ：.btn-primary
            3.成功  ：.btn-success
            4.一般信息  ：.btn-info
            5.警告  ：.btn-warning
            6.危险  ：.btn-danger
            7.链接  ：.btn-link
     -->
     <div class="container">
        <button class="btn btn-default">按钮</button>
        <button class="btn btn-primary">按钮</button>
        <button class="btn btn-success">按钮</button>
        <button class="btn btn-info">按钮</button>
        <button class="btn btn-warning">按钮</button>
        <button class="btn btn-danger">按钮</button>
        <button class="btn btn-link">链接</button>
     </div>
     <hr>
     <!-- 
        按钮尺寸 
        就是在button的class中增加btn-lg btn-md btn-sm btn-xs
    -->
     <div class="container">
        <button class="btn btn-success btn-lg">大按钮</button>
        <button class="btn btn-success btn-md">默认按钮</button>
        <button class="btn btn-success btn-sm">小按钮</button>
        <button class="btn btn-success btn-xs">最小按钮</button>
     </div>
     <hr>
     <!-- 
        按钮尺寸 
        1.就是在button的class中增加btn-lg btn-md btn-sm btn-xs
        2.也可以给button增加class="btn-block" 把宽度撑开到父级一样宽（移动端比较多见）
    -->
     <div class="container">
        <button class="btn btn-success btn-lg btn-block">大按钮</button>
        <button class="btn btn-success btn-md btn-block">默认按钮</button>
        <button class="btn btn-success btn-sm btn-block">小按钮</button>
        <button class="btn btn-success btn-xs btn-block">最小按钮</button>
     </div>
     <hr>
     <!-- 禁用状态  diabaled -->
     <div class="container">
        <button class="btn btn-danger">默认</button>
        <button class="btn btn-danger" disabled>禁用</button>
     </div>
     <hr>
</body>
</html>

图片

响应式图片

响应式图片，给img增加class="img-responsive"

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其本质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    
    <div class="container">
        <img src="./1.jpg" alt="" class="img-responsive">
    </div>
</body>
</html>
图片形状

图片的形状

就是给图片设置形状，给img增加class="img-circle"

1.圆角：class="img-rounded"

2.圆形：class="img-circle"

3.边框（放到一个容器中）：class="img-thumbnail"

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状

跨浏览器兼容性

请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。

辅助类

情境文本颜色

文本呈现不同颜色增加 class="text-success"

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样

    <div class="container">
        <p class="text-muted">电脑</p>
        <p class="text-primary">电脑</p>
        <p class="text-success">电脑</p>
        <p class="text-info">电脑</p>
        <p class="text-warning">电脑</p>
        <p class="text-danger">电脑</p>
    </div>
情境背景色

背景颜色呈现不同,并且撑开到父容器宽度,增加class="bg-success"

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样

    <div class="container">
        <p class="bg-primary">电脑</p>
        <p class="bg-success">电脑</p>
        <p class="bg-info">电脑</p>
        <p class="bg-warning">电脑</p>
        <p class="bg-danger">电脑</p>
    </div>
关闭按钮

关闭按钮：给button增加class="close" 用span包裹实体字符

    <div class="container">
        <button class="close"><span>&times;</span></button>
    </div>
三角符号

三角形 span标签承载增加class="caret"

    <div class="container">
        <span class="caret"></span>
    </div>

Glyphicons 字体图标

BootStrap提供了一系列的 250 多个来自 Glyphicon Halflings 的字体图标

温馨提示

必须引入fonts字体图标资源到项目中

字形字体图标，

一般建议使用span标签包裹

1.可以在button标签中嵌套span，给span增加class，class后面为字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <!-- 
        字形字体图标，
            一般建议使用span标签包裹
            1.可以在button标签中嵌套span，给span增加class，class后面为字体
    -->
    <div class="container">
        <span class="glyphicon glyphicon-search"></span>
    </div>

    <div class="container">
        <button class="btn btn-danger"><span class="glyphicon glyphicon-search"></span></button>
    </div>
    <div class="container">
        <button class="btn btn-success btn-block"><span class="glyphicon glyphicon-search"></span></button>
    </div>
</body>
</html>

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性

实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML代码

下拉菜单：

1.需要包含在一个容器为class="dropdown"中

3.点击按钮实现下拉，需要引入jQuery，

然后在button中增加class="dropdown-toggle" 和 data-toggle="dropdown"

4.如果包含在class="dropup"的容器中，箭头和内容是在上面显示的

<!-- 
        下拉菜单：
            1.需要包含在一个容器为class="dropdown"中
            2.下拉的内容由ul+li标签实现，给ul标签增加class="dropdown-menu"
            3.点击按钮实现下拉，需要引入jQuery，
                然后在button中增加class="dropdown-toggle" 和 data-toggle="dropdown"
            4.如果包含在class="dropup"的容器中，箭头和内容是在上面显示的
     -->
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                美食
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">黄焖鸡米饭</a></li>
                <li><a href="#">炸鸡汉堡</a></li>
                <li><a href="#">猪脚饭</a></li>
            </ul>
        </div>
    </div>

<div class="container">
        <div class="dropdown">
            <button class="btn btn-info dropdown-toggle btn-block" data-toggle="dropdown">
                美食
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">黄焖鸡米饭</a></li>
                <li><a href="#">炸鸡汉堡</a></li>
                <li><a href="#">猪脚饭</a></li>
            </ul>
        </div>

        <div class="dropup">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                美食
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu ">
                <li><a href="#">黄焖鸡米饭</a></li>
                <li><a href="#">炸鸡汉堡</a></li>
                <li><a href="#">猪脚饭</a></li>
            </ul>
        </div>
    </div>

温馨提示

下拉菜单的动态效果以来BootStrap的JS文件，同时BootStrap的JS文件依赖于jQuery文件

意思就是也需要引入jQuery

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）

对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐

<div class="container">
        <div class="dropdown">
            <button class="btn btn-info dropdown-toggle btn-block" data-toggle="dropdown">
                美食
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">黄焖鸡米饭</a></li>
                <li><a href="#">炸鸡汉堡</a></li>
                <li><a href="#">猪脚饭</a></li>
            </ul>
        </div>

标题

标题：

标题不可被选中

在需要添加标题的地方，增加li标签，并且class="dropdown-header",如下

<li class="dropdown-header">小吃 · 快餐</li>

在任何下拉菜单中均可通过添加标题来标明一组动作

<div class="container">
        <div class="dropdown">
            <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                美食
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">小吃 · 快餐</li>
                <li><a href="#">黄焖鸡米饭</a></li>
                <li><a href="#">炸鸡汉堡</a></li>
                <li><a href="#">猪脚饭</a></li>
                <li class="dropdown-header">晚餐 · 主食</li>
                <li><a href="#">火锅</a></li>
                <li><a href="#">东北烤肉</a></li>
                <li><a href="#">地锅鸡</a></li>
            </ul>
        </div>
    </div>

分割线

分割线：

给需要添加分割线的地方增加li标签，并且增加class="divider"，如下

<li class="divider"></li>

为下拉菜单添加一条分割线，用于将多个链接分组

<div class="container">
        <div class="dropdown">
            <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                美食
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">黄焖鸡米饭</a></li>
                <li><a href="#">炸鸡汉堡</a></li>
                <li><a href="#">猪脚饭</a></li>
                <li class="divider"></li>
                <li><a href="#">火锅</a></li>
                <li><a href="#">东北烤肉</a></li>
                <li><a href="#">地锅鸡</a></li>
            </ul>
        </div>
    </div>

禁用的菜单项

禁用菜单项：

在需要禁用的地方，给li标签增加class="disabled"，如下

<li class="disabled"><a href="#">猪脚饭</a></li>

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项

<div class="container">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                美食
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">黄焖鸡米饭</a></li>
                <li><a href="#">炸鸡汉堡</a></li>
                <li class="disabled"><a href="#">猪脚饭</a></li>
                <li><a href="#">火锅</a></li>
                <li><a href="#">东北烤肉</a></li>
                <li class="disabled"><a href="#">地锅鸡</a></li>
            </ul>
        </div>
    </div>

按钮组

通过按钮组容器把一组按钮放在同一行里

基本按钮组

基本按钮组：放到一个class="btn-group"的容器中

<!-- 基本按钮组：放到一个class="btn-group"的容器中 -->
    <div class="container">
        <div class="btn-group">
            <button class="btn btn-info">增加</button>
            <button class="btn btn-success">编辑</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>

按钮工具栏

按钮工具栏:

是在最外层放个容器,并且命名为class="btn-toolbar"的容器

里面再放一层容器,命名为 class="btn-group" ,再给里面放按钮

如下:

把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件

<!-- 
        按钮工具栏:
            是在最外层放个容器,并且命名为class="btn-toolbar"的容器
            里面再放一层容器,命名为 class="btn-group" ,再给里面放按钮
            如下:
        -->
    <div class="container">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-info">增加</button>
                <button class="btn btn-success">编辑</button>
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
    </div>

尺寸

尺寸:

是在最外层放个容器,并且命名为class="btn-toolbar"的容器

里面再放一层容器,命名为 class="btn-group btn-group-lg/md/sm/xs" ,再给里面放按钮

如下:

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用

<!-- 
        尺寸:
            是在最外层放个容器,并且命名为class="btn-toolbar"的容器
            里面再放一层容器,命名为 class="btn-group btn-group-lg/md/sm/xs" ,再给里面放按钮
            如下:
     -->
    <div class="container">
        <div class="btn-toolbar">
            <div class="btn-group btn-group-lg">
                <button class="btn btn-info">增加</button>
                <button class="btn btn-success">编辑</button>
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-info">增加</button>
                <button class="btn btn-success">编辑</button>
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group btn-group-sm">
                <button class="btn btn-info">增加</button>
                <button class="btn btn-success">编辑</button>
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group btn-group-xs">
                <button class="btn btn-info">增加</button>
                <button class="btn btn-success">编辑</button>
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
    </div>

嵌套

嵌套:

1.是在最外层放个容器,并且命名为class="btn-toolbar"的容器

2.里面再放一层容器,命名为 class="btn-group" ,再给里面放按钮

3.再在里面放一层容器,并且命名class="btn-group",再在里面放下拉列表

如下:

想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中

 <!-- 
        嵌套:
            1.是在最外层放个容器,并且命名为class="btn-toolbar"的容器
            2.里面再放一层容器,命名为 class="btn-group" ,再给里面放按钮
            3.再在里面放一层容器,并且命名class="btn-group",再在里面放下拉列表
            如下:
     -->
    <div class="container">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-success">添加</button>
                <button class="btn btn-info">修改</button>
                <button class="btn btn-danger">删除</button>
                <div class="btn-group">
                    <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                        选择
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">美食</a></li>
                        <li><a href="#">服装</a></li>
                        <li><a href="#">生活</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

垂直排列

垂直排列:

1.是在最外层放个容器,并且命名为class="btn-toolbar"的容器

2.里面再放一层容器,命名为 class="btn-group",默认水平摆放

2.里面再放一层容器,命名为 class="btn-group-vertical",修改成垂直摆放

再给里面放按钮

如下：

让一组按钮垂直堆叠排列显示而不是水平排列

<!-- 
        垂直排列:
                 1.是在最外层放个容器,并且命名为class="btn-toolbar"的容器
                 2.里面再放一层容器,命名为 class="btn-group",默认水平摆放
                 2.里面再放一层容器,命名为 class="btn-group-vertical",修改成垂直摆放
                 再给里面放按钮
     -->
    <div class="container">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-default">1</button>
                <button class="btn btn-default">2</button>
                <button class="btn btn-default">...</button>
                <button class="btn btn-default">4</button>
                <button class="btn btn-default">5</button>
            </div>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group-vertical">
                <button class="btn btn-default">1</button>
                <button class="btn btn-default">2</button>
                <button class="btn btn-default">...</button>
                <button class="btn btn-default">4</button>
                <button class="btn btn-default">5</button>
            </div>
        </div>
    </div>

两端对齐排列的按钮组

两端对齐排列的按钮组:

1.是在最外层放个容器,并且命名为class="btn-toolbar"的容器

2.里面再放一层容器,命名为 class="btn-group btn-group-justified" ,

3.再放一个容器,命名为class="btn-group",再给里面放一个按钮

以上三个按钮会平均分配盒子的宽度

如下：

让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用

<!-- 
        两端对齐排列的按钮组:
                1.是在最外层放个容器,并且命名为class="btn-toolbar"的容器
                2.里面再放一层容器,命名为 class="btn-group btn-group-justified" ,
                3.再放一个容器,命名为class="btn-group",再给里面放一个按钮
                3.再放一个容器,命名为class="btn-group",再给里面放一个按钮
                3.再放一个容器,命名为class="btn-group",再给里面放一个按钮
                以上三个按钮会平均分配盒子的宽度
     -->
    <div class="container">
        <div class="btn-toolbar">
            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <button class="btn btn-success">增加</button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-info">编辑</button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-danger">删除</button>
                </div>
            </div>
        </div>
    </div>

按钮式下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了

单按钮下拉菜单

单按钮下拉菜单:

1.最外层放一个容器,命名为class="btn-toolbar",

2.里面再放一个容器,命名为class="btn-group"

3.在容器class="btn-group"的里面放按钮button

4.然后在button中同时放置三角形

5.下拉列表,ul命名为class="dropdown-menu"

只要改变一些基本的标记，就能把按钮变成下拉菜单的开关

<!-- 
        单按钮下拉菜单:
                1.最外层放一个容器,命名为class="btn-toolbar",
                2.里面再放一个容器,命名为class="btn-group"
                3.在容器class="btn-group"的里面放按钮button
                4.然后在button中 同时放置三角形
                5.下拉列表,ul命名为class="dropdown-menu"
     -->
    <div class="container">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    菜单
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">生活</a></li>
                    <li><a href="#">彩妆</a></li>
                    <li><a href="#">医药</a></li>
                </ul>
            </div>
        </div>
    </div>

分裂式按钮下拉菜单

分类是按钮下拉菜单:

1.最外层放一个容器,命名为class="btn-toolbar",

2.里面再放一个容器,命名为class="btn-group"

3.在容器class="btn-group"的里面放按钮button

4.button放置两个,第二个不用设置文本,直接在里面放置三角形

5.下拉列表,ul命名为class="dropdown-menu"

相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮

<!-- 
        分类是按钮下拉菜单:
                1.最外层放一个容器,命名为class="btn-toolbar",
                2.里面再放一个容器,命名为class="btn-group"
                3.在容器class="btn-group"的里面放按钮button
                4.button放置两个,第二个不用设置文本,直接在里面放置三角形
                5.下拉列表,ul命名为class="dropdown-menu"
     -->
     <div class="container">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-success">上传</button>
                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">文件</a></li>
                    <li><a href="#">图片</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">音频</a></li>
                </ul>
            </div>
        </div>
     </div>

尺寸

尺寸:

1.直接button标签中的class中,增加class="btn-lg/md/sm/xs"

来设置大小

按钮式下拉菜单适用所有尺寸的按钮

<!-- 
        尺寸:
            1.直接button标签中的class中,增加class="btn-lg/md/sm/xs"
            来设置大小
      -->
      <div class="container">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-info btn-lg">上传</button>
                <button class="btn btn-info btn-lg dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">文件</a></li>
                    <li><a href="#">图片</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">音频</a></li>
                </ul>
            </div>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-info">上传</button>
                <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">文件</a></li>
                    <li><a href="#">图片</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">音频</a></li>
                </ul>
            </div>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-info btn-sm">上传</button>
                <button class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">文件</a></li>
                    <li><a href="#">图片</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">音频</a></li>
                </ul>
            </div>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-info btn-xs">上传</button>
                <button class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">文件</a></li>
                    <li><a href="#">图片</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">音频</a></li>
                </ul>
            </div>
        </div>
      </div>

向上弹出式菜单

向上弹出式菜单:

1.直接在class="btn-group"的容器中增加 class="dropup"

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开

 <!-- 
            向上弹出式菜单:
                1.直接在class="btn-group"的容器中增加 class="dropup"
       -->
       <div class="container">
        <div class="btn-toolbar">
            <div class="btn-group dropup">
                <button class="btn btn-warning">晚餐</button>
                <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">火锅</a></li>
                    <li><a href="#">红烧鸡</a></li>
                    <li><a href="#">干锅</a></li>
                </ul>
            </div>
        </div>
       </div>

输入框组

基本输入框组

基本输入框组:

1.放在form标签中

2.form里面嵌套一个class="input-group"的容器

3.在class="input-group"的容器,添加span标签,并且命名为class="input-group-addon",然后添加文本

4.在span标签后面添加,input输入框,给个class="form-control"

注意:

span标签可以在左边,也可以在右边,甚至是一个在左一个在右

在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素

<!-- 
        基本输入框组:
            1.放在form标签中
            2.form里面嵌套一个class="input-group"的容器
            3.在class="input-group"的容器,添加span标签,并且命名为class="input-group-addon",然后添加文本
            4.在span标签后面添加,input输入框,给个class="form-control"
            注意:
                span标签可以在左边,也可以在右边,甚至是一个在左一个在右
     -->
    <div class="container">
        <form>
            <div class="input-group">
                <span class="input-group-addon">username</span>
                <input type="text" class="form-control">
            </div>
            <div class="input-group">
                <span class="input-group-addon">password</span>
                <input type="password" class="form-control">
            </div>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control">
            </div>
        </form>
    </div>
    <div class="container">
        <form>
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-addon">@126.com</span>
            </div>
        </form>
    </div>
    <div class="container">
        <form>
            <div class="input-group">
                <span class="input-group-addon">Email</span>
                <input type="text" class="form-control">
                <span class="input-group-addon">@qq.com</span>
            </div>
        </form>
    </div>

尺寸

尺寸:

1.直接在容器class="input-group"的class里面增加"input-group-lg/md/sm"

为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类

<!-- 
        尺寸:
            1.直接在容器class="input-group"的class里面增加"input-group-lg/md/sm"
     -->
    <div class="container">
        <form>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group input-group-lg">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-primary">百度一下</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group input-group-md">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-primary">百度一下</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-primary">百度一下</button>
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>

作为额外元素的多选框和单选框

单选框和复选框:

1.放到form标签中

2. 容器class="row" class="col-lg-6" 是栅格系统调节位置

3.在容器 class="col-lg-6" 的里面再增加一个容器class="input-group"

4.在 class="input-group"的容器中,增加span标签,命名为class="input-group-addon",在里面再放一个input标签,type改为checkbox

5.接着在span标签外面放一个input输入框,命名为class="form-control"

单选框跟复选框差不多,只是将checkbox改为radio

可以将多选框或单选框作为额外元素添加到输入框组中

<!-- 
        单选框和复选框:
            1.放到form标签中
            2. 容器class="row" class="col-lg-6" 是栅格系统调节位置
            3.在容器 class="col-lg-6" 的里面再增加一个容器class="input-group"
            4.在 class="input-group"的容器中,增加span标签,命名为class="input-group-addon",在里面再放一个input标签,type改为checkbox
            5.接着在span标签外面放一个input输入框,命名为class="form-control"
            单选框跟复选框差不多,只是将checkbox改为radio
     -->
    <div class="container">
        <form>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <input type="checkbox">
                        </span>
                        <input type="text" class="form-control">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <input type="radio">
                        </span>
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>
        </form>
    </div>

作为额外元素的按钮

作为额外元素的按钮(百度首页的"百度一下"的实现)

1.放在form标签中

2.class="row" 和class="col-lg-6" 的容器是栅格系统调节位置

3.在class="col-lg-6" 的容器中嵌套一个class="input-group"的容器

4.容器中放置input标签,class="form-control"

5.接着放置span标签,增加class="input-group-btn"

6.在span标签中放置button按钮,命名class="btn btn-primary"

为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做

<!-- 
        作为额外元素的按钮(百度首页的"百度一下"的实现)
            1.放在form标签中
            2.class="row" 和class="col-lg-6" 的容器 是栅格系统调节位置
            3.在class="col-lg-6" 的容器中嵌套一个class="input-group"的容器
            4.容器中放置input标签,class="form-control"
            5.接着放置span标签,增加class="input-group-btn"
            6.在span标签中放置button按钮,命名class="btn btn-primary"
     -->
    <div class="container">
        <form>
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-primary">百度一下</button>
                </span>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-primary">百度一下</button>
                        </span>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-primary">百度一下</button>
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>

作为额外元素的按钮式下拉菜单

额外元素按钮式下拉菜单

1.放在form标签中

2.class="row" 和class="col-lg-6" 的容器是栅格系统调节位置

3.在class="col-lg-6" 的容器中嵌套一个class="input-group"的容器

4.在class="input-group"的容器中在嵌套一个容器class="input-group-btn"

5.在class="input-group-btn"的容器中,增加一个button 三角形,下拉选项

6.再加入input输入框,命名class="form-control",input在class="input-group"的容器中,在class="input-group-btn"的容器外面

<!-- 
        额外元素按钮式下拉菜单
            1.放在form标签中
            2.class="row" 和class="col-lg-6" 的容器 是栅格系统调节位置
            3.在class="col-lg-6" 的容器中嵌套一个class="input-group"的容器
            4.在class="input-group"的容器中在嵌套一个容器class="input-group-btn"
            5.在class="input-group-btn"的容器中,增加一个button 三角形,下拉选项
            6.再加入input输入框,命名class="form-control",input在class="input-group"的容器中,在class="input-group-btn"的容器外面
     -->
    <div class="container">
        <form>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                上传
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">图片</a></li>
                                <li><a href="#">文件</a></li>
                                <li><a href="#">视频</a></li>
                                <li><a href="#">音频</a></li>
                            </ul>
                        </div>
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>
        </form>
    </div>

作为额外元素的分裂式按钮下拉菜单

额外元素的分列式按钮下拉列表

1.放在form标签中

2.class="row" 和class="col-lg-6" 的容器是栅格系统调节位置

3.在class="col-lg-6" 的容器中嵌套一个class="input-group"的容器

4.在class="input-group"的容器中在嵌套一个容器class="input-group-btn"

5.在class="input-group-btn"的容器中,增加两个button 三角形,下拉选项

6.再加入input输入框,命名class="form-control",input在class="input-group"的容器中,在class="input-group-btn"的容器外面

<!-- 
                    额外元素的分列式按钮下拉列表
                        1.放在form标签中
                        2.class="row" 和class="col-lg-6" 的容器 是栅格系统调节位置
                        3.在class="col-lg-6" 的容器中嵌套一个class="input-group"的容器
                        4.在class="input-group"的容器中在嵌套一个容器class="input-group-btn"
                        5.在class="input-group-btn"的容器中,增加两个button 三角形,下拉选项
                        6.再加入input输入框,命名class="form-control",input在class="input-group"的容器中,在class="input-group-btn"的容器外面
                 -->
    <div class="container">
        <form>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <div class="input-group-btn">
                            <button class="btn btn-warning">请选择</button>
                            <button class="btn btn-warning dropdwon-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">@qq.com</a></li>
                                <li><a href="#">@126.com</a></li>
                                <li><a href="#">@163.com</a></li>
                                <li><a href="#">@139.com</a></li>
                                <li><a href="#">@soho.com</a></li>
                                <li><a href="#">@sina.com</a></li>
                                <li><a href="#">@aliyun.com</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

标签页

标签页：

给ul增加class="nav"

给ul增加class="nav nav-tabs"

给ul增加class="nav nav-pills"

注意 .nav-tabs 类依赖 .nav 基类

胶囊式标签页

HTML 标记相同，但使用 .nav-pills 类

    <div class="container">
        <ul class="nav">
            <li><a href="#">美食</a></li>
            <li><a href="#">晚餐</a></li>
            <li><a href="#">火锅</a></li>
        </ul>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">新盘</a></li>
            <li><a href="#">二手房</a></li>
            <li><a href="#">商铺</a></li>
        </ul>
        <ul class="nav nav-pills">
            <li><a href="#">苹果</a></li>
            <li><a href="#">香蕉</a></li>
            <li class="active"><a href="#">荔枝</a></li>
        </ul>
    </div>
胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类

标签垂直摆放：给ul增加class="nav nav-pills nav-stacked"
<ul class="nav nav-pills nav-stacked">
            <li><a href="#">宝马</a></li>
            <li class="active"><a href="#">奔驰</a></li>
            <li><a href="#">奥迪</a></li>
        </ul>
两端对齐的标签页

左右两端对齐：给ul增加class="nav nav-pills nav-justified"

在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式

        <ul class="nav nav-pills nav-justified">
            <li class="active"><a href="#">铅笔</a></li>
            <li><a href="#">钢笔</a></li>
            <li><a href="#">毛笔</a></li>
        </ul>
禁用的链接

禁用标签，给需要禁用的标签增加class="disabled"

对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果

        <ul class="nav nav-pills nav-justified">
            <li class="disabled"><a href="#">皮鞋</a></li>
            <li class="active"><a href="#">运动鞋</a></li>
            <li><a href="#">高跟鞋</a></li>
        </ul>
添加下拉菜单

下拉菜单：

1.给ul增加class="nav nav-pills nav-justified"

2.在给需要添加下拉的地方前面放一个li，class="dropdown active"

active：是默认选中的意思

3.里面是a标签，a标签文本后面增加三角形

4.然后在a标签外面增加下拉列表

        <ul class="nav nav-pills nav-justified">
            <li><a href="#">蔬菜</a></li>
            <li><a href="#">肉类</a></li>
            <li class="dropdown active" >
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    水果
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">橘子</a></li>
                    <li><a href="#">香蕉</a></li>
                    <li><a href="#">火龙果</a></li>
                    <li class="active"><a href="#">荔枝</a></li>
                </ul>
            </li>
        </ul>

导航条一

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式

默认样式的导航条

品牌图标

将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置

表单

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。使用对齐选项可以规定其在导航条上出现的位置

按钮

对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的

文本

把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签

非导航的链接

或许你希望在标准的导航组件之外添加标准链接，那么，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置

默认导航条：在class="navbar navbar-default"的容器中

品牌图标：

1.放置中间的话，增加一个容器class="container"

2.在容器class="container"里面嵌套一个容器class="navbar-header"

3.a标签里面嵌套img，给a标签增加class="navbar-brand"

导航栏：

1.导航栏、表单、按钮、文本、非导航链接都需要放在容器class="collapse navbar-collapse"

2.增加ul li标签，给ul标签增加class="nav navbar-nav"

3.在需要增加下拉列表的地方前面增加一个li标签，并且命名为class="dropdown"

4.在里面放a标签，给a标签增加 class="dropdown-toggle" data-toggle="dropdown",然后再a 标签文本后面添加三角形

下拉表单

表单：

1.也是需要放在容器class="collapse navbar-collapse"的容器中

2.在容器中增加form表单，class="navbar-form"

3.在class="navbar-form"的表单中，增加容器class="form-group",如果出现换行的情况，需要在form表单的class中增加class="navbar-left"

4.接着增加input输入框，class="form-control"

按钮：

1.也是需要放在容器class="collapse navbar-collapse"的容器中

2.增加button标签，class="btn btn-primary navbar-btn navbar-left",如果出现换行的情况，需要在button中的class中增加class="navbar-left"

文本：

1.也是需要放在容器class="collapse navbar-collapse"的容器中

2.给文本标签，增加class="navbar-text"

非导航的链接

1.也是需要放在容器class="collapse navbar-collapse"的容器中

2.在文本标签中增加a标签，a标签增加class="navbar-link",如下：

<p class="navbar-text">点击<a href="https://taobao.com" class="navbar-link">跳转到淘宝</a></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>
        img{
            width: 66px;
        }
    </style>
</head>
<body>
    <!-- 
        默认导航条：在class="navbar navbar-default"的容器中
        品牌图标
            1.放置中间的话，增加一个容器class="container"
            2.在容器class="container"里面嵌套一个容器class="navbar-header"
            3.a标签里面嵌套img，给a标签增加class="navbar-brand"
        导航栏
            1.导航栏、表单、按钮、文本、非导航链接都需要放在容器class="collapse navbar-collapse"
            2.增加ul li标签，给ul标签增加class="nav navbar-nav"
            3.在需要增加下拉列表的地方前面增加一个li标签，并且命名为class="dropdown"
            4.在里面放a标签，给a标签增加 class="dropdown-toggle" data-toggle="dropdown",然后再a 标签文本后面添加三角形
            5.在a标签外面增加下拉选项，给ul增加class="dropdowm-menu"
            下拉表单
        表单
            1.也是需要放在容器class="collapse navbar-collapse"的容器中
            2.在容器中增加form表单，class="navbar-form"
            3.在class="navbar-form"的表单中，增加容器class="form-group",如果出现换行的情况，需要在form表单的class中增加class="navbar-left"
            4.接着增加input输入框，class="form-control"
        按钮
            1.也是需要放在容器class="collapse navbar-collapse"的容器中
            2.增加button标签，class="btn btn-primary navbar-btn navbar-left",如果出现换行的情况，需要在button中的class中增加class="navbar-left"
        文本
            1.也是需要放在容器class="collapse navbar-collapse"的容器中
            2.给文本标签，增加class="navbar-text"
        非导航的链接
            1.也是需要放在容器class="collapse navbar-collapse"的容器中
            2.在文本标签中增加a标签，a标签增加class="navbar-link",如下：
            <p class="navbar-text">点击<a href="https://taobao.com" class="navbar-link">跳转到淘宝</a></p>
            
        
     -->
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">
                    <img src="./1.png" alt="淘宝">
                </a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">空调</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            手机
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">iphone 14</a></li>
                            <li><a href="#">iphone 14 Plus</a></li>
                            <li><a href="#">iphone 14 Pro</a></li>
                            <li><a href="#">iphone 14 ProMax</a></li>
                        </ul>
                    </li>
                    <li><a href="#">服务</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="粉底液">
                        <input type="submit" class="btn btn-primary" value="搜索">
                    </div>
                </form>
                <p class="navbar-text">点击<a href="https://taobao.com" class="navbar-link">跳转到淘宝</a></p>
                <button class="btn btn-info navbar-btn navbar-left">登录</button>
            </div>
        </div>
    </div>
</body>
</html>

导航条二

导航条的位置：navbar-left navbar-right

导航条静止在顶部：navbar-static-top

导航条固定在顶部：navbar-fixed-top

导航条固定在尾部：navbar-fixed-bottom

导航条反色：navbar-inverse

以上的属性增加在导航条class="navbar navbar-default"的容器中

组件排列

通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的 <ul> 标签

静止在顶部

通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）

固定在顶部

添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）

固定在底部

添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）

反色的导航条

通过添加 .navbar-inverse 类可以改变导航条的外观
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>
        img{
            width: 68px;
        }
        h3{
            height: 300px;
        }
    </style>
</head>
<body>
    
    <div class="navbar navbar-default navbar-fixed-bottom navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">
                    <img src="./1.png" alt="">
                </a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">空调</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            手机
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">iphone 14</a></li>
                            <li><a href="#">iphone 14 Plus</a></li>
                            <li><a href="#">iphone 14 Pro</a></li>
                            <li><a href="#">iphone 14 ProMax</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="粉底液">
                        <input type="submit" class="btn btn-primary" value="搜索">
                    </div>
                </form>
                <button class="btn btn-warning navbar-btn navbar-right">注册</button>
                <button class="btn btn-info navbar-right navbar-btn">登录</button>
            </div>
        </div>
    </div>
    <h3>导航条1</h3>
    <h3>导航条2</h3>
    <h3>导航条3</h3>
    <h3>导航条4</h3>
    <h3>导航条5</h3>
    <h3>导航条6</h3>
</body>
</html>
路径导航（面包屑）

路径导航（面包屑）

1.在容器class="container"中

2.使用ol li标签

3。ol增加class="breadcrumb" breadcrumb面包屑的意思
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">一级</a></li>
            <li><a href="#">二级</a></li>
            <li class="active">三级</li>
        </ol>
    </div>
</body>
</html>

分页

默认分页

默认分页：

1.放到class="container"容器中

2.增加到nav标签中

3.在nav标签中增加ul li标签，给ul增加class="pagination"

4.在li标签中增加a标签，实体用span标签承载

5.&laquo 《 &raquo 》 &larr <- &rarr ->

受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大

<!-- 
        默认分页：
            1.放到class="container"容器中
            2.增加到nav标签中
            3.在nav标签中增加ul li标签，给ul增加class="pagination"
            4.在li标签中增加a标签，实体用span标签承载
            5.&laquo 《  &raquo 》 &larr <-  &rarr ->
     -->
    <div class="container">
        <nav>
            <ul class="pagination">
                <li>
                    <a href="#">
                        <span>&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li>
                    <a href="#">
                        <span>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

尺寸

分页的大小:

在ul标签中的class="pagination paginaiton-lg/sm"增加大小属性

想要更小或更大的分页？.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸

<!-- 
        分页的大小:在ul标签中的class="pagination paginaiton-lg/sm"增加大小属性
     -->
    <div class="container">
        <nav>
            <ul class="pagination pagination-lg">
                <li>
                    <a href="#">
                        <span>&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li>
                    <a href="#">
                        <span>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="container">
        <nav>
            <ul class="pagination">
                <li>
                    <a href="#">
                        <span>&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li>
                    <a href="#">
                        <span>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="container">
        <nav>
            <ul class="pagination pagination-sm">
                <li>
                    <a href="#">
                        <span>&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li>
                    <a href="#">
                        <span>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

翻页

居中的翻页:

1.增加class="container"

2.增加nav标签

3.增加ul li标签,给ul标签增加class="pager"

4.给li标签增加a标签,实体使用span标签承载

用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了

<!-- 
        居中的翻页:
            1.增加class="container"
            2.增加nav标签
            3.增加ul li标签,给ul标签增加class="pager"
            4.给li标签增加a标签,实体使用span标签承载
     -->
    <div class="container">
        <nav>
            <ul class="pager">
                <li><a href="#"><span>&laquo;</span></a></li>
                <li><a href="#"><span>&raquo;</span></a></li>
            </ul>
        </nav>
    </div>

对齐链接

两端的翻页:

1.增加class="container"

2.增加nav标签

3.增加ul li标签,给ul标签增加class="pager"

4.给li标签增加a标签,实体使用span标签承载

5.两端的翻页实在居中翻页的基础上给li标签增加class="previous" 和 class="next"

<!-- 
        两端的翻页:
            1.增加class="container"
            2.增加nav标签
            3.增加ul li标签,给ul标签增加class="pager"
            4.给li标签增加a标签,实体使用span标签承载
            5.两端的翻页实在居中翻页的基础上给li标签增加class="previous" 和 class="next"
     -->
    <div class="container">
        <nav>
            <ul class="pager">
                <li class="previous"><a href="#"><span>&larr;</span>上一页</a></li>
                <li class="next"><a href="#">下一页<span>&rarr;</span></a></li>
            </ul>
        </nav>
    </div>

可选的禁用状态

可选禁用状态:

在需要禁用的地方给li标签增加class="disabled"

.disabled 类也可用于翻页中的链接

<!-- 
        可选禁用状态:
            在需要禁用的地方给li标签增加class="disabled"
     -->
    <div class="container">
        <nav>
            <ul class="pager">
                <li class="previous disabled"><a href="#"><span>&laquo;</span>上一页</a></li>
                <li class="next"><a href="#">下一页<span>&raquo;</span></a></li>
            </ul>
        </nav>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 
        标签:
            1.标签使用span承载
            2.给span标签增加class="label label-default"
            3.label-default/primary/success/info/warning/danger
     -->
    <div class="container">
        <h3>2023年,婚姻法新规<span class="label label-default">实施</span></h3>
        <p>愿三叉星徽照亮你的前途与<span class="label label-default">事业</span></p>

        <p>愿三叉星徽照亮你的前途与<span class="label label-default">事业</span></p>
        <p>愿三叉星徽照亮你的前途与<span class="label label-primary">事业</span></p>
        <p>愿三叉星徽照亮你的前途与<span class="label label-success">事业</span></p>
        <p>愿三叉星徽照亮你的前途与<span class="label label-info">事业</span></p>
        <p>愿三叉星徽照亮你的前途与<span class="label label-warning">事业</span></p>
        <p>愿三叉星徽照亮你的前途与<span class="label label-danger">事业</span></p>
    </div>
</body>
</html>

徽章

给链接、导航等元素嵌套 `<span class="badge">` 元素，可以很醒目的展示新的或未读的信息条目

徽章:

1.使用span标签包裹

2.span标签增加class="badge"

3.可以在链接中,也可以在文本中,还可以在导航中

适配导航元素的激活状态

Bootstrap 提供了内置的样式，让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <!-- 
        徽章:
            1.使用span标签包裹
            2.span标签增加class="badge"
            3.可以在链接中,也可以在文本中,还可以在导航中
     -->
    <div class="container">
        <h3>未读消息<span class="badge">99+</span></h3>
        <p>未读消息<span class="badge">99+</span></p>
        <button class="btn btn-danger">未读消息<span class="badge">99+</span></button>
    </div>
    <hr>
    <div class="container">
        <ul class="nav nav-pills">
            <li><a href="#">首页</a></li>
            <li class="active"><a href="#">手机<span class="badge">99+</span></a></li>
            <li><a href="#">电脑</a></li>
        </ul>
    </div>
</body>
</html>

巨幕

这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容

巨幕:

如果巨幕在中间?

1.外面增加容器class="container"

2.在容器class="container",里面再增加一层容器class="jumbotron"

3.然后在class="jumbotron"中增加banner

如下:
<div class="container">
        <div class="jumbotron">
            <h1>banner 重要内容</h1>
            <p>这是对banner的描述</p>
            <button class="btn btn-success">登录</button>
        </div>
    </div>
巨幕:

如果要实现巨幕跟浏览器的宽度一致,但是里面内容居中呢?

1.将容器class="jumbotron"放到外面

2.在里面增加class="container"

3.在class="container"容器中放banner

如下:
<div class="jumbotron">
        <div class="container">
            <h1>banner 重要内容</h1>
            <p>这是对banner的描述</p>
            <button class="btn btn-success">登录</button>
        </div>
    </div>

页头与缩略图

页头

页头:

1.外层使用class="container"容器

2.在class="container"容器中,再增加一个class="page-header"的容器

页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔

<!-- 
        页头:
            1.外层使用class="container"容器
            2.在class="container"容器中,再增加一个class="page-header"的容器
     -->
    <div class="container">
        <div class="page-header">
            <h2>这是一个页头</h2>
        </div>
    </div>

缩略图

缩略图:

1.外层使用class="container"容器

2.使用栅格系统调整位置

3.再容器里面增加a img 标签,再a标签上面增加class="thumbnail"

通过缩略图组件扩展 Bootstrap 的栅格系统，可以很容易地以网格的方式展示图像、视频、文本等内容

默认样式的实例

Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片

<!-- 
        缩略图:
            1.外层使用class="container"容器
            2.使用栅格系统调整位置
            3.再容器里面增加a img 标签,再a标签上面增加class="thumbnail"
     -->
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <a href="#" class="thumbnail">
                    <img src="./1.jpg" alt="">
                </a>
            </div>
            <div class="col-lg-3">
                <a href="#" class="thumbnail">
                    <img src="./2.jpg" alt="">
                </a>
            </div>
            <div class="col-lg-3">
                <a href="#" class="thumbnail">
                    <img src="./3.jpg" alt="">
                </a>
            </div>
            <div class="col-lg-3">
                <a href="#" class="thumbnail">
                    <img src="./4.jpg" alt="">
                </a>
            </div>
        </div>
    </div>

自定义内容

自定义内容:

1.外层使用class="container"容器

2.使用栅格系统调整位置

3.再容器里面增加a img 标签,再a标签上面增加class="thumbnail"

4.在a标签里面再增加一个class="caption"容器

5.在class="caption"容器中再增加标题h1`h6,p标签等

添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内

<!-- 
        自定义内容:
            1.外层使用class="container"容器
            2.使用栅格系统调整位置
            3.再容器里面增加a img 标签,再a标签上面增加class="thumbnail"
            4.在a标签里面再增加一个class="caption"容器
            5.在容器里面再增加标题h1`h6,p标签等
     -->
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <a href="#" class="thumbnail">
                    <img src="./1.jpg" alt="">
                    <div class="caption">
                        <h3>纪梵希旅拍</h3>
                        <p>婚纱照拍摄</p>
                    </div>
                </a>
            </div>
            <div class="col-lg-3">
                <a href="#" class="thumbnail">
                    <img src="./2.jpg" alt="">
                    <div class="caption">
                        <h3>月色如沟</h3>
                        <p>拼接图</p>
                    </div>
                </a>
            </div>
            <div class="col-lg-3">
                <a href="#" class="thumbnail">
                    <img src="./3.jpg" alt="">
                    <div class="caption">
                        <h3>温馨小镇</h3>
                        <p>拼接图</p>
                    </div>
                </a>
            </div>
            <div class="col-lg-3">
                <a href="#" class="thumbnail">
                    <img src="./4.jpg" alt="">
                    <div class="caption">
                        <h3>月洒金江</h3>
                        <p>拼接图</p>
                    </div>
                </a>
            </div>
        </div>
    </div>

警告框

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息

基本的警告框

基本警告框:

1.外面增加class="container"容器

2.在class="container"容器中,增加class="alert alert-success/info/warning/danger"的容器

    <div class="container">
        <div class="alert alert-success">强大的ChatGPT</div>
        <div class="alert alert-info">强大的ChatGPT</div>
        <div class="alert alert-warning">强大的ChatGPT</div>
        <div class="alert alert-danger">强大的ChatGPT</div>
    </div>
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息

可关闭的警告框

可关闭的警告框:

1.外面增加class="container"容器

2.在class="container"容器中,增加class="alert alert-success/info/warning/danger"的容器

3.在class="alert alert-success"的容器中增加,

span文本标签 button标签,给button标签增加class="close",实体使用span包裹

同时在class="alert alert-success"的class上增加class="alert-dismissible"

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮

    <div class="container">
        <div class="alert alert-info alert-dismissible">
            <span>可关闭的警告框</span>
            <button class="btn btn-info close"><span>&times;</span></button>
        </div>
    </div>
警告框中的链接

警告框中的链接:

1.外面增加class="container"容器

2.在class="container"容器中,增加class="alert alert-success/info/warning/danger"的容器

3.在容器中增加span标签包裹文本,在文本中增加a标签,

再给a标签增加class="alert-link"

用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色

    <div class="container">
        <div class="alert alert-danger">
            <span>警告框中的 <a href="http://taobao.com" class="alert-link">链接</a></span>
        </div>
    </div>

进度条

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈

基本实例

没有提示标签的进度条:

1.外层增加class="container"的容器

2.在容器中增加class="progrss"的容器

3.再class="progress"的容器中增加class="progress-bar"的容器

4.在class="progress-bar"的容器中增加属性

aria-valuenow="30"

aria-valuemin="0"

aria-valuemax="100"

style="width:30%"

5.在class="progress-bar"的容器中增加span标签,class="sr-only"

默认样式的进度条
 
    <div class="container">
        <span>没有提示标签的进度条</span>
        <div class="progress">
            <div class="progress-bar" aria-valuenow="30" 
                aria-valuemin="0" aria-valuemax="100"
                style="width:30%"
                >
            <span class="sr-only">30%</span>
            </div>
        </div>
    </div>
带有提示标签的进度条

带有提示标签的进度条:

1.外层增加class="container"的容器

2.在容器中增加class="progrss"的容器

3.再class="progress"的容器中增加class="progress-bar"的容器

4.在class="progress-bar"的容器中增加属性

aria-valuenow="30"

aria-valuemin="0"

aria-valuemax="100"

style="width:30%"

5.给class="progress-bar"容器增加进度条的标签

将设置了 .sr-only 类的 <span> 标签从进度条组件中移除类，从而让当前进度显示出来

    <div class="container">
        <span>带有提示标签的进度条</span>
        <div class="progress">
            <div class="progress-bar" aria-valuenow="10"
            aria-valuemin="0" aria-valuemax="100"
            style="width:10%"
            >
            10%
            </div>
        </div>
    </div>
在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性

进度百分比很低时,设置min-width属性:

1.外层增加class="container"的容器

2.在容器中增加class="progrss"的容器

3.再class="progress"的容器中增加class="progress-bar"的容器

4.在class="progress-bar"的容器中增加属性

aria-valuenow="30"

aria-valuemin="0"

aria-valuemax="100"

style="min-width:2em;"

5.给class="progress-bar"容器增加min-width:2em;属性

6.给class="progress-bar"容器增加进度条的标签

    <div class="container">
        <span>进度百分比很低时,设置min-width属性</span>
        <div class="progress">
            <div class="progress-bar" aria-valuenow="0"
            aria-valuemin="0" aria-valuemax="100"
            style="min-width: 2em;"
            >
            0%
            </div>
        </div>
    </div>
根据情境变化效果

情境变化效果:

1.外层增加class="container"的容器

2.在容器中增加class="progrss"的容器

3.再class="progress"的容器中增加class="progress-bar"的容器

4.在class="progress-bar"的容器中增加属性

aria-valuenow="30"

aria-valuemin="0"

aria-valuemax="100"

style="width:30%"

5.给class="progress-bar"容器增加进度条的标签

6.给class="progress-bar"的容器中,增加class="progress-bar-success/info/warning/danger"

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果

    <div class="container">
        <span>情境变化效果</span>
        <div class="progress">
            <div class="progress-bar progress-bar-success" aria-valuenow="60" 
            aria-valuemin="0" aria-valuemax="100"
            style="width: 60%;"
            >
            60%
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info" aria-valuenow="50"
            aria-valuemin="0" aria-valuemax="100"
            style="width:50%"
            >
            50%
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" aria-valuenow="70"
            aria-valuemin="0" aria-valuemax="100"
            style="width: 70%;"
            >
            70%
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger" aria-valuenow="90"
            aria-valuemin="0" aria-valuemax="100"
            style="width: 90%;"
            >
            90%
            </div>
        </div>
    </div>
条纹效果

条纹效果:

1.外层增加class="container"的容器

2.在容器中增加class="progrss"的容器

3.再class="progress"的容器中增加class="progress-bar"的容器

4.在class="progress-bar"的容器中增加属性

aria-valuenow="30"

aria-valuemin="0"

aria-valuemax="100"

style="width:30%"

5.给class="progress-bar"容器增加进度条的标签

6.给class="progress-bar"的容器中,增加class="progress-bar-success/info/warning/danger"

7.给class="progress-bar"的容器中,增加class="progress-bar-striped"

通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持

    <div class="container">
        <span>条纹效果</span>
        <div class="progress">
            <div class="progress-bar progress-bar-warning progress-bar-striped" aria-valuenow="50"
            aria-valuemin="0" aria-valuemax="100"
            style="width: 50%;"
            >
            50%
            </div>
        </div>
    </div>
动画效果

动画效果:

1.外层增加class="container"的容器

2.在容器中增加class="progrss"的容器

3.再class="progress"的容器中增加class="progress-bar"的容器

4.在class="progress-bar"的容器中增加属性

aria-valuenow="30"

aria-valuemin="0"

aria-valuemax="100"

style="width:30%"

5.给class="progress-bar"容器增加进度条的标签

6.给class="progress-bar"的容器中,增加class="progress-bar-success/info/warning/danger"

7.给class="progress-bar"的容器中,增加class="progress-bar-striped"

8.给class="progress-bar"的容器中,增加class="progress-bar-striped active"

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持

    <div class="container">
        <span>动画效果</span>
        <div class="progress">
            <div class="progress-bar progress-bar-warning progress-bar-striped active" aria-valuenow="20"
            aria-valuemin="0" aria-valuemax="100"
            style="width: 20%;"
            >
            20%
            </div>
        </div>
    </div>
堆叠效果

堆叠效果:

1.外层增加class="container"的容器

2.在容器中增加class="progrss"的容器

3.再class="progress"的容器中增加class="progress-bar"的容器

4.在class="progress-bar"的容器中增加属性

aria-valuenow="30"

aria-valuemin="0"

aria-valuemax="100"

style="width:30%"

5.给class="progress-bar"容器增加进度条的标签

6.继续重复上面的3\4\5步骤(在progress中重复嵌套progress-bar的内容)

把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果

    <div class="container">
        <span>堆叠效果</span>
        <div class="progress">
            <div class="progress-bar progress-bar-success progress-bar-striped active" aria-valuenow="30"
            aria-valuemin="0" aria-valuemax="100"
            style="width:30%"
            >
            30%
            </div>
            <div class="progress-bar progress-bar-info progress-bar-striped active"
            aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
            style="width: 20%;"
            >
            20%
            </div>
            <div class="progress-bar progress-bar-warning progress-bar-striped active"
            aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
            style="width: 40%;"
            >
            40%
            </div>
            <div class="progress-bar progress-bar-danger progress-bar-striped active"
            aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"
            style="width: 10%;"
            >
            10%
            </div>
        </div>
    </div>

媒体对象

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片

默认样式

图文组合:

1.外层增加class="container"的容器

2.在class="container"的容器中再增加class="media"容器

3.在class="media"的容器中,增加两个div,

class分别是class="media-left/right"和class="media-body"

4.在class="media-left/right"的容器中增加a img标签,在img标签中

增加class="media-object"

5.在class="media-body"的容器中增加h1`h6的标签和p标签,给标题标签增加class="media-heading"

6.在class="media-left/right"的容器中,增加class="midia-top/middle/bottom"控制位置

默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）

<!-- 
        图文组合:
            1.外层增加class="container"的容器
            2.在class="container"的容器中再增加class="media"容器
            3.在class="media"的容器中,增加两个div,
            class分别是class="media-left/right"和class="media-body"
            4.在class="media-left/right"的容器中增加a img标签,在img标签中
            增加class="media-object"
            5.在class="media-body"的容器中增加h1`h6的标签和p标签,给标题标签增加
            class="media-heading"
            6.在class="media-left/right"的容器中,增加class="midia-top/middle/bottom"控制位置
     -->
    <div class="container">
        <div class="media">
            <div class="media-left media-middle">
                <a href="#">
                    <img class="media-object" src="./image/1.jpg" alt="">
                </a>
            </div>
            <div class="media-body">
                <h3 class="media-heading">红烧茄子</h3>
                <p>单点不送</p>
                <p>味道鲜美</p>
                <p>色泽亮丽</p>
            </div>
        </div>
    </div>

对齐

图片或其他媒体类型可以顶部(media-top)、中部(media-middle)或底部(media-bottom)对齐。默认是顶部对齐

媒体对象列表

图文组合列表:

1.外层增加class="container"的容器

2.增加ul li标签,ul标签增加class="media-list" li标签增加class="media"

3.在li标签class="media"中,增加两个div,

class分别是class="media-left/right"和class="media-body"

4.在class="media-left/right"的容器中增加a img标签,在img标签中

增加class="media-object"

5.在class="media-body"的容器中增加h1`h6的标签和p标签,给标题标签增加class="media-heading"

6.在class="media-left/right"的容器中,增加class="midia-top/middle/bottom"控制位置

用media-list类，就能在列表内使用媒体对象组件（对评论或文章列表很有用）

<!-- 
        图文组合列表:
            1.外层增加class="container"的容器
            2.增加ul li标签,ul标签增加class="media-list" li标签增加class="media"
            3.在li标签class="media"中,增加两个div,
            class分别是class="media-left/right"和class="media-body"
            4.在class="media-left/right"的容器中增加a img标签,在img标签中
            增加class="media-object"
            5.在class="media-body"的容器中增加h1`h6的标签和p标签,给标题标签增加
            class="media-heading"
            6.在class="media-left/right"的容器中,增加class="midia-top/middle/bottom"控制位置
     -->
    <div class="container">
        <ul class="media-list">
            <li class="media">
                <div class="media-left media-middle">
                    <a href="#">
                        <img class="media-object" src="./image/1.jpg" alt="">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">土豆丝</h3>
                    <p>单点不送</p>
                    <p>味道鲜美</p>
                    <p>色泽亮丽</p>
                </div>
            </li>
            <li class="media">
                <div class="media-left media-middle">
                    <a href="#">
                        <img class="media-object" src="./image/2.jpg" alt="">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">东北私房菜</h3>
                    <p>单点不送</p>
                    <p>味道鲜美</p>
                    <p>色泽亮丽</p>
                </div>
            </li>
            <li class="media">
                <div class="media-left media-middle">
                    <a href="#">
                        <img class="media-object" src="./image/3.jpg" alt="">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">干锅</h3>
                    <p>单点不送</p>
                    <p>味道鲜美</p>
                    <p>色泽亮丽</p>
                </div>
            </li>
            <li class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" src="./image/4.jpg" alt="">
                    </a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">火锅</h3>
                    <p>单点不送</p>
                    <p>味道鲜美</p>
                    <p>色泽亮丽</p>
                </div>
            </li>
        </ul>
    </div>

列表组

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容

基本实例

基本列表组:

1.外层使用class="container"容器

2.容器里面添加ul li标签,

给ul增加class="list-gruop" 给li标签增加class="list-group-item"

最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制

    <div class="container">
        <ul class="list-group">
            <li class="list-group-item">水杯</li>
            <li class="list-group-item">医药</li>
            <li class="list-group-item">鞋子</li>
            <li class="list-group-item">耳机</li>
        </ul>
    </div>
徽章

列表组添加徽章:

1.外层使用class="container"容器

2.容器里面添加ul li标签,

给ul增加class="list-gruop" 给li标签增加class="list-group-item"

3.在li标签文本后面增加span标签,span标签增加class="badge"

给列表组加入徽章组件，它会自动被放在右边

    <div class="container">
        <ul class="list-group">
            <li class="list-group-item">水杯<span class="badge">10+</span></li>
            <li class="list-group-item">医药<span class="badge">23+</span></li>
            <li class="list-group-item">鞋子<span class="badge">50+</span></li>
            <li class="list-group-item">耳机<span class="badge">99+</span></li>
        </ul>
    </div>
链接

列表组链接:

1.外层使用class="container"容器

2.在容器中再嵌套一个class="list-group"的容器

3.再class="list-group"的容器中,增加a标签,

给a标签增加class="list-group-item"

4.在a标签文本后面增加span标签,span标签增加class="badge"

用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签）。没必要给列表组中的每个元素都加一个父元素

    <div class="container">
        <div class="list-group">
            <a href="#" class="list-group-item">水杯<span class="badge">10+</span></a>
            <a href="#" class="list-group-item">医药<span class="badge">33+</span></a>
            <a href="#" class="list-group-item">鞋子<span class="badge">50+</span></a>
            <a href="#" class="list-group-item">耳机<span class="badge">99+</span></a>
        </div>
    </div>
按钮

列表组按钮:

1.外层使用class="container"容器

2.在容器中再嵌套一个class="list-group"的容器

3.在class="list-group"的容器中,增加button按钮

给button按钮增加class="list-group-item"

列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），并且无需为每个按钮单独包裹一个父元素。

温馨提示

注意不要使用标准的 .btn 类！

    <div class="container">
        <div class="list-group">
            <button class="list-group-item">水杯</button>
            <button class="list-group-item">医药</button>
            <button class="list-group-item">鞋子</button>
            <button class="list-group-item">耳机</button>
        </div>
    </div>
被禁用的条目

禁用

1.在需要禁用的地方,增加class="disbaled"

为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果

    <div class="container">
        <div class="list-group">
            <button class="list-group-item disabled">水杯</button>
            <button class="list-group-item">医药</button>
            <button class="list-group-item">鞋子</button>
            <button class="list-group-item">耳机</button>
        </div>
    </div>
情境类

情境类:

1.外层使用class="container"容器

2.在容器中再嵌套一个class="list-group"的容器

3.在class="list-group"的容器中,增加button按钮

给button按钮增加class="list-group-item"

4.情境类就是给button按钮增加class="list-group-item-success/info/warning/danger"

为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态

    <div class="container">
        <div class="list-group">
            <button class="list-group-item list-group-item-success">水杯</button>
            <button class="list-group-item list-group-item-info">医药</button>
            <button class="list-group-item list-group-item-warning">鞋子</button>
            <button class="list-group-item list-group-item-danger">耳机</button>
        </div>
    </div>
定制内容

定制内容:

1.外层使用class="container"容器

2.在容器中再嵌套一个class="list-group"的容器

3.在class="list-group"的容器中,增加a标签

给a标签增加class="list-group-item"

4.在a标签中增加img标签标题标签文本标签

5.给标题标签增加class="list-group-item-heading"

6.给文本标签增加class="list-group-item-text"

7.重复上面的3\4\5\6步骤

列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组

    <div class="container">
        <div class="list-group">
            <a href="#" class="list-group-item">
                <img src="./image/1.jpg" alt="">
                <h4 class="list-group-item-heading">纪梵希旅拍</h4>
                <p class="list-group-item-text">婚纱照拍摄</p>
            </a>
            <a href="#" class="list-group-item">
                <img src="./image/2.jpg" alt="">
                <h4 class="list-group-item-heading">拼接图</h4>
                <P class="list-group-item-text">生活照</P>
            </a>
            <a href="#" class="list-group-item">
                <img src="./image/3.jpg" alt="">
                <h4 class="list-group-item-heading">拼接图</h4>
                <p class="list-group-item-text">生活照</p>
            </a>
            <a href="#" class="list-group-item">
                <img src="./image/4.jpg" alt="">
                <h4 class="list-group-item-heading">拼接图</h4>
                <p class="list-group-item-text">生活照</p>
            </a>
        </div>
    </div>

面版

虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件

面板:

1.外层增加class="container"的容器

2.在容器中再增加一个class="panel panel-default"的容器

3.再容器class="panel panel-default"中再分别增加三个div容器

第一个div容器增加class="panel-heading",

头部里面可以嵌套标题标签,给标题标签增加class="panel-title"

第二个div容器增加class="panel-body"

4.改变颜色样式的话,就在class="panel panel-default"的容器中修改

class="panel panel-default/primary/success/info/warning/danger"

基本实例

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容

带标题的面版

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖

带脚注的面版

把按钮或次要的文本放入 .panel-footer 容器内

情境效果

像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <!-- 
        面板:
            1.外层增加class="container"的容器
            2.在容器中再增加一个class="panel panel-default"的容器
            3.再容器class="panel panel-default"中再分别增加三个div容器
            第一个div容器增加class="panel-heading",
                头部里面可以嵌套标题标签,给标题标签增加class="panel-title"
            第二个div容器增加class="panel-body"
            第三个div容器增加class="panel-footer"
            4.改变颜色样式的话,就在class="panel panel-default"的容器中修改
            class="panel panel-default/primary/success/info/warning/danger"
     -->
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">面板头部</h3>
            </div>
            <div class="panel-body">这是一个面板</div>
            <div class="panel-footer">面板尾部</div>
        </div>
    </div>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">面板头部</h3>
            </div>
            <div class="panel-body">这是一个面板</div>
            <div class="panel-footer">面板尾部</div>
        </div>
    </div>
    <div class="container">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">面板头部</h3>
            </div>
            <div class="panel-body">这是一个面板</div>
            <div class="panel-footer">面板尾部</div>
        </div>
    </div>
    <div class="container">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板头部</h3>
            </div>
            <div class="panel-body">这是一个面板</div>
            <div class="panel-footer">面板尾部</div>
        </div>
    </div>
    <div class="container">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">面板头部</h3>
            </div>
            <div class="panel-body">这是一个面板</div>
            <div class="panel-footer">面板尾部</div>
        </div>
    </div>
    <div class="container">
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h3 class="panel-title">面板头部</h3>
            </div>
            <div class="panel-body">这是一个面板</div>
            <div class="panel-footer">面板尾部</div>
        </div>
    </div>
</body>
</html>

Well

well嵌入效果:

1.外层增加class="container"的容器

2.在class="container"容器中增加class="well"的容器

3.在class="well"的容器中增加class="well well-lg/sm"控制大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <!-- 
        well嵌入效果:
            1.外层增加class="container"的容器
            2.在class="container"容器中增加class="well"的容器
            3.在class="well"的容器中增加class="well well-lg/sm"控制大小
     -->
    <div class="container">
        <div class="well">这是well嵌入式效果</div>
        <div class="well well-lg">这是well嵌入式大效果</div>
        <div class="well well-sm">这是well嵌入式小效果</div>
    </div>
</body>
</html>

三、BootStrap JavaScript插件

1.模态框

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集

基础实例

以下模态框包含了模态框的头、体和一组放置于底部的按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <button class="btn btn-info" data-toggle="modal" data-target="#myModal">打开对话框</button>
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="btn btn-defalut close" data-dismiss="modal"><span>&times;</span></button>
                        <h3 class="modal-title">对话框</h3>
                    </div>
                    <div class="modal-body">
                        <p class="modal-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                        <button class="btn btn-deafult">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

可选尺寸

模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现

<!-- 尺寸 -->
    <div class="container">
        <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">打开对话框</button>
        <div class="modal fade" id="myModal1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="btn btn-defalut close" data-dismiss="modal"><span>&times;</span></button>
                        <h3 class="modal-title">对话框</h3>
                    </div>
                    <div class="modal-body">
                        <p class="modal-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                        <button class="btn btn-deafult">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <button class="btn btn-info" data-toggle="modal" data-target="#myModal2">打开对话框</button>
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="btn btn-defalut close" data-dismiss="modal"><span>&times;</span></button>
                        <h3 class="modal-title">对话框</h3>
                    </div>
                    <div class="modal-body">
                        <p class="modal-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                        <button class="btn btn-deafult">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal3">打开对话框</button>
        <div class="modal fade" id="myModal3">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="btn btn-defalut close" data-dismiss="modal"><span>&times;</span></button>
                        <h3 class="modal-title">对话框</h3>
                    </div>
                    <div class="modal-body">
                        <p class="modal-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                        <button class="btn btn-deafult">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

方法：

$('#myModal').modal('show')

$('#myModal').modal('hide')

$('#myModal').modal('toggle')

事件：

// 隐藏
$('#myModal').on('hidden.bs.modal', function (e) {
 // do something...
});
// 显示
$("#myModal").on("showen.bs.modal",function(e){
});

滚动监听

滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的

基本实例

注意事项

需要相对定位：body需要设置为position:relative

通过 data 属性调用：data-spy="scroll" ,加在body上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>
        body {
            position: relative;
        }

        .content div {
            height: 600px;
        }

        .content div img {
            height: 500px;
        }

        .col-lg-3 {
            margin-top: 50px;
            width: 50px;
            height: 50px;
        }

        .col-lg-3 .nav-pills {
            float: left;
        }

        ul.nav-pills {
            position: fixed;
        }

        .col-lg-3 .nav-pills li {
            width: 50px;
            height: 50px;
        }

        .col-lg-3 .nav-pills li>a:hover {
            background-color: crimson;
        }

        .col-lg-3 .nav-pills li span {
            text-align: center;

        }
    </style>
</head>

<body data-spy="scroll">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 content">
                <div class="bg-info" id="home">
                    <img src="./image/1.webp" alt="">
                    <h3>京东秒杀</h3>
                    <p>京东秒杀</p>
                </div>
                <div class="bg-warning" id="news">
                    <img src="./image/2.webp" alt="">
                    <h3>特色优选</h3>
                    <p>特色优选</p>
                </div>
                <div class="bg-success" id="head">
                    <img src="./image/3.webp" alt="">
                    <h3>频道广场</h3>
                    <p>频道广场</p>
                </div>
                <div class="bg-danger" id="bodyy">
                    <img src="./image/4.webp" alt="">
                    <h3>为你推荐</h3>
                    <p>为你推荐</p>
                </div>
                <div class="bg-info" id="foot">
                    <img src="./image/5.webp" alt="">
                    <h3>客服</h3>
                    <p>客服</p>
                </div>
                <div class="bg-warning" id="hand">
                    <img src="./image/6.webp" alt="">
                    <h3>反馈</h3>
                    <p>反馈</p>
                </div>
            </div>
            <nav class="col-lg-3" id="myScrollspy">
                <ul class="nav nav-pills">
                    <li class="nav-item "><a href="#home">京东秒杀</a></li>
                    <li class="nav-item"><a href="#news">特色优选</a></li>
                    <li class="nav-item"><a href="#head">频道广场</a></li>
                    <li class="nav-item"><a href="#bodyy">为你推荐</a></li>
                    <li class="nav-item">
                        <a href="#foot">
                            <span class="glyphicon glyphicon-user"></span>
                            客服
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#hand">
                            <span class="glyphicon glyphicon-pencil"></span>
                            反馈
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <script>
        $("#myScrollspy").on("activate.bs.scrollspy",function(e){
            console.log("滚动监听");
        })
    </script>
</body>

</html>

标签页

添加快速、动态标签页切换功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>
        body{
            background-color: #cccccc;
        }
        .nav li a{
            color: rgba(0,0,0,.7);
        }
        .tab-content ul{
            list-style-type: none;
        }
        .tab-content ul li{
            width: 80px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            text-decoration: none;
            float: left;
        }
        .tab-content ul li a{
            color: #fff;
            
        }
        .tab-pane{
            width: 500px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#qunzi">裙子</a></li>
            <li><a data-toggle="tab" href="#shangyi">上衣</a></li>
            <li><a data-toggle="tab" href="#xiezi">鞋子</a></li>
            <li><a data-toggle="tab" href="#bijiben">笔记本</a></li>
            <li><a data-toggle="tab" href="#jiadian">生活家电</a></li>
            <li><a data-toggle="tab" href="#wanju">智意玩具</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="qunzi">
                <ul>
                    <li><a href="#">连衣裙</a></li>
                    <li><a href="#">短裙</a></li>
                    <li><a href="#">包臀裙</a></li>
                    <li><a href="#">碎花裙</a></li>
                    <li><a href="#">百褶裙</a></li>
                    <li><a href="#">背带裙</a></li>
                </ul>
            </div>
            <div class="tab-pane" id="shangyi">
                <ul>
                    <li><a href="#">打底衫</a></li>
                    <li><a href="#">衬衫</a></li>
                    <li><a href="#">针织衫</a></li>
                    <li><a href="#">白衬衫</a></li>
                    <li><a href="#">牛仔衬衫</a></li>
                    <li><a href="#">西服</a></li>
                    <li><a href="#">卫衣</a></li>
                    <li><a href="#">polo衫</a></li>
                    <li><a href="#">汉服</a></li>
                </ul>
            </div>
            <div class="tab-pane" id="xiezi">
                <ul>
                    <li><a href="#">皮鞋</a></li>
                    <li><a href="#">豆豆鞋</a></li>
                    <li><a href="#">拖鞋</a></li>
                    <li><a href="#">棉拖鞋</a></li>
                    <li><a href="#">高跟鞋</a></li>
                    <li><a href="#">马丁鞋</a></li>
                    <li><a href="#">运动鞋</a></li>
                    <li><a href="#">板鞋</a></li>
                    <li><a href="#">回力鞋</a></li>
                    <li><a href="#">帆布鞋</a></li>
                </ul>
            </div>
            <div class="tab-pane" id="bijiben">
                <ul>
                    <li><a href="#">联想笔记本</a></li>
                    <li><a href="#">苹果笔记本</a></li>
                    <li><a href="#">华为笔记本</a></li>
                    <li><a href="#">传周笔记本</a></li>
                    <li><a href="#">戴尔笔记本</a></li>
                </ul>
            </div>
            <div class="tab-pane" id="jiadian">
                <ul>
                    <li><a href="#">咖啡机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">电烤箱</a></li>
                    <li><a href="#">冰箱</a></li>
                    <li><a href="#">电饭锅</a></li>
                    <li><a href="#">电磁炉</a></li>
                    <li><a href="#">热水器</a></li>
                    <li><a href="#">吸尘器</a></li>
                    <li><a href="#">热水机</a></li>
                    <li><a href="#">茶吧机</a></li>
                </ul>
            </div>
            <div class="tab-pane" id="wanju">
                <ul>
                    <li><a href="#">海贼王</a></li>
                    <li><a href="#">投影灯</a></li>
                    <li><a href="#">星空灯</a></li>
                    <li><a href="#">小玩意</a></li>
                    <li><a href="#">怪兽玩意</a></li>
                    <li><a href="#">整蛊玩意</a></li>
                    <li><a href="#">减压玩意</a></li>
                    <li><a href="#">创意玩意</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        // 事件
        $('a[data-toggle="tab"]').on("shown.bs.tab",function(e){
            console.log(e.target);// 跳转后,当前的标签页
            console.log(e.relatedTarget);// 跳转前的标签页
        })
    </script>
</body>
</html>

工具提示

使用CSS3动画，实现提示效果

工具提示:

data-toggle="tooltip",title="xxx",data-placement="left"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <p><a data-toggle="tooltip" data-placement="bottom" title="2023年,大展宏'兔'" href="#">xampp</a>
            防止端口冲突将Apache的默认端口80，443改为了81，4433。启动成功。将Mysql默认的3306改为了3366，但未启动成功。查得须将注册表也进行修改。
        </p>
        <button id="myTooltip" data-toggle="tooltip" data-placement="bottom" title="未注册--先进行--注册" class="btn btn-info">登录</button>
    </div>
    <hr>
    <div class="container">
        <button class="btn btn-success" data-toggle="tooltip" data-placement="top" title="用户名或密码不正确">登录</button>
        <button class="btn btn-info" data-toggle="tooltip" data-placement="right" title="未注册--先进行--注册">注册</button>
        <button class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="表格--样式">表格</button>
        <button class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="密码不正确" >密码</button>
    </div>
    <script>
        $(function(){
            $("[data-toggle='tooltip']").tooltip()
        })
        $("#myTooltip").on("hidden.bs.tooltip",function(e){
            console.log("隐藏工具提示");
        })
        $("#myTooltip").on("shown.bs.tooltip",function(){
            console.log("显示工具提示");
        })
    </script>
</body>
</html>

弹出框

为任意元素添加一小块浮层，就像 iPad 上一样，用于存放非主要信息

弹出框的标题和内容的长度都是零的话将永远不会被显示出来

基本弹出框:

data-toggle="popover", title="xxx",data-content="xxxxx"

<div class="container">
        <button class="btn" data-toggle="popover" title="弹出框" 
        data-content="弹出框内容">
            弹出框
        </button>
    </div>

<script>
        $(function(){
            $("[data-toggle='popover']").popover()
        })
</script>

四个方向:

(data-placement="bottom")

4个可能的弹出方向：顶部、右侧、底部和左侧

<div class="container">
        <button class="btn" data-toggle="popover" title="上弹出框" 
        data-content="上弹出框内容" data-placement="top">
            上弹出框
        </button>
        <button class="btn" data-toggle="popover" title="下弹出框" 
        data-content="下弹出框内容" data-placement="bottom">
            下弹出框
        </button>
        <button class="btn" data-toggle="popover" title="左弹出框"
        data-content="左弹出框内容" data-placement="left">
            左弹出框
        </button>
        <button class="btn" data-toggle="popover" title="右弹出框"
        data-content="右弹出框内容" data-placement="right">
            右弹出框
        </button>
    </div>

可消失的弹出框:

(data-trigger="focus")

<div class="container">
        <button id="myPopover" class="btn btn-info" data-toggle="popover" title="弹出框"
        data-content="弹出框内容" data-placement="bottom" data-trigger="focus">
            弹出框
        </button>
    </div>

事件

事件类型	描述
shown.bs.popover	显示的时候触发事件
hidden.bs.popover	隐藏的时候触发事件

<script>
        $("#myPopover").on("hidden.bs.popover",function(){
            console.log("隐藏弹出框");
        })
        $("#myPopover").on("shown.bs.popover",function(){
            console.log("显示弹出框")
        })
</script>

警告信息

通过此插件可以为警告信息添加点击并消失的功能

基本警告框

给button增加class="close" 和 data-dismiss="alert"

<div class="container">
        <div class="alert alert-danger">
            <button class="close" data-dismiss="alert"><span>&times;</span></button>
            <span>可以关闭的警告信息</span>
        </div>
</div>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>
        .container{
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="alert alert-warning" id="myAlert">
            <button class="close" data-dismiss="alert"><span>&times;</span></button>
            <span>关闭警告框</span>
        </div>
    </div>
    <script>
        $("#myAlert").on("closed.bs.alert",function(){
            console.log("关闭了警告框");
        })
    </script>
</body>
</html>

按钮

按钮的功能很丰富。通过控制按钮的状态或创建一组按钮并形成一些新的组件，例如工具条

基本按钮

<div class="container">
        <button id="myBtn" class="btn btn-info">按钮</button>
</div>

<script>
        $("#myBtn").click(function(e){
            var btn = $(this).button("loading")
            setTimeout(() => {
                btn.button("reset")
            }, 1500);
        })
</script>

多选按钮

<div class="container">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-success active">
                <input type="checkbox">选项一
            </label>
            <label class="btn btn-success">
                <input type="checkbox">选项二
            </label>
            <label class="btn btn-success active">
                <input type="checkbox">选项三
            </label>
        </div>
</div>

单选按钮

<div class="container">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-info">
                <input type="radio" name="user">皮鞋
            </label>
            <label class="btn btn-info active">
                <input type="radio" name="user">高跟鞋
            </label>
            <label class="btn btn-info">
                <input type="radio" name="user">马丁靴
            </label>
        </div>
</div>

折叠效果

基本折叠效果

一个是a标签实现,一个是button按钮实现

<div class="container">
        <a href="#collapseExample" class="btn btn-info" data-toggle="collapse">查看</a>
        <div class="collapse" id="collapseExample">
            <div class="well">
                <a href="#">数据信息<span>&gt;</span></a><br>
                <a href="#">流量信息<span>&gt;</span></a><br>
                <a href="#">粉丝信息<span>&gt;</span></a><br>
                <a href="#">评论信息<span>&gt;</span></a><br>
            </div>
        </div>
    </div>
    <div class="container">
        <button class="btn btn-success" data-toggle="collapse" data-target="#news">信息</button>
        <div class="collapse" id="news">
            <div class="well">
                <a href="#">数据信息<span>&gt;</span></a><br>
                <a href="#">流量信息<span>&gt;</span></a><br>
                <a href="#">粉丝信息<span>&gt;</span></a><br>
                <a href="#">评论信息<span>&gt;</span></a><br>
            </div>
        </div>
    </div>

手风琴效果

<!-- 手风琴效果 -->
    <div class="container">
        <div class="panel-group" id="accordion">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="#oneCollapse" data-toggle="collapse" data-parent="#accordion">金融</a>
                    </h3>
                </div>
                <div class="panel-collapse collapse in" id="oneCollapse">
                    <div class="panel-body">
                        <div class="well">
                            <a href="#">保险<span>&gt;</span></a><br>
                            <a href="#">证券<span>&gt;</span></a><br>
                            <a href="#">银行<span>&gt;</span></a><br>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="#twoCollapse" data-toggle="collapse" data-parent="#accordion">交通物流</a>
                    </h3>
                </div>
                <div class="panel-collapse collapse" id="twoCollapse">
                    <div class="panel-body">
                        <div class="well">
                            <a href="#">圆通物流<span>&gt;</span></a><br>
                            <a href="#">京东物流<span>&gt;</span></a><br>
                            <a href="#">极兔物流<span>&gt;</span></a><br>
                            <a href="#">中通物流<span>&gt;</span></a><br>
                            <a href="#">申通物流<span>&gt;</span></a><br>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="#threeCollapse" data-toggle="collapse" data-parent="#accordion">制造</a>
                    </h3>
                </div>
                <div class="panel-collapse collapse" id="threeCollapse">
                    <div class="panel-body">
                        <div class="well">
                            <a href="#">制造行业<span>&gt;</span></a><br>
                            <a href="#">水泥行业<span>&gt;</span></a><br>
                            <a href="#">木材行业<span>&gt;</span></a><br>
                            <a href="#">钢铁行业<span>&gt;</span></a><br>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="#fourCollapse" data-toggle="collapse" data-parent="#accordion">大数据</a>
                    </h3>
                </div>
                <div class="panel-collapse collapse" id="fourCollapse">
                    <div class="panel-body">
                        <div class="well">
                            <a href="#">云上大数据<span>&gt;</span></a><br>
                            <a href="#">云上数据集成<span>&gt;</span></a><br>
                            <a href="#">云原生企业级数据湖<span>&gt;</span></a><br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

事件

事件类型	描述
shown.bs.collapse	显示时触发
hidden.bs.collapse	隐藏时触发

<script>
        $("#accordion").on("hidden.bs.collapse",function(){
            console.log("隐藏");
        })
        $("#accordion").on("shown.bs.collapse",function(){
            console.log("显示");
        })
    </script>

轮播图

轮播图效果是页面常见特效

轮播图的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="carousel slide" id="carousel-example-generic">
            <!-- 图片内容 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="./image/1.webp" alt="">
                    <div class="carousel-caption">
                        <h4>第一张图片</h4>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/2.webp" alt="">
                    <div class="carousel-caption">
                        <h4>第二张图片</h4>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/3.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>第三张图片</h4>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/4.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>第四张图片</h4>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/5.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>第五张图片</h4>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/6.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>第六张图片</h4>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/7.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>第七张图片</h4>
                    </div>
                </div>
                <div class="item">
                    <img src="./image/8.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>第八张图片</h4>
                    </div>
                </div>
            </div>
            <!-- 指示针 -->
            <ol class="carousel-indicators">
                <li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                <li data-target="#carousel-example-generic" data-slide-to="5"></li>
                <li data-target="#carousel-example-generic" data-slide-to="6"></li>
                <li data-target="#carousel-example-generic" data-slide-to="7"></li>
            </ol>
            <!-- 切换按钮 -->
            <a href="#carousel-example-generic" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carousel-example-generic" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
    <script>
        $(".carousel").carousel({
            interval:2000
        })
        $(".carousel").on("slide.bs.carousel",function(){
            console.log("发生切换");
        })
    </script>
</body>
</html>

添加额外文本

<div class="item">
 <img src="..." alt="...">
 <div class="carousel-caption">
  <h3>...</h3>
  <p>...</p>
 </div>
</div>

方法

$('.carousel').carousel({
  interval: 2000
})

事件

$('.carousel').on('slide.bs.carousel', function () {
  console.log("切换");
})

定制并下载 Bootstrap

通过自定义 Bootstrap 组件、Less 变量和 jQuery 插件，定制一份属于你自己的 Bootstrap 版本吧。此功能支持 IE9+ 或最新版本的 Safari、Chrome 或 Firefox 浏览器

定制地址

定制并下载 Bootstrap · Bootstrap v3 中文文档 | Bootstrap 中文网通过自定义 Bootstrap 组件、Less 变量和 jQuery 插件，定制一份属于你自己的 Bootstrap 版本吧。此功能支持 IE9+ 或最新版本的 Safari、Chrome 或 Firefox 浏览器。https://v3.bootcss.com/customize/