<button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span></button>

<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"   data-toggle="dropdown">  主題  <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">  <li role="presentation" class="dropdown-header">下拉菜單標題</li>  <li role="presentation">   <a role="menuitem" tabindex="-1" href="#">選項1</a>  </li>  <li role="presentation">   <a role="menuitem" tabindex="-1" href="#">選項2</a>  </li>  <li role="presentation">    <a role="menuitem" tabindex="-1" href="#">選項3</a>  </li>  <li role="presentation" class="divider"></li><!--分割線-->  <li role="presentation">   <a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>  </li> </ul></div>

<div class="btn-toolbar" role="toolbar"><!--用來嵌套btn-group--> <div class="btn-group btn-group-lg"> <!--btn-group-lg用來控制按鈕組的大小,bt-group-vertical是垂直的按鈕組,bt-group也可以嵌套bt-group-->  <button type="button" class="btn btn-default">Button 1</button>  <button type="button" class="btn btn-default">Button 2</button>  <button type="button" class="btn btn-default">Button 3</button>  </div>  <div class="btn-group btn-group-sm">  <button type="button" class="btn btn-default">Button 4</button>  <button type="button" class="btn btn-default">Button 5</button>  <button type="button" class="btn btn-default">Button 6</button> </div>  <div class="btn-group btn-group-xs">  <button type="button" class="btn btn-default">Button 7</button>  <button type="button" class="btn btn-default">Button 8</button>  <button type="button" class="btn btn-default">Button 9</button> </div></div>

 <div class="btn-group"><!--加類.dropup可以變成按鈕上拉菜單-->  <button type="button" class="btn btn-default dropdown-toggle"    data-toggle="dropdown"> <!-- 加類.btn-xs之類的東西改變按鈕大小-->   默認 <span class="caret"></span>  </button>  <ul class="dropdown-menu" role="menu">   <li><a href="#">功能</a></li>   <li><a href="#">另一個功能</a></li>   <li><a href="#">其他</a></li>   <li class="divider"></li><!--分割線-->   <li><a href="#">分離的鏈接</a></li>  </ul> </div>

<form class="bs-example bs-example-form" role="form">  <div class="input-group input-group-lg"><!--input-group-lg調整輸入框組大小-->   <input type="text" class="form-control">   <span class="input-group-addon">.00</span>  </div>  <br>  <div class="input-group">   <span class="input-group-addon">   <input type="checkbox"><!--復選框和單選框都能應用于輸入框組-->   </span>   <input type="text" class="form-control">  </div>  <br>  <div class="input-group">   <input type="text" class="form-control">   <span class="input-group-btn"><!--按鈕也能應用于輸入框組請注意這里的類變為了input-group-btn，甚至可以加上前面的按鈕下拉菜單-->    <button class="btn btn-default" type="button">     Go!    </button>   </span>  </div> </form>

<p>標簽式的導航菜單</p><ul class="nav nav-tabs"><!--加上類nav-justified可以讓導航兩端對齊--> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li></ul><p>基本的膠囊式導航菜單</p><ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li></ul><p>垂直的膠囊式導航菜單</p><ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li></ul>

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header">  <a class="navbar-brand" href="#">W3Cschool</a> </div> <div>  <ul class="nav navbar-nav"><!--.navbar-fixed-top和.navbar-fixed-bottom可以使導航欄固定在頂部和底部， .navbar-static-top會使導航欄隨頁面滾動嗎， .navbar-inverse實現背景顏色和文字顏色互換-->   <li class="active"><a href="#">iOS</a></li>   <li><a href="#">SVN</a></li>   <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">    Java     <b class="caret"></b>   </a>   <ul class="dropdown-menu">    <li><a href="#">jmeter</a></li>    <li><a href="#">EJB</a></li>    <li><a href="#">Jasper Report</a></li>    <li class="divider"></li>    <li><a href="#">分離的鏈接</a></li>   </ul>   </li>  </ul>  <!--導航欄中的表單-->  <form class="navbar-form navbar-left" role="search">   <div class="form-group">   <input type="text" class="form-control" placeholder="Search">   </div>   <button type="submit" class="btn btn-default">提交</button>  </form>  <!--導航欄按鈕-->  <button type="button" class="btn btn-default navbar-btn">   導航欄按鈕  </button>  <!--導航欄文本-->  <div class="navbar-text navbar-right">    <p >導航欄文本 <a href="#" class="navbar-link">我是鏈接</a></p>   </div>  <!--navbar-left和navbar-right可以實現向左和向右對齊--> </div></nav>

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header">  <button type="button" class="navbar-toggle" data-toggle="collapse"    data-target="#example-navbar-collapse">   <span class="icon-bar"></span>   <span class="icon-bar"></span>   <span class="icon-bar"></span><!--下面有幾個選項這里就有幾個iconbar-->  </button>  <a class="navbar-brand" href="#">W3Cschool</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse">  <ul class="nav navbar-nav">   <li class="active"><a href="#">iOS</a></li>   <li><a href="#">SVN</a></li>   <li><a href="#">Troy</a></li>  </ul> </div></nav>

