重启

重新启动,单个文件中特定于元素的CSS更改的集合,使用kickstart Bootstrap提供一个优雅,一致且简单的基准。

进路

重新启动建立在Normalize的基础上,仅使用元素选择器即可为许多HTML元素提供一些自以为是的样式。其他样式仅对类进行。例如,我们重新启动一些 <table> 样式以简化基线,并在以后提供 .table,.table-bordered , 和更多。

以下是我们的指南以及选择在重新引导中覆盖的内容的原因：

更新一些浏览器默认值以使用 rem 而不是 em 表示可扩展的组件间距。
避免 margin-top 。垂直边距可能会崩溃,从而产生意外结果。但更重要的是, margin 是一个更简单的心理模型。
为了更轻松地扩展设备尺寸,应使用块元素 rem 为 margin s.
保留声明 font 相关的属性最小化,使用 inherit 只要有可能。

页面默认值

The <html> and <body> 元素已更新以提供更好的页面范围默认值。进一步来说：

The box-sizing 全局设置在每个元素上,包括 *::before and *::after , to border-box 。这样可以确保不会由于填充或边框而超出元素声明的宽度。
没有基础 font-size 在 <html> 但是 16px 被假定（浏览器默认）。 font-size: 1rem 适用于 <body> 通过媒体查询实现轻松响应的类型缩放,同时尊重用户的喜好并确保更易于访问的方法。
The <body> 也设定了全球 font-family,line-height ,和 text-align 。稍后,某些表单元素会继承此格式,以防止字体不一致。
为了安全起见, <body> 有一个声明 background-color ,默认为 #fff.

本机字体堆栈

默认的Web字体（Helvetica Neue,Helvetica和Arial）已删除到Bootstrap 4中,并替换为“本机字体堆栈”,以在每个设备和OS上实现最佳文本呈现。进一步了解本机字体堆栈 粉碎杂志 文章 .

This font-family 适用于 <body> 并在整个Bootstrap中自动全局继承。切换全局 font-family ,更新 $font-family-base 并重新编译Bootstrap。

标题和段落

所有标题元素,例如 <h1> —and <p> 重置为拥有他们的 margin-top 除去。标题有 margin-bottom: .5rem 添加和段落 margin-bottom: 1rem 便于间距。

标题	例
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

清单

所有清单 <ul>,<ol> ,和 <dl> -有他们的 margin-top 删除和一个 margin-bottom: 1rem 。嵌套列表没有 margin-bottom.

Lorem ipsum dolor坐着
保守的精英
Massa的整数痣
Facilisis在prenis中的aliquet
Nulla volutpat aliquam velit
- 豆
- 普氏粉菌
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
紫红色porta lacus fringilla vel
Aenean Sit Amet Erat Nunc
Eget Porttitor lorem

Lorem ipsum dolor坐着
保守的精英
Massa的整数痣
Facilisis在prenis中的aliquet
Nulla volutpat aliquam velit
紫红色porta lacus fringilla vel
Aenean Sit Amet Erat Nunc
Eget Porttitor lorem

<ul>
<li> Lorem ipsum dolor坐着 </li>
<li> 保守的精英 </li>
<li> Massa的整数痣 </li>
<li> Facilisis在prenis中的aliquet </li>
<li> Nulla volutpat aliquam velit <ul>
<li> 豆 </li>
<li> 普氏粉菌 </li>
<li> Vestibulum laoreet porttitor sem </li>
<li> Ac tristique libero volutpat at </li>
</ul>
</li>
<li> 紫红色porta lacus fringilla vel </li>
<li> Aenean Sit Amet Erat Nunc </li>
<li> Eget Porttitor lorem </li>
</ul>
<ol>
<li> Lorem ipsum dolor坐着 </li>
<li> 保守的精英 </li>
<li> Massa的整数痣 </li>
<li> Facilisis在prenis中的aliquet </li>
<li> Nulla volutpat aliquam velit </li>
<li> 紫红色porta lacus fringilla vel </li>
<li> Aenean Sit Amet Erat Nunc </li>
<li> Eget Porttitor lorem </li>
</ol>

为了简化样式,清晰的层次结构和更好的间距,更新了说明列表 margin s. <dd> 重置 margin-left to 0 并添加 margin-bottom: .5rem.<dt> 是的粗体 .

