Web前端基礎：
- Web前端：HTML最強總結 附詳細代碼
- Web前端：CSS最強總結 附詳細代碼
- Web前端：JavaScript最強總結 附詳細代碼
Web前端工具：
- Web前端： JQuery最強總結 附上詳細代碼
- Web前端：Bootstrap最強總結 附詳細代碼
Web前端：Bootstrap最強總結
- Bootstrap基礎
- Bootstrap 包的內容
- 下載
- 檔案結構
- 入門及使用
- Bootstrap CSS部分
- 按鈕
- 按鈕實體
- 表格
- 實體
- 表單
- 垂直或基本表單
- 行內表單
- 水平表單
- 綜合案例
- 圖片
- 實體
- 網格系統
- 基本的網格結構
- 偏移列
- 嵌套列
- 列排序
- 輔助類
- 文本
- 背景
- 其他
- 其他輔助類實體
- 布局組件
- 導航欄
- 警告框
- 進度條
- 分頁
- 字體圖示
- 輪播圖
- 模擬對話框
Bootstrap基礎
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的一個用于快速開發 Web 應用程式和網站的前端框架，
Bootstrap 包的內容
- 基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構，這將在 Bootstrap 基本結構 部分詳細講解，
- CSS：Bootstrap 自帶以下特性：全域的 CSS 設定、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統，這將在 Bootstrap CSS 部分詳細講解，
- 組件：Bootstrap 包含了十幾個可重用的組件，用于創建影像、下拉選單、導航、警告框、彈出框等等，這將在 布局組件 部分詳細講解，
- JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件，您可以直接包含所有的插件，也可以逐個包含這些插件，這將在 Bootstrap 插件 部分詳細講解，
- 定制：您可以定制 Bootstrap 的組件、LESS 變數和 jQuery 插件來得到您自己的版本，
下載
下載地址：Bootstrap中文網
您會看到兩個按鈕：
- Download Bootstrap：下載 Bootstrap，點擊該按鈕，您可以下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本，不包含檔案和最初的源代碼檔案，
- Download Source：下載源代碼，點擊該按鈕，您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代碼，
如果您使用的是未編譯的源代碼，您需要編譯 LESS 檔案來生成可重用的 CSS 檔案，對于編譯 LESS 檔案，Bootstrap 官方只支持 Recess，這是 Twitter 的基于 less.js 的 CSS 提示，
由于檔案是被編譯過和壓縮過的，在獨立的功能開發中，您不必每次都包含這些獨立的檔案，
檔案結構
- 預編譯的 Bootstrap
當您下載了 Bootstrap 的已編譯的版本，解壓縮 ZIP 檔案，您將看到下面的檔案/目錄結構：
如上圖所示，可以看到已編譯的 CSS 和 JS（bootstrap.），以及已編譯壓縮的 CSS 和 JS（bootstrap.min.），同時也包含了 Glyphicons 的字體，這是一個可選的 Bootstrap 主題 - Bootstrap 源代碼
- 如果您下載了 Bootstrap 源代碼，那么檔案結構將如下所示
less/、js/ 和 fonts/ 下的檔案分別是 Bootstrap CSS、JS 和圖示字體的源代碼，
dist/ 檔案夾包含了上面預編譯下載部分中所列的檔案和檔案夾，
docs-assets/、examples/ 和所有的 *.html 檔案是 Bootstrap 檔案，
以上資訊來自Bootstrap中文網
入門及使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap入門與使用</title>
<!--boostrap的使用：
1、必須先引入bootstrap的支持 ，包括js、css、font檔案
2、引入的檔案必須先有jQuery的核心檔案，再引入bootstrap的js檔案，再引入自己的檔案
3、css檔案必須先引入bootstrap的css檔案再引入自己的檔案
4、font檔案無需在頁面上引入，但是需要在專案的目錄中存在
-->
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<!--匯入自己的js檔案-->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<!--匯入自己的css檔案-->
</head>
<body>
<h1>bootstrap使用</h1>
</body>
</html>
注意：注意匯入順序！！！先匯入Bootstrap
Bootstrap CSS部分
按鈕
| 類 | 描述 |
|---|---|
| .btn | 為按鈕添加基本樣式 |
| .btn-default | 默認/標準按鈕 |
| .btn-primary | 原始按鈕樣式（未被操作） |
| .btn-success | 表示成功的動作 |
| .btn-info | 該樣式可用于要彈出資訊的按鈕 |
| .btn-warning | 表示需要謹慎操作的按鈕 |
| .btn-danger | 表示一個危險動作的按鈕操作 |
| .btn-link | 讓按鈕看起來像個鏈接 (仍然保留按鈕行為) |
| .btn-lg | 制作一個大按鈕 |
| .btn-sm | 制作一個小按鈕 |
| .btn-xs | 制作一個超小按鈕 |
| .btn-block | 塊級按鈕(拉伸至父元素100%的寬度) |
| .active | 按鈕被點擊 |
| .disabled | 禁用按鈕 |
按鈕實體
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 按鈕</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<!--任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀，
但是 Bootstrap 提供了一些選項來定義按鈕的樣式，具體如下表所示：
以下樣式可用于<a>, <button>, 或 <input> 元素上：
-->
<h1>不同樣式的按鈕</h1>
<button type="button" class="btn btn-default">標準按鈕</button>
<button type="button" class="btn btn-primary">原始按鈕</button>
<button type="button" class="btn btn-success">成功按鈕</button>
<button type="button" class="btn btn-info">資訊按鈕</button>
<button type="button" class="btn btn-warning">警告按鈕</button>
<button type="button" class="btn btn-danger">危險按鈕</button>
<button type="button" class="btn btn-link">鏈接按鈕</button>
<h1>大小不同的按鈕</h1>
<button type="button" class="btn btn-info btn-xs">xs按鈕</button>
<button type="button" class="btn btn-success btn-sm">sm按鈕</button>
<button type="button" class="btn btn-danger btn-lg">lg按鈕</button>
<button type="button" class="btn btn-warning btn-block">block按鈕</button>
<h1>不同狀態的按鈕</h1>
<button type="button" class="btn btn-default">標準按鈕</button>
<button type="button" class="btn btn-default active">標準激活按鈕按鈕</button>
<button type="button" class="btn btn-primary">原始按鈕</button>
<button type="button" class="btn btn-primary active">原始激活按鈕</button>
<button type="button" class="btn btn-default">標準按鈕</button>
<button type="button" class="btn btn-default disabled">標準禁用按鈕按鈕</button>
<button type="button" class="btn btn-primary">原始按鈕</button>
<button type="button" class="btn btn-primary disabled">原始禁用按鈕</button>
<input type="button" class="btn btn-info" value="input按鈕"/>
<a href="01-bootstrap-入門與使用.html" class="btn btn-info" >a鏈接</a>
</body>
</html>
效果圖
表格
Bootstrap 提供了一個清晰的創建表格的布局
Bootstrap 支持的表格元素
| 標簽 | 描述 |
|---|---|
| < table> | 為表格添加基礎樣式 |
| < thead> | 表格標題行的容器元素（< tr>），用來標識表格列 |
| < tbody> | 表格主體中的表格行的容器元素（< tr> |
| < tr> | 一組出現在單行上的表格單元格的容器元素（< td> 或 < th>） |
| < td> | 默認的表格單元格 |
| < th> | 特殊的表格單元格，用來標識列或行（取決于范圍和位置），必須在 < thead> 內使用 |
| < caption> | 關于表格存盤內容的描述或總結 |
表格類
下表樣式可用于表格中：
| 標簽 | 描述 |
|---|---|
| .table | 為任意 < table> 添加基本樣式 (只有橫向分隔線) |
| .table-striped | 在 < tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) |
| .table-bordered | 為所有表格的單元格添加邊框 |
| .table-hover | 在 < tbody> 內的任一行啟用滑鼠懸停狀態 |
| .table-condensed | 讓表格更加緊湊 |
< tr>, < th> 和 < td> 類
下表的類可用于表格的行或者單元格
| 類 | 描述 |
|---|---|
| .active | 將懸停的顏色應用在行或者單元格上 |
| .success | 表示成功的操作 |
| .info | 表示資訊變化的操作 |
| .warning | 表示一個警告的操作 |
| .danger | 表示一個危險的操作 |
實體
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap表格</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="danger">
<th>序號</th><th>商品名稱</th><th>商品價格</th><th>商品數量</th><th>總計</th><th>操作</th>
</tr>
<tr>
<td class="warning">1</td>
<td class="info">【明治夾心餅干】明治(Meiji) 小熊餅干 草莓夾心 15分鐘可以搖成球 新加坡進口 網紅兒童零食50g_10盒辦公室下午茶點心</td>
<td class="active">￥129.8</td>
<td class="success">1</td>
<td>￥129.8</td>
<td><button type="button">洗掉</button></td>
</tr>
<tr>
<td>2</td>
<td>【明治夾心餅干】明治(Meiji) 小熊餅干 草莓夾心 15分鐘可以搖成球 新加坡進口 網紅兒童零食50g_10盒辦公室下午茶點心</td>
<td>￥129.8</td>
<td>1</td>
<td>￥129.8</td>
<td><button type="button">洗掉</button></td>
</tr>
<tr>
<td>3</td>
<td>【明治夾心餅干】明治(Meiji) 小熊餅干 草莓夾心 15分鐘可以搖成球 新加坡進口 網紅兒童零食50g_10盒辦公室下午茶點心</td>
<td>￥129.8</td>
<td>1</td>
<td>￥129.8</td>
<td><button type="button">洗掉</button></td>
</tr>
</table>
</div>
</body>
</html>
效果圖
表單
Bootstrap 通過一些簡單的 HTML 標簽和擴展的類即可創建出不同樣式的表單
表單布局型別：
- 垂直表單（默認）
- 行內表單
- 水平表單
垂直或基本表單
基本的表單結構是 Bootstrap 自帶的，個別的表單控制元件自動接收一些全域樣式，下面列出了創建基本表單的步驟：
- 向父 < form> 元素添加 role=“form”
- 把標簽和控制元件放在一個帶有 class .form-group 的 < div> 中，這是獲取最佳間距所必需的
- 向所有的文本元素 < input>、< textarea> 和 < select> 添加 class .form-control
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實體 - 基本表單</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" id="name"
placeholder="請輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">檔案輸入</label>
<input type="file" id="inputfile">
<p class="help-block">這里是塊級幫助文本的實體，</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>
效果圖：
行內表單
如果需要創建一個表單，它的所有元素是行內的，向左對齊的，標簽是并排的，請向 標簽添加 class .form-inline，
實體代碼：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實體 - 行內表單</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名稱</label>
<input type="text" class="form-control" id="name"
placeholder="請輸入名稱">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">檔案輸入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>
效果圖：
水平表單
水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同，如需創建一個水平布局的表單，請按下面的幾個步驟進行：
- 向父 < form> 元素添加 class .form-horizontal
- 把標簽和控制元件放在一個帶有 class .form-group 的 < div> 中
- 向標簽添加 class .control-label
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實體 - 水平表單</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="請輸入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="請輸入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 請記住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登錄</button>
</div>
</div>
</form>
</body>
</html>
效果圖
綜合案例
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap表單</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="name">用戶名</label>
<input class="form-control" name="name" />
</div>
<div class="form-group">
<label for="name">密碼</label>
<input class="form-control" type="password" name="name" />
</div>
</form>
<form role="form" class="form-horizontal">
<div class="form-group has-success">
<label for="name" class="col-lg-2 control-label">用戶名</label>
<div class="col-lg-7">
<input class="form-control" name="name" />
</div>
</div>
<div class="form-group has-warning">
<label for="name" class="col-lg-2 control-label">密碼</label>
<div class="col-lg-7">
<input class="form-control" type="password" name="name" />
</div>
</div>
<div class="form-group has-error">
<label for="name" class="col-lg-2 control-label">協議</label>
<div class="col-lg-7">
<textarea class="form-control" rows="4" ></textarea>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">愛好</label>
<div class="col-lg-7">
<label class="checkbox-inline">
<input type="checkbox" name="hobby" value="0" />NBA
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" value="10" />book
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" value="20" />swim
</label>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">下拉串列</label>
<div class="col-lg-7">
<select class="form-control">
<option value="1">請選擇</option>
</select>
</div>
</div>
</form>
<hr>
<form role="form" class="form-inline">
<div class="form-group">
<label for="name">用戶名</label>
<input class="form-control" name="name" />
</div>
<div class="form-group">
<label for="name">密碼</label>
<input class="form-control" type="password" name="name" />
</div>
</form>
</body>
</html>
效果圖
圖片
Bootstrap 提供了三個可對圖片應用簡單樣式的 class：
- .img-rounded：添加 border-radius:6px 來獲得圖片圓角
- .img-circle：添加 border-radius:500px 來讓整個圖片變成圓形
- .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框
實體
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap圖片</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/mycss.css" />
<!--<style>
.img-thumbnail {
padding: 14px;
border: solid red 1px;
}
</style>-->
</head>
<body>
<img class="img-circle" src="img/cat.jpg" title="服不服？" />
<img class="img-rounded" src="img/cat.jpg" title="服不服？" />
<img class="img-thumbnail" src="img/cat.jpg" title="服不服？" />
<img class="img-responsive" src="img/cat2.jpg" title="服不服？" />
</body>
</html>
效果圖
網格系統
什么是網格
在平面設計中，網格是一種由一系列用于組織內容的相交的直線（垂直的、水平的）組成的結構（通常是二維的），它廣泛應用于列印設計中的設計布局和內容結構，在網頁設計中，它是一種用于快速創建一致的布局和有效地使用 HTML 和 CSS 的方法，
什么是網格系統
Bootstrap 包含了一個回應式的、移動設備優先的、不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列，它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語意布局的功能強大的混合類
基本的網格結構
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
偏移列
偏移是一個用于更專業的布局的有用功能，它們可用來給列騰出更多的空間，例如，.col-xs=* 類不支持偏移，但是它們可以簡單地通過使用一個空的單元格來實作該效果，
為了在大螢屏顯示幕上使用偏移，請使用 .col-md-offset-* 類，這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 范圍是從 1 到 11，
實體：
<!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>
<div class="container">
<h1>Hello, world!</h1>
<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>
</body>
</html>
效果圖：
嵌套列
為了在內容中嵌套默認的網格，請添加一個新的 .row，并在一個已有的 .col-md-* 列內添加一組 .col-md-* 列，被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須占滿12列），
在下面的實體中，布局有兩個列，第二列被分為兩行四個盒子，
<!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>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-md-9" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分為四個盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p> 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>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #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.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果圖：
列排序
Bootstrap 網格系統另一個完美的特性，就是您可以很容易地以一種順序撰寫列，然后以另一種順序顯示列，
您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 范圍是從 1 到 11，
在下面的實體中，我們有兩列布局，左列很窄，作為側邊欄，我們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序，
<!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>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<p>排序前</p>
<div class="col-md-4" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在右邊
</div>
</div><br>
<div class="row">
<p>排序后</p>
<div class="col-md-4 col-md-push-8"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8 col-md-pull-4"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
我在右邊
</div>
</div>
</div>
</body>
</html>
效果圖：
輔助類
文本
背景
其他
| 類 | 描述 |
|---|---|
| .pull-left | 元素浮動到左邊 |
| .pull-right | 元素浮動到右邊 |
| .center-block | 設定元素為 display:block 并居中顯示 |
| .clearfix | 清除浮動 |
| .show | 強制元素顯示 |
| .hidden | 強制元素隱藏 |
| .sr-only | 除了螢屏閱讀器外，其他設備上隱藏元素 |
| .sr-only-focusable | 與 .sr-only 類結合使用，在元素獲取焦點時顯示(如：鍵盤操作的用戶) |
| .text-hide | 將頁面元素所包含的文本內容替換為背景圖 |
| .close | 顯示關閉按鈕 |
| .caret | 顯示下拉式功能 |
其他輔助類實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap輔助類</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
p{
padding: 30px;
}
</style>
</head>
<body>
<div class="container">
<p class="text-danger bg-primary pull-left">段落</p>
<p class="text-info bg-success pull-right">段落</p>
<div class="clearfix"></div>
<a href="#" class="text-danger bg-info center-block">超鏈接</a>
<a href="#" class="text-warning bg-success center-block">超鏈接</a>
<p>關閉圖示實體
<button type="button" class="close" aria-hidden="true">×</button>
</p>
</div>
</body>
</html>
效果圖
布局組件
導航欄
導航欄是一個很好的功能，是 Bootstrap 網站的一個突出特點，導航欄在您的應用或網站中作為導航頁頭的回應式基礎組件，導航欄在移動設備的視圖中是折疊的，隨著可用視口寬度的增加，導航欄也會水平展開，在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式
實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>導航欄</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<nav class="nav navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">BudingCode</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="">JSVASE</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" >WEB<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">MYSQL</a></li>
<li><a href="">MYSQL</a></li>
<li><a href="">MYSQL</a></li>
<li><a href="">MYSQL</a></li>
</ul>
</li>
<li><a href="">MYSQL</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
效果圖
警告框
實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>警告框</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="alert alert-success">
<a href="" class="alert-link">success</a>
</div>
<div class="alert alert-info">info</div>
<div class="alert alert-warning">warning</div>
<div class="alert alert-danger">danger</div>
<div class="alert alert-danger alert-dismissable">danger
<button class="close" type="button" data-dismiss="alert">
×
</button>
</div>
</div>
</body>
</html>
效果圖
進度條
實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>警告框</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="alert alert-success">
<a href="" class="alert-link">success</a>
</div>
<div class="alert alert-info">info</div>
<div class="alert alert-warning">warning</div>
<div class="alert alert-danger">danger</div>
<div class="alert alert-danger alert-dismissable">danger
<button class="close" type="button" data-dismiss="alert">
×
</button>
</div>
</div>
</body>
</html>
效果圖
分頁
分頁（Pagination），是一種無序串列，Bootstrap 像處理其他界面元素一樣處理分頁
實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分頁</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<ul class="pagination">
<li class="disabled"><a href="">上一頁</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">下一頁</a></li>
</ul><br />
<ul class="pagination pagination-sm">
<li class="disabled"><a href="">上一頁</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li ><a href="">下一頁</a></li>
</ul><br />
<ul class="pagination pagination-lg">
<li class="disabled"><a href="">上一頁</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">下一頁</a></li>
</ul><br />
<ul class="pager">
<li class="previous"><a href="">Previous</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="next"><a href="">next</a></li>
</ul><br />
</div>
</body>
</html>
效果圖
字體圖示
實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字體圖示</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<span class="glyphicon glyphicon-search"></span> search
<span class="glyphicon glyphicon-home"></span> home
<span class="glyphicon glyphicon-file"></span> file
<span class="glyphicon glyphicon-film"></span> film
<span class="glyphicon glyphicon-trash"></span> trash
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-plus"></span> plus
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-user"></span> 用戶
</button>
</div>
</body>
</html>
效果圖
輪播圖
實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script>
$(function(){
$("#myCarousel").carousel({
interval:1500
});
});s
</script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/pic1.jpg" title="第1張圖"/>
<div class="carousel-caption">第1張圖</div>
</div>
<div class="item">
<img src="img/pic2.jpg" title="第2張圖"/>
<div class="carousel-caption">第2張圖</div>
</div>
<div class="item">
<img src="img/pic3.jpg" title="第3張圖"/>
<div class="carousel-caption">第3張圖</div>
</div>
</div>
<a href="#myCarousel" class="carousel-control left" data-slide="prev"><</a>
<a href="#myCarousel" class="carousel-control right" data-slide="next">></a>
</div>
</body>
</html>
效果（自動）
模擬對話框
實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<!--觸發模態對話框的按鈕-->
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">
添加學生資訊
</button>
<!--模態對話框-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">添加學生資訊</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="stuId" class="col-sm-2 control-label">學號：</label>
<div class="col-sm-10">
<input name="stuId" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="stuName" class="col-sm-2 control-label">姓名：</label>
<div class="col-sm-10">
<input name="stuName" class="form-control" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">提交</button>
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
</body>
</html>
效果圖
初始界面
點擊添加
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272004.html
標籤：其他
上一篇：jQuery實作留言板功能