今天第一次接觸Bootstrap，官方介紹其是前端元件庫，用於開發響應式佈局、移動裝置優先的 WEB 專案。個人認為，Bootstrap是一個大型的CSS樣式包，裡面包含了各種各樣的CSS樣式。當程式設計師進行網站開發時，可以直接使用包中定義好的樣式。另外，Bootstrap自適應螢幕，包內的樣式能夠起到跟隨螢幕大小而改變文字或圖片大小的功能。接下來，我將從文字顏色、表格、進度條、按鈕等多個方面進行介紹（Bootstrap需要引用才可以使用，可以從網上引用，也可以下載到本地引用）。

Bootstrap網上引用方法：

<!-- 適應螢幕大小 -->
<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- 新 Bootstrap4 核心 CSS 檔案 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 
<!-- jQuery檔案 務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 
<!-- popper.min.js 用於彈窗、提示、下拉選單 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 檔案 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 

Bootstrap下載到本地引用方法：

1.文字顏色

主要程式碼：

<h2>代表指定意義的文字顏色</h2>
<p class="text-muted">柔和的文字</p>
<p class="text-primary">重要的文字</p>
<p class="text-success">成功的文字</p>
<p class="text-info">提示資訊的文字</p>
<p class="text-warning">警告文字</p>
<p class="text-danger">危險操作文字</p>
<p class="text-secondary">副標題</p>
<p class="text-dark">深灰色文字</p>
<p class="text-light">淺灰色文字</p>
<p class="text-white">白色文字</p>
 

2.表格

相關說明：可以實現邊框、背景顏色、滑鼠滑過背景顏色改變等效果。

主要程式碼：

                <h2>基礎表格</h2>
		<p>.table類來設定基礎表格的樣式：</p>
		<table class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th>Firstname</th>
					<th>Lastname</th>
					<th>Email</th>
				</tr>
			</thead>
			<tbody>
				<tr class="table-primary">
					<td>John</td>
					<td>Doe</td>
					<td>
 
[email protected]</td>
				</tr>
				<tr class="table-primary">
					<td>John</td>
					<td>Doe</td>
					<td>[email protected]</td>
				</tr>
				<tr class="table-primary">
					<td>John</td>
					<td>Doe</td>
					<td>[email protected]</td>
				</tr>
				<tr class="table-primary">
					<td>John</td>
					<td>Doe</td>
					<td>[email protected]</td>
				</tr>
			</tbody>
		</table>

3.進度條

相關說明：可以實現進度條顏色、百分比、動畫（第四條黃色為滾動效果）等效果。

主要程式碼：

                <div class="progress">
			<div class="progress-bar" style="width: 70%">70%</div>
		</div><br>
		<div class="progress">
			<div class="progress-bar bg-success" style="width: 60%">60%</div>
		</div><br>
		<div class="progress">
			<div class="progress-bar progress-bar-striped" style="width:50%">50%</div>
		</div><br>
		<div class="progress">
			<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"  style="width:40%">40%</div>
		</div><br>

4.按鈕

相關說明：可以實現大按鈕獨佔一行、啟用按鈕和不能點選按鈕、內嵌下拉選單按鈕等效果。

主要程式碼：

                <div class="bnt-group">
			<button type="button" class="btn btn-primary">Apple</button>
			<button type="button" class="btn btn-primary">Samsung</button>
			<div class="btn-group">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">Tablet</a>
					<a class="dropdown-item" href="#">Smartphone</a>
				</div>
			</div>
		</div>