一、柵格和塊陰影
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 堆疊的水平</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 5px -5px 5px #444, inset -5px 5px 5px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>
<div class="col-md-6" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444,inset -10px 10px 10px #0000ff;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
</div>
</div>
</body>
</html>
box-shadow: inset 5px -5px 5px #444, inset -5px 5px 5px #444;
陰影向內，不寫inset，默認陰影向外，后面四個參數依次為：左、下、向內擴散大小，陰影顏色；后一組參數依次為：陰影向內、右、上、向內擴散大小、陰影顏色；
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
提供了 3 種不同的列布局，分別適用於三種設備。在手機上，它將是左邊 25% 右邊 75% 的布局。在平板電腦上，它將是 50%/50% 的布局。在大型視口的設備上，它將是 33%/66% 的布局。
響應式的列重置
<div class="col-xs-6 col-sm-3"></div> <div class="col-xs-6 col-sm-3"> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3"></div> <div class="col-xs-6 col-sm-3"></div>
偏移列
<div class="row" >
<div class="col-xs-6 col-md-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
嵌套列
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3">
<h4>第一列</h4>
</div>
<div class="col-md-9">
<h4>第二列 - 分為四個盒子</h4>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
列排序
<div class="row">
<p>排序后</p>
<div class="col-md-4 col-md-push-8">
我在左邊
</div>
<div class="col-md-8 col-md-pull-4">
我在右邊
</div>
</div>
二、排版
內聯子標題
<h1>我是標題1 h1. <span class="small">我是副標題1 h1</span></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>
引導主體副本
<h2>引導主體副本</h2> <p class="lead">這是一個演示引導主體副本用法的實例。</p>
強調
<!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>
縮寫
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
地址
<address> <strong>Full Name</strong><br> <a href="mailto:#">mailto@somedomain.com</a> </address>
列表
<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>
排版類總結
類 描述 .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