- A+
Bootstrap
Bootstrap 是预编写的 CSS 和 JavaScript 代码段（chunk）的集合。
引入
任何 Web 应用，都可以通过添加如下代码到 HTML 的 head 标签中来引入 Bootstrap 。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/> <div class="container-fluid"> <!-- something --> </div> 其中 rel 表示该 link 用于样式表，href 表明 Bootstrap 的地址。
或者可以把 Bootstrap 作为 JavaScript 库引入，在 body 标签底部放入 script 标签。
<body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> 其中 src 表示 Bootstrap 的地址。
Fluid
Bootstrap 会根据屏幕大小来动态调整 HTML 元素的大小————因此称为 Responsive Design（响应式设计）。
响应式设计 Responsive
现在通过 Bootstrap，只需要为 image 标签上设置 class 属性为 img-responsive ， 就可以让它完美地适应页面的宽度了。
<img class="img-responsive" src=""> 文本
居中
只需要将元素的 class 属性设置为 text-center 就可以实现。
<h2 class="text-center">CatPhotoApp</h2> 颜色
使用 text-XX 来表示文本颜色，其中 XX 和下列按钮颜色，相同.
// Primary // blue // Secondary // grey // Success // green // Danger // red // Warning // yellow // Info // skyblue // Light // whie // Dark // black // Link // anchor 按钮
Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格。
<button class="btn btn-default">Like</button> // white color 块级元素按钮
通过为按钮添加 class 属性 btn-block 使其成为块级元素，按钮会伸展并填满页面的整个水平空间，后续的元素会流到这个块级元素的下方，即 "另起一行"。
<button class="btn btn-default btn-block">Like</button> 按钮不同主题
btn-primary class 的颜色是应用的主要颜色。 这样 “突出显示” 是引导用户按部就班进行操作的有效办法。primary 被称为 modifier 修改器，因为这部分是可以改动的。
修改器改变了组件的视觉样式。
<button class="btn btn-primary btn-block">Like</button> // blue color 可选操作样式
Bootstrap 有着丰富的预定义按钮颜色。 浅蓝色的 btn-info class 通常用在备选操作上。
<button class="btn btn-info btn-block">Info</button> // 浅蓝 危险
红色 btn-danger class 用来提醒用户此行为具有破坏性
<button class="btn btn-danger btn-block">Delete</button> 栅格系统
Bootstrap 经常使用 container 作为栅格系统的父/根元素。
Bootstrap 具有一套 12 列的响应式栅格系统，可以轻松的将多个元素放入一行并指定它们的相对宽度。 Bootstrap 的大部分 class 属性都可以应用在 div 元素上。
Bootstrap 的列宽取决于用户的屏幕宽度。 比如，手机有着窄屏幕而笔记本电脑有者更大的屏幕.
就拿 Bootstrap 的 col-md-* class 来说。 在这里， md 表示 medium （中等的）， 而 * 是一个数字，说明了这个元素占有多少个列宽度。 这个例子就是指定了中等大小屏幕（例如笔记本电脑）下元素所占的列宽度。
使用 col-xs-* ， 其中 xs 是 extra small 的缩写 (比如窄屏手机屏幕)， * 是填写的数字，代表一行中的元素该占多少列宽。
断点，类前缀和维度对应：
- Extra small - xs - < 576px , 该项为默认值，因为 Bootstrap 是 mobile-first 的。
- Small - sm - >= 576px
- Medium - md - >= 768px
- Large - lg - >= 992px
- Extra large - xl - >=1200px
- Extra extra large - xxl - >= 1400px
<div class="row"> <div class="col-xs-4"> <button class="btn btn-block btn-primary">Like</button> </div> <div class="col-xs-4"> <button class="btn btn-block btn-info">Info</button></div> <div class="col-xs-4"> <button class="btn btn-block btn-danger">Delete</button></div> </div> 行内元素
使用 span 标签来创建行内元素。 可以把不同的元素放在同一行，甚至能为一行的不同部分指定不同样式。
<p>Top 3 things cats <span class="text-danger">hate:</span></p> Font-Awesome
Font Awesome 是一个非常便利的图标库。 通过 webfont 或矢量图的方式来使用这些图标。 这些图标就和字体一样， 不仅能通过像素单位指定它们的大小，它们也同样会继承父级 HTML 元素的字号。
引入:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> i 元素原本是用来表示斜体文字内容的；不过现在，用它来表示图标也很常见。 只需要为 i 元素添加相应的 class 就可以让它展示图标，比如：
<i class="fas fa-info-circle"></i> <i class="fas fa-thumbs-up"></i> <i class="fas fa-trash"></i></i> 表单
单选按钮
Bootstrap 的 col-xs-* class 也可以用在 form 元素上！ 这样就可以在不关心屏幕大小的情况下，将的单选按钮均匀的平铺在页面上。
<div class="row"> <div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Indoor</label></div> <div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Outdoor</label></div> <div class="col-xs-6"> <label><input type="checkbox" name="personality"> Loving</label></div> <div class="col-xs-6"> <label><input type="checkbox" name="personality"> Lazy</label></div> <div class="col-xs-6"> <label><input type="checkbox" name="personality"> Crazy</label></div> </div> 复选框
Bootstrap 的 col-xs-* 可应用于所有的 form 元素上，包括复选框！ 这样就可以不必关注屏幕大小，均匀地把复选框放在页面上了。
<div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> 输入框
可以在 submit button 元素内加上 <i class="fa fa-paper-plane"></i>，来添加 Font Awesome 的 fa-paper-plane 图标。
所有文本输入类的元素如 <input>，<textarea> 和 <select> 只要设置 .form-control class 就会占满100%的宽度。
<input class="form-control"> 标题
<h3 class="text-primary text-center">jQuery Playground</h3> 行
<div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div> </div> Wells
Bootstrap 有一个叫作 well 的 class，作用是使界面更具层次感。
<div class="well"> </div> 记住，可以这样给一个元素设置 id：
<div class="well" id="center-well"> 给左边的块设置 id 为 left-well。 给右边的块设置 id 为 right-well。
