BootStrap作为前端的一个比较有名的框架,在辅助显示方面也是考虑得比较全面的。
文本
以下不同的类展示了不同的文本颜色;如果文本是个链接鼠标移动到文本上会变暗。
类 |
说明 |
.text-muted |
显示灰色字体 |
.text-primary |
显示蓝色字体 |
.text-success |
显示浅绿色字体 |
.text-info |
显示浅蓝色字体 |
.text-warning |
显示浅橙色字体 |
.text-danger |
显示浅红色字体 |
背景
以下不同的类展示了不同的背景颜色;如果文本是个链接鼠标移动到文本上会变暗。
类 |
说明 |
.bg-primary |
背景色为蓝色 |
.bg-success |
背景色为浅绿色 |
.bg-info |
背景色为浅蓝色 |
.bg-warning |
背景色为浅橙色 |
.bg-danger |
背景色为浅红色 |
其它辅助类
类 |
说明 |
.pull-left |
元素向左浮动 |
.pull-right |
元素向右浮动 |
.center-block |
设置元素为块元素并居中显示
|
.clearfix |
清除浮动 |
.show |
强制元素显示 |
.hidden |
强制元素隐藏,包括可视状态 |
.hide |
强制元素隐藏 |
.sr-only |
除了屏幕阅读器外,其他设备上隐藏元素 |
.sr-only-focusable |
与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户) |
.text-hide |
将页面元素所包含的文本内容替换为背景图 |
.close |
显示关闭按钮,默认浮动在右侧,如:<button class="close">×</button>
|
.caret |
显示下拉箭头,如:<i class="caret"></i> ,例子可见本项目头部菜单
|