实例

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

尝试一下 »

结果如下所示：

引用（Blockquote）

您可以在任意的 HTML 文本旁使用默认的

。其他选项包括，添加一个 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。下面的实例演示了这些特性：

实例

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

尝试一下 »

结果如下所示：

---

列表

Bootstrap 支持有序列表、无序列表和定义列表。

• 有序列表：有序列表是指以数字或其他有序字符开头的列表。
• 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
• 定义列表：在这种类型的列表中，每个列表项可以包含
  和
  元素。
  代表 定义术语，就像字典。接着，
  是
  的描述。.dl-horizontal 可以让

  内的短语及其描述排在一行。开始是像

  的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

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

实例

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

尝试一下 »

结果如下所示：

---

更多排版类

下表提供了 Bootstrap 更多排版类的实例：

类	描述	实例
.lead	使段落突出显示	尝试一下
.small	设定小文本 (设置为父文本的 85% 大小)	尝试一下
.text-left	设定文本左对齐	尝试一下
.text-center	设定文本居中对齐	尝试一下
.text-right	设定文本右对齐	尝试一下
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行	尝试一下
.text-nowrap	段落中超出屏幕部分不换行	尝试一下
.text-lowercase	设定文本小写	尝试一下
.text-uppercase	设定文本大写	尝试一下
.text-capitalize	设定单词首字母大写	尝试一下
.initialism	显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母	尝试一下
.blockquote-reverse	设定引用右对齐	尝试一下
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( 和 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)	尝试一下
.list-inline	将所有列表项放置同一行	尝试一下
.dl-horizontal	该类设置了浮动和偏移，应用于 元素和 元素中，具体实现可以查看实例	尝试一下
.pre-scrollable	使 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条	尝试一下

本文名称：创新互联Bootstrap教程：Bootstrap 排版
文章起源：http://www.shufengxianlan.com/qtweb/news2/407902.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联