文字排版
標(biāo)題
- 標(biāo)題：HTML中的所有標(biāo)題標(biāo)簽颅湘，從
<h1>到<h6>均可用傻盟。提供了.h1到.h6class艰管，給inline屬性的文本賦予標(biāo)題的樣式度秘。 - 副標(biāo)題：在標(biāo)題內(nèi)可以包含
<small>標(biāo)簽或.small元素，用來標(biāo)記副標(biāo)題喝峦。
標(biāo)題
實踐
段落
- Bootstrap將全局font-size設(shè)置為14px势誊，line-height為1.428。這些屬性直接賦給
<body>和所有段落元素谣蠢。 -
<p>元素被設(shè)置了等于1/2行高（20px）的底部外邊距（即10px）粟耻。
p標(biāo)簽特性
- 通過添加.lead可以讓段落更強調(diào)的突出顯示查近。
<p class="lead">...</p>
- 內(nèi)聯(lián)文本元素
- 標(biāo)記文本
<mark>…</mark> - 被刪除的文本
<del>…</del> - 無用的文本
<s>…</s> - 額外插入的文本
<ins>…</ins> - 帶下劃線的文本
<u>…</u> - 小號文本
<small>…</small>和.small一樣的效果，其內(nèi)的文本將被設(shè)置為父容器字體大小的 85%
- 標(biāo)記文本
實例
- 文本對齊：通過文本對齊類挤忙，可以簡單方便的將文字重新對齊
1. class = “text-left” 文本左對齊
2. class = “text-right” 文本右對齊
3. class = “text-center” 文本中對齊
4. class = “text-justify ” 文本兩端對齊
5. class = “text-nowrap” 禁止文本換行
- 改變大小寫
1. class =“text-lowercase” 轉(zhuǎn)成小寫
2. class = “text-uppercase” 轉(zhuǎn)成大寫
3. class = “text-capitalize” 首字母大寫
- 縮寫
外觀表現(xiàn)為文本底部的虛線框霜威，鼠標(biāo)移至上面時會變成帶有“問號”的指針。當(dāng)鼠標(biāo)懸停在上面時會顯示完整的文本（需要為 <abbr>title 屬性添加了文本）<abbr title="World Wide Web">WWW</abbr>萬維網(wǎng)
實例
<!DOCTYPE html>
<html>
<head>
<title>文本</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-left">左對齊文本</p>
<p class="text-center">居中對齊文本</p>
<p class="text-right">右對齊文本</p>
<p class="text-justify">兩端對齊</p>
<p class="text-nowrap">禁止文本換行</p>
<br/>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<br/>
<abbr title="World Wide Web">WWW</abbr>萬維網(wǎng)
<br/>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
文本顏色
- 文本強調(diào)（文本顏色）
.text-muted：提示册烈，使用淺灰色（#999）
.text-primary：主要戈泼，使用藍(lán)色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息赏僧，使用淺藍(lán)色（#31708f）
.text-warning：警告大猛，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）
實例
- 文本背景顏色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
鏈接組件淀零，鼠標(biāo)經(jīng)過時挽绩，顏色會加深！
實例
列表
- Bootstrap 支持有序列表驾中、無序列表和定義列表唉堪。
- 有序列表：有序列表是指以數(shù)字或其他有序字符開頭的列表。
- 無序列表：無序列表是指沒有特定順序的列表肩民。
- 如果不想顯示列表項符號巨坊，使用 class .list-unstyled 來移除樣式。
- 內(nèi)聯(lián)列表：通過引用 .list-inline此改，將所有列表項放置于同一行。
- 每個列表項可以包含
<dt>和<dd>元素侄柔。
<dt>代表 定義術(shù)語共啃，就像字典，是被定義的屬于（或短語）暂题。
<dd>是<dt>的描述移剪。
.dl-horizontal可以讓<dl>內(nèi)的短語及其描述排在一行。
<!DOCTYPE html>
<html>
<head>
<title>文本</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<h4>有序列表</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h4>無序列表</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h4>未定義樣式列表</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</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>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
列表實例
代碼
Bootstrap 允許以兩種方式顯示代碼：
-
<code>標(biāo)簽薪者。內(nèi)聯(lián)顯示代碼纵苛。
-
<pre>標(biāo)簽。代碼需要被顯示為一個獨立的塊元素或者代碼
有多行時言津，應(yīng)該使用 <pre> 標(biāo)簽攻人。使用 <pre> 和 <code> 標(biāo)簽時，確保開始和結(jié)束標(biāo)簽使用字符實體：
<和>
pre
<!DOCTYPE html>
<html>
<head>
<title>響應(yīng)式圖片</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p><code><header></code> 作為內(nèi)聯(lián)元素被包圍悬槽。</p>
<p>如果需要把代碼顯示為一個獨立的塊元素怀吻，使用 <pre> 標(biāo)簽：</p>
<pre>
<article>
<h1>文章標(biāo)題</h1>
</article>
</pre>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
圖片
- 響應(yīng)式圖片
添加.img-responsive 可以讓Bootstrap 3中的圖片更友好地支持響應(yīng)式布局。
實質(zhì)是為圖片賦予了max-width: 100%; 和height: auto; 屬性初婆，可以讓圖片按比例縮放蓬坡，不超過其父元素的尺寸猿棉。
<img src="..." class="img-responsive" alt="Responsive image">
- 圓角圖片：
<img src="..." class="img-rounded">
- 圓形圖片：
<img src="..." class="img-circle">
- 邊框圓角：
<img src="..." class="img-thumbnail">
注意：Internet Explorer 8 不支持 CSS3 中的圓角屬性。
image
