第二次學(xué)習(xí)bootstrap了，這次主要以實際用例為主，做一下總結(jié)。
51CTO課程鏈接:BootStrap零基礎(chǔ)學(xué)習(xí)實戰(zhàn)視頻課程
1. 登陸表單
在bootstrap中，大量使用div標(biāo)簽控制層級關(guān)系，使用class屬性控制樣式表現(xiàn)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陸</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">用戶登錄</h1>
<form action="#" method="post" class="form-horizontal">
<div class="form-group">
<div class="col-md-5">
<div class="input-group">
<div class="input-group-addon">郵箱</div>
<input type="text" class="form-control" placeholder="Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<div class="input-group">
<div class="input-group-addon">密碼</div>
<input type="password" class="form-control" placeholder="PassWord"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<a class="btn btn-primary" href="#">登陸</a>
</div>
</div>
</form>
</div>
</body>
</html>
2. 基本導(dǎo)航欄
<nav class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">科技</a></li>
</ul>
<div class="navbar-form navbar-right">
<a href="#" class="btn btn-default">登陸</a>
<a href="#" class="btn btn-default">注冊</a>
<input class="form-control" type="text" placeholder="請輸入關(guān)鍵字"/>
<button class="btn btn-primary">搜索</button>
</div>
</div>
</nav>
3. 字形圖標(biāo)庫
Bootstrap包含了非常多的圖標(biāo)供我們使用，可以查看：http://v3.bootcss.com/components/#glyphicons
要注意盡量在圖標(biāo)和文字之間插入一個空格。
<h1><span class="glyphicon glyphicon-home"></span> 用戶登錄</h1>
4. 可下拉菜單
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜單 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
<li class="divider"></li>
<li><a href="#">選項3</a></li>
</ul>
</li>
5. 利用網(wǎng)格系統(tǒng)展示相冊
bootstrap的網(wǎng)格系統(tǒng)非常強(qiáng)大，可以自由組合多重元素并控制位置。
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
[站外圖片上傳中……(10)]
<div class="caption">
<h4>圖片1</h4>
<p>美麗的風(fēng)景</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
[站外圖片上傳中……(11)]
<div class="caption">
<h4>圖片2</h4>
<p>美麗的風(fēng)景</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
[站外圖片上傳中……(12)]
<div class="caption">
<h4>圖片3</h4>
<p>美麗的風(fēng)景</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
[站外圖片上傳中……(13)]
<div class="caption">
<h4>圖片4</h4>
<p>美麗的風(fēng)景</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
[站外圖片上傳中……(14)]
<div class="caption">
<h4>圖片5</h4>
<p>美麗的風(fēng)景</p>
</div>
</div>
</div>
</div>
</div>
6. 面包屑導(dǎo)航條
面包屑導(dǎo)航的作用就是告訴訪問者他們目前在網(wǎng)站中的位置以及如何返回，在bootstrap中制作導(dǎo)航條非常簡單。
<div class="col-md-12">
<ul class="breadcrumb">
<li><a href="#">網(wǎng)站首頁</a></li>
<li><a href="#">圖片</a></li>
<li><a href="#" class="text-muted">所有圖片</a></li>
</ul>
</div>
7. Tab標(biāo)簽
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs">
<li class="active"><a href="#page1" data-toggle="tab">頁面1</a></li>
<li><a href="#page2" data-toggle="tab">頁面2</a></li>
<li><a href="#page3" data-toggle="tab">頁面3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="page1">
<p></p>
<p>生活，沒有什么大道理可言，過日子，就是一種心情. </p>
<p>或許，傾心已久的人就在你舉目可見的地方，卻不一定是在等你； </p>
<p>或許，付出努力和艱苦后，你的鈔票并不會乖乖地躲進(jìn)你的腰包里； </p>
<p>或許，積年累月地尋找著突破事業(yè)的窗口，現(xiàn)實卻并不成全你； </p>
<p>或許，…… </p>
</div>
<div class="tab-pane fade" id="page2">
<p></p>
<p>生活，沒有什么大道理可言，過日子，就是一種心情. </p>
<p>或許，傾心已久的人就在你舉目可見的地方，卻不一定是在等你； </p>
<p>或許，付出努力和艱苦后，你的鈔票并不會乖乖地躲進(jìn)你的腰包里； </p>
<p>或許，積年累月地尋找著突破事業(yè)的窗口，現(xiàn)實卻并不成全你； </p>
</div>
<div class="tab-pane fade" id="page3">
<p></p>
<p>生活，沒有什么大道理可言，過日子，就是一種心情. </p>
<p>或許，傾心已久的人就在你舉目可見的地方，卻不一定是在等你； </p>
<p>或許，付出努力和艱苦后，你的鈔票并不會乖乖地躲進(jìn)你的腰包里； </p>
</div>
</div>
</div>
</div>
8. 列表頁的制作和分頁
<div class="container-fluid">
<div class="col-md-9">
<div class="list-group">
<div class="list-group-item">
<a href="#"><h3>美軍艦侵犯西沙，居心何在？</h3></a>
<p>2016年新年伊始，正當(dāng)中國在南海積極向外界展示和平、克制、合作姿態(tài)的時候，美軍挑釁的調(diào)門嚴(yán)重升級了，這次進(jìn)的不是南沙，而是西沙。</p>
<p>1月27日，美軍太平洋總部司令哈里斯在美國著名智庫戰(zhàn)略與國際問題研究中心發(fā)表演講稱，“南沙的爭議島礁不屬于中國”，當(dāng)然他也強(qiáng)調(diào)，這僅是他的個人觀點 。</p>
<p class="text-muted">
<strong>關(guān)鍵字：<span class="badge">中美關(guān)系</span></strong>
<strong class="pull-right">發(fā)布時間：2016-1 </strong>
</p>
</div>
<div class="list-group-item">
<a href="#"><h3>美軍艦侵犯西沙，居心何在？</h3></a>
<p>2016年新年伊始，正當(dāng)中國在南海積極向外界展示和平、克制、合作姿態(tài)的時候，美軍挑釁的調(diào)門嚴(yán)重升級了，這次進(jìn)的不是南沙，而是西沙。</p>
<p>1月27日，美軍太平洋總部司令哈里斯在美國著名智庫戰(zhàn)略與國際問題研究中心發(fā)表演講稱，“南沙的爭議島礁不屬于中國”，當(dāng)然他也強(qiáng)調(diào)，這僅是他的個人觀點 。</p>
<p class="text-muted">
<strong>關(guān)鍵字：<span class="badge">中美關(guān)系</span></strong>
<strong class="pull-right">發(fā)布時間：2016-1 </strong>
</p>
</div>
<div class="list-group-item">
<a href="#"><h3>美軍艦侵犯西沙，居心何在？</h3></a>
<p>2016年新年伊始，正當(dāng)中國在南海積極向外界展示和平、克制、合作姿態(tài)的時候，美軍挑釁的調(diào)門嚴(yán)重升級了，這次進(jìn)的不是南沙，而是西沙。</p>
<p>1月27日，美軍太平洋總部司令哈里斯在美國著名智庫戰(zhàn)略與國際問題研究中心發(fā)表演講稱，“南沙的爭議島礁不屬于中國”，當(dāng)然他也強(qiáng)調(diào)，這僅是他的個人觀點 。</p>
<p class="text-muted">
<strong>關(guān)鍵字：<span class="badge">中美關(guān)系</span></strong>
<strong class="pull-right">發(fā)布時間：2016-1 </strong>
</p>
</div>
</div>
<div class="text-center">
<ul class="pagination">
<li class="disabled"><a href="#">?</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">?</a></li>
</ul>
</div>
</div>
</div>
9. 側(cè)邊欄小工具
側(cè)邊欄可以使用網(wǎng)格系統(tǒng)定位，然后寫一個panel的div即可。下面是兩種形式的小工具：
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
推薦新聞
</div>
<div class="panel-body">
<strong class="panel-title"><a href="#">微軟首屆數(shù)據(jù)分析峰會將于3月22日開幕</a></strong>
<p>本次峰會中微軟的Excel以及Power BI團(tuán)隊將針對行業(yè)趨勢發(fā)表見解，并給出Excel以及Power BI的最佳實踐建議。峰會中將會有眾多嘉賓出席，包括一些微軟的老功臣和領(lǐng)域中的專家。</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
熱點新聞
<a href="#" class="text-muted pull-right">?</a>
</div>
<ul class="list-group">
<li class="list-group-item">
<a href="#" class="text-muted">58趕集回應(yīng)驅(qū)逐趕集經(jīng)銷商：業(yè)務(wù)調(diào)整而已</a>
</li>
<li class="list-group-item">
<a href="#" class="text-muted">阿里巴巴公布“年貨節(jié)”銷量：5天賣21億件商品</a>
</li>
<li class="list-group-item">
<a href="#" class="text-muted">華爾街日報：小米仍是去年中國智能手機(jī)市場霸主</a>
</li>
</ul>
</div>
</div>
