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