[Bootstrap入门][第一章 Bootstrap页面排版]

[Bootstrap入门][第一章 Bootstrap页面排版]

标签（空格分隔）： 未分类

---

1. 页面主体

Bootstrap 将全局 font-size 设置为 14px, line-height行高设置为20px，<p>段落元素被设置二分之一行高即10px。颜色被设置为#333。

<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</p>

中心内容

通过添加 .lead 类可以让段落突出显示。

<p class="lead">...</p>

使用 Less 工具构建

variables.less 文件中定义的两个 Less 变量决定了排版尺寸：@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。

2. 标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

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

副标题

在标题内还可以包含<small> 标签或赋予 .small 类的元素，可以用来标记副标题。

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

3.内联文本元素

高亮文本

对于需要被高亮的文本，使用<mark>标签

You can use the mark tag to <mark>highlight</mark> text.

H5不常用内联元素 不详细介绍

如<del>,<s>,<ins>,<u>。

• <strong>:着重
• <em>:斜体

小号文本

对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的<small 元素被设置不同的 font-size 。

你还可以为行内元素赋予 .small类以代替任何 元素。

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

对齐

<p class="text-left">Left aligned text.</p>     //左对齐
<p class="text-center">Center aligned text.</p> //居中
<p class="text-right">Right aligned text.</p>   //右对齐
<p class="text-justify">Justified text.</p>     //两边对齐
<p class="text-nowrap">No wrap text.</p>        //不换行

引用块

• 建议跟<p>一起使用
• <footer>为引用块添加脚注。
• <cite>为引用添加参考书目。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

描述

水平排列的描述

.dl-horizontal 可以让 <dl>内的短语及其描述排在一行。开始是像 <dl>的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>