<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li class="active">十一月</li></ol>

<!--以下所有示例都可以用disabled和active類來控制激活和禁用--><!--分頁--><ul class="pagination"><!--pagination-sm和pagination-lg來控制分頁的大小--> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li></ul><!--翻頁--><ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li></ul><!--翻頁--><ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li></ul>

<span class="label label-default">默認標簽</span><span class="label label-primary">主要標簽</span><span class="label label-success">成功標簽</span><span class="label label-info">信息標簽</span><span class="label label-warning">警告標簽</span><span class="label label-danger">危險標簽</span>

<ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active">  <a href="#">   <span class="badge pull-right">42</span>   首頁  </a> </li> <li><a href="#">簡介</a></li> <li>  <a href="#">   <span class="badge pull-right">3</span>   消息  </a> </li></ul>

<div class="jumbotron"> <div class="jumbotron">  <h1>歡迎登陸頁面！</h1>  <p>這是一個超大屏幕（Jumbotron）的實例。</p>  <p><a class="btn btn-primary btn-lg" role="button">   學習更多</a>  </p> </div></div><!--翻過來jumbotron包著jumbotron就會得到一個不帶圓角且占更多寬度的超大屏幕-->

<div class="page-header"> <h1>頁面標題實例  <small>子標題</small> </h1></div>

<div href="#" class="thumbnail">   <img src="/wp-content/uploads/2014/06/kittens.jpg"    alt="通用的占位符縮略圖">  </div>  <div class="caption">   <h3>縮略圖標簽</h3>   <p>一些示例文本。一些示例文本。</p>   <p>   <a href="#" class="btn btn-primary" role="button">    按鈕   </a>    <a href="#" class="btn btn-default" role="button">    按鈕   </a>   </p>  </div>

<div class="alert alert-success alert-dismissable"><!--alert-dismissable為可刪除警告--> <button type="button" class="close" data-dismiss="alert"   aria-hidden="true">  × </button> 成功！很好地完成了提交。</div><div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert"   aria-hidden="true">  × </button> <a href="#" class="alert-link">成功！很好地完成了提交。</a><!--警告中的標簽--></div><div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert"   aria-hidden="true">  × </button> 警告！請不要提交。</div><div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert"   aria-hidden="true">  × </button> 錯誤！請進行一些更改。</div>

<!--一般進度條--><div class="progress progress-striped active"><!--progress-striped為加條紋,加active條紋會產生動畫效果--> <!--progress-bar-info progress-bar-warning progress-bar-danger progress-bar-success 會給進度條不同顏色，不加就是最基本的--> <div class="progress-bar progress-bar-success" role="progressbar"   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"    style="width: 90%;">  <span class="sr-only">90% 完成（成功）</span> </div></div><!---堆疊的進度條--><div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar"   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"   style="width: 40%;">  <span class="sr-only">40% 完成</span> </div> <div class="progress-bar progress-bar-info" role="progressbar"   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"    style="width: 30%;">  <span class="sr-only">30% 完成（信息）</span> </div> <div class="progress-bar progress-bar-warning" role="progressbar"   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"    style="width: 20%;">  <span class="sr-only">20% 完成（警告）</span> </div></div>

