Bootstrap 简明教程
Bootstrap - Reboot
本章将讨论 Bootstrap 重置。重置用于重置特定元素的所有样式。
This chapter will discuss about Bootstrap reboot. Reboot is used to reset all the styles of a particular element.
Approach
重置样式使用仅元素选择器来对 HTML 元素应用有主见的样式。额外的样式仅使用类来完成。例如，重置一些 <table> 样式，然后包括类 .table 、 .table-bordered 等。
Reboot styles HTML elements with opinionated styles using only element selectors. Extra styling is done with classes only. For instance, reboot some <table> styles, then include the classes .table, .table-bordered, and more.
-
Replace default ems with rems for scalable component spacing in browsers.
-
Skip margin-top. Vertical margins collapse unexpectedly. However, a margin with single direction is a simpler concept.
-
Block elements should use rems for margins to make scaling across device sizes easier.
-
Use inherit whenever possible and limit font-related properties declarations.
这使你能够实时自定义，但这取决于你：
This enables you to customize in real-time, however you’d like to:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>Page defaults
重置用于 a 元素 <HTML> 和 <body> 元素，以提供更好的全页面默认值。更多详细信息如下。
Reboot is used for a elements <HTML> and <body> elements to provide better page-wide defaults. More details are as below.
-
All elments have a global box-sizing, including ::before, ::after, to border-box. Padding and borders won’t exceed element’s declared width because of it.
-
Global styles for <body> include font-family, font-weight, line-height, and color. To avoid font discrepancies, some form elements will inherit this later.
-
<body> background-color is defaulted to #fff for security purposes.
Native font stack
-
Reboot is used for the Bootstrap uses a native font stack or system font stack for optimum text rendering on every device and OS.
-
These system fonts are designed for modern devices with improved screen rendering, changeable font support and more.
-
Learn more about native font stacks.
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Windows
"Segoe UI",
// Android
Roboto,
// older macOS and iOS
"Helvetica Neue"
// Linux
"Noto Sans",
"Liberation Sans",
// Basic web fallback
Arial,
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;-
The font stack has emoji fonts, thus the common symbols, dingbat Unicode characters will appear as colorful pictographs. Their appearance varies with the native emoji font of the browser or platform, and remain unaffected by CSS color styles.
-
font-family is applied to the <body> and automatically inherited globally in Bootstrap. Update $font-family-base and recompile the Bootstrap for global font-family change.
Headings
Bootstrap 重置标题用于移除 HTML 标题标签提供的默认边距，即 * margin-bottom: .5rem* 并收紧 line-height 。
Bootstrap Reboot headings are used for removing the default margin that has been provided by HTML header tags which are * margin-bottom: .5rem* and tightened line-height.
--bs-heading-color CSS 变量允许您更改默认的 heading-color 。
The --bs-heading-color CSS variable allows you to change the default heading-color.
Paragraphs
Bootstrap 5 reboot 段落用于移除 HTML <p> 标签提供的默认 margin-top 并设置段落 margin-bottom: 1rem 。
Bootstrap 5 reboot paragraphs are used for removing default margin-top that has been provided by HTML <p> tags and set paragraph margin-bottom: 1rem.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>Links
Reboot 提供的链接具有默认颜色和下划线，并且在 :hover 上发生更改，但用户有 :visited 时不会发生更改。不提供特殊 :focus 样式。
Reboot provides links have default color and underline, and change on :hover but not when a user has :visited. No special :focus styles are given.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p><a href="#">Visit Tutorialspoint..</a></p>
</body>
</html>作为 Bootstrap v5.3.x，链接颜色使用 rgba() 和新的 -rgb CSS 变量设置。这允许轻松自定义链接颜色不透明度。链接颜色不透明度可以使用 CSS 变量 --bs-link-opacity 更改，如下例所示。
As a Bootstrap v5.3.x, link color is set using rgba() and new -rgb CSS variables. This allows easy customization of link color opacity. Link color opacity can be changed using CSS variable --bs-link-opacity as demostrated in the following example.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p><a href="#" style="--bs-link-opacity: .7">Visit Tutorialspoint</a></p>
</body>
</html>Bootstrap reboot 使用更具体的选取器定位占位符链接（那些没有 href 的链接）。它们的 color 和 text-decoration 将重置为它们的默认值。
Bootstrap reboot targets placeholder links (those without an href) with more specific selectors. Their color and text-decoration are reset to their default values.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p><a>Visit Tutorialspoint</a></p>
</body>
</html>Horizontal rules
Reboot 简化了 <hr> 元素。默认情况下， <hr> 元素使用 border-top 和 opacity: .25 进行样式化，并自动从父级颜色继承其 border-color 。
Reboot simplifies <hr> element. The <hr> elements are styled with border-top and opacity: .25 by default, and inherit their border-color from the parent color automatically.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h2 class="text-center">Horizontal rules</h2>
<div class="container">
<hr>
<div class="text-primary">
<hr>
</div>
<hr class="border border-warning border-3 opacity-75">
<hr class="border border-info border-4 opacity-100">
</div>
</body>
</html>Lists
-
Bootstrap reboot has removed margin-top and set margin-bottom: 1rem of lists.
-
List elements <ul>, <ol>, and <dl> have a margin-top removed and set margin-bottom: 1rem.
描述列表改进了 margins ，以便于样式化、清理层次结构，并将 <dd>*s reset *margin-left 设置为 0 ，并添加 margin-bottom: .5rem 。 <dt>*s are *bolded 。
Description lists have improved margins for easier styling, clear hierarchy, and spacing <dd>*s reset *margin-left to 0, and add margin-bottom: .5rem. <dt>*s are *bolded.
Inline Code
使用 <code> 括起内联代码片段。必要时转义 HTML 尖括号。
Use <code> to enclose inline code snippets. Escape HTML angle brackets as necessary.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
The <code><section></code> element should be enclosed within an inline container.
</div>
</body>
</html>Code blocks
Bootstrap 5 Reboot 代码块用于将代码置于 <pre> 标签内。建议在代码中转义尖括号以进行正确渲染。 <pre> 元素被重置以移除其 margin-top 。
Bootstrap 5 Reboot Code blocks are used to put the code inside of <pre> tag. It is recommanded to escape angle brackets in code for proper rendering. <pre> element is reset to remove its margin-top.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<pre><code>Tutorialspoint
This is an example of code block.
</code></pre>
</body>
</html>Variables
Reboot 变量用于重启 <var> 标签元素的样式。
Reboot variables are used to reboot the style of <var> tag elements.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<var>a</var><var>x</var> + <var>b</var><var>y</var> = <var>c</var>
</body>
</html>User input
Reboot 用户输入 <kbd> 用于指示通常通过键盘输入的数据。
Reboot user input <kbd> is used to indicate input that is typically entered via keyboard.
用 <kbd> 标签括起来的内容通常以浏览器默认等宽字体显示。
The text enclosed within the <kbd> tag is typically dispalyed in the browser’s default monospace font.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
To save the changes, press <kbd><kbd>Ctrl</kbd> + <kbd>s</kbd></kbd><br>
To paste the selected item, press <kbd><kbd>Ctrl</kbd> + <kbd>v</kbd></kbd>
</div>
</body>
</html>Sample output
<samp> 标签用于指示程序的示例输出。
The <samp> tag should be used to indicate sample output from a program.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<samp>This text should be considered as an example output generated by a computer program.</samp>
</div>
</body>
</html>Tables
对表格进行修改以获得样式 <caption>*s, border collapse, and consistent *text-align 。 .table 类对边框和填充进行进一步修改。
Tables are modified for style <caption>*s, border collapse, and consistent *text-align. The .table class offers further modifications to borders and padding.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table>
<caption>
This is a caption of table to describe the contents.
</caption>
<thead>
<tr>
<th>Employee Id</th>
<th>Employee Name</th>
<th>Employee Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>Jhon</td>
<td>Software Devloper</td>
</tr>
<tr>
<td>20</td>
<td>Mayra</td>
<td>Tester</td>
</tr>
<tr>
<td>30</td>
<td>Rocky</td>
<td>Data Analyst</td>
</tr>
</tbody>
</table>
</body>
</html>Forms
表单元素已针对新的基本样式进行了简化。最显着的更改如下所示：
Form elements have been simplified for new base styles. The most significant changes are listed below:
-
*<fieldset>*s can be easily used as wrappers for single inputs or groups of inputs as they don’t have borders, padding, or margins.
-
*<legend>*s have been restyled to be displayed as a heading.
-
To allow for margins, <label>*s are set to *display: inline-block.
-
Normalise mainly handles the styling of <input>*s, *<select>*s, *<textarea>*s, and *<button>*s, while reboot also removes their margin and sets *line-height: inherit.
-
*<textarea>*s are only vertically resizable to prevent page layout "breaks".
-
<button>*s and *<input> buttons have cursor: pointer when not disabled.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form class="bd-example">
<fieldset>
<legend>Form</legend>
<p>
<label for="input">Name</label>
<input type="text" id="inputName" placeholder="Enter your name...">
</p>
<p>
<label for="email">Email id</label>
<input type="email" id="emailId" placeholder="Tutorialspoint@example.com">
</p>
<p>
<label for="tel">Mobile No:</label>
<input type="tel" id="Mob">
</p>
<p>
<label for="url">Age</label>
<input type="number" id="age">
</p>
<p>
<label for="number">Number</label>
<input type="number" id="number">
</p>
<p>
<label for="search">Search Here</label>
<input type="search" id="searchHere">
</p>
<p>
<label for="range">Range</label>
<input type="range" id="rangeExample" min="0" max="10">
</p>
<p>
<label for="file">Upload file</label>
<input type="file" id="fileinput">
</p>
<p>
<label for="select">Languages</label>
<select id="select">
<option value="">select...</option>
<optgroup label="Group 1">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">Bootstrap</option>
</optgroup>
<optgroup label="Group 2">
<option value="">C</option>
<option value="">C++</option>
<option value="">Java</option>
</optgroup>
</select>
</p>
<p>
<h6>Selects the languages</h6>
<label>
<input type="checkbox" value="">
HTML
</label>
<br>
<label>
<input type="checkbox" value="">
CSS
</label>
<br>
<label>
<input type="checkbox" value="">
Javascript
</label>
</p>
<p>
<h6>Select your gender</h6>
<label>
<input type="radio" name="firstOption" id="radios1" value="option1" checked>
Female
</label>
<br>
<label>
<input type="radio" name="secondOption" id="radios2" value="option2">
Male
</label>
<br>
<label>
<input type="radio" name="thirdOption" id="radios3" value="option3" disabled>
Others
</label>
</p>
<p>
<label for="textarea">Feedback</label>
<textarea id="feedbackTextarea" rows="4"></textarea>
</p>
<p>
<label for="date">Birth date</label>
<input type="date" id="birthDate">
</p>
<p>
<label for="time">Time</label>
<input type="time" id="timeInput">
</p>
<p>
<label for="password">Enter Password</label>
<input type="password" id="password">
</p>
<p>
<label for="datetime-local">Local Datetime</label>
<input type="datetime-local" id="localDatetime">
</p>
<p>
<label for="week">Select week</label>
<input type="week" id="weekInput">
</p>
<p>
<label for="month">Select month</label>
<input type="month" id="monthInput">
</p>
<p>
<label for="color">Selet color</label>
<input type="color" id="selectColor">
</p>
<p>
<label for="output">Output: </label>
<output name="result" id="output">Tutorialspoint</output>
</p>
<p>
<label>Buttons</label>
<button type="submit">Submit</button>
<input type="reset" value="Reset">
<input type="button" value="Button">
</p>
<p>
<label>Disabled Buttons</label>
<button type="submit" disabled>Submit</button>
<input type="reset" value="Reset" disabled>
<input type="button" value="Button" disabled>
</p>
</fieldset>
</form>
</body>
</html>Pointers on buttons
-
Reboot provides a role="button" that changes the cursor to a pointer. Use this attribute to indicate interactive elements.
-
Not necessary for <button> elements, as they have their own cursor change.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<span role="button" tabindex="0">Non-button element</span>
</div>
</body>
</html>Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<address>
<strong>ABC Corporation</strong><br>
505 sansui street,<br>
Eillis, CA 0178<br>
<abbr title="Phone">P:</abbr> (212) 357-0194
</address>
<address>
<a href="mailto:tutorialspoint@example.com">tutorialspoint@example.com</a>
</address>
</div>
</body>
</html>Blockquote
块引用默认边距为 1em 40px ，为了与其他元素一致而将其更改为 0 0 1rem 。我们引用来自其他来源的内容时，使用这些内容。
Blockquotes default margin is 1em 40px, which is changed to 0 0 1rem for consistency with other elements. These are used when we want to quote content from other sources.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<blockquote class="blockquote">
<p>Blockquote removes default margin of HTML blockquote tag element.</p>
</blockquote>
<p>Someone well-known in <cite title="Source Title">Source Title</cite>.</p>
</div>
</body>
</html>Inline elements
Reboot内联元素用来放入某些元素的缩写或短形式，这些元素会接收基本样式以使之与其他文本有所不同。
Reboot inline elements are used to put some elements abbreviations or short forms of an element that receive basic styling to make it different than other text.
应用基本样式到 <abbr> 元素，以使其在段落文本中引人注目。
Basic styling is applied to the <abbr> element to stand out from the paragraph text.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
The <abbr title="Cascading Style Sheet">CSS</abbr> is a style sheet language.
</body>
</html>Summary
文本元素可以设置为可交互，以显示摘要。其光标的默认值为文本。因此，将其重置为指向光标，以告诉用户此特定元素是可交互的并且用户可以点击它。
Text elements can be made interactive to show summary. The default value of the cursor on it is text. So it is reset to the pointer to tell that the particular element is interactive and the user can click on it.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Reboot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<details>
<summary>Bootstrap Colors</summary>
<p>Bootstrap colors used to give the colors to the text or the background.</p>
</details>
<details open>
<summary>Bootstrap Dropdown</summary>
<p>Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format.</p>
</details>
</div>
</body>
</html>HTML5 [hidden] attribute
-
The golbal attribute [hidden] in HTML5 has the default styling of display: none.
-
To improve this default (display:none) reboot helps prevents its display from getting accidentally overridden by setting [hidden] {display: none !important;}.
<input type="text" hidden>若要仅切换 visibility 元素，意味着其显示不会被修改，并且其元素仍会影响文档流程，则使用 .invisible 类。
To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of document, use .invisible class instead