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