5、响应式工具
为了针对性地在移动页面上展示和隐藏不同的内容,bootstrap提供响应式工具。可以让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或显示某些元素。
6、列表
bootstrap同样提供了实用的列表样式供开发人员使用
帮助手册位置:全局css样式---排版---列表
.list-inline 将列表所有元素放置于一行
示例:
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
7、按钮
bootstrap提供了丰富的按钮样式供开发人员。
帮助手册位置:全局css样式----按钮
任何元素加上以下样式都会变成对应按钮
.btn btn-default | 示例: <a class=".btn btn-default">link</a> 效果: Link |
.btn btn-primary | 示例: <a class=".btn btn-default">(首选项)Primary</a> 效果: |
.btn btn-success | 示例: <a class="btn btn-success">(成功)Success<a/> (成功)Success |
.btn btn-info | 示例: <a class="btn btn-info">(一般信息)Info<a/> |
.btn btn-warning | 示例: <a class="btn btn-warning">(警告)Warning<a/> |
.btn btn-danger | 示例: <a class="btn btn-danger">(危险)Danger<a/> |
btn-lg btn-xs btn-disabled | 大按钮 小按钮 按钮被禁用<a>标签只能用类标签调用,button可以用disabled属性使用 |