第9节 Bootstrap对网页排版做了哪些颠覆设计

On this page

9.1 Bootstrap5重置原理

9.1.1 实现原理和目的

Bootstrap5对默认的html标签样式做了很多重置，原理上来说，其实很简单，就是统一写了很多基础的css代码来对一些常用的标签附加了样式，改变了html原来的显示样式。目的也很简单，一是为了好看，二是为了兼容性。

9.1.2 如何学习

这部分内容有点多，而且知识比较散乱，看的有些眼晕，我的意见是大体看一下，不需要了解太深，收藏起来即可。

很多情况下，我都是按照正常html使用，设计出来发现哪个标签不好看，达不到我的目的，我再查看一下这个标签的具体用法和Bootstrap5对他的重置。另外忠告大家，遇到问题第一时间不是去百度，而是看手册，不会了再百度，再找不到，可以去请教一下这方面的高手，高手哪里找，就是平时看到别人写的文章，有联系方式的，就可以加一下，以备不时之需。另外还可以去一些群里发问，不过很多情况下无人响应，所以要加一些活跃的群。

9.2 Bootstrap5重置的标签

9.2.1 Bootstrap重置元件的规范

以下是Bootstrap重置元件的规范和原因：

  • 更新部分浏览器的预设值，在可变动的元件间距上使用rem替代em。

  • 避开使用margin-top。垂直边界的margins可能会重叠，进而产生不能预期的结果。更重要的是，使用单向的margin是一个更单纯的思考模式。

  • 为便于跨设备大小进行缩放，块元素应使用rems作为边距。

  • 尽量减少字体相关属性的声明，尽可能使用inherit。

9.2.2 面默认值

为了提供更好的整体页面预设值而更新和元素。具体而言：

  • 在每个元素上设定全局性的box-sizing，包括*：：before和*：：after，将它们设为border-box。这确保元素不会因为padding或border超过元素声明的宽度数值。

  • 不在<html>上声明基础的font-size，而是假定字体尺寸为16px（浏览器预设）。font-size: 1rem被应用在上，以利透过media queries做响应式缩放。

  • <body>设定了全局的font-family、font-weight、line-height及color，让随后的元素可以继承此格式以防止字体不一致。

  • 为了安全起见， <body>已声明background-color，预设为#fff。

9.2.3 原生字体堆栈

Bootstrap利用“native font stack”或“system font stack”在每个设备和操作系统上获得最佳的阅读呈现。这些系统字体是特别为现今设备所设计的，具备更好的屏幕渲染、多元的文字支持以及更多。

请注意，由于字体堆栈包含emoji字体，因此许多常见的symbol/dingbat unicode字符将呈现为多色象形文字。它们的外观会有所不同，这取决于浏览器/平台本机emoji字体中使用的样式，并且它们不会受到任何CSS颜色样式的影响。

此字体系列应用于<body>并在整个Bootstrap中自动全局继承。

9.2.4 标题、副标题和段落

9.2.4.1 标题和段落

所有标题元素（例如， <h1>、<p>）都被重置为删除其边距顶部。标题有 margin-bottom: .5rem，段落margin-bottom: 1rem，便于间距。

所有的HTML标题，<h1>到<h6>，都是可用的。.h1到.h6类也可用，用于当您希望匹配标题的字体样式但无法使用关联的HTML元素时。

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

和

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

产生的代码效果都是一样的

9.1.4.png

9.2.4.2 副标题

使用通用类重现Bootstrap 3.0中的小标题文本。副标题就是字体稍小，颜色稍淡的标题。

<h3>
我是一个标题
<small class="text-muted">我只是个副标题</small>
</h3>

显示效果 9.1.5.png

9.2.4.3 显示增大标题

一般的标题元素能在页面内容繁多时发挥最佳作用。当你需要突出一个标题时，请考虑使用display heading以获得更大、更细、稍具有风格化的标题样式。

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

9.1.6.png

9.2.5 列表

9.2.5.1 列表

所有列表<ul>、 <ol>、 <dl>都删除了它们的margin-top和 margin-bottom: 1rem 。嵌套列表没有页边距底部。还重置了<ul>、<ol> 元素的padding-left。

为了更简单的样式、清晰的层次结构和更好的间距，描述列表更新了边距，<dd>将左边边距重置为0，并在底部添加边距margin-bottom: .5rem，<dt>以粗体显示。

