文本

通过对文本设置对应的类,可以获得不同的显示效果,和之前的BUTTON的类的设计相似,获得的效果实际上就是颜色的改变,常用类如下:
Bootstrap 辅助类
对应的使用效果如下:
Bootstrap 辅助类
实际上还是修改了文字的颜色,如果文字是超链接,鼠标放上去会让颜色变淡。

背景

对标签的类直接添加类,用于修改背景,但是一般背景不用这种方法设置,所以有些鸡肋,可设置的内容如下:
Bootstrap 辅助类
获得的效果如图:
Bootstrap 辅助类
不难看出效果还是很硬核地对背景进行修改,不是很有必要。

其他

Bootstrap 辅助类
①关闭图标
主要用于用界面来模拟提示框,对按钮的类设置为close之后,会在当前位置的右上角显示出一个button但里面并没有内容,需要在button内部写上 & times;让button显示出叉号,可以用于关闭提示框之类的场景。
②插入符
将span的类设置为caret,可以获得一个向下的箭头,注意这里的span需要保持空,只是让这个span显示为一个向下的箭头,需要在外面搭配段落来显示其他的文字。效果如图:
Bootstrap 辅助类
图片里面仅为一个空的span。
③快速浮动
设置class为 pull-left 或 pull-right 来把元素向左或向右浮动,和直接在css里面设置float没什么区别
④内容居中
使用 class center-block 来居中元素。这里的居中是让设置了居中的块居中在上一个元素中,相当于设置了左右方向的margin为auto
⑤清除浮动
如需清除元素的浮动,设置.clearfix class。使用效果和css中设置clear一样,用于清除float的一些后续影响。
⑥显示和隐藏内容
通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏,设置了隐藏之后,内容看不见但是还保留着原来的位置,可以用于点击修改显示,但是要用js搭配,而且用display也可以实现,效果如图:
Bootstrap 辅助类
⑦屏幕阅读器
通过使用 class .sr-only 来把元素对所有设备隐藏,除了屏幕阅读器。也是用于隐藏元素,但是隐藏后没有留原来的位置,即设置后和没有这个元素一样。

相关文章: