辅助类-用于辅助布局的样式_辅助布局系统界面-优快云博客

本文详细介绍了辅助类在布局设计中的应用，包括文本颜色、背景色的设置方法，关闭按钮及三角符号的实现技巧，以及如何进行元素浮动、居中和清除浮动等操作，为网页布局提供了实用的样式调整方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

辅助类：主要是提供布局方面一些细小的样式辅助

1，文本颜色（前景色）

**
在这里插入图片描述

对应的代码如下；

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

2，背景色

**
在这里插入图片描述
对应的代码如下；

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

关闭按钮的实现

**
在这里插入图片描述
代码如下

<button  class="close"> &times;  </button>

三角符号的实现

**
在这里插入图片描述
代码如下；

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

左浮动右浮动

**
注意：
不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right

<div class="pull-left">...</div>
<div class="pull-right">...</div>

让任意块元素居中

**
在这里插入图片描述
代码如下：

<div class="center-block">...</div>

清理浮动

**
在这里插入图片描述

如果右边没有浮动的块不想被左浮动的块遮挡住，可以使用以下方法来清除浮动

在浮动的块和没有浮动的块（被浮动的块遮挡的块）之间，加一个清除浮动的块
代码如下：

<div class="clearfix"></div>