一.what
前端CSS框架,另一個前端框架Foundation
前端框架:使用HTML、CSS、JavaScript編寫的組件工具集,拿來可以直接用，不用從造輪子.
二.why
最流行的前端框架、用的多
Twitter公司於2011年8月開源的整體式前端框架,由Twitter的設計師Mark Otto和Jacob
Thornton合作開發，短短幾個月時間紅遍全球,大量的Bootstrap風格的網站出現在互聯網的浪潮中,而應用更爲廣泛的是它的後臺管理頁面.近兩年的所有互聯網項目的後臺均採用了Bootstrap進行構建.
爲什麼如此流行
1.功能強大和樣式美觀
2.簡單易用、文檔豐富
3.高度可定製性
4.豐富的生態圈
5.佈局兼容性好
三.how(第一個程序)
1.下載Bootstrap
http://getbootstrap.com
最新版本bootstrap-3.3.7
不同版本的區別: 最新版本已經發展到Bootstrap 3 但是不意味着 Bootstrap2已經淘汰了,Bootstrap3採用了扁平化的風格,Bootstrap2在按鈕、工具欄等位置更多采用了立體的效果,它們之間沒有誰好誰壞的區別,只是設計風格的不同. 應該根據自己項目的實際需求來決定使用哪一個版本
扁平化概念的核心意義是：去除冗餘、厚重和繁雜的裝飾效果。而具體表現在去掉了多餘的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作爲核心被凸顯出來。同時在設計元素上，則強調了抽象、極簡和符號化。
關於扁平化可以參考
http://baike.baidu.com/link?url=8RakX7FRvO0H7FbVWc2mBOMcSpy-humjYXGQEYZTjrbPfcCM1JNZCPjk0Hf60TlY6ma0FYvn5a992RPpfpJVA_
2.在項目中引入Bootstrap
引入3個文件
bootstrap.css
jquery.js
Bootstrap.js
Bootstrap要求的jquery在1.9.1版本或以上,jQuery3以下
演示代碼如下：
<html>
<head>
<title>第一個Bootstrap程序</title>
<link href="../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<h1>Hello,Bootstrap!</h1>
<script src="jquery-2.1.4.js"></script>
<script src="cbootstrap.js"></script>
</body>
</html>
需要注意的是因爲bootstrap框架依賴於jquery,所以要先導入jquery.js再導入bootstrap.js
.另外以前我們導入 js都是在head中導入,現在爲什麼要把它放到body中導入呢?
因爲如果放到head中導入,服務器給客戶端瀏覽器傳輸該頁面的時候從上到下傳輸,這樣會先傳輸js文件,如果用戶的網速比較慢,這樣在傳輸js文件的過程中,body中的內容還沒有傳輸過來,這樣用戶看到的是一片白,影響用戶的體驗,所以我們通常把js文件放到後面加載,這樣用戶可以先看到body中的內容,再下載js來改變頁面的行爲,提高用戶了用戶的體驗.(否則用戶看見一片白直接關閉網頁了)
普通純HTML效果如下
比較全的第一個程序
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!!!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
代碼解釋1：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
頁面寬度爲設備寬度,初始縮放比例爲1.0,調整比例對桌面瀏覽器並不起作用,只對移動端瀏覽器生效,比例值越大字越大
該語句是爲了解決移動端瀏覽器顯示問題
不加上面這句話,在web端訪問沒問題,在移動端瀏覽器中顯示效果如下
加上這句話以後效果如下
具體詳見:
http://davidbcalhoun.com/2010/viewport-metatag/
代碼解釋2:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
條件註釋 IE9以下 引入這兩個文件,IE9以上(包括IE9)把它當做註釋內容,不引入.
引入這兩個文件爲了讓IE8支持HTML5元素和媒體查詢.
四.基本樣式
1.普通按鈕
(1)按鈕基本樣式
演示代碼:
<button type="button" class="btn btn-default">默認</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危險</button>
<button type="button" class="btn btn-link">危險</button>
(2)調節按鈕的大小
<p>
<button type="button" class="btn btn-primary btn-lg">主要</button>
<button type="button" class="btn btn-default btn-lg">默認</button>
</p>
<p>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-default">默認</button>
</p>
<br/>
<p>
<button type="button" class="btn btn-primary btn-sm">主要</button>
<button type="button" class="btn btn-default btn-sm">默認</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">主要</button>
<button type="button" class="btn btn-default btn-xs">默認</button>
</p>
(3)塊級按鈕
<button> 和<a> 默認都是行內元素(內聯元素),而對於移動端來說一個佔據一行的大按鈕再正常不過了
演示代碼:
<button type="button" class="btn btn-primary btn-block">主要</button>
<button type="button" class="btn btn-default btn-block">默認</button>
(4)不可點擊的按鈕
講按鈕的背景色做50%的褪色處理以呈現出無法點擊的效果
<button type="button" class="btn btn-primary" disabled="disabled">主要</button>
<button type="button" class="btn btn-default" disabled="disabled">默認</button>
2.關閉按鈕
對按鈕元素應用.close類就可以顯示一個關閉按鈕,如圖所示
<button type="button" class="close" aria-hidden="true">×</button>
aria-hidden="true" 對屏幕閱讀器來說這個按鈕時隱藏的
屏幕閱讀器,便於殘障人士更方便閱讀網頁內容的工具
關於屏幕閱讀器,可參見
http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/
3.下拉按鈕
對span元素應用caret類就可以顯示一個下拉符號
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
4.圖片
<img src="img/beer.jpg" />
<img src="img/beer.jpg" class="img-rounded" />
<img src="img/beer.jpg" class="img-circle" />
<img src="img/beer.jpg" class="img-thumbnail" />
5.表格
演示代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>bootstrap表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>
<style type="text/css">
tr.tableHead {
background-color:#000000;
color:#ffffff;
}
tr.tableHead>th {
text-align: center;
}
</style>
</head>
<body>
<div class="text-center">
<h1>商品信息</h1>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr class="tableHead">
<th>商品編號</th>
<th>商品名稱</th>
<th>商品描述</th>
<th>商品種類</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>macbook air</td>
<td>蘋果最新超薄筆記本</td>
<td>筆記本</td>
<td><a href="#">修改</a></td>
<td><a href="#">刪除</a></td>
</tr>
<tr>
<td>2</td>
<td>ipad pro</td>
<td>蘋果最新平板電腦</td>
<td>平板電腦</td>
<td><a href="#">修改</a></td>
<td><a href="#">刪除</a></td>
</tr>
<tr>
<td>3</td>
<td>iphone6s plus</td>
<td>蘋果最新大屏手機</td>
<td>手機</td>
<td><a href="#">修改</a></td>
<td><a href="#">刪除</a></td>
</tr>
</tbody>
</table>
</div>
<script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>
6.工具類
(1)浮動工具
左浮動、右浮動: 爲元素添加.pull-left、.pull-right類就可以設置左浮動和有浮動
演示代碼如下:
<div class="pull-left">111</div>
<div class="pull-right">222</div>
內部的源代碼如下:
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
!important; 設置該屬性爲最高優先級,即相當於把該屬性定義在css文件最下面.
(2)顯示/隱藏工具
使用.show類顯示, .hidden類隱藏,這種隱藏是不佔位的,相當於設置了display:none
<div class="show">333</div>
<div class="hidden">444</div>
(3)居中
使用.center-block 類將元素設爲塊級元素並居中
<div style="width:100px;background-color:yellowgreen;" class="center-block">555</div>
注意必須設置元素的寬度居中才有效
5.對除了屏幕閱讀器的設備隱藏
使用.sr-only類
<a class="sr-only" href="#content">Skip to main content</a>
五.組件集
1.導航條
Bootstrap的導航主要分爲膠囊式導航、麪包屑導航、頭部導航3類,可以滿足大多數的開發需求.
膠囊式導航
水平膠囊導航
膠囊導航實質是一個無序列表,只需要給ul元素添加.nav和.nav-pills類即可
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
垂直膠囊導航
如果需要縱向的膠囊導航, 只需要在水平膠囊導航的基礎上加一個.nav-stacked 類即可
<div style="width:140px;text-align:center;">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
麪包屑導航
麪包屑導航一般用於有層次關係的選項，如果想實現麪包屑導航,需要給ul加一個.breadcrumb類即可.
<ul class="breadcrumb">
<li><a href="#">首頁</a></li>
<li><a href="#">資料庫</a></li>
<li><a href="#">數據</a></li>
</ul>
頭部導航
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <!--這裏設置網站的標題 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">網站Logo</a>
</div>
<!—這裏設置網站的鏈接 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">鏈接<span class="sr-only">(current)</span></a></li>
<li><a href="#">鏈接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜單<span class="caret"></span></a>
<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>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">鏈接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜單<span class="caret"></span></a>
<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>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
具體分析頭部導航主要分爲兩層結構,第一層是最外面的 <nav class="navbar navbar-default">…</nav>，這一層用於設置導航的基本樣式
將.navbar-default類替換爲 .navbar-inverse類,則顯示爲反色的導航(黑底白字)
第二層有兩個並列的元素: <div class="navbar-header">…</div>內部用於設置標題內容.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">….</div>內部則用於編寫具體的導航鏈接、搜索表單、下拉菜單等具體的導航內容。
Bootstrap提供了在小窗口下導航 收起/展開的功能
同學們可以把上面的窗口拖小的試一下
添加.navbar-fixed-top可以讓導航條固定在頂部,不會隨頁面滾動而消失。爲了防止固定在頂部後遮擋正常內容,需要設置:body{padding-top:50px;} 其中具體的值取決於導航條的高度
加了body的補白不會遮擋正常內容,不加會遮擋
2.下拉菜單
演示代碼：
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">選項一</a></li>
<li><a href="#">選項二</a></li>
<li><a href="#">選項三</a></li>
<li class="divider"></li>
<li><a href="#">選項四</a></li>
</ul>
</div>
按鈕和下拉選擇都要包裹在<div class="dropdown">….</div>內
按鈕必須添加 data-toggle="dropdown" 觸發器
放置下拉選項的無須列表需要添加 .dropdown-menu 類
添加一個空的<li class="divider"></li>來分割列表項
3.按鈕組
上面一組是放到按鈕組中的效果,下面一組是沒有放到按鈕組的效果
按鈕組用於把一組按鈕放在同一行裏，按鈕之間沒有間隙.用法很簡單,只需要將一組按鈕
放在<div class="btn-group">..</div>中即可.
演示代碼:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<input type="button" class="btn btn-default" value="點我" />
</div>
(1)垂直排列
<div class="btn-group-vertical">
</div>
(2)兩端對齊(按鈕組拉伸到100%寬度)
演示代碼:
<div class="btn-group btn-group-justified">
<a class="btn btn-default">Left</a>
<a class="btn btn-default">Middle</a>
<a class="btn btn-default">Right</a>
</div>
注意:兩端對齊的用法只適用於<a>元素,因爲按鈕元素不能應用這些樣式並將其所包含的內容兩端對齊.
(3)嵌套,可以在 按鈕組 內繼續 嵌套 按鈕組
演示代碼:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">選項一</a></li>
<li><a href="#">選項二</a></li>
<li><a href="#">選項三</a></li>
<li class="divider"></li>
<li><a href="#">選項四</a></li>
</ul>
</div>
</div>
4.input控件組
多個input控件放到一組中配合使用,下面演示了幾種常見的組合，最常見的input控件組
非搜索框莫屬.
(1)搜索框
實質就是 文本框+按鈕
演示代碼:
<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<input type="button" name="search" value="search" class="btn btn-default"/>
</span>
</div>
如果需要帶下拉菜單的按鈕,只需要將按鈕換成下拉菜單即可。
(2)搜索框+文字
搜索框後不是按鈕,不可點擊
演示代碼:
<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control" />
<span class="input-group-addon">
輸入完成後回車
</span>
</div>
5.列表組
上圖是未經美化的列表,下圖是經過美化的列表
演示代碼如下:
<div style="width:100px;">
<ul class="list-group">
<li class="list-group-item"><a href="">選項一</a></li>
<li class="list-group-item"><a href="">選項二</a></li>
<li class="list-group-item"><a href="">選項三</a></li>
<li class="list-group-item"><a href="">選項四</a></li>
</ul>
</div>
注意:列表組中使用有序列表時不會顯示序號.
列表組不僅可以應用於列表,還可以將其他需要列表的元素展現爲列表的樣子.例如,
左圖爲不加樣式的,右圖爲加上列表組樣式的.
演示代碼:
<div class="class="list-group" style="width:200px;">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">英格蘭戰勝威爾士</h4>
<p>最新歐洲盃戰況英格蘭2:1戰勝威爾士....</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">烏克蘭對北愛爾蘭</h4>
<p>烏克蘭對北愛爾蘭....</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">德國對波蘭</h4>
<p>德國隊波蘭....</p>
</a>
</div>
爲列表組添加徽章也十分容易,Bootstrap會自動將徽章放置在右邊
演示代碼:
<div style="width:150px;">
<ul class="list-group">
<li class="list-group-item">
<!-- 即使將徽章放在前面,最終還是會居右放置-->
<span class="badge">52</span>
<a href="">中國隊金牌</a>
</li>
<li class="list-group-item">
<span class="badge">48</span>
<a href="">美國隊金牌</a>
</li>
<li class="list-group-item">
<span class="badge">41</span>
<a href="">俄羅斯隊金牌</a>
</li>
</ul>
</div>
6.分頁
幾乎所有的列表頁面都需要分頁, Bootstrap提供了一個較爲美觀的分頁樣式,如下圖所示：
實現上述效果比較簡單,只需給無序列表的ul元素添加pagination類即可
演示代碼：
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
可以通過添加 .pagination-lg類或.pagination-sm類來獲得比標準尺寸更大或更小的分頁,例如:
<ul class="pagination pagination-lg”>..</ul>
<ul class="pagination">..</ul>
<ul class="pagination pagination-sm”>..</ul>
如果僅僅想使用上一頁/下一頁的功能怎麼辦?Bootstrap也內置了該功能,爲ul添加.pager類即可，演示代碼:
<ul class="pager">
<li><a href="#">上一頁</a></li>
<li><a href="#">下一頁</a></li>
</ul>
注意:翻頁元素默認居中對齊,如果爲列表元素添加.previous和.next類,可以將上一頁/下一頁按鈕設置爲兩端對齊.演示代碼:
<div>
<ul class="pager">
<li class="previous"><a href="#">上一頁</a></li>
<li class="next"><a href="#">下一頁</a></li>
</ul>
</div>
7.標籤和Badge
標籤一般用於對內容進行標記,例如可以用在京東的訂單管理後臺,標示訂單的狀態(”未發貨”、”已發貨”、”已完成”等)
Bootstrap內置了6種常用的標籤類,分別爲default(默認)、primary(主要)、success(成功)、info(消息)、warning(警告)、danger(危險操作)
演示代碼:
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
除了標籤之外,還有一種提示信息很常用,很多網站都有消息系統來提示用戶有未讀的新聞、私信等內容,Bootstrap中稱之爲badge(徽章),如圖所示
演示代碼:
<button class="btn btn-primary">
未讀信息
<span class="badge">4</span>
</button>
8.縮略圖
有時候需要在網頁中佈局圖像、文本等(例如商品展示),可以使用縮略圖
演示代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 縮略圖</title>
<link href="../../css/bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的佔位符縮略圖">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的佔位符縮略圖">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的佔位符縮略圖">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的佔位符縮略圖">
</a>
</div>
</div>
<script src="../../js/jquery/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>
9.面板
很多時候需要將某些內容放到一個容器裏,此時可以使用Bootstrap的面板組件.
可以看到,面板的作用就是加上了容器的邊框並設置了內容和容器間的邊距,對應最簡單面板樣式的代碼如下：
<div class="panel panel-default">
<div class="panel-body">基礎面板示例</div>
</div>
我們還可以爲面板添加header和footer，如下圖所示
演示代碼如下:
<div class="panel panel-default" style="width:500px;">
<div class="panel-heading">面板頁頭</div>
<div class="panel-body">面板內容省略...</div>
<div class="panel-footer">面板頁腳</div>
</div>
面板代碼的配色和之前介紹的標籤是一致的,都是對應諸如success、warning、danger等顏色,例如
<div class="panel panel-default">…</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>
10.進度條
進度條常用於文件的上傳和下載、內容的加載等場景,Bootstrap提供了多種進度條樣式供選擇.
注意:Bootstrap以及其他前端組件只解決進度條的樣式問題,追蹤進度扔需依賴服務端程序.
Bootstrap中,一個標準的進度條如下圖所示:
最簡單的實現代碼如下:
<div class="progress" style="width:500px;">
<div class="progress-bar" style="width:60%;"></div>
</div>
爲外層的div元素添加.progress類,爲內層的div元素添加.progress-bar類,並控制內層div的寬度百分比,這樣就得到一個基礎的進度條了.
進度條的顏色既可以自己根據需要用自定義的顏色進行覆蓋,也可以調用Bootstrap內置的類來覆蓋.
爲內層的div元素添加. progress-bar-success就可以獲得如下圖的顏色,其命名規律和Bootstrap的標籤類是一致的.
<div class="progress" style="width:500px;">
<div class="progress-bar progress-bar-success" style="width:60%;"></div>
</div>
我們還可以爲進度條添加條紋效果,如下圖所示.
實現條紋效果需要爲外層的div添加.progress-striped類,演示代碼:
<div class="progress progress-bar-striped" style="width:500px;">
<div class="progress-bar progress-bar-info" style="width:60%;"></div>
</div>
六.Bootstrap中的JavaScript特效
Bootstrap的流行很大程度上得益於它大大降低了頁面開發的學習成本,很多時候,JavaScript效果是一些非專業人士或美工出身的站長最頭疼的問題,從零開始學習一門真正的編程語言,到能夠在實戰中實現足夠好的效果,這個時間和學習成本是相當高的.而Bootstrap實現了從UI到JavaScript代碼的一體化,只要在HTML代碼中加入框架約定的觸發器,就可以實現大多數的效果.即使用導官方沒有提供的效果,開源社區的開發者也往往能提供現成的解決方案.
下面就來看看Bootstrap提供的幾種常用效果吧.
1.模態對話框
如果想讓用戶在當前頁面完成某種稍顯複雜的操作,譬如登錄、註冊,或者是閱讀一段用戶說明，模態對話框是一個不錯的選擇。用戶在操作或閱讀完畢後可以很方便地返回原頁面，免去了頁面跳轉帶來的等待.
點擊”開始演示模態框” 按鈕後,彈出模態對話框
演示代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示分頁組件</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<h2>創建模模態對話框（Modal）</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
開始演示模態框
</button>
<div class="modalfade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模態框（Modal）標題
</h4>
</div>
<div class="modal-body">
模態對話框示例
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
</div>
</div>
<script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>
根據代碼分析,完整的模態對話框功能主要分爲兩個部分:出發按鈕和對話框.出發按鈕可以是一個button，也可以是一個鏈接，只需要加入兩個元素:
data-toggle=” modal”觸發器
data-target="#myModal",用於和相應的對話框id進行對應.
對話框部分主要分3層.
第一層:<div class=”modal” id=”myModal”>…</div>,這一層使用class=”modal”設置樣式並設置模態對話框的觸發類,提供id和觸發按鈕的data-target屬性的值進行對應，還可以添加其他的配置屬性.
第二層:<div class=”modal-dialog”>…</div>,設置一個居中的對話框.
第三層:<div class=”modal-content”>…</div>,設置具體的內容.
注意:不要在一個模態框上重疊另一個模態框.
開發中,選項參數可以通過data屬性或JavaScript進行傳遞。對於data屬性,需要將選項名稱放到data-之後,例如data-backdrop=””，具體的參數可以參考官方文檔.
2.標籤頁切換
如果有多個分類的內容,又不想全部直接展現在頁面上,使用標籤頁進行切換是一個不錯的選擇.如下圖所示
演示代碼:
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#intro" data-toggle="tab">商品介紹</a></li>
<li><a href="#parameter" data-toggle="tab">規格參數</a></li>
<li><a href="#qingdan" data-toggle="tab">包裝清單</a></li>
<li><a href="#pingjia" data-toggle="tab">商品評價</a></li>
<li><a href="#shouhou" data-toggle="tab">售後保障</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="intro">我是商品介紹</div>
<div class="tab-pane" id="parameter">我是規格參數</div>
<div class="tab-pane" id="qingdan">我是包裝清單</div>
<div class="tab-pane" id="pingjia">我是商品評價</div>
<div class="tab-pane" id="shouhou">我是售後保障</div>
</div>
標籤頁切換由兩部分組成:標籤頁部分和與標籤頁對應的內容部分.
標籤頁部分本質是一個列表,爲列表的ul/ol屬性添加.nav和.nav-tabs類,使其展現爲標籤頁的樣式,列表項中的<a>鏈接需要加上data-toggle=”tab”這個觸發器, 並且href的值要和對應內容部分的id進行對應.
內容部分需要包裹在<div class=”tab-content”>…</div>內部,保證除了應該顯示的內容外,其他是隱藏的.內容的各個單項需要包裹在<div class=”tab-pane”>…</div>內部,並且要爲<div
class=”tab-pane”>標籤設置一個id,用於與標籤頁的href屬性的值對應.
3.Tooltip
Tooltip插件的效果是鼠標懸停在目標元素上時,顯示額外的提示,如下圖所示
演示代碼:
<a href="#" id="myTooltip" data-toggle="tooltip" data-placement="right" title="在右側顯示提示內容" class="btn btn-primary">工具提示</a>
其中data-toggle=”tooltip”是插件觸發器,title的內容是提示文字,data-placement屬性用於指定提示出現的位置。
要使該插件生效,需要在頁面底部添加JavaScript代碼完成初始化:
<script type="text/javascript">
$("#myTooltip").tooltip();
</script>
開發者可以爲tooltip()函數添加參數,或者在標籤內添加”data-參數名”進行配置,比如上面例子中的data-placement=”right”.
4.彈出框
Tooltip採用的是hover進行觸發,多用於簡單的提示,彈出框則通過點擊觸發,一般用於顯示更多的內容,如下圖所示.
應用彈出框插件的代碼結構和Tooltip差不多,演示代碼如下:
<a href="javascript:void(0);" id="myPopover" class="btn btn-lg btn-danger" data-toggle="popover" data-content="採用了點擊事件觸發,相比Tooltip可以顯示更多、更正式的內容,並且可以配置更多樣式." data-original-title="彈出框的應用">點擊瞭解更多</a>
需要添加data-toggle=”popover”觸發器進行插法,主要有兩個配置項: data-content配置彈出框內容,data-original-title配置彈出框的標題.
彈出框對Tooltip存在依賴,因此插件中必須包含有Tooltip.和Tooltip一樣,也需要添加初始化JavaScript代碼:
<script type="text/javascript">
$("#myPopover").popover();
</script>
和Tooltip一樣,可以爲popover()函數添加參數,或者在標籤內添加”data-參數名”進行配置，比如上面Tooltip例子中的data-placement=”right”
5.提示信息
一般來說,任務執行成功或失敗後,用戶需要得到一個提示信息,這個信息可以出現在頁面跳轉後的新頁面,也可以是Ajax執行成功後的回調。但它們都有一個共同的特點,需要在閱讀完畢後消失.Bootstrap內置了警告框插件,使用戶可以單擊關閉按鈕關掉提示信息。
演示代碼如下:
<div id="my-alert" class="alert alert-danger fade in" style="width:400px;">
警告,服務器掛了!
<a href="#" class="close" data-dismiss="alert">X</a>
</div>
構造提示信息需要兩個部分:提示信息和關閉信息按鈕。提示信息這裏使用了Bootstrap內置的alert類,關閉按鈕則是在和提示信息文字並列的位置構造一個鏈接,爲該鏈接添加data-dismiss=”alert”這個觸發器來觸發關閉事件.
Bootstrap爲警告框的關閉動作暴露了事件,允許進行監聽,可以再編寫關閉警告框後執行的動作.
Close.bs.alert: 當close函數被調用之後,此事件被立即觸發.
Closed.bs.alert: 當警告框被關閉之後(CSS過渡效果執行完畢),此事件被觸發,演示代碼如下:
<script type="text/javascript">
$("#my-alert").bind('closed.bs.alert',function(){
alert('關閉了!');
})
</script>
8.幻燈片
Bootstrap集成了一個幻燈片組件,可以完成圖片或內容的切換和自動播放。
幻燈片結構由3部分組成:控制器、內容部分、標識符.控制器負責控制幻燈的翻頁，標識符告訴我們頁碼,內容部分負責展現內容。具體的代碼如下:
演示代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示幻燈片組件</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:730px;">
<!--標識符:告訴我們頁碼-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 幻燈片內容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../img/1.jpg">
</div>
<div class="item">
<img src="../../img/2.jpg">
</div>
<div class="item">
<img src="../../img/3.jpg">
</div>
</div>
<!-- 控制器: 負責上一頁/下一頁 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>
首先,所有內容都需要包裹在<div class=”carousel slide”>..</div>內部,如果需要開啓輪播,則需要加入data-ride=”carousel”觸發器.
標識符部分是一個列表,需要爲ol/ul添加class="carousel-indicators"類.
內容部分需要整體包裹在<div class="carousel-inner”>..</div>內部，每一頁的內容需要包裹在<div class="item">…</div>內部.
控制器部分實際就是一個<a>鏈接,需要爲這個鏈接加上carousel-control類,並添加一個.left或.right類指明向前翻頁還是向後翻頁.翻頁的圖標可以使用Bootstrap內置的圖標:
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
也可以自定義圖標樣式.
注意:Bootstrap的幻燈片插件是基於CSS3實現的動畫效果,但是IE9及IE9以下的瀏覽器不支持這些必要的CSS屬性，因此在IE下回丟失過渡動畫效果.
和其他插件的參數配置一樣,可以通過data屬性或JavaScript傳遞選項參數,對於data屬性，將選項名稱放到data-之後,例如data-interval=”3000”來調整輪播的時間。BootStrap前端框架
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章