bootcdn（通过访问该站可以获得免下载的bootstrap-link,比本文介绍的下载压缩包方式更便捷）
安装bootstrap、基本配置
下载bootstrap 的安装包，解压缩到工作路径下。
在html的头文件中给到以下命令（每个文件头部必备）
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
其代码所代表的含义依次为：引入网页版jquery文件、从本地导入bootstrap的css样式及其js脚本。
meta标签的含义会在下面进行介绍。
重要内容概览
移动设备优先
为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器（必备⭐）
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。（不常用 X）
<div class="container-fluid">
...
</div>
栅格系统
详细链接
栅格系统把一行均分成了12份,于通过一系列的行（row）与列（column）的组合来创建页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<style>
.c1 {
background-color: red;
height: 100px;
border: 3px solid green;
}
@media screen and (max-width: 726px) {
.c1 {
background-color: blue;
height: 100px;
border: 3px solid green;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-6 c1"></div>
<div class="col-md-6 col-xs-6 c1">
<div class="row">
<div class="col-md-4 col-xs-4 c1">
</div>
<div class="row">
<div class="col-md-4 col-xs-4 c1">
</div>
<div class="row">
<div class="col-md-4 col-xs-4 c1">
</div>
</div>
</div>
</div>
</body>
</html>
col-md-6表示该div在普通显示器下占用6/12的屏幕
col-xs-6 表示该div在手机端下占用6/12的屏幕
每个用row - col 的组合中可以再嵌套row -col 。
“媒体查询” 详情参考官网 媒体查询
以上代码输出结果>>>
响应式列重置
详细链接
即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
当显示页面变得拥挤时，clearfix清除浮动后的结果：
未清除浮动的结果：（挤在一起）
列偏移（列的定位）
该div对象（col-md-6：占位6/12，col-md-offset-3：向右偏移三个单位 ）
<div class="col-md-6 c1 col-md-offset-3">
排版
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
…
…
…
…
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
页面主体
- List item
- Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外，
（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
- 通过添加 .lead 类可以让段落突出显示。
<p class="lead">...</p>
- 内联文本元素
You can use the mark tag to <mark>highlight</mark> text.标记高亮
- 小号文本，使用 标签包裹
<small>This line of text is meant to be treated as fine print.</small>
- 通过增加 font-weight 值强调一段文本。
<strong>rendered as bold text</strong>
- 对齐操作
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
- 列表及其样式
代码
详细参考
内联代码
For example, <code><section></code> should be wrapped as inline.
程序输出：
<samp>This text is meant to be treated as sample output from a computer program.</samp>
This text is meant to be treated as sample output from a computer program.
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-bordered table-hover table-striped table-condensed">
<!--添加 .table-bordered 类为表格和其中的每个单元格增加边框。-->
<!--通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。-->
<!--通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。-->
<!--通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr class="active">
<!--鼠标悬停在行或单元格上时所设置的颜色-->
<td>name</td>
<td>age</td>
<td>hobby</td>
</tr>
<tr class="success">
<!--标识成功或积极的动作-->
<td>name</td>
<td>age</td>
<td>hobby</td>
</tr>
<tr class="warning">
<!--标识普通的提示信息或动作-->
<td>name</td>
<td>age</td>
<td>hobby</td>
</tr>
<tr class="danger">
<!--标识警告或需要用户注意-->
<td>name</td>
<td>age</td>
<td>hobby</td>
</tr>
<tr class="info">
<!--标识危险或潜在的带来负面影响的动作-->
<td>name</td>
<td>age</td>
<td>hobby</td>
</tr>
</tbody>
</table>
</body>
</html>
表单
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
被支持的控件
输入框
<input type="text" class="form-control" placeholder="Text input">
form-control -->鼠标放到文本框内，边框变高亮，placeholder代表背景文本。
拓宽文本域的话，加入这个类样式即可rows="3"，即把高度拓宽成3.
其余input控件请参考表单、input控件以及、状态样式 请参考这里
按钮
详细链接
为 <a>、<button>或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<!-- 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>
链接（<a>）元素
btn btn-primary定义样式
btn-lg 定义大小
active 定义是否激活状态
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
图片
响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。 请参考助手类章节 了解更多关于 .center-block 的用法。
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
通过为<img> 元素添加以下相应的类，可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
辅助类
文本颜色
<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>
情境背景色
<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>
快速浮动
通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin（参见 less 文档） 使用。
<div class="pull-left">...</div>
<div class="pull-right">...</div>
让内容块居中
<div class="center-block">...</div>
清除浮动
<!-- Usage as a class -->
<div class="clearfix">...</div>
显示或隐藏内容
<div class="show">...</div>
<div class="hidden">...</div>
组件
下拉菜单
导航条
分页
未读消息
巨幕
略缩图
进度条
媒体对象
网页框架面板
其他插件的引入
Font Awesome（图标库）的引入
Font Awesome完美支持bootstrap
进入官网下载压缩包 http://www.fontawesome.com.cn/
把文件解压缩后放到工作目录下
在<style>样式中引入
<link rel="stylesheet" href="awesome/css/front-awesome.min.css">
图标库链接 http://www.fontawesome.com.cn/faicons/
找到你需要的图标，直接拷贝代码即可
sweet alert（动态消息框） 的引入
sweet alert 完美支持bootstrap
github下载地址：https://github.com/t4t5/sweetalert
下载后解压到工作目录
在头文件中导入sweet alert的css样式表以及js脚本
<link rel="stylesheet" href="sweetalert/dist/sweetalert.css">
<script src="sweetalert/dist/sweetalert.min.jse"></script>
简单触发语句：
swal('主标题','副标题',‘样式')
详情敬请参考官方文档：https://sweetalert.js.org/docs/
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
