bootstrap基礎介紹(二)
一、下拉選單
注意:我們通常用.pull-right使按鈕選單內容右對齊 ,class="disabled"表示禁用狀態,class="active"表示當前狀態
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉選單 <span class="caret"></span><!----表示下拉箭頭----> </button> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"><!--pull-right表示按鈕選單內容右對齊,可用dropdown-menu-right代替,不加的話表示預設左對齊--> <li role="presentation" class="dropdown-header">第一部分選單頭部</li><!----表示第一部分的選項分類標題----> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">蘋果</a></li><!--tabindex表示按了tab鍵後指向的選項--> <li role="presentation" ><a role="menuitem" tabindex="-1" href="#">橘子</a></li> <li role="presentation" class="divider"></li><!--表示分割線--> <li role="presentation" class="dropdown-header">第二部分選單頭部</li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">桃子</a></li> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li> </ul> </div>
二、按鈕
按鈕組的大小,通過: .btn-group-lg:
(大按鈕組)、 .btn-group-sm:
(小按鈕組)、 .btn-group-xs:
(超小按鈕組)
<div class="btn-toolbar"><!--btn-toolbar類名是為了把一組按鈕放到一個框內,用於區別--> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> </div> </div> <br /> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button> </div> </div>
實現下拉效果的按鈕:按鈕組.btn-group
; 垂直按鈕 .btn-group-vertical
;等分按鈕(也叫響應式按鈕).btn-group-justified
注意和form-group效果對比
<div class="btn-group dropup"><!--dropup是為了讓下拉按鈕的箭頭朝上顯示--><!--class="btn-group-vertical"是為了實現按鈕組的垂直分佈,預設的不加則是水平分佈--> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"> 關於我們<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><a href="##">客服服務</a></li> </ul> </div>
三、導航
1、標籤形tab導航:.nav-tabs
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li><!--class="active"表示當前選中狀態-->
<li><a href="##">profit</a></li>
<li><a href="##">product</a></li>
<li><a href="##">contact</a></li>
<li class="disabled"><a href="##">map</a></li><!--class="disabled"表示禁用狀態-->
</ul>
2、膠囊形導航:.nav-pills
<ul class="nav nav-pills"><!--在這裡加入nav-stacked類名錶示垂直堆疊的導航,加入nav-justified表示自適應導航,兩端對齊導航-->
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
3、麵包屑導航:breadcrumb
<ol class="breadcrumb">
<li><a href="#">首頁</a></li>
<li><a href="#">簡介</a></li>
<li class="active">聯絡</li>
</ol>
4、帶下拉選單的導航
<ul class="nav nav-pills ">
<li class="active"><a href="##">首頁</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">簡介<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">品牌文化</a></li>
<li><a href="##">歷史程序</a></li>
<li><a href="##">品牌概念</a></li>
</ul>
</li>
<li><a href="##">關於我們</a></li>
</ul>
四、導航條
1、基礎導航條
<div class="navbar navbar-default navbar-fixed-top " role="navigation"><!--navbar表示導航條,與nav區分;
.navbar-fixed-top表示固定導航條在頂部; .navbar-fixed-bottom固定導航條在底部;
navbar-default 表示基礎色導航條,也可以用navbar-inverse表示反色導航條-->
<div class="navbar-header"><!--navbar-header表示導航頭部部分和navbar-brand結合使用-->
<a href="##" class="navbar-brand">大公司</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">網站首頁</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">公司簡介
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">企業歷史</a></li>
<li class="disabled"><a href="##">經典歷程</a></li>
</ul>
</li>
<li class="active"><a href="##">聯絡我們</a></li>
<li><a href="##">地圖</a></li>
<li><a href="##" class="navbar-text">Navbar Text</a></li>
</ul>
<form action="##" class="navbar-form navbar-left" rol="search"><!--navbar-left表示讓表單左浮動,也可以用navbar-right-->
<div class="form-group">
<input type="text" class="form-control" placeholder="請輸入關鍵詞" />
</div>
<button type="submit" class="btn btn-default">搜尋</button>
</form>
</div>
導航條中的按鈕navbar-btn
導航條中的文字navbar-text
導航條中的普通連結navbar-link
2、響應式導航條
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle樣式用於toggle收縮的內容,即nav-collapse collapse樣式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 確保無論是寬屏還是窄屏,navbar-brand都顯示 -->
<a href="##" class="navbar-brand">慕課網</a>
</div>
<!-- 螢幕寬度小於768px時,div.navbar-responsive-collapse容器裡的內容都會隱藏,顯示icon-bar圖示,當點選icon-bar圖示時,再展開。螢幕大於768px時,預設顯示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">網站首頁</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名師介紹</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">關於我們</a></li>
</ul>
</div>
</div>
3、分頁導航條 a、-帶頁碼的分頁導航
<ul class="pagination pagination-lg"><!-- pagination-lg表示分頁導航的大小,pagination-sm也可設定導航條效果-->
<li><a href="#">«第一頁</a></li>
<li><a href="#">11</a></li>
<li class="active"><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li class="disabled"><a href="#">最後一頁»</a></li>
</ul>
<ul class="pagination pagination">
<li><a href="#">«第一頁</a></li>
<li><a href="#">11</a></li>
<li class="active"><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li class="disabled"><a href="#">最後一頁»</a></li>
</ul>
<ul class="pagination pagination-sm">
<li><a href="#">«第一頁</a></li>
<li><a href="#">11</a></li>
<li class="active"><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li class="disabled"><a href="#">最後一頁»</a></li>
</ul>
b、翻頁分頁導航
<ul class="pager">
<li class="previous disabled"><a href="#">«上一頁</a></li><!--previous表示靠左 disabled表示禁用-->
<li class="next"><a href="#">下一頁»</a></li><!--next表示靠右 -->
五、標籤徽章
1、標籤
注意:label-default|primary|success|info|warning|danger
表示不同顏色的標籤
Example heading New
預設標籤 主要標籤 成功標籤 資訊標籤 警告標籤 錯誤標籤 2、徽章<li class="active"><a href="#">Home <span class="badge">42</span></a></li><!--badge用在span裡面表示徽章提示作用-->
六、內建元件
1、縮圖
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-6">
<a href="#" class="thumbnail"><!--thumbnail專門針對縮圖的類名-->
<img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
</a>
<div class="caption"><!--caption專門針對於一個系列縮圖中的除了圖片其他的介紹-->
<h3>Bootstrap</h3>
<p>BootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrap...</p>
<p>
<a href="##" class="btn btn-primary">開始學習</a>
<a href="##" class="btn btn-info">正在學習</a>
</p>
</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-6">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
<div class="caption">
<h3>Bootstrap</h3>
<p>BootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrap...</p>
<p>
<a href="##" class="btn btn-primary">開始學習</a>
<a href="##" class="btn btn-info">正在學習</a>
</p>
</div>
</div>
</div>
</div>
2、警示框
注意:我們用alert-success|info|warning|danger
表示不同顏色的經實況
3、進度條
<h2>基本進度條</h2>
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>
<h2>彩色進度條</h2>
<div class="progress progress-striped active"><!--progress-striped表示條紋進度條 active表示動態條紋進度條-->
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
<h5>正常層疊進度條</h5><!--正常進度條之和不能大於100%,否則會出現不良效果層疊進度條-->
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<h2>帶Label的進度條</h2>
<h5>進度條1</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
<h5>進度條2</h5>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
4、媒體物件
a、預設媒體物件
<div class="media"><!--media表示媒體對像的容器,用來容納媒體物件的所有內容-->
<a class="pull-left" href="#"><!--pull-left用來實現圖片居左。pull-right實現圖片居右-->
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="..."><!--media-objec表示媒體物件中的物件,常常是圖片-->
</a>
<div class="media-body"><!--media-body表示媒體對像中的主體內容,可以是任何元素,常常是圖片側邊內容-->
<h4 class="media-heading">系列:十天精通CSS3</h4><!--media-heading表示物件的一個標題-->
<div>全方位深刻詳解CSS3模組知識,經典案例分析,程式碼同步除錯,讓網頁穿上絢麗裝備!</div>
</div>
</div>
b、媒體物件的巢狀
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">我是站長</h4>
<div>我是站長damanyao,我在寫Bootstrap框中的媒體物件測試用例</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">我是站長</h4>
<div>我是站長damanyao,我在寫Bootstrap框中的媒體物件測試用例</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">W3cplus</h4>
<div>網上還有很多教程,請自己查詢....</div>
</div>
</div>
</div>
</div>
</div>
</div>
c、媒體物件列表
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">我是站長</h4>
<div>我是站長damanyao,我在寫Bootstrap框中的媒體物件測試用例</div>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">我是站長</h4>
<div>我是站長damanyao,我在寫Bootstrap框中的媒體物件測試用例</div>
</div>
</li>
</ul>
5、列表組
a、基礎列表組
注意:class="badge"
表示帶徽章的列表組;list-group-item-success|info|warning|danger表示不同顏色的列表組
<ul class="list-group">
<li class="list-group-item">
<span class="badge">456</span> <!--class="badge"表示帶徽章的列表組-->
揭開CSS3的面紗
</li>
<li class="list-group-item">
<a href="##">CSS3邊框</a> <!--這是一個帶連結的列表組-->
</li>
</ul>
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>W3C</a>
<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>
<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
b、自定義列表組
注意:我們通常用list-group-item-heading
:用來定義列表項頭部樣式、list-group-item-text
:用來定義列表項主要內容
active
表示當前狀態 disabled
表示禁用狀態
<div class="list-group">
<a href="##" class="list-group-item active">
<h4 class="list-group-item-heading">Canvas繪圖詳解<span class="badge">12</span></h4>
<p class="list-group-item-text">本+課程為Canvas系列課程第二課。通過對《絢麗的倒計時效果的學習》,在大家對Canvas繪圖有一定了解的基礎上......</p>
</a>
<a href="##" class="list-group-item disabled">
<h4 class="list-group-item-heading">玩轉Bootstrap<span class="badge">30</span></h4>
<p class="list-group-item-text">Bootstrap框架是一個非常受歡迎的前端開發框架,他能讓後端程式設計師和不懂設計的前端人員製作出優美的Web頁面或Web應用程式。 </p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">基於bootstrap的網頁開發<span class="badge">5</span></h4>
<p class="list-group-item-text">Bootstrap是用於前端開發的工具包,提供了優雅的HTML和CSS規範,並基於jQuery開發了豐富的Web元件。課程介紹了Bootstrap框架的基本知識,並基於Bootstrap框架... </p>
</a>
</div>
6、面板
注意:我們一般用 panel-heading
用來設定面板頭部樣式, panel-footer
用來設定面板尾部樣式,panel-body
用來設定主體部分;panel-default|primary|success|info|warning|danger
表示不同顏色的面板
<div class="panel panel-default">
<div class="panel-heading">中美決戰第一槍打響</div>
<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示,由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施,中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
<div class="panel-footer">作者:大蠻腰</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">中美決戰第一槍打響</div>
<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示,由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施,中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
<div class="panel-footer">作者:大蠻腰</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">中美決戰第一槍打響</div>
<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示,由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施,中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
<div class="panel-footer">作者:大蠻腰</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">中美決戰第一槍打響</div>
<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示,由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施,中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
<div class="panel-footer">作者:大蠻腰</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">中美決戰第一槍打響</div>
<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示,由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施,中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
<div class="panel-footer">作者:大蠻腰</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">中美決戰第一槍打響</div>
<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示,由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施,中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
<div class="panel-footer">作者:大蠻腰</div>
</div>
面板的巢狀表格
<div class="panel panel-default">
<div class="panel-heading">中美決戰第一槍打響</div>
<div class="panel-body">
<p>世界貿易組織11日向成員提供的檔案顯示,由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施,中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。
</p>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>我的新聞</th>
<th>釋出時間</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>中美決戰</td>
<td>2018-09-18</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">作者:大蠻腰</div>
</div>
面板中巢狀列表
<div class="panel panel-default">
<div class="panel-heading">圖解CSS3</div>
<div class="panel-body">
<p>詳細講解了選擇器、邊框、背景、文字、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字型等主題下涵蓋的所有CSS3新特性
</p>
<ul class="list-group">
<li class="list-group-item">我是列表項</li>
<li class="list-group-item">我是列表項</li>
<li class="list-group-item">我是列表項</li>
</ul>
</div>
<div class="panel-footer">作者:大漠</div>
</div>