bootstrap中语义化标签字体风格文本布局列表排列特殊字体颜色及特殊背景颜色

Posted 2021-05-21 苦海123

语义化标签：

bootstrap中提供一些语义化标签，它们自带样式，这里介绍几个样式比较明显的语义化标签：

<!-- 1.bootstrap中mark标签定义一个有淡黄色背景的文本 -->
<p><mark>hello</mark></p>

<!-- 2.bootstrap中abbr标签定义一个有下划虚线的文本且鼠标经过此文本时显示title中的字符，注意，abbr中一定要加title属性，否则无效 -->
<p><abbr title=''>hello</abbr></p>

<!-- 3.bootstrap中code标签定义一个颜色为粉红色的文本，有语义化此标签多用于包含代码 -->
<code>img是用来引入图片的标签</code>

<!-- 4.bootstrap中kbd标签定义一个黑色背景白色颜色的文本-->
<kbd>hello</kbd>

bootstrap中不仅提供了标签定义文本，还提供了类样式来修改文本，需要用时只需要给某文本加上对应的类名即可，其常用总结如下(类名中大写字母为代号，请用描述中具体的值代替)：

类名	描述
.font-weight-X	用来修饰字体粗细的，其中x的值可以是：bold加粗文本、 normal普通文本、 light更细文本
.font-italic	定义斜体
.lead	增大字体
.small	减小字体
.text-P	设置文本在某容器中的布局，其中P值有：left文本居左、center文本居中、right文本居右
.text-O	设置文本溢出父级容器时显示模式，其中O值有： justify超出时换行、 nowrap超出时不换行有滚动条
.text-S	设置英文文本大小写，其中S值有： lowercase转小写、 uppercase转大写、 capitalize首字母转大写
.initialism	将英文文本中小写转大写，将abbr标签中文本字号减小
.list-unstyled	清除列表ul、ol默认样式，并将列表紧靠父级元素左边排列
.list-inline-item	将一组ul或ol中有此类名的li放到同一行中显示，且li的样式被清除
.pre-scrollable	定义一个容器，当子级元素水平或垂直方向超出父级容器时，水平或垂直方向出现滚动条（此类是定义在pre标签中的，但是在其他容器也有效）

字体颜色：

bootstrap定义了一套具有意义的字体颜色，常用于链接、提示信息等字体的颜色，其类名及语义总结如下：

类名	描述
.text-muted	淡黑色，表示柔和
.text-primary	淡蓝色， 表示重要
.text-success	淡绿色，表示执行成功
.text-info	淡靛色，表示提示
. text-warning	淡橙色，表示警告
. text-danger	红色，表示危险
. text-secondary	浅黑色，表示副级别，副标题
. text-dark	深灰色，可表示页面普通文本

背景颜色：

bootstrap同样定义了一套具有意义的背景颜色，常用于按钮等背景颜色，其具体如下：

类名	描述
.bg-light	浅灰色，可表示页面普通背景
.bg-primary	淡蓝色， 表示重要
.bg-success	淡绿色，表示执行成功
.bg-info	淡靛色，表示提示
.bg-warning	淡橙色，表示警告
.bg-danger	红色，表示危险
.bg-secondary	浅黑色，表示副级别，副标题
.bg-dark	深灰色，可表示页面比较稳重的话背景

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[e-mail]联系笔者删除。
笔者：苦海