本文共 916 字,大约阅读时间需要 3 分钟。
一、Bootstrap 辅助类文本样式
以下是一些常用的文本样式类:
使用text-muted类可以对文本进行阴影处理,使文字颜色变浅,适用于不想让文本太突出的场景。
text-primary类会将文本颜色设置为Bootstrap默认的主色调,通常用于重要信息的突出显示。
text-success类设置了绿色色码,适用于成功信息的显示,如操作成功、确认信息等。
text-info类设置了蓝色色码,通常用于辅助信息或需要注意的事项。
text-warning类设置了橙色色码,适用于需要提醒用户注意的场景,如警告信息。
text-danger类设置了红色色码,通常用于错误信息或紧急情况的提示。
背景样式
除了文本样式外,Bootstrap还提供了一些背景样式类,用于给元素增加背景色彩:
bg-primary类设置了主色调的背景,适用于需要背景颜色突出的场景。
bg-success类设置了成功色作为背景,常用于对比强调的区域。
bg-info类设置了辅助色作为背景,适用于需要背景色但不影响可读性的场景。
bg-warning类设置了警告色作为背景,用于需要提醒用户注意的地方。
bg-danger类设置了错误色作为背景,通常用于错误信息或紧急情况的提示。
其他常用辅助类
Bootstrap提供了丰富的辅助类,可以帮助开发者快速实现各种布局和样式效果。以下是一些常用的辅助类:
| 选项 | 描述 |
|---|---|
| .pull-left | 将元素浮动到左边 |
| .pull-right | 将元素浮动到右边 |
| .center-block | 将元素居中显示,并设置为block显示 |
| .clearfix | 清除浮动布局的影响 |
| .show | 强制显示元素(忽略 display: none 的设置) |
| .hidden | 强制隐藏元素(忽略 visibility: visible 的设置) |
| .sr-only | 除了屏幕阅读器外,其他设备上隐藏元素 |
| .sr-only-focusable | 与 .sr-only 结合使用,在元素获取焦点时显示(如键盘操作的用户) |
| .text-hide | 将页面元素所包含的文本内容替换为背景图 |
| .close | 显示关闭按钮 |
| .caret | 显示下拉式功能 |
转载地址:http://ghqr.baihongyu.com/