官方文档：https://v3.bootcss.com/
菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
一.基础用法
-
基本样式
-
排版(标题、页面主体、内联文本元素......)
-
代码(<code>、<pre>......)
-
表格(基本、条纹状、带边框、鼠标悬停......)
-
表单、按钮、图片、辅助类、响应式实用工具......
-
-
布局组件
-
下拉菜单、按钮组、导航元素、导航栏、分页、缩略图、进度条、多媒体对象、列表组......
-
-
基本样式和布局组件用法：引入文件 --> 加标签/加class
二.响应式布局
-
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。使用行来创建列的水平组。内容应该放置在列内，且唯有列可以是行的直接子元素。
-
下面的五个列分类分别对应：小于576px/大于等于576px/大于等于768px/大于等于992px/大于等于1200px。例：.col-lg-10意思是当屏幕/视口大于等于992px时，这个容器在12份里占10份。
1 .container 2 .row 3 .col-/.col-sm-/.col-md/.col-lg-/.col-xl-
三.JS插件
-
插件的作用是实现组件交互。有模态框、下拉菜单、滚动监听、提示工具、弹出框、折叠......
-
用法：通过data-*属性/通过js API
1 <!--例：下拉菜单--> 2 <!--通过data属性使用--> 3 <div class="dropdown"> 4 <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a> 5 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 6 ... 7 </ul> 8 </div>
1 //通过javascript使用 2 $('.dropdown-toggle').dropdown()