目錄：html
全局樣式前端
1、柵格系統java
2、表單python
3、按鈕jquery
4、導航linux
5、按鈕組bootstrap
6、面板前端框架
7、表格
8、分頁
9、排版
10、圖片
11、輔助類
12、響應式工具
組件
內容：
前言：
首先經過https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css 連接下載bootstrap.min.css保存到本地，而後執行下面操做
全局樣式：
1、柵格系統
柵格系統是頁面佈局使用，是區分列布局使用的，通常bootstrap將整個頁面分爲12份，能夠任意組合本身想要的列分割方式，在div標籤中使用col-XX的方式來實現，該方式有幾種方法：
-
- col-md-XX 其中md表示中等距離，XX表示一共分幾分，例如，四個div標籤，若是想並排且等分，可使用class=‘col-md-3’來實現
- col-sm-XX sm表示小，XX同上
- col-xs-XX xs表示極小，XX同上
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
col表明列的意思，md表示樣式，默認分紅12分，4表明三個元素每一個佔3分之一
<div class="col-md-3">Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
<div class="col-md-3">Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
<div class="col-md-3">Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
<div class="col-md-3">Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
<!--小使用sm-->
<div class="col-sm-3">Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
<div class="col-sm-3">Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
<div class="col-sm-3">Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
<div class="col-sm-3">Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
#佈局實例，左面和右面是兩份，中間是8份,一共12份
<div class="col-sm-2">
<h3>主側欄</h3>
Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
<div class="col-sm-8">
<h3>內容</h3>
Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
<div class="col-sm-2">
<h3>右側欄</h3>
Bootstrap （當前版本 v3.3.7）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。
繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。</div>
</body>
</html>
2、表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<form class="container container-small">
<div class="form-inline">
<h1>註冊</h1>
<div class="form-group has-error">
<label class="control-label">姓</label>
<input type="text" class="form-control input-lg">
</div>
<div class="form-group has-success">
<label class="control-label">名</label>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group ">
<label class="control-label">充值金額</label>
<div class="input-group">
<div class="input-group-addon input-sm">￥</div>
<input type="text" class="form-control"></div>
</div>
<div class="form-group">
<label>Other</label>
<select class="form-control ">
<option value="1">雙刀</option>
<option value="2">山丹</option>
<option value="3">貝貝</option>
</select>
</div>
<div class="row">
<div class="col-md-4 ">
<input type="text" class="form-control">
</div>
<div class="col-md-4 ">
<input type="text" class="form-control">
</div>
<div class="col-md-4 ">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="submit" class="form-control">
</div>
</div>
</form>
<!--textarea模式-->
<form action="" class="container">
<div class="form-group">
<label for="">留言</label>
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
</div>
<!--select模式-->
<div class="form-group">
<select name="" id="" class="form-control">
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option>
</select>
</div>
<div class="form-group">
<label for="">選擇題</label>
<div class="radio">
<label >
<input type="radio" name="aaa">籃球
</label>
</div>
<div class="radio">
<label >
<input type="radio" name="aaa">籃球
</label>
</div>
<div class="radio">
<label >
<input type="radio" name="aaa">籃球
</label>
</div>
</div>
<div class="form-group">
<label for="">選擇題</label>
<div class="radio">
<label >
<input type="checkbox" name="aaa"> 籃球
</label>
</div>
<div class="radio">
<label >
<input type="checkbox" name="aaa"> 籃球
</label>
</div>
<div class="radio">
<label>
<input type="checkbox" name="aaa"> 籃球
</label>
</div>
</div>
</form>
</body>
</html>
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
form-control能支持的控件：
一、input
二、textarea
若是支持多行，能夠根據須要改變rows屬性
<textarea class="form-control" rows=3></textarea>
三、select
單選多選放在同一行：
class="checkbox-inline"或 radio-inline
靜態控件：
<form action="" class="form-horizaontal">
<div class="form-group">
<label for="" class="col-sm-2 control-label">用戶名：</label>
<div class="col-sm-10">
<p class="form-control-static">小金</p><!-- 經過form-control-static方式將值固定 -->
</div>
</div>
所有禁用表單
<!--若是要求所有禁用，可使用fieldset來完成-->
<form action="" class="form-horizaontal">
<fieldset disabled>
<div class="form-group">
<label for="" class="col-sm-2 control-label">用戶名：</label>
<div class="col-sm-10">
<p class="form-control-static">小金</p><!-- 經過form-control-static方式將值固定 -->
</div>
</div>
<br>
<br>
<div class="form-group">
<label for="" class="col-sm-2 control-label">密碼：</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<br>
<br>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input value="ok" type="submit" class=" btn btn-primary">
<input value="reset" type="reset" class=" btn btn-danger">
</div>
</div>
</form>
</fieldset>
在表單內添加文字型圖標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>
<form action="" class="form-horizontal">
<!--若是要在表單內添加文字圖片，可使用has-feedback-->
<div class="form-group has-success has-feedback">
<label for="" class="col-sm-2 control-label">用戶名：</label>
<div class="col-sm-10">
<input type="text" class="form-control"/>
<!--在span內須要添加form-control-feedback-->
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label for="" class="col-sm-2 control-label">密碼：</label>
<div class="col-sm-10">
<input type="text" class="form-control"/>
<span class="glyphicon glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input value="ok" type="submit" class=" btn btn-primary">
<input value="reset" type="reset" class=" btn btn-danger">
</div>
</div>
</form>
</body>
</html>
添加幫助信息
<form action="" class="form-horizontal">
<!--若是要在表單內添加文字圖片，可使用has-feedback-->
<div class="form-group has-success has-feedback">
<label for="" class="col-sm-2 control-label">用戶名：</label>
<div class="col-sm-10">
<input type="text" class="form-control"/>
<!--在span內須要添加form-control-feedback-->
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
<!--help-block添加幫助信息-->
<span class="help-block">glyphicon glyphicon-ok form-control-feedback</span>
</div>
</div>
3、按鈕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<!--well類就表示一個邊距-->
<div class="well">
<!--btn方式可讓按鈕的四個角變圓滑，後面的btn-default是按鈕的樣式-->
<button class="btn btn-default">戳我</button>
<button class="btn btn-primary">戳我</button>
<button class="btn btn-danger">戳我</button>
<button class="btn btn-warning">戳我</button>
<button class="btn btn-info">戳我</button>
<!--能夠對連接也加上btn和btn-XX樣式，可使超連接變成想要的樣式-->
<a href="http://www.baidu.com" class="btn btn-danger">斷網測試</a>
<input type="submit" class="btn btn-primary" value="戳我"/>
<hr>
<!--經過btn-lg來擴大按鈕大小，btn-sm表示小，btn-xs表示極小-->
<button class="btn btn-default btn-lg">戳我</button>
<button class="btn btn-default ">戳我</button>
<button class="btn btn-primary btn-sm">戳我</button>
<button class="btn btn-danger btn-xs">戳我</button>
<hr>
<!--btn-block大小佔據母元素整個邊界-->
<button class="btn btn-block">戳我</button>
<hr>
<!--active表示選中 disabled=disabled表示禁用-->
<button class="btn btn-default active">戳我</button>
<button class="btn btn-default ">戳我</button>
<button disabled="disabled" class="btn btn-default ">戳我</button>
</div>
</body>
</html>
4、導航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="nav nav-tabs nav-justified">
<!--橫排顯示 平均分佈-->
<li class="active"><a href="#">登陸</a></li>
<li><a href="#">註冊</a></li>
<li><a href="#">忘記密碼</a></li>
</ul>
<div>
<h1>登陸</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
</div>
<br>
<ul class="nav nav-pills nav-stacked ">
<li class="active"><a href="#">登陸</a></li>
<li><a href="#">註冊</a></li>
<li><a href="#">忘記密碼</a></li>
</ul>
<div>
<h1>登陸</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
</div>
<br>
<!--側欄顯示-->
<div class="row">
<div class="col-xs-4">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">登陸</a></li>
<li><a href="#">註冊</a></li>
<li><a href="#">忘記密碼</a></li>
</ul>
</div>
<div class="col-xs-8">
<h1>登陸</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar navbar-default">
<!--container來約束內容的位置-->
<div class="container">
<div class="navbar-header">
<!--標題logo使用navabar-brand來顯示，表示一個鏈接-->
<a href="#" class="navbar-brand">修大花</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯繫咱們</a></li>
</ul>
<!--添加搜索欄，navbar-left要求向左浮動-->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<!--navbar-right表示靠後浮動-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登陸</a></li>
<li><a href="#">註冊</a></li>
</ul>
</div>
</div>
<div class="container">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
</body>
</html>
5、按鈕組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="well">
<!--btn-toolbar將btn組分組-->
<div class=" btn-toolbar">
<!--三個按鈕鏈接在一塊兒，造成控制按鈕組-->
<div class=" btn-group btn-group-lg">
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
</div>
<div class=" btn-group ">
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
</div>
<div class=" btn-group btn-group-sm">
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
</div>
<div class=" btn-group btn-group-xs">
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
</div>
<br>
<!--橫向-->
<div class=" btn-group-vertical">
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
<button class="btn btn-default">點擊</button>
</div>
</div>
</div>
</body>
</html>
6、面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--這個例子須要結合main.css裏的body{max-width:400px； padding： 20px auto}-->
<div class="panel panel-default">
<div class="panel-heading">
<!--title表示更醒目-->
<div class="panel-title">
用戶統計
</div>
<div class="small text-muted">每日用戶統計</div>
</div>
<div class="panel-body">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
<div class="panel-footer">
<!--底部描述要求字符小，並且相似於禁用模式-->
<div class="small text-muted">數據更新於5秒前</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<!--title表示更醒目-->
<div class="panel-title">
用戶統計
</div>
<div class="small text-muted">每日用戶統計</div>
</div>
<div class="panel-body">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
<div class="panel-footer">
<!--底部描述要求字符小，並且相似於禁用模式-->
<div class="small text-muted">數據更新於5秒前</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<!--title表示更醒目-->
<div class="panel-title">
用戶統計
</div>
<div class="small text-muted">每日用戶統計</div>
</div>
<div class="panel-body">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
<div class="panel-footer">
<!--底部描述要求字符小，並且相似於禁用模式-->
<div class="small text-muted">數據更新於5秒前</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<!--title表示更醒目-->
<div class="panel-title">
用戶統計
</div>
<div class="small text-muted">每日用戶統計</div>
</div>
<div class="panel-body">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
<div class="panel-footer">
<!--底部描述要求字符小，並且相似於禁用模式-->
<div class="small text-muted">數據更新於5秒前</div>
</div>
</div>
</body>
</html>
7、表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>郵箱</th>
<th>註冊於</th>
</tr>
</thead>
<tbody>
<tr>
<td>修大花</td>
<td>xdh@163.com</td>
<td>2048-10-04</td>
</tr>
<tr>
<td>大大大</td>
<td>ddd@163.com</td>
<td>2048-10-03</td>
</tr>
<tr>
<td>小小小</td>
<td>sss@163.com</td>
<td>2048-09-03</td>
</tr>
</tbody>
</table>
<!--單複數行顯示不一樣加table-striped-->
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>郵箱</th>
<th>註冊於</th>
</tr>
</thead>
<tbody>
<tr>
<td>修大花</td>
<td>xdh@163.com</td>
<td>2048-10-04</td>
</tr>
<tr>
<td>大大大</td>
<td>ddd@163.com</td>
<td>2048-10-03</td>
</tr>
<tr>
<td>小小小</td>
<td>sss@163.com</td>
<td>2048-09-03</td>
</tr>
</tbody>
</table>
<!--table-hover在鼠標劃上去的時候會有着重顯示-->
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>郵箱</th>
<th>註冊於</th>
</tr>
</thead>
<tbody>
<tr>
<td>修大花</td>
<td>xdh@163.com</td>
<td>2048-10-04</td>
</tr>
<tr>
<td>大大大</td>
<td>ddd@163.com</td>
<td>2048-10-03</td>
</tr>
<tr>
<td>小小小</td>
<td>sss@163.com</td>
<td>2048-09-03</td>
</tr>
</tbody>
</table>
<!--加邊框用table-bordered-->
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>郵箱</th>
<th>註冊於</th>
</tr>
</thead>
<tbody>
<tr>
<td>修大花</td>
<td>xdh@163.com</td>
<td>2048-10-04</td>
</tr>
<tr>
<td>大大大</td>
<td>ddd@163.com</td>
<td>2048-10-03</td>
</tr>
<tr>
<td>小小小</td>
<td>sss@163.com</td>
<td>2048-09-03</td>
</tr>
</tbody>
</table>
<!--對於特殊用戶特殊對待，用danger，warning、success，info-->
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>郵箱</th>
<th>註冊於</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>修大花</td>
<td>xdh@163.com</td>
<td>2048-10-04</td>
</tr>
<tr class="success">
<td>大大大</td>
<td>ddd@163.com</td>
<td>2048-10-03</td>
</tr>
<tr class="warning">
<td>小小小</td>
<td>sss@163.com</td>
<td>2048-09-03</td>
</tr>
</tbody>
</table>
<!--響應式表格,須要列多才能夠撐開-->
<div class="container">
<div class="table-responsive">
<table class="table ">
<tr>
<th>姓名</th>
<th>郵箱</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
<th>註冊於</th>
</tr>
<tr class="danger">
<td>修大花</td>
<td>xdh@163.com</td>
<td>2048-10-04</td>
<td>2048-10-04</td>
<td>2048-10-04</td>
<td>2048-10-04</td>
<td>2048-10-04</td>
<td>2048-10-04</td>
<td>2048-10-04</td>
<td>2048-10-04</td>
<td>2048-10-04</td>
<td>2048-10-04</td>
</tr>
<tr class="success">
<td>大大大</td>
<td>ddd@163.com</td>
<td>2048-10-03</td>
<td>2048-10-03</td>
<td>2048-10-03</td>
<td>2048-10-03</td>
<td>2048-10-03</td>
<td>2048-10-03</td>
<td>2048-10-03</td>
</tr>
<tr class="warning">
<td>小小小</td>
<td>sss@163.com</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
<td>2048-09-03</td>
</tr>
</table>
</div>
</div>
</body>
</html>
8、分頁
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<!--alert提醒-->
<div class="alert alert-danger">嗯</div>
<div class="alert alert-success">嗯</div>
</div>
<div class="breadcrumb">
<li><a href="#">首頁</a></li>
<li><a href="#">文字列表</a></li>
<!--在下面添加徽章，表示有多少閱讀量-->
<li class="active">文字地址<span class="badge ">50k</span></li>
</div>
<h1>Yo, world</h1>
<p>
<!--顯示副標題-->
<div class="label label-success">面霜</div>
<div class="label label-danger">water baby</div>
<div class="label label-warning">http</div>
</p>
<div>
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<span class="label label-success">ZZZZZ</span>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
</div>
<button class="btn btn-primary">贊 <span class="badge"> 50</span></button>
<div>
<!--投票列表-->
<div class="list-group">
<a href="" class="list-group-item">item</a>
<a href="" class="list-group-item">item</a>
<a href="" class="list-group-item">item</a>
<a href="" class="list-group-item">item</a>
<a href="" class="list-group-item">item</a>
</div>
</div>
<div>
<ul class="pagination">
<!--當前頁-->
<li class="active"><a href="#">上一頁</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一頁</a></li>
</ul>
<ul class="pager">
<li><a href="#">上一頁</a></li>
<!--disabled表示禁用-->
<li class="disabled"><a href="#">下一頁</a></li>
</ul>
</div>
</body>
</html>
9、排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="css/jquery.js"></script>
<scrtipt src="css/bootstrap.js"></scrtipt>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstrap前端框架</h1>
<!--kbd顯示爲黑色背景-->
<p>linux is <kbd> ctrl+shift</kbd> very muck!</p>
<!--var顯示爲斜體-->
<p>linux is <var> ctrl+shift</var> very muck!</p>
</div>
</body>
</html>
10、圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="css/jquery.js"></script>
<scrtipt src="css/bootstrap.js"></scrtipt>
</head>
<body>
<div class="container">
<h1>Bootstrap圖片</h1>
<div>
<!--正方形，四個角帶弧度-->
<img src="css/tu.jpg" width="200px" class="img-rounded">
<!--變爲圓形-->
<img src="css/tu.jpg" width="200px" class="img-circle">
<!--修改背景爲白色-->
<img src="css/tu.jpg" width="200px" class="img-thumbnail">
</div>
</div>
</body>
</html>
11、輔助類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="css/jquery.js"></script>
<scrtipt src="css/bootstrap.js"></scrtipt>
</head>
<body>
<!--文本顏色-->
<p class="text-muted">Liunx is very much</p>
<p class="text-success">Liunx is very much</p>
<p class="text-danger">Liunx is very much</p>
<p class="text-warning">Liunx is very much</p>
<p class="text-info">Liunx is very much</p>
<p class="text-primary">Liunx is very much</p>
<!--背景顏色-->
<p class="bg-danger">Liunx is very much</p>
<p class="bg-warning">Liunx is very much</p>
<p class="bg-info">Liunx is very much</p>
<p class="bg-primary">Liunx is very much</p>
<!--對該段添加關閉按鈕經過class=close添加-->
<p class="bg-primary">Liunx is very much <span class="close">×</span></p>
<!--添加小三角-->
<!--向右浮動 pull-right pull-left向左浮動 clearfix清除浮動-->
<h2 class="bg-primary">Liunx is very much <button class="btn btn-primary pull-right">更多 <span class="caret"></span></button></h2>
<!--塊標籤居中也就是margin：0 auto-->
<p class="text-info center-block">Liunx is very much</p>
<!--hide和show是顯示和隱藏-->
<p class="text-info hide">Liunx is very muchabc</p>
<p class="text-info show">Liunx is very muchaaaaa</p>
</body>
</html>
12、響應式工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="css/jquery.js"></script>
<scrtipt src="css/bootstrap.js"></scrtipt>
</head>
<body>
<div class="container">
<h1>Bootstrap響應式工具</h1>
<div>
img-responsive響應式圖片
<img src="css/tu.jpg" class="img-rounded img-responsive">
</div>
</div>
</body>
</html>
組件
1、圖標字體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<scrtipt src="../bootstrap/js/bootstrap.js"></scrtipt>
</head>
<body>
<p><span class="glyphicon glyphicon-euro"></span>Linux is very much</p>
<p><span class="glyphicon glyphicon-asterisk"></span>Linux is very much</p>
<button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-left"></span></button>
<button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-right"></span></button>
<button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-bottom"></span></button>
<button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-top"></span></button>
</body>
</html>
2、下拉菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">更多課程 <span class="glyphicon glyphicon-triangle-bottom"></span></button>
<ul class="dropdown-menu">
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
</ul>
</div>
<!--在下拉菜單中經過dropdown-header添加標題，經過divider分割事項-->
<div class="dropdown ">
<button class="btn btn-primary" data-toggle="dropdown">更多課程 <span class="glyphicon glyphicon-triangle-bottom"></span></button>
<ul class="dropdown-menu ">
<li class="dropdown-header">週一事項</li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li class="divider"></li>
<li class="dropdown-header">週二事項</li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
</ul>
</div>
<div class="dropdown pull-right">
<button class="btn btn-primary" data-toggle="dropdown">更多課程 <span class="glyphicon glyphicon-triangle-bottom"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">週一事項</li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li class="divider"></li>
<li class="dropdown-header">週二事項</li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
</ul>
</div>
</div>
</body>
</html>
3、按鈕組
一、普通按鈕組、按鈕工具箱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<scrtipt src="../bootstrap/js/bootstrap.js"></scrtipt>
</head>
<body>
<div class="container">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-primary">百度</button>
<button class="btn btn-danger">百度</button>
<button class="btn btn-info">百度</button>
<button class="btn btn-warning">百度</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">百度</button>
<button class="btn btn-danger">百度</button>
<button class="btn btn-info">百度</button>
<button class="btn btn-warning">百度</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">百度</button>
<button class="btn btn-danger">百度</button>
<button class="btn btn-info">百度</button>
<button class="btn btn-warning">百度</button>
</div>
</div>
</div>
</body>
</html>
二、按鈕組尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<scrtipt src="../bootstrap/js/bootstrap.js"></scrtipt>
</head>
<body>
<div class="container">
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary">百度</button>
<button class="btn btn-danger">百度</button>
<button class="btn btn-info">百度</button>
<button class="btn btn-warning">百度</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-primary">百度</button>
<button class="btn btn-danger">百度</button>
<button class="btn btn-info">百度</button>
<button class="btn btn-warning">百度</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-primary">百度</button>
<button class="btn btn-danger">百度</button>
<button class="btn btn-info">百度</button>
<button class="btn btn-warning">百度</button>
</div>
</div>
</div>
</body>
</html>
三、嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="btn-group">
<button class="btn btn-primary">百度</button>
<button class="btn btn-danger">百度</button>
<div class="btn-group dropdown">
<!--保證下拉菜單也是帶圓弧的，須要添加drop-toggle的class屬性-->
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">百度 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
四、垂直排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<!--添加btn-group-vertical垂直排列-->
<div class="btn-group btn-group-vertical">
<button class="btn btn-primary">百度</button>
<button class="btn btn-danger">百度</button>
<div class="btn-group dropdown">
<!--保證下拉菜單也是帶圓弧的，須要添加drop-toggle的class屬性-->
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">百度 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
五、兩端對齊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-primary">百度</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">百度</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">百度</button>
</div>
</div>
</div>
</body>
</html>
六、分列式下拉菜單
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
4、輸入框旁邊添加額外的樣式符號
<form action="" >
<!--input-group下輸入input-group-addon的模式來顯示-->
<div class="input-group input-group-lg">
<div class="input-group-addon">$</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>
<div class="input-group input-group-sm">
<div class="input-group-addon">$</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>
<div class="input-group ">
<div class="input-group-addon">$</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>
</form>
5、做爲額外元素的按鍵
<form action="" >
<!--添加額外的元素按鈕-->
<div class="input-group ">
<div class="input-group-btn">
<input type="button" class="btn btn-primary" value="GO">
</div>
<input type="text" class="form-control">
<div class="input-group-btn">
<input type="button" class="btn btn-primary" value="GO">
</div>
</div>
</form>
6、導航
一、標籤頁式導航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
.row{
padding: 15px 15px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstrap</h1>
<ul class="nav nav-tabs">
<li class="">
<a href="">Linux</a>
</li>
<li class="">
<a href="">Linux</a>
</li>
<li class="">
<a href="">Linux</a>
</li>
</ul>
<div class="row">
<p>linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
linux is ver much
linux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
</p>
</div>
<div class="row">
<p>php is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
linux is ver much
linux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
</p>
</div>
<div class="row">
<p>java is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
linux is ver much
linux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
</p>
</div>
</div>
<script>
$('li').mouseenter(function () {
$(this).addClass('active');
$('li').not($(this)).removeClass('active');
idx = $(this).index('li');
$('.row').eq(idx).show();
$('.row').not($('.row').eq(idx)).hide();
});
$('.row').eq(0).show();
</script>
</body>
</html>
二、膠囊式導航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
.row{
padding: 15px 15px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstrap</h1>
<!--nav-pills表示膠囊式導航索引-->
<ul class="nav nav-pills">
<li class="">
<a href="">Linux</a>
</li>
<li class="">
<a href="">Linux</a>
</li>
<li class="">
<a href="">Linux</a>
</li>
</ul>
<div class="row">
<p>linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
linux is ver much
linux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
</p>
</div>
<div class="row">
<p>php is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
linux is ver much
linux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
</p>
</div>
<div class="row">
<p>java is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
linux is ver much
linux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
</p>
</div>
</div>
<script>
$('li').mouseenter(function () {
$(this).addClass('active');
$('li').not($(this)).removeClass('active');
idx = $(this).index('li');
$('.row').eq(idx).show();
$('.row').not($('.row').eq(idx)).hide();
});
$('.row').eq(0).show();
</script>
</body>
</html>
三、豎排膠囊方式導航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
.navs {
padding: 15px 0;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstrap</h1>
<!--nav-pills表示膠囊式導航索引,nav-stacked表示 側欄堆疊，同時引入col-md方式水平排列-->
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="">
<a href="">Linux</a>
</li>
<li class="">
<a href="">Linux</a>
</li>
<li class="">
<a href="">Linux</a>
</li>
</ul>
</div>
<div class="col-md-10">
<div class="navs">
<p>linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is
ver
much
linux is ver much
linux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver
much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
</p>
</div>
<div class="navs">
<p>php is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver
much
linux is ver much
linux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver
much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
</p>
</div>
<div class="navs">
<p>java is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver
much
linux is ver much
linux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver
much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
</p>
</div>
</div>
</div>
</div>
<script>
$('li').mouseenter(function () {
$(this).addClass('active');
$('li').not($(this)).removeClass('active');
idx = $(this).index('li');
$('.navs').eq(idx).stop().show(1000);
$('.navs').not($('.navs').eq(idx)).stop().hide(100);
});
$('.navs').eq(0).show(100);
</script>
</body>
</html>
7、導航條
一、基礎導航條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
</div>
<script>
</script>
</body>
</html>
二、inverse反色導航條
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
三、導航條中直接button搜索而沒有input框使用navbar-btn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
<!--inverse表明反色-->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<!--導航條中直接放按鈕而沒有input輸入，使用navbar-btn-->
<input type="button" class="btn btn-default navbar-btn" value="搜索">
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
</div>
<script>
</script>
</div></body>
</html>
四、在導航條內放文字使用navbar-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
<!--inverse表明反色-->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<!--導航條中直接放按鈕而沒有input輸入，使用navbar-btn-->
<input type="button" class="btn btn-default navbar-btn" value="搜索">
<!--在導航條內放文字使用navbar-text-->
<p class="navbar-text">小小網站</p>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
</div>
<script>
</script>
</div></div></div></body>
</html>
五、導航條中的連接，使用navbar-link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
<!--inverse表明反色-->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<!--導航條中直接放按鈕而沒有input輸入，使用navbar-btn-->
<input type="button" class="btn btn-default navbar-btn" value="搜索">
<!--在導航條內放文字使用navbar-text-->
<!--導航條中的連接，使用navbar-link-->
<p class="navbar-text">小小<a href="" class="navbar-link">網站</a></p>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
</div>
<script>
</script>
</div></div></div></body>
</html>
六、固定在頂部使用nav內的navbar-fixed-top,底部使用navbar-fixed-bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<!--固定在頂部使用nav內的navbar-fixed-top-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
<!--inverse表明反色-->
<nav class="navbar navbar-inverse ">
<div class="navbar-header">
<a href="" class="navbar-brand">Bootstrap</a>
<button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="mynavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">起步</a></li>
<li><a href="">全局CSS樣式</a></li>
<li><a href="">組件</a></li>
<li><a href="">JavaScript插件</a></li>
<li><a href="">定製</a></li>
<li><a href="">網站實例</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<input type="button" class="btn btn-default" value="GO">
</div>
</div>
</form>
<!--導航條中直接放按鈕而沒有input輸入，使用navbar-btn-->
<input type="button" class="btn btn-default navbar-btn" value="搜索">
<!--在導航條內放文字使用navbar-text-->
<!--導航條中的連接，使用navbar-link-->
<p class="navbar-text">小小<a href="" class="navbar-link">網站</a></p>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Bootstrap網站</a></li>
</ul>
</div>
</nav>
</div>
<script>
</script>
</div></div></div></body>
</html>
七、路徑導航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
<!--路徑導航使用breadcrumb-->
<ol class="breadcrumb">
<li><a href="">Linux</a></li>
<li><a href="">Linux</a></li>
<li class="active">Linux</li>
</ol>
<script>
</script>
</div></div></div></body>
</html>
8、分頁
一、基礎分頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
<!--路徑導航使用breadcrumb-->
<ol class="breadcrumb">
<li><a href="">Linux</a></li>
<li><a href="">Linux</a></li>
<li class="active">Linux</li>
</ol>
<ul class="pagination">
<li><a href="">«</a></li>
<li><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="">5</a></li>
<li><a href="">»</a></li>
</ul>
<script>
</script>
</div></div></div></body>
</html>
二、激活與禁用，普通上下頁，兩端對齊的上下頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
<!--路徑導航使用breadcrumb-->
<ol class="breadcrumb">
<li><a href="">Linux</a></li>
<li><a href="">Linux</a></li>
<li class="active">Linux</li>
</ol>
<ul class="pagination">
<li><a href="">«</a></li>
<li><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="">5</a></li>
<li><a href="">»</a></li>
</ul>
<ul class="pagination">
<li class="active"><a href="">«</a></li>
<li><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="">5</a></li>
<li class="disabled"><a href="">»</a></li>
</ul>
<br>
<!--尺寸使用pagination-lg和sm表示-->
<ul class="pagination pagination-lg">
<li><a href="">«</a></li>
<li><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="">5</a></li>
<li><a href="">»</a></li>
</ul>
<br>
<ul class="pagination pagination-sm">
<li><a href="">«</a></li>
<li><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="">5</a></li>
<li><a href="">»</a></li>
</ul>
<br>
<ul class="pagination">
<li><a href="">«</a></li>
<li><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="">5</a></li>
<li><a href="">»</a></li>
</ul>
<br>
<!--上下頁-->
<ul class="pager">
<li><a href="">Previous</a></li>
<li><a href="">Next</a></li>
</ul>
<!--兩端對齊 使用li中使用兩個類表示-->
<ul class="pager">
<li class="previous"><a href="">上一頁</a></li>
<li class="next"><a href="">上一頁</a></li>
</ul>
<script>
</script>
</div></div></div></body>
</html>
9、標籤與徽章
<h1> linux is very much <span class="label label-danger">300</span></h1>
<h1> linux is very much <span class="badge">300</span></h1>
<button class="btn btn-primary">Message <span class="badge">200</span></button>
10、巨幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
<div class="jumbotron">
<h1>演示</h1>
<p>
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
</p>
</div>
<script>
</script>
</div>
</body>
</html>
11、縮略圖和自定義內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 ">
<!--縮略圖在a上添加thumbnail屬性-->
<a href="" class="thumbnail">
<img src="holder.js/100px200">
</a>
</div>
<div class="col-md-3 ">
<a href="" class="thumbnail">
<img src="holder.js/100px200">
</a>
</div>
<div class="col-md-3 ">
<a href="" class="thumbnail">
<img src="holder.js/100px200">
</a>
</div>
<div class="col-md-3 ">
<a href="" class="thumbnail">
<img src="holder.js/100px200">
</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="holder.js/100px200" alt="">
<div class="caption">
<h2>Linux 技術</h2>
<p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
is very muchLinux is very much
</p>
<input type="button" class="btn btn-primary" value="OK">
<input type="button" class="btn btn-danger" value="Cancel">
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="holder.js/100px200" alt="">
<div class="caption">
<h2>Linux 技術</h2>
<p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
is very muchLinux is very much
</p>
<input type="button" class="btn btn-primary" value="OK">
<input type="button" class="btn btn-danger" value="Cancel">
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="holder.js/100px200" alt="">
<div class="caption">
<h2>Linux 技術</h2>
<p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
is very muchLinux is very much
</p>
<input type="button" class="btn btn-primary" value="OK">
<input type="button" class="btn btn-danger" value="Cancel">
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="holder.js/100px200" alt="">
<div class="caption">
<h2>Linux 技術</h2>
<p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
is very muchLinux is very much
</p>
<input type="button" class="btn btn-primary" value="OK">
<input type="button" class="btn btn-danger" value="Cancel">
</div>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
12、進度條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
<div class="alert alert-success">
<p>
<!--data-dismiss裏添加標記，原理是找到它父標籤而後隱藏，就可使關閉-->
<span class="close" data-dismiss="alert">×</span>
Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
</p>
</div>
<div class="alert alert-danger">
<!--在a標籤中添加alert-link屬性能夠變成連接-->
<p><a href="#" class="alert-link">Linux is ver much</a>Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
</p>
</div>
<div class="alert alert-warning">
<p>Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
</p>
</div>
<div class="alert alert-info">
<p>Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
</p>
</div>
</div>
<script>
</script>
</body>
</html>
十3、進度條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
<!--progress-bar progress表明進度條，progress-sucess表明顏色，style里加width表明進度，progress-bar-striped表明條紋-->
<!--加active表明動畫效果-->
<div class="progress">
<div class="progress-bar progress-success progress-bar-striped active" style="width:90%">90%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:50%">50%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:30%">30%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">10%</div>
</div>
<!--多個疊加有堆疊效果-->
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">10%</div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:30%">30%</div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:50%">50%</div>
</div>
<!--動態進度條-->
<div class="progress">
<div id="a" class="progress-bar progress-success progress-bar-striped active" style="width:5%">0%</div>
</div>
</div>
<script>
s=0;
v=2;
sobj = setInterval(function () {
s+=v;
if(s>=100){
clearInterval(sobj);
}
$('#a').text(s+'%').css({'width':s+'%'});
},100)
</script>
</body>
</html>
十4、媒體對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
<div class="media">
<!--左評論 使用media-top能夠頭像和頂部對齊-->
<div class="media-left media-top">
<div class="media-object">
<img src="holder.js/100x100" alt="">
</div>
</div>
<div class="media-body">
<div class="media-heading">
<h2>linux技術</h2>
<p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
</p>
</div>
</div>
<br>
<!--頭像與內容底部對齊-->
<div class="media-left media-bottom">
<div class="media-object">
<img src="holder.js/100x100" alt="">
</div>
</div>
<div class="media-body">
<div class="media-heading">
<h2>linux技術</h2>
<p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
</p>
</div>
</div>
<br>
<div class="media-left media-middle">
<div class="media-object">
<img src="holder.js/100x100" alt="">
</div>
</div>
<div class="media-body">
<div class="media-heading">
<h2>linux技術</h2>
<p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
</p>
</div>
</div>
<br>
<div class="media-body">
<div class="media-heading">
<h2>linux技術</h2>
<p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much</p>
</div>
</div>
<!--右評論-->
<div class="media-right">
<div class="media-object">
<img src="holder.js/100x100" alt="">
</div>
</div>
</div>
十5、列表組與面板結合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
<!--列表組-->
<ul class="list-group">
<li class="list-group-item">Linux</li>
<li class="list-group-item">Linux</li>
<li class="list-group-item">Linux</li>
<li class="list-group-item">Linux</li>
</ul>
<br>
<!--連接列表組-->
<div class="list-group">
<a href="" class="list-group-item active">Linux</a>
<!--添加顏色-->
<a href="" class="list-group-item list-group-item-success">Linux</a>
<a href="" class="list-group-item list-group-item-danger">Linux</a>
<a href="" class="list-group-item list-group-item-warning">Linux</a>
<a href="" class="list-group-item list-group-item-info">Linux</a>
<!--加上disable後，使用jquery變爲不可用-->
<a href="" class="list-group-item disabled">Linux</a>
</div>
<br>
<!--新聞類網站使用-->
<div class="col-md-6">
<div class="list-group">
<a href="" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
</p>
</a>
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
</p>
</a>
</div>
</div>
<div class="col-md-6">
<div class="list-group">
<a href="" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
</p>
</a>
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
</p>
</a>
</div>
</div>
<div class="page-header">
<h1>帶面板的列表組</h1>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<h1>百度新聞</h1>
</div>
</div>
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
</p>
</a>
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
</p>
</a>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<h1>百度新聞</h1>
</div>
</div>
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
</p>
</a>
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
very muchLinux is very muchLinux is very much
</p>
</a>
</div>
</div>
<div class="page-header">
<h1>帶表格的面板</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
Linux
</div>
</div>
<div class="panel-body">
<table class="table table-hover table-sctriped table-bordered">
<tr>
<th>ID</th>
<th>ID</th>
<th>ID</th>
</tr>
<tr>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
</tr>
</table>
</div>
</div>
<div class="page-header">
<h1>無縫對接表格面板去掉panel-body</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title text-center">
Linux
</div>
</div>
<table class="table table-hover table-sctriped table-bordered">
<tr>
<th>ID</th>
<th>ID</th>
<th>ID</th>
</tr>
<tr>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
</tr>
</table>
</div>
</div>
</div>
<script>
$('.disabled').click(function () {
return false;
})
</script>
</body>
</html>
十6、iframe嵌入其餘頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">嵌入其餘頁面</h1>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.163.com"></iframe>
</div>
</div>
<script>
</script>
</body>
</html>
十7、well
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">嵌入其餘頁面</h1>
<div class="well well-lg">
linux is very much!
</div>
<div class="well">
linux is very much!
</div>
<div class="well well-sm">
linux is very much!
</div>
</div>
<script>
</script>
</body>
</html>
JavaScript插件
1、模態框
一、基礎模態框，使用data-toggle來指定動做爲彈出，使用data-target來指定彈出模態框的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">模態框</h1>
<!--data-toggle方法爲modal方式，目標是mymodal-->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">Launch demo modal</button>
<!--modal是和上面data-toggle對應，fade表示淡入效果-->
<div id="mymodal" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span class="close" data-dismiss="modal">×</span>
<h4 class="text-center">Linux技術文章</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h5 class="text-center">Linux</h5>
</div>
</div>
<div class="list-group">
<a href="" class="list-group-item">
<div class="list-group-heading">
<div class="list-group-title">
Linuxssssss
</div>
</div>
<div class="list-group-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
</div>
</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h5 class="text-center">Linux</h5>
</div>
</div>
<div class="list-group">
<a href="" class="list-group-item">
<div class="list-group-heading">
<div class="list-group-title">
Linuxssssss
</div>
</div>
<div class="list-group-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-primary" value="save" >
<input type="button" class="btn btn-default" value="close" data-dismiss="modal">
</div>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
二、不使用data-toggle，使用js方式裏的show和hide函數來實現彈出與關閉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">模態框</h1>
<!--去掉data-toggle，使用js中show函數完成一樣彈出的功能-->
<button class="btn btn-primary smodal" >Launch demo modal</button>
<!--modal是和上面data-toggle對應，fade表示淡入效果-->
<div id="mymodal" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span class="close" data-dismiss="modal">×</span>
<h4 class="text-center">Linux技術文章</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h5 class="text-center">Linux</h5>
</div>
</div>
<div class="list-group">
<a href="" class="list-group-item">
<div class="list-group-heading">
<div class="list-group-title">
Linuxssssss
</div>
</div>
<div class="list-group-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
</div>
</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h5 class="text-center">Linux</h5>
</div>
</div>
<div class="list-group">
<a href="" class="list-group-item">
<div class="list-group-heading">
<div class="list-group-title">
Linuxssssss
</div>
</div>
<div class="list-group-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input id="save" type="button" class="btn btn-primary save" value="save"/>
<input type="button" class="btn btn-default" data-dismiss="modal" value="close"/>
</div>
</div>
</div>
</div>
</div>
<script>
$('.save').click(function () {
//把modal隱藏 modal('hide')表示隱藏 modal（"show'）表示顯示
$('#mymodal').modal('toggle');
});
$('.smodal').click(function () {
$('#mymodal').modal('toggle');
});
//打開模態框前變爲紅色
$('#mymodal').on('shown.bs.modal', function () {
$('body').css({'background':'#33f'})
});
//打開模態框後桌面變成藍色
$('#mymodal').on('shown.bs.modal', function (e) {
$('body').css({'background':'#aaf'})
});
//關閉時模態框爲顏色
$('#mymodal').on('hide.bs.modal', function () {
$('body').css({'background':'#2ff'})
});
//關閉後模態框後桌面變成藍色
$('#mymodal').on('hidden.bs.modal', function (e) {
$('body').css({'background':'#f23'})
});
</script>
</body>
</html>
三、將button變爲a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">模態框</h1>
<!--去掉data-toggle，使用js中show函數完成一樣彈出的功能-->
<a href="#mymodal" class="btn btn-primary smodal" >Launch demo modal</a>
<!--modal是和上面data-toggle對應，fade表示淡入效果-->
<div id="mymodal" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span class="close" data-dismiss="modal">×</span>
<h4 class="text-center">Linux技術文章</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h5 class="text-center">Linux</h5>
</div>
</div>
<div class="list-group">
<a href="" class="list-group-item">
<div class="list-group-heading">
<div class="list-group-title">
Linuxssssss
</div>
</div>
<div class="list-group-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
</div>
</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h5 class="text-center">Linux</h5>
</div>
</div>
<div class="list-group">
<a href="" class="list-group-item">
<div class="list-group-heading">
<div class="list-group-title">
Linuxssssss
</div>
</div>
<div class="list-group-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input id="save" type="button" class="btn btn-primary save" value="save"/>
<input type="button" class="btn btn-default" data-dismiss="modal" value="close"/>
</div>
</div>
</div>
</div>
</div>
<script>
$('.save').click(function () {
//把modal隱藏 modal('hide')表示隱藏 modal（"show'）表示顯示
$('#mymodal').modal('toggle');
});
$('.smodal').click(function () {
$('#mymodal').modal('toggle');
});
//打開模態框前變爲紅色
$('#mymodal').on('shown.bs.modal', function () {
$('body').css({'background':'#33f'})
});
//打開模態框後桌面變成藍色
$('#mymodal').on('shown.bs.modal', function (e) {
$('body').css({'background':'#aaf'})
});
//關閉時模態框爲顏色
$('#mymodal').on('hide.bs.modal', function () {
$('body').css({'background':'#2ff'})
});
//關閉後模態框後桌面變成藍色
$('#mymodal').on('hidden.bs.modal', function (e) {
$('body').css({'background':'#f23'})
});
</script>
</body>
</html>
四、模態框大小調整 modal-sm和modal-lg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../css/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/holder.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">模態框</h1>
<a href="#mymodal" class="btn btn-primary smodal" >Launch demo modal</a>
<div id="mymodal" class="modal fade" >
<!--modal-sm和modal-lg兩種對話框大小-->
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<span class="close" data-dismiss="modal">×</span>
<h4 class="text-center">Linux技術文章</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h5 class="text-center">Linux</h5>
</div>
</div>
<div class="list-group">
<a href="" class="list-group-item">
<div class="list-group-heading">
<div class="list-group-title">
Linuxssssss
</div>
</div>
<div class="list-group-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
</div>
</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h5 class="text-center">Linux</h5>
</div>
</div>
<div class="list-group">
<a href="" class="list-group-item">
<div class="list-group-heading">
<div class="list-group-title">
Linuxssssss
</div>
</div>
<div class="list-group-text">
Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input id="save" type="button" class="btn btn-primary save" value="save"/>
<input type="button" class="btn btn-default" data-dismiss="modal" value="close"/>
</div>
</div>
</div>
</div>
</div>
<script>
$('.save').click(function () {
//把modal隱藏 modal('hide')表示隱藏 modal（"show'）表示顯示
$('#mymodal').modal('toggle');
});
$('.smodal').click(function () {
$('#mymodal').modal('toggle');
});
//打開模態框前變爲紅色
$('#mymodal').on('shown.bs.modal', function () {
$('body').css({'background':'#33f'})
});
//打開模態框後桌面變成藍色
$('#mymodal').on('shown.bs.modal', function (e) {
$('body').css({'background':'#aaf'})
});
//關閉時模態框爲顏色
$('#mymodal').on('hide.bs.modal', function () {
$('body').css({'background':'#2ff'})
});
//關閉後模態框後桌面變成藍色
$('#mymodal').on('hidden.bs.modal', function (e) {
$('body').css({'background':'#f23'})
});
</script>
</body>
</html>