初始化与CSS重置

初始化与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值。

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

pre预先格式化文本

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

表格

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

Forms表单

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

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

其它杂项

Address地址控件

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

Blockquote引用块效果

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

addr内联元素

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

概要

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类来代替。