引导程序 - 重新启动

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

方法

仅使用元素选择器重新启动具有固定样式的 HTML 元素样式。额外的样式仅在类中完成。例如，重新启动一些<table>样式，然后包含类.table、.table-bordered等。

  • 将默认ems替换为rems ，以在浏览器中实现可缩放的组件间距。

  • 跳过边距顶部。垂直边距意外塌陷。然而，单方向边距是一个更简单的概念。

  • 块元素应使用rems作为边距，以便更轻松地跨设备尺寸进行缩放。

  • 尽可能使用继承并限制与字体相关的属性声明。

这使您能够实时自定义，但您愿意：

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

页面默认值

Reboot 用于元素<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>背景颜色默认为#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 以进行全局字体系列更改。

标题

Bootstrap Reboot 标题用于删除 HTML 标题标签提供的默认边距，这些标签是margin-bottom: .5rem和收紧的line-height。

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

标题 例子
<h1></h1>

h1。引导标题
<h2></h2>

h2。引导标题
<h3></h3>

h3。引导标题
<h4></h4>

h4。引导标题
<h5></h5>
h5。引导标题
<h6></h6>
h6。引导标题

段落

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/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>

链接

Reboot 提供具有默认颜色和下划线的链接，并在: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/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更改链接颜色不透明度，如以下示例所示。

例子

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

    <!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 重新启动的目标是具有更具体选择器的占位符链接（没有 href 的链接）。它们的颜色和文本装饰被重置为其默认值。

例子

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

    <!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>

水平规则

重新启动简化了<hr>元素。<hr>元素的样式默认为border-top和opacity: .25 ，并自动从父颜色继承其边框颜色。

例子

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

    <!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>

列表

  • Bootstrap 重新启动已删除margin-top并设置margin-bottom: 1rem列表。

  • 列表元素<ul>、<ol>和<dl>删除了margin-top并设置margin-bottom: 1rem。

描述列表改进了边距，以便更轻松地进行样式设置、清晰的层次结构和间距<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/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>&lt;section&gt;</code> element should be enclosed within an inline container.
    </div>
  </body>
  </html>

代码块

Bootstrap 5 Reboot Code 块用于将代码放入<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/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>

变量

重启变量用于重启<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/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>

用户输入

重新启动用户输入<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/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>

样本输出

<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/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>

表格

表格针对样式<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/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>

形式

表单元素已针对新的基本样式进行了简化。最重要的变化如下：

  • <fieldset>可以很容易地用作单个输入或输入组的包装器，因为它们没有边框、填充或边距。

  • <legend>已重新设计为显示为标题。

  • 为了允许边距，<label>设置为display: inline-block。

  • Normalize 主要处理<input>、<select>、<textarea>和<button>的样式，而 restart 还会删除它们的边距并设置line-height:inherit。

  • <textarea>只能垂直调整大小，以防止页面布局“中断”。

  • <button>和<input>按钮在未禁用时具有光标：指针。

最新版本的 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/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>

按钮上的指针

  • Reboot 提供了一个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/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>

杂项元素

地址

  • 重新启动地址元素<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/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>

块引用

Blockquotes 默认边距为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/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>

行内元素

重新启动内联元素用于放置一些元素缩写或元素的简短形式，这些元素接收基本样式以使其与其他文本不同。

基本样式应用于<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/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>

概括

文本元素可以交互以显示摘要。光标所在的默认值是文本。因此它被重置为指针，以告知特定元素是交互式的并且用户可以单击它。

例子

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

  <!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 [隐藏] 属性

  • HTML5 中的全局属性[ hidden] 的默认样式为display: none。

  • 要改进此默认值 (display:none)，重新启动有助于通过设置[hidden] {display: none !important;}来防止其显示被意外覆盖。

    <input type="text" hidden>

要仅切换元素的可见性（这意味着其显示不会被修改并且该元素仍然可以影响文档的流程），请改用.invisible类