Bootstrap 排版

Bootstrap 运用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默许的字体栈。

运用 Bootstrap 的排版特性,您能够创立标题、阶段、列表及其他内联元素。


标题

Bootstrap 中界说了一切的 HTML 标题(h1 到 h6)的款式。请看下面的实例:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标题</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>

</body>
</html>

成果如下所示:

标题

内联子标题

假如需求向任何标题增加一个内联子标题,只需求简略地在元素两旁增加 <small>,或许增加 .small class,这姿态您就能得到一个字号更小的色彩更浅的文本,如下面实例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 内联子标题</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

</body>
</html>

成果如下所示:

内联子标题

引导主体副本

为了给阶段增加着重文本,则能够增加 class="lead",这将得到更大更粗、行高更高的文本,如下面实例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引导主体副本</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

</body>
</html>

成果如下所示:

引导主体副本

着重

HTML 的默许着重标签 <small>(设置文本为父文本巨细的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。

Bootstrap 供给了一些用于着重文本的类,如下面实例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 着重</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内,并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是削弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

</body>
</html>

成果如下所示:

着重

缩写

HTML 元素供给了用于缩写的符号,比方 WWW 或 HTTP。Bootstrap 界说 <abbr> 元素的款式为显现在文本底部的一条虚线边框,当鼠标悬停在上面时会显现完好的文本(只需您为 <abbr> title 特点增加了文本)。为了得到一个更小字体的文本,请增加 .initialism 到 <abbr>。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 缩写</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

</body>
</html>

成果如下所示:

缩写

地址(Address)

运用 <address> 标签,您能够在网页上显现联络信息。因为 <address> 默许为 display:block;,您需求运用
标签来为关闭的地址文本增加换行。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 地址</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a>
</address>

</body>
</html>

成果如下所示:

地址

引证(Blockquote)

您能够在恣意的 HTML 文本旁运用默许的 <blockquote>。其他选项包括,增加一个 <small> 标签来标识引证的来历,运用 class .pull-right 向右对齐引证。下面的实例演示了这些特性:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引证</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<blockquote><p>
这是一个默许的引证实例。这是一个默许的引证实例。这是一个默许的引证实例。这是一个默许的引证实例。这是一个默许的引证实例。这是一个默许的引证实例。这是一个默许的引证实例。这是一个默许的引证实例。</p></blockquote>
<blockquote>这是一个带有源标题的引证。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引证。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

</body>
</html>

成果如下所示:

引证

列表

Bootstrap 支撑有序列表、无序列表和界说列表。

  • 有序列表:有序列表是指以数字或其他有序字符最初的列表。
  • 无序列表:无序列表是指没有特定次序的列表,是以传统风格的着重号最初的列表。假如您不想显现这些着重号,您能够运用 class .list-unstyled 来移除款式。您也能够经过运用 class .list-inline 把一切的列表项放在同一行中。
  • 界说列表:在这种类型的列表中,每个列表项能够包括 <dt> 和 <dd> 元素。<dt> 代表 界说术语,就像字典,这是被界说的归于(或短语)。接着,<dd> 是 <dt> 的描绘。您能够运用 class dl-horizontal 把 <dl> 行中的归于与描绘并排显现。

下面的实例演示了这些类型的列表:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 列表</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未界说款式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>界说列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的界说列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

</body>
</html>

成果如下所示:

列表

更多排版类

下表供给了 Bootstrap 更多排版类的实例:

描绘 实例
.lead 使阶段杰出显现 测验一下
.small 设定小文本 (设置为父文本的 85% 巨细) 测验一下
.text-left 设定文本左对齐 测验一下
.text-center 设定文本居中对齐 测验一下
.text-right 设定文本右对齐 测验一下
.text-justify 设定文本对齐,阶段中超出屏幕部分文字主动换行 测验一下
.text-nowrap 阶段中超出屏幕部分不换行 测验一下
.text-lowercase 设定文本小写 测验一下
.text-uppercase 设定文本大写 测验一下
.text-capitalize 设定单词首字母大写 测验一下
.initialism 显现在 <abbr> 元素中的文本以小号字体展现 测验一下
.blockquote-reverse 设定引证右对齐 测验一下
.list-unstyled 移除默许的列表款式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (假如需求移除嵌套的列表项,你需求在嵌套的列表中运用该款式) 测验一下
.list-inline 将一切列表项放置同一行 测验一下
.dl-horizontal 该类设置了起浮和偏移,应用于 <dl> 元素和 <dt> 元素中,详细完成能够检查实例 测验一下
.pre-scrollable 使 <pre> 元素可翻滚 scrollable 测验一下