<ul class="media-list"> <li class="media">  <a class="pull-left" href="#">   <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"    alt="通用的占位符圖像">  </a>  <div class="media-body">   <h4 class="media-heading">媒體標題</h4>   <p>這是一些示例文本。這是一些示例文本。    這是一些示例文本。這是一些示例文本。   這是一些示例文本。這是一些示例文本。   這是一些示例文本。這是一些示例文本。   這是一些示例文本。這是一些示例文本。</p>   <!-- 嵌套的媒體對象 -->   <div class="media">   <a class="pull-left" href="#">    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"     alt="通用的占位符圖像">   </a>   <div class="media-body">    <h4 class="media-heading">嵌套的媒體標題</h4>    這是一些示例文本。這是一些示例文本。    這是一些示例文本。這是一些示例文本。    這是一些示例文本。這是一些示例文本。    這是一些示例文本。這是一些示例文本。    這是一些示例文本。這是一些示例文本。    <!-- 嵌套的媒體對象 -->    <div class="media">     <a class="pull-left" href="#">      <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"       alt="通用的占位符圖像">     </a>     <div class="media-body">      <h4 class="media-heading">嵌套的媒體標題</h4>      這是一些示例文本。這是一些示例文本。      這是一些示例文本。這是一些示例文本。      這是一些示例文本。這是一些示例文本。      這是一些示例文本。這是一些示例文本。      這是一些示例文本。這是一些示例文本。     </div>    </div>   </div>   </div>   <!-- 嵌套的媒體對象 -->   <div class="media">   <a class="pull-left" href="#">    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"     alt="通用的占位符圖像">   </a>   <div class="media-body">    <h4 class="media-heading">嵌套的媒體標題</h4>    這是一些示例文本。這是一些示例文本。    這是一些示例文本。這是一些示例文本。    這是一些示例文本。這是一些示例文本。    這是一些示例文本。這是一些示例文本。    這是一些示例文本。這是一些示例文本。   </div>   </div>  </div> </li> <li class="media">  <a class="pull-right" href="#">   <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"    alt="通用的占位符圖像">  </a>  <div class="media-body">   <h4 class="media-heading">媒體標題</h4>   這是一些示例文本。這是一些示例文本。   這是一些示例文本。這是一些示例文本。   這是一些示例文本。這是一些示例文本。   這是一些示例文本。這是一些示例文本。   這是一些示例文本。這是一些示例文本。  </div> </li></ul>

<!--一般列表組--><ul class="list-group"> <li class="list-group-item">免費域名注冊</li> <li class="list-group-item">  <span class="badge">新</span>  24*7 支持 </li> <li class="list-group-item">每年更新成本</li> <li class="list-group-item">  <span class="badge">新</span>  折扣優惠 </li></ul><!--自定義列表組--><div class="list-group"> <a href="#" class="list-group-item active">  <h4 class="list-group-item-heading">   入門網站包  </h4> </a> <a href="#" class="list-group-item">  <h4 class="list-group-item-heading">   免費域名注冊  </h4>  <p class="list-group-item-text">   您將通過網頁進行免費域名注冊。  </p> </a> <a href="#" class="list-group-item">  <h4 class="list-group-item-heading">   24*7 支持  </h4>  <p class="list-group-item-text">   我們提供 24*7 支持。  </p> </a></div>

<div class="panel panel-default"><!--可替代panel-default的類：panel-primary，panel-success，panel-info，panel-warning，panel-danger--> <div class="panel-heading">  <h3 class="panel-title">   帶有 title 的面板標題  </h3> </div> <div class="panel-body">  面板內容 </div> <!---帶表格--> <table class="table">  <th>產品</th><th>價格 </th>  <tr><td>產品 A</td><td>200</td></tr>  <tr><td>產品 B</td><td>400</td></tr> </table> <!---帶列表組--> <ul class="list-group">  <li class="list-group-item">免費域名注冊</li>  <li class="list-group-item">免費 Window 空間托管</li>  <li class="list-group-item">圖像的數量</li>  <li class="list-group-item">24*7 支持</li>  <li class="list-group-item">每年更新成本</li> </ul>  <div class="panel-footer">面板腳注</div></div>

<div class="well well-lg">您好，我在大的 Well 中！</div><div class="well well-sm">您好，我在小的 Well 中！</div>