针对 HTML 的特定元素重置样式,以便 Bootstrap 能在各种浏览器下表现一致。
Bootstrap 重置了大部分基本的HTML元素的视觉效果,不过这只能通过调用特定的 class 来实现,比如 <table>
的样式,需要使用 .table
, .table-bordered
类来实现其重置后统一的视觉效果。
以下是为什么我们要重置的原因:
<html>
和 <body>
已被重置为一些预设的值. 具体有这些改变:
box-sizing
, 以及在 border-box
设置 *::before
*::after
。 这可确保由于填充或边框而不会超出声明的宽度。
<html>
上没有声明基本字体大小,但假定为16px(浏览器默认值)。 font-size
应用于 <body>
,以便通过媒体查询轻松响应类型扩展,同时尊重用户偏好并确保更易于访问的方法。<body>
还设置全局字体系列,行高和文本对齐。 稍后由某些表单元素继承,以防止字体不一致。<body>
具有声明的背景颜色,默认为#fff。目前放弃了针对浏览器字体的覆盖,因为不同系统的可用字体不一样,因此由浏览器的默认设置来决定应该能获得最佳的显示效果。
$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. Bootstrap heading |
|
h2. Bootstrap heading |
|
h3. Bootstrap heading |
|
h4. Bootstrap heading |
|
h5. Bootstrap heading |
|
h6. Bootstrap heading |
刪除全部列表 <ul>
、<ol>
和 <dl>
中的 margin-top
,並设置为 margin-bottom: 1rem
。嵌套列表沒有 margin-bottom
。
为了更简单的样式,清晰的层次结构和更好的间距,描述列表重置了边距。 <dd>
将margin-left
重置为0并添加 margin-bottom: .5rem
。 <dt>
是粗体。
重置 <pre>
元素以移除其 margin-top
并使用 rem 单位作为其 margin-bottom
。
.example-element { margin-bottom: 1rem; }
表格略微调整为样式<caption>
,折叠边框,并确保始终保持一致的文本对齐。 text-align
类附带的边框,填充等更改。
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 |
已重置动各种表单元素以实现更简单的基本样式。 以下是一些最显着的变化:
<fieldset>
没有边框,填充或边距以便包覆独立输入和成组输入。<legend>
和fieldsets一样,<legend>
已经被重新定义样式以便显示为类型的标题。<label>
设定被为 display: inline-block
以便让 margin
应用。<input>
,<select>
,<textarea>
s,和<button>
,重置删除了他们的 margin
并同样设定line-height: inherit
。<textarea>
修改为仅可调整垂直尺寸,因为调整水平宽度通常“破坏”了页面配置。下面将说明这些变化以及更多变化。
更新<address>
元素以将浏览器默认字体样式从斜体重置为正常。 line-height
现在也被继承,并且 margin-bottom: 1rem
已被添加。 <address>
用于显示联系信息。 通过使用 <br>
结束行来保留格式。
Blockquotes的预设margin
为1em 40px
,因此我们将其重新设定为0 0 1rem
以便更符合其他元素的设定。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
该 <abbr>
元素接收基本样式,使其在段落文本中脱颖而出。
cursor
摘要上的默认值是text
,因此我们将其重置为pointer
通过单击来传达元素可以与之交互。
More info about the details.
Here are even more details about the details.
[hidden]
属性HTML5添加了一个名为 [hidden]
的新全局属性,display: none
默认情况下将其设置为样式。借用PureCSS的一个想法,我们通过[hidden] { display: none !important; }
帮助防止display
被意外覆盖来改进这个默认值。虽然[hidden]
在IE10本身不支持,但CSS中的显式声明可以解决这个问题。
<input type="text" hidden>
[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 类来代替。