第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的图片和画像组件。


返回顶部