当前位置 博文首页 > 苦海：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联系笔者删除。
笔者：苦海
