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

语义化标签：

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	深灰色，可表示页面比较稳重的话背景

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海