Bootstrap的文本内容之Reboot

Reboot

这章都是细碎的标签明天挑有意思的总结，这里给一个超链接详情见官网

Links

可以通过--bs-link-opacity控制link的可见度

<a href="#" style="--bs-link-opacity:0.5;">This is an example link</a>

横线<hr>

单独的标签<hr>和被div包括的<hr>默认颜色不同

      <hr>

      <div class="text-success">
        <hr>
      </div>

也可以为横线的外边框设置颜色和可见度

• opacity-num

• border-primary

      <hr class="border border-danger border-2 opacity-50">
      <hr class="border border-primary border-3 opacity-1">

行内代码配合小括号

单个代码

• <code>

• %lt; %gt;

用<code>包裹内容画出业内代码样式，再通过%lt; %gt;（小于大于)画出左右括号

For example, <code><section></code> should be wrapped as inline.

段内多个代码

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering.

• 使用<pre>包裹段落

• 使用<code>包裹段落

• 在需要的地方%lt; %gt;包裹符号

    <div class="container">
      <pre>
        <code>
          <p>Sample text here..</p>
          <p>And another line of sample text here...</p>
        </code>
      </pre>
    </div>

模拟键盘图像

Use the <kbd> to indicate input that is typically（典型地） entered via（通过） keyboard.

• 用<kbd>包裹符号就会被绘画成键盘式

      <div class="p-1 border border-primary opacity-1">
        To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
        To edit settings, press <kbd>Ctrl + ,</kbd>
      </div>

Sample output

这个很简单就是让改行文字变样式，还蛮好看的

• <samp>

      <samp class="bg-psrimary-subtle">
        This text is meant to be treated as sample output 
      </samp>

补充几个input内容

时钟

值得注意的是label的for属性会指向id相同的input并自动选中

    <div class="container">
      <form action="">
        <p>
          <label for="time"><samp>时间</samp></label>
          <input type="time" id="time">
        </p>
      </form>
    </div>

颜色框

        <p>
          <label for="colors"><samp>调色盘</samp></label>
          <input type="color" id="colors">
        </p>

失效的button

• disabled属性

        <p>
          <input type="button" value="A opacity button" disabled>
        </p>