提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
一、Bootstrap是什么？
Bootstrap提供了一组预先设计的HTML、CSS和JavaScript组件，如按钮、表单、导航栏等，以帮助开发人员快速轻松地创建响应迅速、视觉吸引力强的网站和web应用程序。 Bootstrap允许开发人员通过提供一组一致且记录良好的设计元素来节省时间，这些元素可以根据特定的项目需求进行定制。
Bootstrap官网：https://v3.bootcss.com/
二、使用步骤
1.引入Bootstrap
法一：官网提供了CDN 的支持，直接使用这些 BootCDN.cn 提供的链接即可。
css写在html文件的head体中
html
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">js写在html文件的body体中
html
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>法二：去官网下载压缩包，在根目录下创建static目录，并在static目录下分别创建js\css\plugins\img目录，将压缩包里面的文件放到plugins目录下，如下图：
对应路径，引入css和js
html
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
html
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>2.Bootstrap常用全局 CSS 样式介绍与示例
布局容器
在Bootstrap中，.container 是一个常用的类，用于包裹网页内容，帮助实现响应式设计。.container 类有两个变种：.container 和 .container-fluid，它们在网页布局中有不同的用途。
1.container 类：
.container 类用于固定宽度并支持响应式布局的容器。
2.container-fluid 类：
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
代码示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div style="background-color: pink">起始位置距离前面边缘有一段位置</div>
</div>
<div class="container-fluid">
<div style="background-color: grey">起始位置在最前方</div>
</div>
</body>
</html>
栅格系统
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有"列（column）必须放在 " .row 内。
代码示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid System Example</title>
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" >
<!-- 一行有12列 -->
<div class="row">
<!-- 创建列，占4列的宽度（一行最多12列）在中等屏幕以上的情况下 -->
<div class="col-md-4" style="background-color: grey">占4列</div>
<!-- 创建列，占8列的宽度（一行最多12列）在中等屏幕以上的情况下 -->
<div class="col-md-8" style="background-color: #0e90d2">占8列</div>
</div>
</div>
<!-- 引入Bootstrap JavaScript，确保在引入之前引入Bootstrap CSS -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
列偏移
html
<div class="container" style="background-color: red">
<div>1</div>
<div class=" col-sm-offset-2 col-sm-6" style="background-color: #9d9d9d">2</div>
嵌套列
html
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
排版
标题
HTML 中的所有标题标签，h1-h6均可使用。
html
<div class="container">
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</div>
在标题内还可以包含 small 标签或赋予 .small 类的元素，可以用来标记副标题。
html
<div class="container">
<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>
页面主体
p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
html
<p>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>
<p>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>
中心内容
通过添加 .lead 类可以让段落突出显示。
html
<p class="lead">
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>
<p>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>
内联文本元素
用mark来标记
html
<p class="lead">
<mark>CSDN</mark>是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</p>
被删除的文本
用del来删除
html
<p>
<del>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</del>
</p>
无用文本
对于没用的文本使用 s标签。
html
<p>
<s>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
</s>
</p>
插入文本
额外插入的文本使用 ins标签。
html
<ins> CSDN是全球知名中文IT技术交流平台</ins>带下划线的文本
为文本添加下划线，使用 u标签。
html
<u> CSDN是全球知名中文IT技术交流平台</u>着重
通过增加 font-weight 值强调一段文本。
html
<strong>CSDN是全球知名中文IT技术交流平台</strong>斜体
用斜体强调一段文本。
html
<em>CSDN是全球知名中文IT技术交流平台</em>对齐
多种对齐方式
html
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
<p class="text-nowrap">无换行</p>改变大小写
通过这几个类可以改变文本的大小写。
html
<p class="text-lowercase">小写</p>
<p class="text-uppercase">大写</p>
<p class="text-capitalize">首字母大写</p>缩略语
使用abbr，实现对英文的缩写
html
<abbr title="bootstrap">bstp</abbr>首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
html
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加
可以保留需要的样式。
html
<address>
<strong>邮箱</strong><br>
<a href="mailto:#">111111@163.com</a>
</address>引用
在你的文档中引用其他来源的内容，默认：
html
<blockquote>
<p>CSDN是全球知名中文IT技术交流平台。</p>
</blockquote>说明命名来源：
添加 footer 用于标明引用来源。来源的名称可以包裹进 cite标签中。
html
<blockquote>
<p>CSDN是全球知名中文IT技术交流平台</p>
<footer>Someone famous in <cite title="baidu">baidu</cite></footer>
</blockquote>另一种展示风格:
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
html
<blockquote class="blockquote-reverse">
<p>CSDN是全球知名中文IT技术交流平台</p>
<footer>Someone famous in <cite title="baidu"> baidu</cite></footer>
</blockquote>代码
内联代码
通过 code 标签包裹内联样式的代码片段。
html
Please believe, <code><sunshine ></code> always comes after wind and rain用户输入
通过 kbd标签标记用户通过键盘输入的内容。
html
<kbd><kbd>Ctrl</kbd> +windows <kbd>+S</kbd></kbd> is a screenshot function
代码块
多行代码可以使用 pre 标签。为了正确的展示代码，注意将尖括号做转义处理。
html
<pre><p>Code content...</p></pre>
变量
通过 var标签标记变量。y = mx + b
html
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>程序输出
通过 samp标签来标记程序输出的内容。
html
<samp>This is the output of the program.</samp>表格
html
<div>
<h1>数据表格</h1>
<table class="table">
<thead>
<tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
</thead>
<tbody>
<tr> <td>10</td> <td>aa</td> <td>22</td> </tr>
<tr> <td>11</td> <td>bb</td> <td>23</td> </tr>
<tr> <td>12</td> <td>cc</td> <td>12</td> </tr>
<tr> <td>13</td> <td>dd</td> <td>23</td> </tr>
</tbody>
</table>
</div>
条纹状表格
通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。
html
<table class="table table-striped">
...
</table>带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
html
<table class="table table-bordered">
...
</table>鼠标悬停
通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
html
<table class="table table-hover">
...
</table>紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
html
<table class="table table-condensed">
...
</table>状态类
通过这些状态类class可以为行或单元格设置颜色。
.active :鼠标悬停在行或单元格上时所设置的颜色
.success :标识成功或积极的动作
.info :标识普通的提示信息或动作
.warning :标识警告或需要用户注意
.danger :标识危险或潜在的带来负面影响的动作
html
<tr>
<th class="active" >active</th>
<th class="success">success</th>
<th class="warning">warning</th>
<th class="danger">danger</th>
<th class="info">info</th>
</tr>
表单
html
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputEmail1">文本输入框</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="文本输入框">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码输入框</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码输入框">
</div>
<div class="form-group">
<label for="exampleInputFile">上传文件</label>
<input type="file" id="exampleInputFile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
注意：不要将表单组和输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
html
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
</div>
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
html
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
按钮
可作为按钮使用的标签或元素
为 、 或 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
html
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
html
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
尺寸
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
html
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
图片
图片形状
通过为 元素添加以下相应的类，可以让图片呈现不同的形状。
html
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">辅助类
情境文本颜色
通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。
html
<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>情境背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。
html
<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>让内容块居中
为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。
html
<div class="center-block">...</div>
html
<style>
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
</style>3.Bootstrap常用组件介绍与示例
字体图标
在页面上鼠标右键--检查--选择图标--复制
下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
html
<div class="dropdown">
<!----class="dropup"让菜单向上弹出>
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>分割线
为下拉菜单添加一条分割线，用于将多个链接分组。
html
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>作为额外元素的多选框和单选框
可以将多选框或单选框作为额外元素添加到输入框组中。
html
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
html
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>表单
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。
html
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>路径导航
在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。
html
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>分页
为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。
html
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true"><<</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="#" aria-label="Next">
<span aria-hidden="true">>></span>
</a>
</li>
</ul>
</nav>标签
default改为 primary success info warning danger，即可改变标签的样式，同前面所提到的按钮样式一样。
html
<h3>Example heading <span class="label label-default">New</span></h3>警告框
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。
html
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>带标题的面版
通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的
-
标签，添加一个预定义样式的标题。不过，
-
标签的字体大小将被 .panel-heading 的样式所覆盖。
html
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>总结
本文仅仅简单介绍了Bootstrap中常用全局 CSS 样式与组件，如需想要更多的样式或组件请前往Bootstrap官网。