亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄 搜尋
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy） Bootstrap 過(guò)渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
文字

Bootstrap 排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作為其默認(rèn)的字體棧。

使用 Bootstrap 的排版特性，您可以創(chuàng)建標(biāo)題、段落、列表及其他內(nèi)聯(lián)元素。

標(biāo)題

Bootstrap 中定義了所有的 HTML 標(biāo)題（h1 到 h6）的樣式。請(qǐng)看下面的實(shí)例：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 標(biāo)題</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>我是標(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>

</body>
</html>

結(jié)果如下所示：

標(biāo)題

內(nèi)聯(lián)子標(biāo)題

如果需要向任何標(biāo)題添加一個(gè)內(nèi)聯(lián)子標(biāo)題，只需要簡(jiǎn)單地在元素兩旁添加 <small>，或者添加 .small class，這樣子您就能得到一個(gè)字號(hào)更小的顏色更淺的文本，如下面實(shí)例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 內(nèi)聯(lián)子標(biāo)題</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>我是標(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>

</body>
</html>

結(jié)果如下所示：

內(nèi)聯(lián)子標(biāo)題

引導(dǎo)主體副本

為了給段落添加強(qiáng)調(diào)文本，則可以添加 class="lead"，這將得到更大更粗、行高更高的文本，如下面實(shí)例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 引導(dǎo)主體副本</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>引導(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>

</body>
</html>

結(jié)果如下所示：

引導(dǎo)主體副本

強(qiáng)調(diào)

HTML 的默認(rèn)強(qiáng)調(diào)標(biāo)簽 <small>（設(shè)置文本為父文本大小的 85%）、<strong>（設(shè)置文本為更粗的文本）、<em>（設(shè)置文本為斜體）。

Bootstrap 提供了一些用于強(qiáng)調(diào)文本的類，如下面實(shí)例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 強(qiáng)調(diào)</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>本行內(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">向左對(duì)齊文本</p>
<p class="text-center">居中對(duì)齊文本</p>
<p class="text-right">向右對(duì)齊文本</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>

</body>
</html>

結(jié)果如下所示：

強(qiáng)調(diào)

縮寫

HTML 元素提供了用于縮寫的標(biāo)記，比如 WWW 或 HTTP。Bootstrap 定義 <abbr> 元素的樣式為顯示在文本底部的一條虛線邊框，當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)顯示完整的文本（只要您為 <abbr> title 屬性添加了文本）。為了得到一個(gè)更小字體的文本，請(qǐng)?zhí)砑?.initialism 到 <abbr>。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 縮寫</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>

結(jié)果如下所示：

縮寫

地址（Address）

使用 <address> 標(biāo)簽，您可以在網(wǎng)頁(yè)上顯示聯(lián)系信息。由于 <address> 默認(rèn)為 display:block;，您需要使用
標(biāo)簽來(lái)為封閉的地址文本添加換行。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 地址</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>

結(jié)果如下所示：

地址

引用（Blockquote）

您可以在任意的 HTML 文本旁使用默認(rèn)的 <blockquote>。其他選項(xiàng)包括，添加一個(gè) <small> 標(biāo)簽來(lái)標(biāo)識(shí)引用的來(lái)源，使用 class .pull-right 向右對(duì)齊引用。下面的實(shí)例演示了這些特性：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 引用</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>
這是一個(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è)向右對(duì)齊的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

</body>
</html>

結(jié)果如下所示：

引用

列表

Bootstrap 支持有序列表、無(wú)序列表和定義列表。

  • 有序列表：有序列表是指以數(shù)字或其他有序字符開(kāi)頭的列表。
  • 無(wú)序列表：無(wú)序列表是指沒(méi)有特定順序的列表，是以傳統(tǒng)風(fēng)格的著重號(hào)開(kāi)頭的列表。如果您不想顯示這些著重號(hào)，您可以使用 class .list-unstyled 來(lái)移除樣式。您也可以通過(guò)使用 class .list-inline 把所有的列表項(xiàng)放在同一行中。
  • 定義列表：在這種類型的列表中，每個(gè)列表項(xiàng)可以包含 <dt> 和 <dd> 元素。<dt> 代表 定義術(shù)語(yǔ)，就像字典，這是被定義的屬于（或短語(yǔ)）。接著，<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的屬于與描述并排顯示。

下面的實(shí)例演示了這些類型的列表：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 列表</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>無(wú)序列表</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>

</body>
</html>

結(jié)果如下所示：

列表

更多排版類

下表提供了 Bootstrap 更多排版類的實(shí)例：

類 描述 實(shí)例
.lead 使段落突出顯示 實(shí)例 ?
.small 設(shè)定小文本 (設(shè)置為父文本的 85% 大小) 實(shí)例 ?
.text-left 設(shè)定文本左對(duì)齊 實(shí)例 ?
.text-center 設(shè)定文本居中對(duì)齊 實(shí)例 ?
.text-right 設(shè)定文本右對(duì)齊 實(shí)例 ?
.text-justify 設(shè)定文本對(duì)齊,段落中超出屏幕部分文字自動(dòng)換行 實(shí)例 ?
.text-nowrap 段落中超出屏幕部分不換行 實(shí)例 ?
.text-lowercase 設(shè)定文本小寫 實(shí)例 ?
.text-uppercase 設(shè)定文本大寫 實(shí)例 ?
.text-capitalize 設(shè)定單詞首字母大寫 實(shí)例 ?
.initialism 顯示在 <abbr> 元素中的文本以小號(hào)字體展示 實(shí)例 ?
.blockquote-reverse 設(shè)定引用右對(duì)齊 實(shí)例 ?
.list-unstyled 移除默認(rèn)的列表樣式，列表項(xiàng)中左對(duì)齊 ( <ul> 和 <ol> 中)。 這個(gè)類僅適用于直接子列表項(xiàng) (如果需要移除嵌套的列表項(xiàng)，你需要在嵌套的列表中使用該樣式) 實(shí)例 ?
.list-inline 將所有列表項(xiàng)放置同一行 實(shí)例 ?
.dl-horizontal 該類設(shè)置了浮動(dòng)和偏移，應(yīng)用于 <dl> 元素和 <dt> 元素中，具體實(shí)現(xiàn)可以查看實(shí)例 實(shí)例 ?
.pre-scrollable 使 <pre> 元素可滾動(dòng) scrollable 實(shí)例 ?
上一篇： 下一篇：