Bootstrap 全局CSS样式：辅助类的使用

作者: WangMin
格言: 努力做好自己喜欢的每一件事

情境文本颜色

六种文本色， 分别代表不同的场景，以text-开头，在鼠标经过时颜色可以还可以加深 。

• -primary 主色
• -info 副色
• -success 成功色
• -warning 警告色
• -danger 错误色
• 文本多了一种柔弱色text-muted, 默认为浅灰

<p class="text-muted">text-muted</p>
<p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>

        

          
        
        
        

          

          AI 代码解读
        
      
      

情境背景色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景，以bg-开头，在鼠标经过时颜色会加深 。

<p class="bg-primary">bg-primary</p>
<p class="bg-success">bg-success</p>
<p class="bg-info">bg-info</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-danger">bg-danger</p>

        

          
        
        
        

          

          AI 代码解读
        
      
      

关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。可以使用类.close。

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        

          
        
        
        

          

          AI 代码解读
        
      
      

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。

<span class="caret"></span>

        

          
        
        
        

          

          AI 代码解读
        
      
      

快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。使用类 .pull-left 与类 .pull-right。
注意：不能用于导航条组件中。浮动导航条中的组件时可以使用这些工具类：.navbar-left或.navbar-right。

让内容块居中

通过给类 .center-block 设置display: block属性和margin属性让元素中的内容居中。

清除浮动

通过为父元素添加.clearfix类可以很容易地清除浮动（float）。

显示或隐藏内容

.show和.hidden类可以强制任意元素显示或隐藏。注意，这些类只对块级元素起作用。

图片替换

通过给.text-hide类设置background-image属性用来将元素的文本内容替换为一张背景图。

就先分享到这里!! :smile: 后续继续更新!!