1、標籤頁（Tabs）

標籤頁是一個經常使用的元件，可以放置較多的內容，又可以節省頁面空間。

如下：

無需寫任何JavaScript程式碼，只需要簡單的為頁面元素指定data-toggle="tab",為url新增nav和nav-tab class 

案例程式碼：

<!--標籤-->
<ul class="nav nav-tabs" role="tablist">
	<li class="active">
		<a href="tab-chrome" role="tab" data-toggle="tab">Chrome</a>
	</li>
	<li>
		<a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a>
	</li>
	<li>
		<a href="#tab-safari" role="tab" data-toggle="tab">Safari</a>
	</li>
	<li>
		<a href="#tab-opera" role="tab" data-toggle="tab">Opera</a>
	</li>
	<li>
		<a href="#tab-ie" role="tab" data-toggle="tab">IE</a>
	</li>
</ul>
<!--標籤的內容-->
<div class="tab-content">
	<div class="tab-pane active" id="tab-chrome">
	  <div class="col-md-7">
		<h1>chrome</h1>
		<p>Google Chrome,又稱chrome瀏覽器，是一個由Google（谷歌）公司開發的網頁瀏覽器。</p>
	  </div>
	</div>
	<div class="tab-pane" id="tab-firefox">
		<h1>firefox</h1>
		<p>firefox,又稱firefox瀏覽器，是一個由firefox（谷歌）公司開發的網頁瀏覽器。</p>
	</div>
	<div class="tab-pane" id="tab-safari">
		<h1>safari</h1>
		<p>safari,又稱safari瀏覽器，是一個由safari（谷歌）公司開發的網頁瀏覽器。</p>
	</div>
	<div class="tab-pane" id="tab-opera">
		<h1>Opera</h1>
		<p>Google Chrome,又稱Google瀏覽器，是一個由Google（谷歌）公司開發的網頁瀏覽器。</p>
	</div>
	<div class="tab-pane" id="tab-ie">
		<h1>ie</h1>
		<p>ie,又稱Google瀏覽器，是一個由ie（谷歌）公司開發的網頁瀏覽器。</p>
	</div>
</div>
 

2、彈出框（模態框）Modal

彈出框是一個經常使用的元件，一般用於彈出提示資訊，確認資訊，表單等內容

程式碼：

<div class="modal fade" id="about">
	<div class="modal-dialog">
		<div class="modal-content">
			<!-- 頭部 -->
			<div class="modal-header"> 
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">關於</h4>
			</div>
			<!-- 內容 -->
			<div class="modal-body">
				我們將以上面的例項開始，並通過改變字型尺寸、顏色和應用文字陰影來進行定製圖示
 

			</div>
			<!-- 尾部 -->
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">瞭解了</button>
			</div>
		</div>
	</div>
</div>