文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

重置 | Reboot

重新启动，单个文件中特定于元素的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获得许可的文档。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

扫码关注腾讯云开发者

领取腾讯云代金券