9.2.5.2 无样式

删除列表项的默认列表样式和左边距（仅限直接子项）。这只适用于直接子列表项，这意味着您还需要为任何嵌套列表添加类。

<ul class="list-unstyled">
            <li>来时三月春犹在，</li>
            <li>到日端阳节又临。</li>
            <li>珍重主人意勤腆，</li>
            <li>满槃角黍细包金。</li>
            <li>嵌套列表:
            <ul>
            <li>来时三月春犹在，</li>
            <li>到日端阳节又临。</li>
            <li>珍重主人意勤腆，</li>
            <li>满槃角黍细包金。</li>
            </ul>
            </li>
            <li>《谢人送粽》 唐·杨巨源</li>
            </ul>
      </div>

9.1.7.png

9.2.5.3 内联

移除了列表编号并增加些许margin，结合使用.list-inline和.list-inline-item。

<ul>
            <li>我思故我在</li>
            <li>我在故我思</li>
            <li>生命不息思不息</li>
        </ul>

        <ul class="list-inline">
            <li class="list-inline-item">我思故我在</li>
            <li class="list-inline-item">我在故我思</li>
            <li class="list-inline-item">生命不息思不息</li>
        </ul>

对比下效果

9.1.8.png

9.2.5.4 描述型列表对齐

通过使用我们网格系统定义的类别（或是语意mixins）将项目和说明水平对齐。对于较长的术语，你可选择性加上.text-truncate来用…取代多余内容。

<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>

<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>

<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>

9.1.9.png

9.2.6 html标签代码

用<code>包装标签代码段。确保转义HTML尖括号。例如, <section> 应包装为标签代码<code>&lt;section&gt;</code> 。

9.2.7 代码块

<pre>用于多行的代码加在<code>包装标签代码外面。再提醒一次，确保在代码中转义任何尖括号，以便正确渲染。<pre>移除margin-top以及使用rem作为margin-bottom的单位。

<p>此处为示例文本...</p>
<p>这里还有一行示例文本...</p>

应该用下面的代码包装

<pre><code>&lt;p&gt;此处为示例文本...&lt;/p&gt;
&lt;p&gt;这里还有一行示例文本...&lt;/p&gt;
</code></pre>

9.2.8 变量字母

使用<var>标签来指定公示中的变量字母，例如

<var>y</var> = <var>m</var><var>x</var> + <var>b</var> 

显示结果为：

9.1.1.png

9.2.9 键盘输入字符

使用<kbd>标签来表示通过键盘输入的指令，你再也不用在做电脑教程的时候去到处找键盘图片了。

要切换目录，请键入 <kbd>cd</kbd> ，后跟目录名。<br>
        要编辑设置，请按 <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

显示结果，是不是很酷。

9.1.2.png

9.2.10 实例输出

使用 <samp>标签来表示由程序输出的实例。这我看着效果不是很好，就不演示了，你可以自己动手试试。

<samp>This text is meant to be treated as sample output from a computer program.</samp>

9.2.11 表格

微调整表格中的<caption>样式，合并边框，并确保整体的text-align是一致的。针对borders、padding以及更多的其他变化将通过.table类别达成。这部分先不演示了，不是说不重要，而是太重要了，明天打算专门讲一节。

9.2.12 表单

不同的表单元素已被重置为更简洁的基本样式。如下式变化最为显著的部分：

  • <fieldset>没有borders、padding或margin以便包覆独立的input或input群组。

  • <legend>如同fieldset，已被重新定义样式用来显示分类的标题。

  • <label>被设定为display: inline-block以便让margin可以应用。

  • <input>、 <select>、<textarea>、 <button> 主要由Normalize处理，不过Reboot移除了它们的margin并设定line-height: inherit。

  • <textarea>修改为仅可调整垂直尺寸，因为水平调整大小通常会“破坏”页面布局。

  • 当<button>和 <input>按钮元素状态为：not（：disabled），会呈现 cursor: pointer。

  • 按钮上的指针。重置增加role="button"将预设光标改为pointer。此属性添加到元素上用来辅助指示元素是可以互动的。button原先就具有cursor的变化，所以这个不是必须的。

表单在网页设计中起着至关重要的作用，所以后面会有专门的很多节对表单做详细的介绍。

