目录 搜索
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
文字

重新启动,单个文件中特定于元素的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-familyline-heighttext-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-left0并添加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-styleitalicnormalline-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获得许可的文档。

上一篇: 下一篇: