©
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
重新启动,单个文件中特定于元素的CSS更改集合,kickstart Bootstrap提供优雅、一致且简单的基础来构建环境。
重新启动基于Normalize构建,仅使用元素选择器提供许多有些自以为是风格的HTML元素。额外的样式只能通过类来完成。例如,我们重新启动一些<table>
样式以获得更简单的基准,然后再提供.table
,.table-bordered
等等。
以下是我们的指南和选择重新启动时要重写的内容的原因:
更新一些浏览器默认值以使用rem
s而不是em
s来表示可伸缩组件间距。
避免margin-top
。垂直边距可能会崩溃,产生意想不到的结果。更重要的是,单一的方向margin
是一个更简单的心理模型。
为了便于跨设备大小缩放,块元素应该使用rem
s来表示margin
s。
尽可能保持与font
相关属性的声明最小化inherit
。
在<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
。
默认的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。
所有标题元素 - 例如<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- <ul>
,<ol>
和<dl>
-具备其margin-top
删除和margin-bottom: 1rem
。嵌套列表没有margin-bottom
。
为了更简单的样式,清晰的层次结构和更好的间距,说明列表已更新margin
。<dd>
重设margin-left
到0
并添加margin-bottom: .5rem
。其中<dt>
s是粗体的。
该<pre>
元素被重置为删除它margin-top
并为其使用rem
单位margin-bottom
。
表格略微调整为样式<caption>
,折叠边界,并确保始终一致text-align
。对.table
班级附加更改,边框,填充等。
各种表单元素已被重新引导,以实现更简单的基本样式。以下是一些最显着的变化:
<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被修改为只能在垂直方向调整大小,因为水平调整大小通常会“破坏”页面布局。
下面将演示这些更改以及更多内容。
该<address>
元素被更新重置浏览器默认font-style
的italic
到normal
。line-height
现在也被继承了,并且margin-bottom: 1rem
已被添加。<address>
s是为了提供最近的祖先(或整个工作机构)的联系信息。通过结束行来保留格式<br>
。
margin
blockquotes上的默认值是1em 40px
,所以我们重置它以0 0 1rem
使其与其他元素更加一致。
该<abbr>
元件接收基本样式以使它在段落文本之间脱颖而出。
[hidden]
attributeHTML5添加了一个名为的新的全局属性[hidden]
,display: none
默认情况下它的样式是。从PureCSS借鉴一个想法,我们通过改进默认设置[hidden] { display: none !important; }
来帮助防止它display
被意外覆盖。尽管[hidden]
IE10本身并不支持,但CSS中的显式声明解决了这个问题。
<input type="text" hidden>
[hidden]
与jQuery $(...).hide()
和$(...).show()
方法不兼容。因此,我们目前并不特别赞同[hidden]
用于管理display
元素的其他技术。
要仅仅切换元素的可见性,意味着它display
没有被修改,并且元素仍然可以影响文档的流动,请.invisible
改为使用该类。
传统上,触摸屏设备上的浏览器在“轻敲”(即手指/触笔从屏幕上抬起)和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:manipulation
CSS属性。该属性实质上禁用了这些元素的双击功能,消除了300ms的延迟。
对于旧的iOS版本(9.3之前版本),建议的方法是使用其他脚本(如FastClick)明确解决延迟问题。
有关更多详细信息,请参阅兼容性表以抑制触摸屏交互的300毫秒延迟。
© 2011–2017 Twitter, Inc.
© 2011–2017 The Bootstrap Authors
根据MIT许可证授权的代码。
根据知识共享署名许可证v3.0获得许可的文档。