Bootstrap手册
介绍
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML/JS框架，用于开发响应式布局、移动设备优先的 WEB 项目。
支持预处理脚本：可以直接使用 Bootstrap 提供的 CSS 样式表，同时 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。
一个框架、多种设备：网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。
开发环境
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Responsive-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>网格系统
<!--
1.网格系统
flexbox支持一页12列；大屏幕时横放，小屏幕时竖放；若一行中不足12列，其它列可以扩展宽度；
包含四种列尺寸：xs=屏宽小于768px(phones)、sm=屏宽大于等于768px(tablets)、md=屏宽大于等于992px(small laptops)、lg=屏宽大于等于1200px(laptops/desktops)
两种容器类：container=响应式容器，在不同的屏幕宽度下，均有对应的固定尺寸，一般至于最外层做整体布局，有水平滚动条；container-fluid=用于100% 宽度，占据全部视口（viewport）的容器，没有水平滚动条
div类格式：col-*-#，*=网格种类(尺寸)，#=所占列数
-->
<div class="container">
<div class="row">
<div class="col-xs-6">6 cols</div>
<div class="col-xs-1">6 cols</div>
</div>
<div class="row">
<div class="col-xs-4">4 cols</div>
<div class="col-xs-8">8 cols</div>
</div>
</div>字体
<!--
2.字体
默认字体大小：14px；行高：1.428(<body>或<p>)；底间距：行高的一半或最小10px(<p>)
<h1>至<h6>是从36px至12px
<small>更小、更浅的标题
<mark>浅色的高亮标签
<abbr>CSS提示信息
<blockquote>包含<footer>代表引用中的长破折号以及浅色文案，用于引用中最后说明出处，若class="blockquote-reverse"则标签右对齐
<dl> <dt> 列出强调的元素
<code> 高亮代码
<kbd>高亮键盘字符(黑底框)
<p>中可使用text-muted、text-primary、text-success、text-info、text-warning、text-danger、bg-primary、bg-success、bg-info、bg-warning、bg-danger设置文字颜色和背景颜色，也可以使用text-left、text-justify、text-center、ext-nowrap、text-right对齐文字
-->
<div class="container">
<h3>Miscellaneous<small>stuff</small></h3>
<p class="bg-info">The Gutenberg Press 1454</p>
<p class="text-success">revolutionized printing</p>
<blockquote>
<p>The only source of knowledge is experience.</p>
<footer>Albert Einstein</footer>
</blockquote>
<p><kbd>Enter</kbd> is a <code>kbd</code> element</p>
<p class="bg-warning text-center">Paragraph formats</p>
</div>表格
<!--
3.表格
table-border=所有边有边框
table-condensed=压缩列表，缩减单元格的内边距
table-striped=交替的行阴影(像斑马条纹)
table-hover=在每行的周边添加灰色背景
table-responsive=创建响应式表格，当设备屏宽小于768px时表格会变为横向滑动
-->
<div class="container table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 7</th>
<th>Column 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>图片
<!--
4.图片
img-rounded=圆角图
img-circle=圆形图
img-thumbnail=极小图(自带自适应屏宽特性)
img-responsive=创建响应式表格，当设备屏宽小于768px时图片自动调整尺寸适配屏幕大小
-->
<div class="container">
<img src="http://images.freeimages.com/images/large-previews/b3d/flowers-1375316.jpg" width="200" height="200" class="img-rounded img-responsive"/><br><br>
<img src="http://images.freeimages.com/images/large-previews/b3d/flowers-1375316.jpg" width="200" height="200" class="img-circle"/><br><br>
<img src="http://images.freeimages.com/images/large-previews/b3d/flowers-1375316.jpg" width="200" height="200" class="img-thumbnail"/>
</div>按钮
<!--
5.按钮
button该class可以用在<button>、<a>、<input>元素上
可用种类：
btn-default、btn-primary、btn-success、btn-warning、btn-danger、btn-info、btn-link（以上其实与文字的种类类似，主要设置颜色特性）；
btn-xs、btn-sm、btn-md、btn-lg（以上与网格列宽特性类似，设置按钮大小特性）；
active=可用（与其它种类配套使用，像 class="btn-default btn-xs active"）
disabled=不可用
btn-block=与父容器宽一致。
-->
<div class="container">
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-xs">Extra Small</button>
<button type="button" class="btn btn-sm">Small</button>
<button type="button" class="btn btn-md">Medium</button>
<button type="button" class="btn btn-lg">Large</button>
<button type="button" class="btn active">Active</button>
<button type="button" class="btn disabled">Disabled</button>
<button type="button" class="btn btn-block">Block</button>
<button type="button" class="btn btn-success btn-xs active btn-block">Combine</button>
</div>表单
<!--
6.表单
* 表单用于接收输入，可以包括多行文本输入、选择性列表、单选按钮、多选框。默认都是垂直布局。
* 用<form>包裹整个表单。
* 用form-group类的<div>包裹普通输入<input>，文本输入<textarea>，选择列表<radio>或<checkbox>。
* 文本类输入需使用form-control类(<textarea>是用其作为type)。
* 可以将<input>放入<label>来创建一个多选或单选按钮，可各自放到checkbox类或radio类的<div>里，组成一个列表。
* 要在单行中显示多选或单选按钮组，则不能使用<div>包括选项按钮，并且要增加checkbox-inline类或radio-inline类到所有行内的label元素上。
* Bootstrap支持HTML5的输入type，包括：email、text、password、datetime、datetime-local、date、month、time、week、number、url、search、tel、color。
* <form>可以使用form-line类来使所有form内的元素在单行显示，单行显示的form会在屏宽少于768px时转换为竖表形式。
-->
<div class="container">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="info">Info:</label>
<textarea type="form-control" rows="3" id="info"></textarea>
</div>
<div class="form-group">
<label for="sellist">Select One</label>
<select class="form-control" id="sellist">
<option>A</option>
<option>B</option>
</select>
</div>
<label class="radio-inline"><input type="radio" name="rb">Radio 1</label>
<label class="radio-inline"><input type="radio" name="rb">Radio 2</label>
<div class="checkbox">
<label><input type="checkbox">Checkbox 1</label>
<label><input type="checkbox">Checkbox 2</label>
</div>
</form>
</div>下拉表单
<!--
7.下拉表单
* 将一个触发按钮和选项列表包裹在dropdown类的<div>内；
* 触发按钮要设置为dropdown-toggle类（可搭配其它类设置样式），以及data-toggle属性为dropdown；
* 在触发按钮里还需创建一个<span>元素，设其为caret类，让按钮右侧带有导三角指示符；
* 创建类属性为dropdown-menu的ul列表元素；
* 在ul列表中还是可以通过divider类和dropdown-header类的<li>做列表中的分隔线和分隔标题，还有active和disabled类，可对选项设置可用性。
-->
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Languages
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>English</li>
<li>Spanish</li>
<li class="divider"></li>
<li class="dropdown-header">Coding</li>
<li>C++</li>
<li>Java</li>
</ul>
</div>
</div>进度条
<!--
8.进度条
* 将progress-bar类的<div>放在progress类的<div>里，progress类的<div>相当于进度条的外框，默认总长是100%，progress-bar类的<div>相当于进度条内的一个进度对象，可放入多个进度对象，会在进度条框中堆叠；
* progress-bar类的<div>还需设置role属性为progressbar，设置style属性的宽度为当前进度的百分比；
* progress-bar类的<div>还可设置普通的HTML进度条属性value、min、max，分别对应aria-valuenow、aria-valuemin、aria-valuemax，均为可选的属性;
* 额外的样式还包括：progress-bar-info、progress-bar-success、progress-bar-warning、progress-bar-danger、progress-bar-striped；
-->
<div class="container">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="59" aria-valuemin="0" aria-valuemax="100" style="width: 59%"> 59% Complete!
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: 50%">50</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 20%">25</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 10%">10</div>
</div>
</div>巨幕
<!--
9.超大屏
一个圆角的灰色大框；区分开当前页面的其它元素，突出显示；框内的文本也会被放大；若放到container之外，会扩展到屏幕的各个边界。
-->
<div class="container">
<div class="jumbotron">
<h1>SoloLearn</h1>
<p>Learn to code for FREE!</p>
</div>
</div>警告框
<!--
10.警告框
* 警告框必须使用以下样式中的其中一个指定:alert-info、alert-success、alert-warning、alert-danger;
* 若需要alert是可消失的，需对类型属性添加alert-dismissable类，然后在alert中的<link>或<button>中添加class="close"和data-dismiss="alert"，使其触发能同时关闭alert；
-->
<div class="container">
<div class="alert alert-success">Success Alert!</div>
<div class="alert alert-warning">Warning Alert!</div>
<div class="alert alert-danger">Danger Alert!</div>
<div class="alert alert-info alert-dismissable">
<a class="close" data-dismiss="alert" href="#">Close</a>
Information Alert!
</div>
</div>嵌井
<!--
11.嵌井
一个圆角的灰色框，可以通过指定类控制其显示尺寸：well-sm、well-lg;
通常用于给元素一个嵌入的简单效果。
-->
<div class="container">
<div class="well well-sm">Small well</div>
<div class="well">Normal well</div>
<div class="well well-lg">Large well</div>
</div>标记 标签
<!--
12.标记 标签
* 标记badge类可以给一个元素附上数值显示;
* 标签label类可以给一个元素附上其它信息显示，且必须指定其中一个样式：label-default、label-primary、label-info、label-success、label-warning、label-danger；
* 以上均使用span附加（放入）到要附加显示的元素上
-->
<div class="container">
<button class="btn">
Click<span class="badge">59</span>
</button>
<p>
Paragraph
<span class="label label-primary">Label</span>
</p>
<p>
Paragraph
<span class="label label-info">Label</span>
</p>
</div>媒体对象
<!--
13.媒体对象
* 为便于对齐媒体对象
* 使用media类的<div>包裹所有要对齐的所有内容；
* 使用类media-left、media-right、media-top、media-middle、media-bottom(后三者一般用于当内容很大的情况)的<div>来包裹要对齐媒体标签，媒体标签的类且需为media-object；
* 内容需要使用media-body类的<div>包裹；
* 内容中的标题可以使用media-heading类设定；
* 需要注意包裹内容和媒体的<div>顺序，根据其所设定的位置。
-->
<div class="container">
<div class="media">
<div class="media-left">
<img src="http://www.sololearn.com/images/fb-story-icon.jpg" width="40" height="40" class="media-object">
</div>
<div class="media-body">
<h4 class="media-heading">SoloLearn</h4>
Let's Collaborate!
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">FreeCodeCamp</h4>
Let's Collaborate!
</div>
<div class="media-right">
<img src="http://avatars3.githubusercontent.com/u/9892522" width="40" height="40" class="media-object">
</div>
</div>
</div>跑马灯
<!--
14.跑马灯
* 默认样式中，有小圆形的指示器标出各滑块的序号、当前激活的滑块；可手工来回切换幻灯片；
* 用自定义id的<div>包裹所有跑马灯内容，<div>的类属性需要指定为carousel(可配合指定为slide，会带有过渡动画)，然后还要指定data-ride属性标记轮播在页面加载时就开始动画播放；
* 在上述div里的外层内容，会包括指示器、媒体内容、控制器；
* 指示器使用类carousel-indicators的<ol>实现，里面的每一项<li>都需要有属性data-target指向跑马灯div的id，和属性data-slide-to指出点击时显示哪个对应的滑块；
* 媒体内容用carousel-inner类的div包裹，然后将不同的媒体用item类的div分离，同时指定active类表明当前显示的媒体；
* item类div里除了包裹媒体，还包裹carousel-caption类的div，承载当前媒体滑块外的额外内容，item在carousel-inner类的div里是位于中下方；
* 在carousel-inner类div里，也可以添加另外的<a>控件来控制切换，类属性设置为carousel-control(一般配合left或right类定控件在当前跑马灯上的位置)，href要指向跑马灯的id，同时要设置一个data-slide属性prev或next指定触发切换的向前一页还是向后一页。控件中可以指定指示图标<span>，默认可直接点击控件的阴影范围触发；
* glyphicon来自于Glyphicon Halfings，Carousel是一个插件，在Bootstrap的JS文件中。
-->
<div class="container">
<div id="logoCarousel" class="carousel" data-ride="carousel">
<ol class="carousel-indicators black">
<li data-target="#logoCarousel" data-slide-to="0" class="active"></li>
<li data-target="#logoCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://images.freeimages.com/images/large-previews/9fc/yet-another-flower-1399208.jpg" style="width: 100%">
<div class="carousel-caption">
<h3>Caption 1</h3>
</div>
</div>
<div class="item">
<img src="https://images.freeimages.com/images/large-previews/b3d/flowers-1375316.jpg" style="width: 100%">
<div class="carousel-caption">
<h3>Caption 2</h3>
</div>
</div>
<a class="left carousel-control" href="#logoCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#logoCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>模态框
<!--
15.模态框
弹出一个显示在当前页面顶部对话窗/框，是一个插件。
通过指定按钮button的data-toogle属性为modal，data-target属性为modal类的div的id，那么按钮点击时就能触发出该modal类div的模态对象；
* 模态对象中包裹模态对话框modal-dialog；
* 模态框中包裹模态内容modal-content；
* 模态内容可包括：modal-header(可在其中包含modal-title)、modal-boody、mode-footer，来指定模态窗中的不同部位内容;
* 可以指定关闭模态框的按钮，按钮需要设定属性data-dismiss="modal"才能在触发按钮时关闭模态框。
-->
<div class="container">
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Header</h3>
<button data-dismiss="modal">X</button>
</div>
<div class="modal-body">Body</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>
</div>悬浮
<!--
16.悬浮
将一个元素贴在页面的一个区域上，滚动页面时该悬浮元素保持固定在这个指定区域不动。
（放在该位置上可能因跑马灯的缘故无法显示，放置到页面初始显示的位置时能正常悬浮显示）
-->
<div class="container">
<div id="affixed" data-spy="affix">Affix</div>
<div class="jumbotron">Content for Scrolling</div>
<div class="jumbotron">Content for Scrolling</div>
<div class="jumbotron">Content for Scrolling</div>
</div>分组按钮
<!--
17.分组按钮
btn-group类的div为默认横排按钮组，btn-group-vertical为竖排。
按钮组的尺寸可以使用类指定包括btn-group-xs、btn-group-sm、btn-group-lg。
btn-group-justified类可使按钮组宽度根据屏宽适配。
-->
<div class="container">
<div class="btn-group btn-group-xs">
<button class="btn btn-success">h1</button>
<button class="btn btn-warning">h2</button>
<button class="btn btn-danger">h3</button>
</div>
<br><br>
<div class="btn-group-vertical">
<button class="btn btn-success">v1</button>
<button class="btn btn-warning">v2</button>
<button class="btn btn-danger">v3</button>
</div>
</div>列表组
<!--
18.列表组
* 对<ul>的类属性指定为list-group，对<li>的类属性指定为list-group-item；
* 可继续对<li>指定类属性为active或disabled；
* 样式可以继续使用以下类设置：list-group-item-success、list-group-item-info、list-group-item-warning、list-group-item-danger;
* 也可以使用div或a组成列表组，不局限于ul和li。
-->
<div class="container">
<ul class="list-group">
<li class="list-group-item active">HTML</li>
<li class="list-group-item disabled">CSS</li>
<li class="list-group-item list-group-item-success">JS</li>
</ul>
</div>嵌板
<!--
19.嵌板
* 镶边框，先用panel类的div包裹一层，同时有以下种类可以设样式：panel-default、panel-primary、panel-success、panel-info、panel-warning、panel-danger；
* 然后用以下类添加第二层div：panel-heading、panel-body、panel-footer；
* 可以用panel-group类的div组织起panel类的div。
-->
<div class="container">
<div class="panel panel-success">
<div class="panel-heading">Head</div>
<div class="panel-body">Body</div>
<div class="panel-footer">Foot</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Head</div>
<div class="panel-body">Body</div>
<div class="panel-footer">Foot</div>
</div>
</div>折叠
<!--
20.折叠
收纳或显示大量的内容，通过按钮触发
-->
<div class="container">
<button data-toggle="collapse" data-target="#myCollapsible" class="btn btn-warning">Show/Hide</button>
<div id="myCollapsible" class="collapse">Bootstrap Collapsibel</div>
</div>页标
<!--
21.页标
尺寸大小可以使用这些类控制：pagination-sm、pagination-lg
-->
<div class="container">
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>路径导航
<!--
22.痕迹导航
作为分层导航表单的一种页标，即是导航的路径
-->
<div class="container">
<ul class="breadcrumb">
<li><a href="#">Languages</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">C</a></li>
<li><a href="#">Intro</a></li>
</ul>
</div>翻页器
<!--
23.翻页器
* 上一页、下一页；
* 若要分别将上一页和下一页按钮放在屏幕左边和右边，给li的类属性设为对应的previous和next。
-->
<div class="container">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
<div class="container">
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>导航栏
<!--
24.导航栏
* 使用<nav>标签，并设置类属性为navbar和navbar-default/navbar-inverse（即默认或倒置样式）；
* 在<nav>里创建类属性为navbar-header的<div>，并在其中创建类属性为navbar-brand的<a>元素作为主要的头项；
* 在<nav>里继续创类属性为nav和navbar-nav的<ul>，作为次要的子项列表；
* 可以对项指定类属性active或disabled设定是否可用；
* 可使用navbar-right作为子项列表的类属性，来设置子项列表在导航栏中的对齐方向；
* 使用navbar-fixed-top、navbar-fixed-bottom作为<nav>的类属性可以设定导航栏固定在页面的顶部或底部，不会在滚动时移出页面。
-->
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">Home</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Page0</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Page 4</a></li>
</ul>
</nav>
</div>滚动
<!--
25.滚动
* 为自动更新在基于滚动位置的导航栏中的链接，可以使用scrollspy；
* <body>的数据监测属性设为scroll，数据偏移属性设为20（预留导航栏高度）；
* 可滚动区域需要CSS的位置属性是与scrollspy关联才有效；
* 是一个JS插件。
-->
<body data-spy="scroll" data-offset="20">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a href="#" class="navbar-brand">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#p0">Part 0</a></li>
<li><a href="#p1">Part 1</a></li>
<li><a href="#p2">Part 2</a></li>
</ul>
</nav>
<div id="p0">0:Scroll and See the Navigation Bar</div>
<div id="p1">1:Scroll and See the Navigation Bar</div>
<div id="p2">2:Scroll and See the Navigation Bar</div>
</div>
</body>其它
<!--
26.其它
* 选项卡：tabbable、nav-tabs、tab-content、tab-pane
* 手风琴切换：panel-collapse
-->代码参考自SoloLearn
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 mingfungliu@gmail.com
文章标题:Bootstrap手册
文章字数:6.5k
本文作者:Mingfung
发布时间:2018-09-08, 23:06:00
最后更新:2018-09-13, 23:21:04
原始链接:http://blog.ifungfay.com/前端/Bootstrap手册/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。
