bootstrap内容部分API解读（1）

1.重置

（1）概念

（2）理由及方式

（3）重置内容

2.排版

（1）标题

（2）引言

（3）内联文本

（4）缩写

（5）引用和署名

（6）对齐

（7）无特效列表

1.重置

（1）概念

针对HTML的特定元素重置样式，以便于Bootstrap能在各种浏览器下表现一致。

（2）理由及方式

重置浏览器默认值，使用rem作为尺寸规格单位，代替em用于指定可缩放的组件的间隔与缝隙
最大化避免使用margin-top，防止使用它造成的垂直外排版（边距）混乱所造成的意想不到效果。更重要的是，一个单一方向的，margin是一个简单的构思模型。
为了易于跨设备缩放，块级元素必须使用rem作为margin的单位
保持font相关属性最小的声明，尽可能地使用inherit（可继承）属性，不影响容器溢出。

（3）重置内容

I.页面默认值

全局性地将每一个元素（包括::after,::before）的box-sizing属性设置为border-box，以确保元素自定义的宽度不会因为border或者padding超出声明的宽度；
<html>上没有声明基本字体大小，但假定为16px（浏览器默认值）. font-size应用于<body>,以便通过媒体查询轻松响应类型扩展，同时尊重用户偏好并确保更易于访问的方法
<body>元素被赋予了一个全局性的font-size和line-height，其下面的诸多表单元素也继承此属性，以防止字体大小错位冲突
<body>的background-color的默认值为#fff

II.本地字体属性

III.标题和段落

所有的标题和段落元素都被重置，系统移除它们的margin-top，标题添加了margin-bottom: .5rem，段落添加了margin-bottom: 1rem.

IV.列表

删除<ul>,<ol>,<dl>中的margin-top，设置为margin-bottom: 1rem，嵌套列表没有margin-bottom
<dd>的margin-top重置为0，添加margin-bottom: .5rem
<dt>是粗体

V.表格

VI.form表单

<fieldset>没有边框,填充或外边距属性,所以它们可以轻松地作用单一的输入框或者输入框组的放入容器中使用
<lengend>和<fieldset>字段集一样,也被重新设计过,显示为不同种类的标题
<label>加上了display: inline-block属性,从而可以被用户赋予margin属性进行布局调用
<input>,<select>,<textarea>,<button>重置删除了它们的margin,并且设置了inline-height: inherit
<textarea>被修改为只能竖直方向上调整大小,因为水平方向上调整大小经常会"破坏"页面布局

IV.pre预先格式化文本

<pre>标签可定义预格式化文本,被包围在<pre>标签元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。bootstrap重置了<pre>元素,移除了它的margin-top属性并用rem作为margin-bottom的单位

2.排版

（1）标题

兼容所有HTML标题集,包括从<h1>到<h6>的六种标题展现，类名h1-h6

<div class="caption mr-3"><h1>这是一个一级标题</h1><h2>这是一个二级标题</h2><h3>这是一个三级标题</h3><h4>这是一个四级标题</h4><h5>这是一个五级标题</h5><h6>这是一个六级标题</h6>
</div>
<p class="h1">这是一个段落标签+h1类名的标题</p>
<p class="h2">这是一个段落标签+h2类名的标题</p>
<p class="h3">这是一个段落标签+h3类名的标题</p>
<p class="h4">这是一个段落标签+h4类名的标题</p>
<p class="h5">这是一个段落标签+h5类名的标题</p>
<p class="h6">这是一个段落标签+h6类名的标题</p>

定制标题样式，标签<small>

<h3 class="mt-3">乌合之众<small class="text-muted">大众心理学</small>
</h3>

超大标题，类名display-1/2/3/4

<h1 class="display-1">红玫瑰与白玫瑰</h1>
<h1 class="display-2">红玫瑰与白玫瑰</h1>
<h1 class="display-3">红玫瑰与白玫瑰</h1>
<h1 class="display-4">红玫瑰与白玫瑰</h1>

（2）引言

一般代表段落里面特殊处理文本,类名lead

<div class="h4">引言</div>
<div class="lead">市场是一个不断演化并进行适应性调整的体系，正如达尔文进化论所说，适者生存，面对经济复杂性的指数级增长，要想在残酷的商业竞争中获取成功，《财富的起源》为你审视经济、掌控财富提供了全新的视角与方法。
</div>

（3）内联文本

让内联文本里文本属性变换

<div class="mt-5"><p>You can use the mark tag to <mark>highlight</mark> text.</p><p><span class="mark">You can use .mark</span>instead of mark</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><small>This line of text is meant to be treated as fine print.</small></p><p class="small">You can use .small instead of small</p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p>
</div>

（4）缩写

让鼠标移入缩写文本里面显示全称

<p><abbr title="attrbitue">attr</abbr></p><p><abbr title="HypperText Markup Language" class="initialism">HTML</abbr></p>

（5）引用和署名

用于引用文档中其他来源的内容块。将任何HTML包含在<blockquote class="blockquote">里作为引用，在 <footer class="blockquote-footer"> 里添加需要署名的内容。并在 <cite> 里添加作者。

<blockquote class="blockquote"><p>你知道吗，人在难过的时候就会爱上日落</p><footer class="blockquote-footer">来自<cite>《小王子》</cite></footer>
</blockquote>

（6）对齐

<p class="text-left">星星那么亮，是不是为了让每个人终有一天能回到自己的星球？</p>
<p class="text-center">星星那么亮，是不是为了让每个人终有一天能回到自己的星球？</p>
<p class="text-right">星星那么亮，是不是为了让每个人终有一天能回到自己的星球？</p>

（7）无特效列表

在ul（ol）上使用.list-unstyled可以删除列表项目上默认的list-style以及左外边距（只针对直接子元素），这只生效于在直接子列表项目上，不影响嵌套的子列表

<div class="list-unstyled"><li>《财富的起源》</li><li><ul class="list-unstyled"><li>《三体》</li></ul></li>
</div>

（8）行内列表

删除列表的项目符号并使用两个类的组合应用一些微小的边距，使用 .list-inline和.list-inline-item 来实现。

<div class="list-inline"><li class="list-inline-item">《三体》</li><li class="list-inline-item">《小王子》</li><li class="list-inline-item">《财富的起源》</li>
</div>

（9）超出内容省略

<div class="contianer-fluid"><dl class="row"><dt class="col-sm-3">《小王子》</dt><dd class="col-sm-9">看东西只有用心才看得清楚。重要的东西眼睛是看不见的</dd><dt class="col-sm-3">《人间失格》</dt><dd class="col-sm-9">懦夫连幸福降临都害怕，触到棉花都受伤，当然也会为幸福所伤</dd><!-- text-truncate 让超出内容省略 --><dt class="col-sm-3 text-truncate">《我们仨》《我们仨》《我们仨》《我们仨》《我们仨》《我们仨》《我们仨》《我们仨》</dt><dd class="col-sm-9">他的双眼皮很美</dd></dl>
</div>