一 首先导入 bootstrap模块插件
导入bootstrap的css插件，js插件 还有jquery
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
此处引用的插件来自于bootstrap官网！
二 插件导入完以后就可以使用bootstrap来开发前端页面
1 首先总结一下栅格系统，栅格系统是通过行和列的组合应用来实现的，行里面嵌套列，列里面放需要实现的标签，其中每一行都默认等分成12等分，然后给每一列分配对应的宽度，即12等份中的几份来实现标签的排布，通过给每一列设置对应的class属性值来控制，在不同平屏幕下，标签插件的排布方式：
<div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
</div>
</div>
栅格系统的参数：.col-lg- 为大屏 1170，.col-md- 为中屏 970，.col-sm- 为小屏 768, .col-xs- 为超小屏 ,其中 .col-lg-3代表该列(colnum)占12等分中的3份儿,如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。
.container 为固定容器 ,.container-fluid 为流式布局 其宽度为100%
2 列偏移 .col-lg-offset-4 代表将该列向右偏移4个列的宽度,如果该行空间不足以剩余列的排布,则外下一行排列
3 列的嵌套 比如在一个列里面再添加一个新的 .row 元素和一系列 .col-sm-* 元素
<div class="container"> <div class="row"> <div class="col-lg-3"> 1 <div class="row"> <div class="col-lg-4">1</div> <div class="col-lg-4">2</div> <div class="col-lg-4">3</div> </div> </div> </div> </div>
4 页面主体,Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。 给p标签添加.lead属性可以使段落突出
设置文本对齐时,通过添加.text-left,text-center等
设置文本大小写 .text-lowercase .text-uppercase .text-capitalize
5 表格
<table class="table "> ........ </table>
.table-striped 可以给表中的每一行添加鱼尾纹样式
.table-bordered 类为表格和其中的每个单元格增加边框。 .table-hover 类可以让 每一行对鼠标悬停状态作出响应。 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
还可以给 tr标签设置class属性 succes,active,danger,warning,info
如果要把表格做成响应式的,需要在table外面包裹一个class属性为 table-responsive 的div标签
6 form 表单 :
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<from> <div class="form-group"> <label for="">Email</label> <input type="text" class="form-control" /> </div> <div class="form-group"> <label for="">password</label> <input type="password" class="form-control" /> </div> </from>
.form-inlin 内联表单域 .form-horizontal 水平排列表单域
form-group 表单组 form-control 文本输入框 下拉菜单控制样式
radio-inline 单选框样式
checkbox-inline 多选框样式
input-group 表单控件组
7 按钮:
a button input 都一可以通过添加 btn属性 应用bootstrap样式
<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">
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
button 添加 .active类 表示按钮处于激活状态,表示被按下去了
还也以给这些标签添加disabled的类
8 图片 :
响应式图片:通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
<img src="..." class="img-responsive" alt="Responsive image">