©
本文檔使用 php中文網手册 發布
重新启动，单个文件中特定于元素的CSS更改集合，kickstart Bootstrap提供优雅、一致且简单的基础来构建环境。
Approach
重新启动基于Normalize构建，仅使用元素选择器提供许多有些自以为是风格的HTML元素。额外的样式只能通过类来完成。例如，我们重新启动一些<table>样式以获得更简单的基准，然后再提供.table，.table-bordered等等。
以下是我们的指南和选择重新启动时要重写的内容的原因：
更新一些浏览器默认值以使用
rems而不是ems来表示可伸缩组件间距。避免
margin-top。垂直边距可能会崩溃，产生意想不到的结果。更重要的是，单一的方向margin是一个更简单的心理模型。为了便于跨设备大小缩放，块元素应该使用
rems来表示margins。尽可能保持与
font相关属性的声明最小化inherit。
Page defaults
在<html>和<body>元素更新，以提供更好的页面宽度默认值。进一步来说：
将
box-sizing在全球范围内设定的每一个元素，包括*::before和*::after，来border-box。这确保了由于填充或边框而永远不会超出声明的元素宽度。没有
font-size声明基地<html>，但16px假定（浏览器默认）。通过媒体查询font-size: 1rem应用于<body>易于响应的类型缩放，同时尊重用户偏好并确保更易于访问的方法。该
<body>还设置一个全球性的font-family，line-height和text-align。稍后会被某些表单元素继承以防止字体不一致。为了安全起见，它
<body>有一个声明background-color，默认为#fff。
Native font stack
默认的Web字体（Helvetica Neue，Helvetica和Arial）已被放入Bootstrap 4中，并替换为“原生字体堆栈”，以在每个设备和操作系统上实现最佳文本呈现。阅读本Smashing杂志文章中有关原生字体堆栈的更多信息。
$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>整个Bootstrap并在全局自动继承。要切换全局font-family，请更新$font-family-base并重新编译Bootstrap。
Headings and paragraphs
所有标题元素 - 例如<h1>- <p>重置为margin-top删除。标题margin-bottom: .5rem添加了段落margin-bottom: 1rem，并且可以轻松排列。
标题 | 例 |
|---|---|
<H1> </ H1> | H1。Bootstrap标题 |
<H2> </ H2> | H2。Bootstrap标题 |
<H3> </ H3> | H3。Bootstrap标题 |
<H4> </ H4> | H4。Bootstrap标题 |
<H5> </ H5> | H5。Bootstrap标题 |
<H6> </ H6> | H6。Bootstrap标题 |
Lists
所有lists- <ul>，<ol>和<dl>-具备其margin-top删除和margin-bottom: 1rem。嵌套列表没有margin-bottom。
为了更简单的样式，清晰的层次结构和更好的间距，说明列表已更新margin。<dd>重设margin-left到0并添加margin-bottom: .5rem。其中<dt>s是粗体的。
Preformatted text
该<pre>元素被重置为删除它margin-top并为其使用rem单位margin-bottom。
Tables
表格略微调整为样式<caption>，折叠边界，并确保始终一致text-align。对.table班级附加更改，边框，填充等。
Forms
各种表单元素已被重新引导，以实现更简单的基本样式。以下是一些最显着的变化：
<fieldset>s没有边框，填充或边距，因此它们可以很容易地用作单个输入或输入组的包装。<legend>与字段集一样，它也被重新设置为显示为各种标题。<label>s被设置为display: inline-block允许margin应用。<input>s，<select>s，<textarea>s和<button>s主要通过Normalize处理，但Reboot 也会删除它们margin并设置line-height: inherit。<textarea>s被修改为只能在垂直方向调整大小，因为水平调整大小通常会“破坏”页面布局。
下面将演示这些更改以及更多内容。
Misc elements
Address
该<address>元素被更新重置浏览器默认font-style的italic到normal。line-height现在也被继承了，并且margin-bottom: 1rem已被添加。<address>s是为了提供最近的祖先（或整个工作机构）的联系信息。通过结束行来保留格式<br>。
Blockquote
marginblockquotes上的默认值是1em 40px，所以我们重置它以0 0 1rem使其与其他元素更加一致。
Inline elements
该<abbr>元件接收基本样式以使它在段落文本之间脱颖而出。
HTML5 [hidden] attribute
HTML5添加了一个名为的新的全局属性[hidden]，display: none默认情况下它的样式是。从PureCSS借鉴一个想法，我们通过改进默认设置[hidden] { display: none !important; }来帮助防止它display被意外覆盖。尽管[hidden]IE10本身并不支持，但CSS中的显式声明解决了这个问题。
<input type="text" hidden>
jQuery incompatibility
[hidden]与jQuery $(...).hide()和$(...).show()方法不兼容。因此，我们目前并不特别赞同[hidden]用于管理display元素的其他技术。
要仅仅切换元素的可见性，意味着它display没有被修改，并且元素仍然可以影响文档的流动，请.invisible改为使用该类。
Click delay optimization for touch
传统上，触摸屏设备上的浏览器在“轻敲”（即手指/触笔从屏幕上抬起）和click事件被触发的时刻之间延迟约300ms 。这种延迟对于这些浏览器正确处理“双击缩放”手势是必要的，而不会在第一次“轻敲”后过早触发操作或链接，但它可能会使您的站点感觉稍微缓慢且无响应。
大多数移动浏览器会自动优化此站点的300毫秒延迟，以便将该width=device-width媒体资源用作其响应元标记的一部分（也适用于禁用缩放功能的网站，例如user-scalable=no，尽管出于可访问性和可用性的原因，强烈建议您不要这样做）。这里最大的例外是Windows Phone 8.1上的IE11，以及iOS 9.3之前的 iOS Safari（以及任何其他基于iOS WebView的浏览器）。
在支持触摸的笔记本电脑/台式机设备上，IE11和Microsoft Edge目前是唯一具有“双击缩放”功能的浏览器。由于所有桌面浏览器width=device-width都会忽略响应式元标记，因此使用此功能对延迟300毫秒不起作用。
为了在桌面上的IE11和Microsoft Edge以及Windows Phone 8.1上的IE11中解决这个问题，Bootstrap明确地在所有交互元素（例如按钮和链接）上使用touch-action:manipulationCSS属性。该属性实质上禁用了这些元素的双击功能，消除了300ms的延迟。
对于旧的iOS版本（9.3之前版本），建议的方法是使用其他脚本（如FastClick）明确解决延迟问题。
有关更多详细信息，请参阅兼容性表以抑制触摸屏交互的300毫秒延迟。
© 2011–2017 Twitter, Inc.
© 2011–2017 The Bootstrap Authors
根据MIT许可证授权的代码。
根据知识共享署名许可证v3.0获得许可的文档。