说明清单: 描述列表非常适合定义术语。
Euismod: Vestibulum id ligula porta felis euismod semper eget拉丁恋物癖。; Donec id elit non mi porta gravida在eget metus。
Malesuada门: Etiam porta sem malesuada magna mollis euismod。

<dl>
<dt> 说明清单 </dt>
<dd> 描述列表非常适合定义术语。 </dd>
<dt> Euismod </dt>
<dd> Vestibulum id ligula porta felis euismod semper eget拉丁恋物癖。 </dd>
<dd> Donec id elit non mi porta gravida在eget metus。 </dd>
<dt> Malesuada门 </dt>
<dd> Etiam porta sem malesuada magna mollis euismod。 </dd>
</dl>

预格式化文字

The <pre> 重置元素以删除其 margin-top 并使用 rem 其单位 margin-bottom.

<pre>}</pre>

表

桌子略有调整以适应风格 <caption> ,折叠边框并确保一致 text-align 始终。边框,填充等的其他更改也随之而来 the .table 类 .

这是一个示例表,这是描述内容的标题。
表格标题	表格标题	表格标题	表格标题
表格单元格	表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格	表格单元格
表格单元格	表格单元格	表格单元格	表格单元格

<table>
<caption> 这是一个示例表,这是描述内容的标题。 </caption>
<thead>
<tr>
<th> 表格标题 </th>
<th> 表格标题 </th>
<th> 表格标题 </th>
<th> 表格标题 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 表格单元格 </td>
<td> 表格单元格 </td>
<td> 表格单元格 </td>
<td> 表格单元格 </td>
</tr>
<tr>
<td> 表格单元格 </td>
<td> 表格单元格 </td>
<td> 表格单元格 </td>
<td> 表格单元格 </td>
</tr>
<tr>
<td> 表格单元格 </td>
<td> 表格单元格 </td>
<td> 表格单元格 </td>
<td> 表格单元格 </td>
</tr>
</tbody>
</table>

表格标题

表格单元格

形式

重新引导了各种表单元素,以简化基本样式。以下是一些最值得注意的更改：

<fieldset> s没有边界,填充或边距,因此可以轻松用作单个输入或输入组的包装。
<legend> 与字段集一样,s也已重新设置样式以显示为各种标题。
<label> 设置为 display: inline-block 允许 margin 要施加。
<input> s, <select> s, <textarea> s和 <button> s通常由Normalize解决,但是Reboot会删除它们 margin 和集 line-height: inherit 也一样
<textarea> 将s修改为只能垂直调整大小,因为水平调整大小通常会“破坏”页面布局。
<button> 和 <input> 按钮元素有 cursor: pointer when :not(:disabled).

这些变化以及更多变化将在下面进行演示。

图例示例

输入示例

示例选择

选中此复选框

选项一是选项二是另外一些东西,要证明这些精美的表单控件的包装也很长。选项三已禁用

示例文本区域

日期示例

时间示例

示例输出 100

<fieldset>
<legend> 图例示例 </legend>
<p>
<label for="input"> 输入示例 </label>
<input id="input" placeholder="Example input" type="text"/>
</p>
<p>
<label for="select"> 示例选择 </label>
<select id="select">
<option value=""> 选择... </option>
<optgroup label="Option group 1">
<option value=""> 选项1 </option>
<option value=""> 选项2 </option>
<option value=""> 选项3 </option>
</optgroup>
<optgroup label="Option group 2">
<option value=""> 选项4 </option>
<option value=""> 选项5 </option>
<option value=""> 选项6 </option>
</optgroup>
</select>
</p>
<p>
<label>
<input type="checkbox" value=""/> 选中此复选框 </label>
</p>
<p>
<label>
<input checked="" id="optionsRadios1" name="optionsRadios" type="radio" value="option1"/> 选项一是 </label>
<label>
<input id="optionsRadios2" name="optionsRadios" type="radio" value="option2"/> 选项二是另外一些东西,要证明这些精美的表单控件的包装也很长。 </label>
<label>
<input disabled="" id="optionsRadios3" name="optionsRadios" type="radio" value="option3"/> 选项三已禁用 </label>
</p>
<p>
<label for="textarea"> 示例文本区域 </label>
<textarea id="textarea" rows="3"></textarea>
</p>
<p>
<label for="date"> 日期示例 </label>
<input id="date" type="date"/>
</p>
<p>
<label for="time"> 时间示例 </label>
<input id="time" type="time"/>
</p>
<p>
<label for="output"> 示例输出 </label>
<output id="output" name="result"> 100 </output>
</p>
<p>
<button type="submit"> 按钮提交 </button>
<input type="submit" value="Input submit button"/>
<input type="reset" value="Input reset button"/>
<input type="button" value="Input button"/>
</p>
<p>
<button disabled="" type="submit"> 按钮提交 </button>
<input disabled="" type="submit" value="Input submit button"/>
<input disabled="" type="reset" value="Input reset button"/>
<input disabled="" type="button" value="Input button"/>
</p>
</fieldset>

