一. bootstrap-組件-響應(yīng)式導(dǎo)航條
- 特征
1）在PC和平板中默認要顯示所有的內(nèi)容瞄崇。
2）在手機中導(dǎo)航條默認只顯示logo壕曼，以及一個“菜單折疊展開按鈕”，只有點擊按鈕后才顯示所有的菜單項摹蘑。 - bootstrap中導(dǎo)航條的基本結(jié)構(gòu)
- 基礎(chǔ)class-navbar
- 按位置區(qū)分
- 頂部導(dǎo)航條和底部導(dǎo)航條
3）按顏色區(qū)分 - 淺色底深色的字 - navbar-default
- 深色底淺色的字 - navbar-inverse
4）按定位方式分 - 靜態(tài)定位 - 默認值
- 固態(tài)定位 - nav-fixed-top/bottom
- html結(jié)構(gòu)
<div class="navbar 顏色 定位">
<div class="container">
導(dǎo)航條的頭部-商標加按鈕
<div class="navbar-header">
<a class="navbar-brand">
<button class="navbar-toggle">
</div>
導(dǎo)航條的折疊菜單
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<form class="navbar-form">
<button class="navbar-btn">
<span class="navbar-text">
<a class="nav-link navbar-text">
</div>
</div>
</div>
二. 插件
- bootstrap基于JQ提供了十幾個插件函數(shù)(類似于JQueryUI插件)轧飞，每個插件對應(yīng)一個js文件，可以單獨使用，也可以整體引用(bootstrap.js);
- 調(diào)用上訴十幾個插件可以用兩種格式
-
傳統(tǒng)的JS方式調(diào)用
$().dropdown() $().tab(); 使用data-*擴展屬性方式調(diào)用
<a data-toggle="dropdown">
三. 插件-標簽頁
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#p1">十元套餐</a></li>
<li><a data-toggle="tab" href="#p2">二十元套餐</a></li>
<li><a data-toggle="tab" href="#p3">三十元套餐</a></li>
</ul>
<div class="tab-content">
<div id="p1" class="tab-pane active fade in">十元套餐詳情 </div>
<div id="p2" class="tab-pane fade ">二十元套餐詳情 </div>
<div id="p3" class="tab-pane fade ">三十元套餐詳情 </div>
</div>
四. 插件-bootstrap提供的彈出框
-
工具提示框(tooltip)
data-toggle="tooltip" -
彈出框(popover)
data-toggle="popover" -
警告框(alert)
<div class="alert alert-四種顏色 alert-dismissible> <span class="close" data-dismiss="alert">×</span> xxxx </div> 模態(tài)對話框(modal)
五. 插件-bootstrap提供的彈出框 - 模態(tài)對話框(modal)
模態(tài)框定義：在父窗體中彈出一個子窗體援奢，子窗體若不關(guān)閉忍捡，父窗體就無法獲得焦點，同時父子窗體之間還可以傳遞數(shù)據(jù)砸脊，window.alert()/confirm()/prompt()就是典型的例子
-
模態(tài)框必需的結(jié)構(gòu)
<div class="modal"> 半透明的黑色遮罩層 <div class="modal-dialog"> 寬、定位 <div class="modal-content"> 邊框背景色陰影 <div class="modal-header"><h3 class="modal-title"></h3></div> <div class="modal-body">主體</div> <div class="modal-footer">尾部</div> </div> </div> </div> 顯示一個模態(tài)框
<a href="#模態(tài)框id" data-toggle="modal">
<button data-toggle="modal" data-target="#模態(tài)框id">
4.關(guān)閉一個模態(tài)框
<span data-dismiss="modal">×</span>
六. 插件-折疊效果(collapse)
1.觸發(fā)一個折疊效果
<a href="#折疊元素id" data-toggle="collapse">
<button data-toggle="collapse" data-target="#折疊元素id">
2.折疊元素
<div id="折疊元素id" class="collapse in">
</div>
3.折疊組件的兩個擴展用途
1) 響應(yīng)式導(dǎo)航條在手機屏幕中的效果
2) according(手風琴)
4.手風琴html結(jié)構(gòu)-依托于面板和折疊組件
<div class="panel-group" id="test">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">
<a href="#item1" data-toggle="#item1" data-parent="#test">紅樓夢簡介</a>
</h3>
</div>
<div id="item1" class="collapse">
<div class="panel-body">
</div>
</div>
<div class="panel-footer">
尾部
</div>
</div>
</div>
