作者:
WangMin
格言:努力做好自己喜欢的每一件事
博客地址 👉 WangMin
标题
HTML标签中的所有标题标签h1-h6都可以使用，同时bootstrap还提供了.h1到.h6，它们的字体大小和标签h1-h6的字体大小一致，为的是给内联（inline）属性的文本应用到标题的样式。
<h1>bootstrap</h1>
<div class="h1">bootstrap</div>
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
注意： Bootstrap 3 将行高设置为 1.428，其实目的就是想将行高设置为20px。
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
中心内容
通过添加 .lead 类可以让段落突出显示。
<p class="lead">
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
内联文本元素
1. mark 标签 加背景色
<div><mark>.mark</mark>标签 加背景色</div>
<mark>bootstrap</mark>
2. del 标签 删除
对于被删除的文本使用<del>标签。
<del>对于被删除的文本使用del标签。<del>
3. s 标签 去掉没用的文本
<s>去掉没用的文本<s>
可以看出 s 标签和 del 标签的效果一样，具体使用要看具体文本结构。
4. ins 标签额外插入的文本使用。
<ins>插入的文本使用<ins>
5. u 标签 文本下划线。
<u>文本下划线<u>
可以看出 ins 标签和 u 标签的效果一样，具体使用要看具体文本结构。
6. strong标签 通过增加font-weight值强调一段文本。
<p>通过增加 <strong>font-weight</strong> 值强调一段文本</p>
7. em 用斜体强调一段文本。
<em>用斜体强调一段文本。</em>
对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
<div class="text-center">居中对齐</div>
<div class="text-right"> 右对齐</div>
<div class="text-left "> 左对齐</div>
<div class="text-justify "> 字体对齐</div>
<div class="text-nowrap "> 不换行</div>
改变大小写
通过这几个类可以改变文本的大小写。
<p class="text-lowercase">Lowercased text. 字母小写</p>
<p class="text-uppercase">Uppercased text. 字母大写</p>
<p class="text-capitalize">Capitalized text. 首字母大写</p>
缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的<abbr>元素的增强样式。一般会在 abbr 标签元素中的 title 属性中定义对缩写词的完整描述。定义 title 属性后，浏览器会在元素下方添加一条浅色的虚线，当鼠标悬停时，会有一个“？”符号，同时还会显示 title 属性所提供的内容。
<abbr title="attribute">attr</abbr>
首字母缩略语
为 abbr 元素添加 .initialism 类，可以得到稍小一些的文本，文本会缩小到原来大小的 90%，并且字母全部以大写显示。
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
引用
在你的文档中引用其他来源的内容。
1. 默认样式的引用
将任何HTML元素包裹在<blockquote>中即可表现为引用样式。
<blockquote>
<p>将任何 HTML 元素包裹在blockquote 中即可表现为引用样式</p>
</blockquote>
2. 多种引用样式
第一种样式 命名来源
添加<footer>用于标明引用来源。来源的名称可以包裹进<cite>标签中。
<blockquote>
<p>将任何 HTML 元素包裹在blockquote 中即可表现为引用样式</p>
<footer>该语句出自 <cite title="Source Title">文章来源</cite></footer>
</blockquote>
第二种样式 另一种展示风格
通过赋予.blockquote-reverse类可以让引用呈现内容右对齐的效果。
<blockquote class="blockquote-reverse">
<p>将任何 HTML 元素包裹在blockquote 中即可表现为引用样式</p>
<footer>该语句出自 <cite title="Source Title">文章来源</cite></footer>
</blockquote>
列表
1. 无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
没有添加了list-unstyled这个类：
<ul>
<li>移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）</li>
<li>这是针对直接子元素的</li>
<li>也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。</li>
</ul>
添加了list-unstyled这个类：
<ul class="list-unstyled">
<li>移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）</li>
<li>这是针对直接子元素的</li>
<li>也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。</li>
</ul>
2. 内联列表
类.list-inline通过设置display: inline-block;并添加少量的内补（padding），将所有元素放置于同一行，并且移除了默认的list-style样式和左侧外边距。
没有添加了list-inline这个类：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
</ul>
添加了list-inline这个类：
<ul class="list-inline">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
</ul>
3. 描述
带有描述的短语列表。
没有添加了dl-horizontal这个类：
<dl>
<dt>标题信息</dt>
<dd>详细标题信息详细标题信息</dd>
</dl>
<dl>
<dt>标题信息</dt>
<dd>详细标题信息详细标题信息</dd>
</dl>
添加了dl-horizontal这个类：
<dl class="dl-horizontal">
<dt>标题信息</dt>
<dd>详细标题信息详细标题信息</dd>
</dl>
<dl>
<dt>标题信息</dt>
<dd>详细标题信息详细标题信息</dd>
</dl>
就先分享到这里!! 😄 后续继续更新!!
