BootStrap框架基础
Bootstrap基础
栅格系统
通过改变类名来使用预设的css
| 类样式名 | 作用 |
|---|---|
| container | 不同的设备上不同的固定大小 |
| container-fluid | 所有的设备上100% |
| row | 表示一行，可以省略 |
| col-xs-n | 在微型设备上占n列 |
| col-sm-n | 在小型设备上占n列 |
| col-md-n | 在中型设备上占n列 |
| col-lg-n | 在大型设备上占n列 |
| hidden-lg/md/sm/xs | 在指定设备上隐藏 |
| visible-lg/md/sm/xs | 只在指定的设备上显示 |
组件
图片
图片添加 img-responsive 类可以让图片支持响应式布局，让使用了 img-responsive 类的图片水平居中，使用 center-block 类，不要用 .text-center。因为.text-center表示文本居中。（需要包裹在container类的标签内）
示例：
<!-- 一个居中的自适应图片 -->
<img src = "demo.jpg" class = "img-responsive center-block">表单
所有设置了 form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 form-group 中可以获得最好的排列。 <label>标签的 for 属性应当与相关元素如：input的 id 属性相同。这样就可以实现自动将焦点转到和input标签相关的表单控件上.
将class属性值改为form-inline,可以将radio正常显示（form-control为整行显示）
示例：
<form>
<div class="form-group">
<label for="user">姓名：</label><br/>
<input type="text" class="form-control" id="user" placeholder="请输入姓名">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" class="form-inline" id="male" name="gender">
<label for="male">男</label>
<input type="radio" class="form-inline" id="female" name="gender">
<label for="female">女</label>
</div>
</form>表格
样式：
| 表格的样式 | 类名，class属性值 |
|---|---|
| 基本实例 | table |
| 条纹状表格，就是隔行颜色有点类似斑马纹 | table-striped |
| 带边框的表格 | table-bordered |
| 鼠标悬停 | table-hover |
属性：
| class属性值 | 描述 |
|---|---|
| active | 鼠标悬停在行或单元格上时所设置的颜色 |
| success | 标识成功或积极的动作，浅绿色 |
| info | 标识普通的提示信息或动作 |
| warning | 标识警告或需要用户注意 |
| danger | 标识危险或潜在的带来负面影响的动作 |
弃坑，想用啥直接在这抄就行，没啥可写的Bootstrap
