重置

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

方式

Bootstrap 重置了大部分基本的HTML元素的视觉效果,不过这只能通过调用特定的 class 来实现,比如 <table> 的样式,需要使用 .table, .table-bordered 类来实现其重置后统一的视觉效果。

以下是为什么我们要重置的原因:

默认的效果

<html><body> 已被重置为一些预设的值. 具体有这些改变:

浏览器字体

目前放弃了针对浏览器字体的覆盖,因为不同系统的可用字体不一样,因此由浏览器的默认设置来决定应该能获得最佳的显示效果。

$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。

标题和段落

重置所有标题元素 - 例如,<h1> - 和 <p> 以删除其边距顶部。 标题添加了 margin-bottom: .5rem ,段落则是添加了 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><dl> 中的 margin-top,並设置为 margin-bottom: 1rem。嵌套列表沒有 margin-bottom

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

为了更简单的样式,清晰的层次结构和更好的间距,描述列表重置了边距。 <dd>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> 元素以移除其 margin-top 并使用 rem 单位作为其 margin-bottom

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

表格

表格略微调整为样式<caption>,折叠边框,并确保始终保持一致的文本对齐。 text-align 类附带的边框,填充等更改。

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

表单

已重置动各种表单元素以实现更简单的基本样式。 以下是一些最显着的变化:

下面将说明这些变化以及更多变化。

Example legend

100

其他调整的HTML元素

Address

更新<address>元素以将浏览器默认字体样式从斜体重置为正常。 line-height 现在也被继承,并且 margin-bottom: 1rem 已被添加。 <address> 用于显示联系信息。 通过使用 <br> 结束行来保留格式。

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

引用段落

Blockquotes的预设margin1em 40px,因此我们将其重新设定为0 0 1rem以便更符合其他元素的设定。

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

Someone famous in Source Title

内联元素

<abbr> 元素接收基本样式,使其在段落文本中脱颖而出。

Nulla attr vitae elit libero, a pharetra augue.

摘要

cursor 摘要上的默认值是text,因此我们将其重置为pointer通过单击来传达元素可以与之交互。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 [hidden] 属性

HTML5添加了一个名为 [hidden] 的新全局属性display: none默认情况下将其设置为样式。借用PureCSS的一个想法,我们通过[hidden] { display: none !important; }帮助防止display被意外覆盖来改进这个默认值。虽然[hidden]在IE10本身不支持,但CSS中的显式声明可以解决这个问题。

<input type="text" hidden>
jQuery的不兼容问题

[hidden]与jQuery $(...).hide()$(...).show()方法不兼容。因此,我们目前并不特别支持[hidden]管理display

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

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