建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap 排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作為其默認(rèn)的字體棧。
網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁制作,對成都紙箱等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)seo優(yōu)化排名優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。
使用 Bootstrap 的排版特性，您可以創(chuàng)建標(biāo)題、段落、列表及其他內(nèi)聯(lián)元素。
標(biāo)題
Bootstrap 中定義了所有的 HTML 標(biāo)題（h1 到 h6）的樣式。請看下面的實(shí)例：
實(shí)例
<
h1
>
我是標(biāo)題1 h1
h1
>
<
h2
>
我是標(biāo)題2 h2
h2
>
<
h3
>
我是標(biāo)題3 h3
h3
>
<
h4
>
我是標(biāo)題4 h4
h4
>
<
h5
>
我是標(biāo)題5 h5
h5
>
<
h6
>
我是標(biāo)題6 h6
h6
>
嘗試一下 ?
結(jié)果如下所示：
內(nèi)聯(lián)子標(biāo)題
如果需要向任何標(biāo)題添加一個(gè)內(nèi)聯(lián)子標(biāo)題，只需要簡單地在元素兩旁添加 ，或者添加 .small class，這樣子您就能得到一個(gè)字號更小的顏色更淺的文本，如下面實(shí)例所示：
實(shí)例
<
h1
>
我是標(biāo)題1 h1.
<
small
>
我是副標(biāo)題1 h1
small
>
h1
>
<
h2
>
我是標(biāo)題2 h2.
<
small
>
我是副標(biāo)題2 h2
small
>
h2
>
<
h3
>
我是標(biāo)題3 h3.
<
small
>
我是副標(biāo)題3 h3
small
>
h3
>
<
h4
>
我是標(biāo)題4 h4.
<
small
>
我是副標(biāo)題4 h4
small
>
h4
>
<
h5
>
我是標(biāo)題5 h5.
<
small
>
我是副標(biāo)題5 h5
small
>
h5
>
<
h6
>
我是標(biāo)題6 h6.
<
small
>
我是副標(biāo)題6 h6
small
>
h6
>
嘗試一下 ?
結(jié)果如下所示：
引導(dǎo)主體副本
為了給段落添加強(qiáng)調(diào)文本，則可以添加 class="lead"，這將得到更大更粗、行高更高的文本，如下面實(shí)例所示：
實(shí)例
<
h2
>
引導(dǎo)主體副本
h2
>
<
p
class
=
"
lead
"
>
這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。這是一個(gè)演示引導(dǎo)主體副本用法的實(shí)例。
p
>
嘗試一下 ?
結(jié)果如下所示：
強(qiáng)調(diào)
HTML 的默認(rèn)強(qiáng)調(diào)標(biāo)簽 （設(shè)置文本為父文本大小的 85%）、（設(shè)置文本為更粗的文本）、（設(shè)置文本為斜體）。
Bootstrap 提供了一些用于強(qiáng)調(diào)文本的類，如下面實(shí)例所示：
實(shí)例
<
small
>
本行內(nèi)容是在標(biāo)簽內(nèi)
small
>
<
br
>
<
strong
>
本行內(nèi)容是在標(biāo)簽內(nèi)
strong
>
<
br
>
<
em
>
本行內(nèi)容是在標(biāo)簽內(nèi)，并呈現(xiàn)為斜體
em
>
<
br
>
<
p
class
=
"
text-left
"
>
向左對齊文本
p
>
<
p
class
=
"
text-center
"
>
居中對齊文本
p
>
<
p
class
=
"
text-right
"
>
向右對齊文本
p
>
<
p
class
=
"
text-muted
"
>
本行內(nèi)容是減弱的
p
>
<
p
class
=
"
text-primary
"
>
本行內(nèi)容帶有一個(gè) primary class
p
>
<
p
class
=
"
text-success
"
>
本行內(nèi)容帶有一個(gè) success class
p
>
<
p
class
=
"
text-info
"
>
本行內(nèi)容帶有一個(gè) info class
p
>
<
p
class
=
"
text-warning
"
>
本行內(nèi)容帶有一個(gè) warning class
p
>
<
p
class
=
"
text-danger
"
>
本行內(nèi)容帶有一個(gè) danger class
p
>
嘗試一下 ?
結(jié)果如下所示：
縮寫
HTML 元素提供了用于縮寫的標(biāo)記，比如 WWW 或 HTTP。Bootstrap 定義 元素的樣式為顯示在文本底部的一條虛線邊框，當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)顯示完整的文本（只要您為 title 屬性添加了文本）。為了得到一個(gè)更小字體的文本，請?zhí)砑?.initialism 到 。
實(shí)例
<
abbr
title
=
"
World Wide Web
"
>
WWW
abbr
>
<
br
>
<
abbr
title
=
"
Real Simple Syndication
"
class
=
"
initialism
"
>
RSS
abbr
>
嘗試一下 ?
結(jié)果如下所示：
地址（Address）
使用
標(biāo)簽，您可以在網(wǎng)頁上顯示聯(lián)系信息。由于 默認(rèn)為 display:block;，您需要使用標(biāo)簽來為封閉的地址文本添加換行。
實(shí)例
<
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
>
嘗試一下 ?
結(jié)果如下所示：
引用（Blockquote）
您可以在任意的 HTML 文本旁使用默認(rèn)的
。其他選項(xiàng)包括，添加一個(gè) 標(biāo)簽來標(biāo)識引用的來源，使用 class .pull-right 向右對齊引用。下面的實(shí)例演示了這些特性：實(shí)例
<
blockquote
>
<
p
>
這是一個(gè)默認(rèn)的引用實(shí)例。這是一個(gè)默認(rèn)的引用實(shí)例。這是一個(gè)默認(rèn)的引用實(shí)例。這是一個(gè)默認(rèn)的引用實(shí)例。這是一個(gè)默認(rèn)的引用實(shí)例。這是一個(gè)默認(rèn)的引用實(shí)例。這是一個(gè)默認(rèn)的引用實(shí)例。這是一個(gè)默認(rèn)的引用實(shí)例。
p
>
blockquote
>
<
blockquote
>
這是一個(gè)帶有源標(biāo)題的引用。
<
small
>
Someone famous in
<
cite
title
=
"
Source Title
"
>
Source Title
cite
>
small
>
blockquote
>
<
blockquote
class
=
"
pull-right
"
>
這是一個(gè)向右對齊的引用。
<
small
>
Someone famous in
<
cite
title
=
"
Source Title
"
>
Source Title
cite
>
small
>
blockquote
>
嘗試一下 ?結(jié)果如下所示：
列表
Bootstrap 支持有序列表、無序列表和定義列表。
- 有序列表：有序列表是指以數(shù)字或其他有序字符開頭的列表。
- 無序列表：無序列表是指沒有特定順序的列表，是以傳統(tǒng)風(fēng)格的著重號開頭的列表。如果您不想顯示這些著重號，您可以使用 class .list-unstyled 來移除樣式。您也可以通過使用 class .list-inline 把所有的列表項(xiàng)放在同一行中。
- 定義列表：在這種類型的列表中，每個(gè)列表項(xiàng)可以包含
- 和
- 元素。
- 代表 定義術(shù)語，就像字典。接著，
- 是
- 的描述。
.dl-horizontal可以讓內(nèi)的短語及其描述排在一行。開始是像的默認(rèn)樣式堆疊在一起，隨著導(dǎo)航條逐漸展開而排列在一行。下面的實(shí)例演示了這些類型的列表：
實(shí)例
<
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
>
內(nèi)聯(lián)列表
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
>
嘗試一下 ?結(jié)果如下所示：
更多排版類
下表提供了 Bootstrap 更多排版類的實(shí)例：
類 描述 實(shí)例 .lead 使段落突出顯示 嘗試一下 .small 設(shè)定小文本 (設(shè)置為父文本的 85% 大小) 嘗試一下 .text-left 設(shè)定文本左對齊 嘗試一下 .text-center 設(shè)定文本居中對齊 嘗試一下 .text-right 設(shè)定文本右對齊 嘗試一下 .text-justify 設(shè)定文本對齊,段落中超出屏幕部分文字自動(dòng)換行 嘗試一下 .text-nowrap 段落中超出屏幕部分不換行 嘗試一下 .text-lowercase 設(shè)定文本小寫 嘗試一下 .text-uppercase 設(shè)定文本大寫 嘗試一下 .text-capitalize 設(shè)定單詞首字母大寫 嘗試一下 .initialism 顯示在 元素中的文本以小號字體展示，且可以將小寫字母轉(zhuǎn)換為大寫字母 嘗試一下 .blockquote-reverse 設(shè)定引用右對齊 嘗試一下 .list-unstyled 移除默認(rèn)的列表樣式，列表項(xiàng)中左對齊 ( 和
中)。 這個(gè)類僅適用于直接子列表項(xiàng) (如果需要移除嵌套的列表項(xiàng)，你需要在嵌套的列表中使用該樣式)
嘗試一下 .list-inline 將所有列表項(xiàng)放置同一行 嘗試一下 .dl-horizontal 該類設(shè)置了浮動(dòng)和偏移，應(yīng)用于 元素和
- 元素中，具體實(shí)現(xiàn)可以查看實(shí)例
嘗試一下 .pre-scrollable 使 元素可滾動(dòng)，代碼塊區(qū)域最大高度為340px,一旦超出這個(gè)高度,就會(huì)在Y軸出現(xiàn)滾動(dòng)條嘗試一下
本文題目：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap 排版
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/djdjsce.html
