博客
关于我
Bootstrap 辅助类
阅读量:367 次
发布时间:2019-03-04

本文共 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/

你可能感兴趣的文章
Nmap端口扫描工具Windows安装和命令大全(非常详细)零基础入门到精通,收藏这篇就够了
查看>>
NMAP网络扫描工具的安装与使用
查看>>
NMF(非负矩阵分解)
查看>>
nmon_x86_64_centos7工具如何使用
查看>>
NN&DL4.1 Deep L-layer neural network简介
查看>>
NN&DL4.3 Getting your matrix dimensions right
查看>>
NN&DL4.7 Parameters vs Hyperparameters
查看>>
NN&DL4.8 What does this have to do with the brain?
查看>>
nnU-Net 终极指南
查看>>
No 'Access-Control-Allow-Origin' header is present on the requested resource.
查看>>
NO 157 去掉禅道访问地址中的zentao
查看>>
no available service ‘default‘ found, please make sure registry config corre seata
查看>>
No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
查看>>
no connection could be made because the target machine actively refused it.问题解决
查看>>
No Datastore Session bound to thread, and configuration does not allow creation of non-transactional
查看>>
No fallbackFactory instance of type class com.ruoyi---SpringCloud Alibaba_若依微服务框架改造---工作笔记005
查看>>
No Feign Client for loadBalancing defined. Did you forget to include spring-cloud-starter-loadbalanc
查看>>
No mapping found for HTTP request with URI [/...] in DispatcherServlet with name ...的解决方法
查看>>
No mapping found for HTTP request with URI [/logout.do] in DispatcherServlet with name 'springmvc'
查看>>
No module named 'crispy_forms'等使用pycharm开发
查看>>