9.2.13 地址

<address>元素重置浏览器的预设font-style，由italic转为normal。line-height现在也可以继承属性，另外增加margin-bottom: 1rem。<address>用来表示作者（或是产品主体）的联络信息。使用<br>保留结束行的格式。

<div class="bd-example">
    <address>
      <strong>Twitter, Inc.</strong><br>
      1355 Market St, Suite 900<br>
      San Francisco, CA 94103<br>
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
    <address>
      <strong>Full Name</strong><br>
      <a href="mailto:first.last@example.com">first.last@example.com</a>
    </address>
  </div>

显示效果图

9.1.3.png

9.2.14 引用

9.2.14.1 普通引用

blockquotes上的默认边距是1em 40px，将其重置为0 0 1rem，以便与其他元素更加一致。用于引用文档中其他来源的内容块。将<blockquote> 环绕任何HTML作为引号。就是边距发生了变化，仅给出代码，就不演示了。

<div class="bd-example">
    <blockquote class="blockquote">
      <p>A well-known quote, contained in a blockquote element.</p>
    </blockquote>
    <p>Someone famous in <cite title="Source Title">Source Title</cite></p>
  </div>

9.2.14.2 引用来源

HTML规范要求将blockquote归属于 <blockquote>之外。当提供来源归属，需要将 <blockquote>包在<figure>之内，并且加上 .blockquote-footer class，还要确保将来源的名称包在中。

<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

9.1.10.png

9.2.14.3 引用来源

可以使用文字通用类来更改blockquote的对齐方式。

<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>

默认为左对齐，可以用text-center居中对齐，text-end右对齐。这里就不演示了。

9.2.15 缩略词标记

<abbr>元素的基本样式让它与段落文字之间有明显突出，在地址例子中大家已经看到了，主要用在英文缩略词中，下面再给一个例子，效果自己去试一下吧，就不演示了。

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

9.2.16 摘要

summary的预设cursor是text，所以我们将其重置为pointer，元素可以透过点击产生互动性，这种一般在网站的FAQ页面比较常见，当然也可以用于题目汇集类的，只显示题目，点击才会显示答案。需要注意的是默认点一次显示，点两次关闭，点击下一个摘要不会关闭上一个，要实现点下一个关闭其他的，需要写一段js代码实现。

<div class="bd-example">
    <details open="">
      <summary>点我查看更多</summary>
      <p>我是第一个摘要要显示的内容</p>
    </details>
    <details>
      <summary>另个一摘要</summary>
      <p>我是第二个摘要要显示的内容</p>
    </details>
  </div>

9.2.17 HTML5隐藏属性

HTML5新增一个新的全局属性[hidden]，预设样式为display: none，Bootstrap将其改良为[hidden] { display: none !important; }以预防display被意外覆盖。

<input type="text" hidden>

9.2.18 前导主题

使用.lead让一个段落脱颖而出，会加大加粗显示，一般用在摘要引言处。

<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>

9.2.19 内联文本元素

常见内联HTML5元素的样式。

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

9.1.11.png

请注意，这些标记应用于语义目的：

  • <mark> 表示为参考或注释目的而标记或突出显示的文本。

  • <small> 表示旁注和小字体，如版权和法律文本。

  • <s> 表示不再相关或不再准确的元素。

  • <u> 表示内联文本的范围，该范围应以指示其具有非文本注释的方式呈现。

如果要设置文本样式，应改用以下类：

  • .mark 将应用与 <mark>相同的样式。

  • .small 将应用与<small>相同的样式。

  • .text-decoration-underline 修饰下划线将应用与<u>相同的样式。

  • .text-decoration-line-through 装饰线条将应用与<s>相同的样式。

虽然上面没有显示，但是可以在HTML5中随意使用 <b> 、 <i> 用来突出单词或短语而不传达额外的重要性，而<i> 主要用于语音、技术术语等。

9.2.20 文本通用类

更多功能请使用文本通用类更改文本对齐、转换、样式、权重、行高、装饰和颜色。后面我们会专门介绍文本通用类。

今天的课程就到这里，内容有些多，包含了手册的两节内容，大家看看就好，先收藏了，用的时候再查询。请关注我，及时学习 俺老刘原创的《Bootstrap5零基础到精通》第10节 Bootstrap的图片和画像组件。


返回顶部