Bootstrap入门书籍之（一）排版

Bootstrap排版入门指南

Helvetica Neue、 Helvetica、 Arial 和 sans-serif 是Bootstrap默认的字体栈，而排版是其重要的视觉元素之一。在这篇关于Bootstrap入门书籍的文章中，我们将深入其排版特性，尤其是标题和正文文本的排版。

一、标题

在Bootstrap中，标题的创建方式与常规HTML相同，从 <h1> 到 <h6> 依次减小。但Bootstrap重新定义了这些标题的默认样式。共性在于，字体颜色与字体样式继承自父元素，字体粗细为500，行高设为1.1倍字体大小。具体到每个级别的标题，其字体大小、margin值和margin-bottom值都有所不同。例如，h1的字体大小为36px，h2为30px，以此类推。

除此之外，Bootstrap还提供了.h1至.h6的类名，让非标题元素也能拥有与标题相同的样式。例如，你可以通过 <div class="h1"> 来创建一个拥有h1样式的div元素。

在实际应用中，我们经常遇到主标题后跟副标题的情况。Bootstrap为此提供了便捷的设置方式。只需在标题标签内使用 <small> 标签即可轻松创建副标题。副标题拥有独特的样式，如行高为1，字体粗细为常规效果，颜色为灰色。在h1至h3内的 <small> 标签文本大小为当前字号的65%，而在h4至h6内的字号为当前字号的75%。

二、正文文本

Bootstrap中的文本全局样式包括：字体大小为14px，行高约为20px，字体颜色为深灰色 333。每个段落p标签外部有着10个像素的下外边距。

Bootstrap的排版特性远不止于此。通过深入理解并灵活运用Bootstrap的排版规则，你可以轻松创建出吸引人的网页布局。想要更深入地了解Bootstrap的排版和其他特性，不妨参考相关的入门书籍或在线教程，以获取更详细和全面的知识。

强调与文本风格的魅力

在网页设计中，Bootstrap框架为我们提供了丰富的样式类，让我们可以轻松地强调文本、调整对齐方式以及创建列表。这些类不仅使设计更加美观，还增强了用户体验。

一、强调相关的类

Bootstrap中的一系列类，如`.text-muted`、`.text-primary`等，为我们提供了不同层次的强调效果。这些类通过改变文本的颜色，来传达不同的信息重要性。例如，`.text-muted`用于提示信息，使用浅灰色来呈现；而`.text-primary`则用于主要信息，使用蓝色来凸显。这些类让设计师能够更直观地表达信息的层次和重点。

二、文本对齐风格

在Bootstrap中，通过简单的类如`.text-left`、`.text-center`和`.text-right`，我们可以轻松地控制文本的对齐方式。这些类使得文本布局更加灵活，适应不同的设计需求。无论是居左、居中还是居右，甚至两端对齐，都能轻松实现，为网页设计带来无限可能。

三、列表的设计

Bootstrap中的列表设计简洁而实用。除了保持原生的HTML列表功能外，Bootstrap还为我们提供了一些额外的类，如`.list-unstyled`和`.list-inline`。`.list-unstyled`类可以去除列表的项目符号（或编号），使列表更加整洁；而`.list-inline`类则可以将垂直列表转换为水平列表，适合制作水平导航。这些类简化了列表的设计过程，提高了开发效率。

Bootstrap中的样式类为我们提供了强大的工具，让我们能够轻松地强调文本、调整对齐方式以及创建列表。这些类不仅让网页设计更加美观，还提高了开发效率，为用户带来更好的体验。

在Web开发中，我们经常会遇到需要展示一些列表数据的情况，其中标题和描述成对出现。Bootstrap中的水平定义列表 `.dl-horizontal` 就是为了满足这种需求而设计的。

现有代码如下：

```html

标题一

描述内容，我很喜欢前端，也喜欢响应式布局，它能在不同大小的屏幕下提供很好的体验。我现在是个初学者，但我会越来越强。

标题二

描述内容。

```

当我们在全屏浏览器中查看时，会看到列表项按照水平方向排列。这是因为在Bootstrap的CSS中，为 `.dl-horizontal` 类添加了一些特定的样式。但当屏幕大小缩小到某个临界值时，为了适配小屏幕，水平定义列表会恢复到原始的状态，即垂直排列。

这一效果的实现，离不开源码中的媒体查询。只有当屏幕宽度大于768px时，`.dl-horizontal` 类才会产生水平定义列表的效果。具体的实现方式是：

1. `dt` 被设置为左浮动，并且有一个固定的宽度（例如160px）。

2. `dd` 有一个`margin-left`的值（例如180px），从而达到与`dt`并排的效果。

3. 当`dt`的内容过多，导致宽度超过设定的固定宽度时，会显示三个省略号，保证界面不会因此变得混乱。

接下来，我们谈谈Bootstrap中的代码风格。Bootstrap主要提供了三种代码风格的展示方式：

1. 使用 `` 标签来展示单行内联代码，适用于单个单词或句子。

` 标签来展示多行块代码，适用于多行代码或成块的代码。

3. 使用 `` 标签来展示用户输入的代码，表示需要通过键盘输入的内容。
对于代码块的大小控制，可以在 `
` 标签上添加类名 `.pre-scrollable`。这样，当代码块内容过多时，会在Y轴出现滚动条，方便用户滚动查看。你也可以通过自定义CSS来进一步调整其展现方式。