非常教程

Bootstrap 4参考手册

内容 | Content

重置 | Reboot

重新启动,单个文件中特定于元素的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

在getbootstrap.com上打开示例

为了更简单的样式,清晰的层次结构和更好的间距,说明列表已更新margin<dd>重设margin-left0并添加margin-bottom: .5rem。其中<dt>s是粗体的

在getbootstrap.com上打开示例

Preformatted text

<pre>元素被重置为删除它margin-top并为其使用rem单位margin-bottom

在getbootstrap.com上打开示例

Tables

表格略微调整为样式<caption>,折叠边界,并确保始终一致text-align。对.table班级附加更改,边框,填充等。

在getbootstrap.com上打开示例

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被修改为只能在垂直方向调整大小,因为水平调整大小通常会“破坏”页面布局。

下面将演示这些更改以及更多内容。

在getbootstrap.com上打开示例

Misc elements

Address

<address>元素被更新重置浏览器默认font-styleitalicnormalline-height现在也被继承了,并且margin-bottom: 1rem已被添加。<address>s是为了提供最近的祖先(或整个工作机构)的联系信息。通过结束行来保留格式<br>

在getbootstrap.com上打开示例

Blockquote

marginblockquotes上的默认值是1em 40px,所以我们重置它以0 0 1rem使其与其他元素更加一致。

在getbootstrap.com上打开示例

Inline elements

<abbr>元件接收基本样式以使它在段落文本之间脱颖而出。

在getbootstrap.com上打开示例

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获得许可的文档。

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。

主页 https://getbootstrap.com/
源码 https://github.com/twbs/bootstrap
版本 4
发布版本 4.0.0-beta.2

Bootstrap 4目录

1.快速开始 | Getting started
2.组件·信息提示框 | Alerts
3.组件·徽章 | Badges
4.组件·面包屑导航 | Breadcrumb
5.组件·按钮组 | Button group
6.组件·按钮 | Buttons
7.组件·卡片 | Cards
8.组件·轮播 | Carousel
9.组件·折叠 | Collapse
10.组件·下拉菜单 | Dropdowns
11.组件·表单 | Forms
12.组件·输入框组 | Input group
13.组件·大屏幕 | Jumbotron
14.组件·列表组 | List group
15.组件·模态框 | Modal
16.组件·导航栏 | Navbar
17.组件·导航 | Navs
18.组件·分页 | Pagination
19.组件·弹出框 | Popovers
20.组件·进度条 | Progress
21.组件·滚动监听 | Scrollspy
22.组件·提示工具 | Tooltips
23.内容 | Content
24.布局 | Layout
25.迁移 | Migration
26.实用工具 | Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex(弹性)布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航(Breadcrumb)