初始化与CSS重置

Bootstrap致力于提供一个简洁、优雅的的基础，以此作为立足点。我们使用Reboot，把一系列元素特征的CSS修改放在一个文件里。

路线方针

系统重置建立新的规范化，只允许元素选择器向各个HTML元素提供了自有的风格，额外的样式只通过明确的.class类来规范。例如，我们重置了一系列<table>样式作为简单的基准，然后提供了.table、 .table-bordered等样式类，从而最小限定的定义、最大程序兼容、最多场景可被引用。

以下是是我们在重置CSS中选择覆盖和重定义哪些元素的指导方针和理由：

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

页面默认值

为提供更好的页面展示效果，Bootstrap v4更新了<html> and <body>元素的一些属性，其中包括：

全局性地将每一个元素的box-sizing属性(包括*:before、*:after都设置为border-box-以确保DIV元素自身定义的宽度不会因为border或padding而超过。
<html>根元素没有声明font-size属性，但被假定为16px大小（这是目前Chrome等浏览器默认值)，然后在此基础上采用font-size:1rem的比例应用于<body>上，使媒体查询能够轻松的实现缩放，最大程序保障用户偏好和易于访问。
<body>元素被赋予一个全局性的font-family和 line-height，其下面的诸多表单元素也继承此属性，以防止字体大小错位冲突。
为了安全起见，<body>的background-color的默认值赋为#fff。

本地字体属性

Bootstrap 4删除了默认的Web字体（Helvetica Neue，Helvetica和Arial），并替换为“本地OS字体引用机制”，以便在每个设备和操作系统上实现最佳文本呈现，参阅关于本地字体引用文章了解更多。

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

这样font-family适用于<body>，并被全局并自动继承。切换全局font-family，只要更新$font-family-base和重新编译Bootstrap即可。

标题和段落

所有标题和段落元素(如说<h1>以及<p>都被重置，系统移除它们的上外边距margin-top定义，标题添加外边距为margin-bottom: .5rem，段落元素<p>添加了外边距margin-bottom:1rem以形成简洁行距。

Heading	Example
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

列表

移除所有的列表元素(<ul>、<ol>、 and <dl>）的外边距margin-top，并设置为margin-bottom: 1rem，被嵌套的子列表没margin-bottom值。

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

为了得到更简单的样式、清晰的等级以及更好的间距，描述列表code class="highlighter-rouge"><dd>有一个更优级别的margin属性定义；其margin-left被重置为0、并添加margin-bottom: .5rem值；另一方面<dt>的字体是粗体。

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

`pre`预先格式化文本

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

.example-element {
  margin-bottom: 1rem;
}

表格

微调了表格的样式，样式化了<caption>，且确保text-align属性一致。与跟边框、内填充有关的细节，将在.table表格一章门讲解。

This is an example table, and this is its caption to describe the contents.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

Forms表单

Bootstrap重量置了多种表单元素，得到简化的基本样式，使之简洁易用，显著变化表现在：

<fieldset>去除了边框、内填充、外边距属性，所以它们可以轻松地用作单一的输入框或者输入框组的放入容器中使用。
<legend>和fieldset字段集一样，也已被重新设计过，显示为不同种类的标题。
<label>加上了 display: inline-block属性，从而可以被用户赋予 margin 属性进行布局调用。
<input>、 <select>、 <textarea>s、 <button>基本本来都被规范化处理了，同时重置移除了它们的margin，并且设置了inline-height: inherit属性。
<textarea>被修改为只能竖直方向上调整大小，因为水平方向上调整大小经常会“破坏”页面布局。

可以从下面方示例控件品味细节：

Example legend

Example input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example temporal

Example output 100

其它杂项

Address地址控件

BootStrap更新了<address>元素初始属性，重置了浏览器默认的font-style，由italic改为normal、line-height同样是继承来的，并添加了margin-bottom: 1rem。<address>是为最靠近根元素（或整个正文）提供联系信息。用
结束行可保持格式。

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Blockquote引用块效果

blockquote引用块默认的margin是1em 40px，而BootStrap把它重置为0 0 1rem，使其与其它元素更一致，下方示例：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

addr内联元素

<abbr> 内联元素接受基本的样式，使其在段落文本中突出。

Nulla attr vitae elit libero, a pharetra augue.

概要

cursor 摘要上的默认值是 text，所以我们重置，以 pointer 通过单击它来传达该元素可以进行交互。

一些细节

更多关于细节的信息。

更多细节

这里有更详细的细节。

HTML5 的`[hidden]` 属性

HTML5标准中增加了一个全新的 [hidden]标签, 它的默认值被赋予为 display: none，借鉴PureCSS的思路，我们将它重定义为[hidden] { display: none !important; } ,以防止它的 display 值被意外覆盖，即使IE10不支持 [hidden] 属性，但通过引用BootStrap的引入明确解决了此问题。

<input type="text" hidden>

jQuery冲突

[hidden]与jQuery的两个方法不兼容，分别是：$(...).hide()、$(...).show()，目前还没有特别好的[hidden]其他管理display元素的技术。

仅仅切换元素的可见性，这意味着其display不被修改和元素还会影响文档的流程，使用 .invisible类来代替。

点击触摸的延迟优化

传统上，触摸屏设备上的浏览器在“点击”结束（手指/手写笔从屏幕提起的那一刻）和click事件 被触发之间延迟大约300ms 。这种延迟对于这些浏览器正确处理“双击放大”手势是必要的，而不会在第一个“点击”之后过早触发动作或链接，但它可能会使您的网站感到轻微迟钝和无响应。

大多数移动浏览器会自动优化远程使用该width=device-width属性的站点的300ms延迟，作为其响应元标记的一部分（以及禁用缩放的站点，例如user-scalable=no，尽管这种做法对于可访问性和可用性原因非常不鼓励）。这里最大的例外是Windows Phone 8.1上的IE11和iOS 9.3之前的 iOS Safari（以及任何其他基于iOS WebView的浏览器）。

在触摸式笔记本电脑/桌面设备上，IE11和Microsoft Edge目前是唯一具有“双击缩放”功能的浏览器。由于响应式元标记被所有桌面浏览器忽略，所以使用width=device-width将对这里的300ms延迟没有影响。

为了在IE11和桌面上的Microsoft Edge以及Windows Phone 8.1上的IE11中解决此问题，Bootstrap显式地在所有交互式元素（如按钮和链接）上使用touch-action:manipulation CSS 私有属性。该属性基本上禁用了这些元素的双击功能，从而消除了300ms的延迟。

在旧的iOS版本（9.3之前）的情况下，建议的方法是使用其他脚本，如FastClick来明确解决延迟。

更多信息请参阅触摸屏交互300秒延迟问题。