按钮上的指针

重新启动包括针对 role="button" 将默认光标更改为 pointer 。将此属性添加到元素以帮助指示元素是交互式的。该角色不是必需的 <button> 拥有自己的元素 cursor 更改。

Non-button element button

<span role="button" tabindex="0">Non-button element button</span>

杂项元素

地址

The <address> 元素已更新以重置浏览器默认值 font-style from italic to normal.line-height 现在也被继承了 margin-bottom: 1rem 已添加。 <address> 用于显示最接近祖先（或整个工作范围）的联系信息。通过使用以下行结尾保留格式 <br>.

Twitter,Inc.
市场街1355号套房900
旧金山,加利福尼亚州94103
P: （123）456-7890

全名
first.last@example.com

<address>
<strong> Twitter,Inc. </strong><br/> 市场街1355号套房900 <br/> 旧金山,加利福尼亚州94103 <br/>
<abbr title="Phone"> P: </abbr> （123）456-7890 </address>
<address>
<strong> 全名 </strong><br/>
<a href="mailto:first.last@example.com"> first.last@example.com </a>
</address>

大段引用

默认值 margin 在blockquotes上是 1em 40px ,因此我们将其重置为 0 0 1rem 为了与其他元素更一致。

文字填充文字填充文字填充文字填充整数posere删除前注。

某人在资料标题

<blockquote class="blockquote">
<p> 文字填充文字填充文字填充文字填充 整数posere删除前注。 </p>
<footer> 某人在 <cite title="Source Title"> 资料标题 </cite></footer>
</blockquote>

内联元素

The <abbr> 元素接受基本样式以使其在段落文本中脱颖而出。

努拉 attr vitae elit libero,淡紫色。

 努拉 <abbr title="attribute"> attr </abbr> vitae elit libero,淡紫色。

摘要

默认值 cursor 总结是 text ,因此我们将其重置为 pointer 表示可以通过单击来与该元素进行交互。

一些细节

有关详细信息的更多信息。

更多细节

这里有更多关于细节的细节。

<details>
<summary> 一些细节 </summary>
<p> 有关详细信息的更多信息。 </p>
</details>
<details open="">
<summary> 更多细节 </summary>
<p> 这里有更多关于细节的细节。 </p>
</details>

HTML5 `[hidden]` 属性

HTML5添加一个名为的新全局属性 [hidden] ,其样式为 display: none 默认情况下。借来一个想法纯CSS ,我们通过 [hidden] { display: none !important; } 帮助防止它 display 避免被意外覆盖。而 [hidden] IE10本身不支持它,因此CSS中的显式声明可以解决该问题。

jQuery不兼容

[hidden] 与jQuery的不兼容 $(...).hide() and $(...).show() 方法。因此,我们目前不特别认可 [hidden] 超过其他技术来管理 display 元素。

仅切换元素的可见性,即元素的可见性 display 未修改且该元素仍会影响文档的流程,请使用 the .invisible 类代替。

Bootstrap/docs/4.5/content/reboot

目录

重启

进路

页面默认值

本机字体堆栈

标题和段落

清单

预格式化文字

表

形式

按钮上的指针

杂项元素

地址

大段引用

内联元素

摘要

HTML5 `[hidden]` 属性

jQuery不兼容

Bootstrap/docs/4.5/content/reboot

重启

进路

页面默认值

本机字体堆栈

标题和段落

清单

预格式化文字

表

形式

按钮上的指针

杂项元素

地址

大段引用

内联元素

摘要

HTML5 [hidden] 属性

jQuery不兼容

HTML5 `[hidden]` 属性