bootstrap框架
bootstrap框架
bootstrap框架内部提供了很多好看的标签样式和功能，我们只需要在编写时给标签加上class属性值就可以使用样式了。
在使用bootstrap框架之前，需要导入css、js，如果要使用动态效果还需要jQuery。
详情：全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
布局容器
| class值 | 作用 |
|---|---|
| container | 固定宽度并在页面居中，两边留有空白 |
| container-fluid | 宽度占满页面 |
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
| class值 | 作用 |
|---|---|
| row | 默认开设一行均分12份 |
| col-md-1 | 占一行的1/12 |
| col-md-2 | 占一行的2/12 |
| ... | ... |
| col-md-12 | 占一行的12/12 |
| 偏移量 | |
| col-md-offset-1 | 向右偏移1/12 |
| col-md-offset-2 | 向右偏移2/12 |
| ... | .. |
| col-md-offset-12 | 向右偏移12/12 |
| 其他设备 | |
| col-xs- | 超小屏幕 手机 (<768px) |
| col-sm- | 小屏幕 平板 (≥768px) |
| col-md- | 中等屏幕 桌面显示器 (≥992px) |
| col-lg- | 大屏幕 大桌面显示器 (≥1200px) |
表格样式
链接：表格样式官网说明
| class值 | 作用 |
|---|---|
| table | 美化表格 |
| table-hover | 每一行对鼠标悬停状态作出响应 |
| table-striped | 每一行增加斑马条纹样式 |
| table-bordered | 为表格和其中的每个单元格增加边框 |
| table-condensed | 表格更加紧凑 |
| 状态类 | 通过这些状态类可以为行或单元格设置颜色 |
| active | 鼠标悬停在行或单元格上时所设置的颜色 |
| success | 标识成功或积极的动作（浅绿） |
| info | 标识普通的提示信息或动作（浅蓝） |
| warning | 标识警告或需要用户注意（淡黄） |
| danger | 标识危险或潜在的带来负面影响的动作（淡红） |
表单样式
链接：表单样式官网说明
| class值 | 作用 |
|---|---|
| form-control | 设置宽度为100%并美化 |
按钮
链接：按钮详细说明
| class值 | 作用 |
|---|---|
| btn | 按钮样式 |
| 颜色 | |
| btn-default | 默认样式 |
| btn-primary | 蓝色（首选项） |
| btn-success | 绿色（成功） |
| btn-info | 浅蓝（一般信息） |
| btn-warning | 黄色（警告） |
| btn-danger | 红色（危险） |
| 尺寸 | |
| btn-lg | 大按钮 |
| btn-sm | 小按钮 |
| btn-xs | 超小尺寸 |
| btn-block | 拉伸至父元素100%的宽度，并变为了块级元素 |
图片
链接：图片详细说明
| class值 | 作用 |
|---|---|
| img-rounded | 图片四个角变圆滑 |
| img-circle | 图片border-radius设为50% |
| img-thumbnail | 图片有个边框 |
组件
链接：组件
更多图标：http://www.fontawesome.com.cn/
JS效果
链接：JS效果
浙公网安备 33010602011771号