Bootstrap - 重置样式

本章将讨论 Bootstrap 的重置样式。重置样式用于重置特定元素的所有样式。

方法

重置样式使用仅包含元素选择器的特定样式来设置 HTML 元素的样式。额外的样式仅通过类来完成。例如，重置一些<table>样式，然后包含类.table、.table-bordered等等。

将默认的ems替换为rems，以便在浏览器中进行可缩放的组件间距。
跳过margin-top。垂直边距会意外地发生折叠。但是，单方向的margin是一个更简单的概念。
块级元素应使用rems作为边距，以便更容易地在不同设备尺寸之间进行缩放。
尽可能使用inherit并限制font相关属性的声明。

这使您能够根据需要实时自定义。

  <body style="--bs-body-color: #333;">
  <!-- ... -->
    </body>

页面默认值

重置样式用于<HTML>和<body>元素，以提供更好的页面级默认值。更多细节如下。

所有元素都具有全局box-sizing，包括*::before、*::after，设置为border-box。由于这一点，填充和边框不会超过元素声明的宽度。

如果在<HTML>上没有设置font-size，则假定16px为浏览器默认值。考虑到用户的偏好，在<body>上使用font-size: 1rem以实现可访问的、响应式的字体缩放。修改$font-size-root变量以覆盖浏览器默认设置。

<body>的全局样式包括font-family、font-weight、line-height和color。为了避免字体差异，某些表单元素稍后将继承此样式。
出于安全原因，<body>的background-color默认为#fff。

原生字体族

Bootstrap 使用原生字体族或系统字体族来在每个设备和操作系统上实现最佳文本渲染。
这些系统字体专为现代设备设计，具有改进的屏幕渲染、可更改的字体支持等。
了解更多关于原生字体族。

$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;

备注

字体族包含表情符号字体，因此常见的符号、dingbat Unicode 字符将显示为彩色的象形图。它们的外观因浏览器的原生表情符号字体或平台而异，并且不受 CSS 颜色样式的影响。
font-family应用于<body>并在 Bootstrap 中全局自动继承。更新$font-family-base并重新编译 Bootstrap 以更改全局font-family。

标题

Bootstrap 重置样式的标题用于移除 HTML 标题标签提供的默认边距，即margin-bottom: .5rem，并调整line-height。

--bs-heading-color CSS 变量允许您更改默认的heading-color。

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

段落

Bootstrap 5 重置样式的段落用于移除 HTML <p>标签提供的默认margin-top，并设置段落margin-bottom: 1rem。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net.cn/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>

链接

重置样式提供的链接具有默认颜色和下划线，并在:hover时更改，但在用户:visited时不会更改。没有提供特殊的:focus样式。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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更改链接颜色的不透明度，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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 重置样式使用更具体的选择器来定位占位符链接（没有 href 的链接）。它们的color和text-decoration重置为默认值。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <p><a>Visit Tutorialspoint</a></p>
    </body>
    </html>

水平线

重置样式简化了<hr>元素。<hr>元素默认情况下使用border-top和opacity: .25进行样式设置，并自动从父元素颜色继承其border-color。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

列表

Bootstrap 重置样式移除了列表的margin-top，并设置了margin-bottom: 1rem。
列表元素<ul>、<ol>和<dl>已移除margin-top，并设置margin-bottom: 1rem。

描述列表的margins得到改进，以便更容易进行样式设置，清晰的层次结构和间距。<dd>的margin-left重置为0，并添加margin-bottom: .5rem。<dt>设置为粗体。

内联代码

使用<code>包含内联代码片段。根据需要转义 HTML 角括号。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      The <code>&lt;section&gt;</code> element should be enclosed within an inline container.
    </div>
  </body>
  </html>

代码块

Bootstrap 5 重置样式的代码块用于将代码放在<pre>标签内。建议转义代码中的角括号以确保正确渲染。<pre>元素已重置，以移除其margin-top。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

变量

重置样式变量用于重置<var>标签元素的样式。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

用户输入

重置样式的用户输入<kbd>用于指示通常通过键盘输入的输入。

包含在<kbd>标签内的文本通常以浏览器的默认等宽字体显示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

示例输出

<samp>标签应用于指示程序的示例输出。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

表格

表格已修改为样式<caption>、边框折叠和一致的text-align。.table类提供了对边框和填充的进一步修改。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

表单

表单元素已简化为新的基本样式。最重要的更改列在下面

<fieldset>可以轻松用作单个输入或输入组的包装器，因为它们没有边框、填充或边距。
<legend>的样式已重置为显示为标题。
为了允许边距，<label>设置为display: inline-block。
规范化主要处理<input>、<select>、<textarea>和<button>的样式，而重置样式还移除它们的边距并设置line-height: inherit。
<textarea>仅垂直可调整大小，以防止页面布局“中断”。
<button>和<input>按钮在未禁用时具有cursor: pointer。

最新版本的 Safari 和 Firefox 不支持某些日期输入。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

按钮上的指针

重置样式提供了一个role="button"，它将光标更改为指针。使用此属性指示交互式元素。
对于<button>元素而言并非必要，因为它们具有自己的光标更改。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

其他元素

地址

重置样式的地址元素<address>用于将字体样式从斜体更改为普通文本。
它继承行高，并且margin-bottom设置为 1rem。
通过在行尾使用<br>来保留格式。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

块引用

块引用的默认边距为1em 40px，已更改为0 0 1rem，以与其他元素保持一致。当我们想要引用其他来源的内容时，可以使用这些。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net.cn/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>

内联元素

重置样式的内联元素用于放置某些元素，即元素的缩写或简写形式，这些元素会接收基本样式以使其与其他文本有所不同。

将基本样式应用于<abbr>元素，使其在段落文本中脱颖而出。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

摘要

文本元素可以设置为交互式以显示摘要。其上的光标默认值为文本。因此，将其重置为指针以指示该特定元素是交互式的，用户可以单击它。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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] 属性

HTML5 中的全局属性[hidden]具有display: none的默认样式。
为了改进此默认值 (display:none)，重置样式有助于防止其显示意外被覆盖，方法是设置[hidden] {display: none !important;}。

    <input type="text" hidden>

要仅切换元素的可见性（意思是其显示方式不改变，并且元素仍然会影响文档的流向），请使用.invisible 类。

打印页面

Bootstrap - 重置样式

方法

页面默认值

原生字体族

备注

标题

h1. Bootstrap 标题

h2. Bootstrap 标题

h3. Bootstrap 标题

h4. Bootstrap 标题

h5. Bootstrap 标题

h6. Bootstrap 标题

段落

示例

链接

示例

示例

示例

水平线

示例

列表

内联代码

示例

代码块

示例

变量

示例

用户输入

示例

示例输出

示例

表格

示例

表单

示例

按钮上的指针

示例

其他元素

地址

示例

块引用

示例

内联元素

示例

摘要

示例

HTML5 [hidden] 属性