一. bootstrap-組件-響應(yīng)式導(dǎo)航條
- 特征
- 在PC和平板中默認(rèn)要顯示所有的內(nèi)容
- 在手機(jī)中導(dǎo)航條默認(rèn)只顯示logo爆哑，以及一個(gè)“菜單折疊展開按鈕”，只有點(diǎn)擊按鈕后才顯示所有的菜單項(xiàng)
-
bootstrap中導(dǎo)航條的基本結(jié)構(gòu)
基礎(chǔ)類（class）— <code>.navbar</code>
-
按位置區(qū)分
頂部導(dǎo)航條 —— .navbar-fixed-top
和底部導(dǎo)航條 —— .navbar-fixed-bottom
2）按顏色區(qū)分
淺色底深色的字 —— .navbar-default 深色底淺色的字 —— .navbar-inverse3）按定位方式分
靜態(tài)定位 - 默認(rèn)值 固態(tài)定位 - nav-fixed-top/bottom -
html結(jié)構(gòu)
<div class="navbar 顏色 定位"> <div class="container"> <!-- 導(dǎo)航條的頭部-商標(biāo)加按鈕--> <div class="navbar-header"> <a class="navbar-brand"></a> <button class="navbar-toggle"></button> </div> <!-- 導(dǎo)航條的折疊菜單--> <div class="navbar-collapse"> <ul class="nav navbar-nav"> <li><a href=" "></a><li> </ul> <!--搜索框--> <form class="navbar-form"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <button class="navbar-btn">按鈕</button> <span class="navbar-text">文本</span> <a class="nav-link navbar-text">鏈接</a> </div> </div> </div>
二橡疼、 插件
1. bootstrap基于JQ提供了十幾個(gè)插件函數(shù)(類似于JQueryUI插件)援所，每個(gè)插件對應(yīng)一個(gè)js文件，可以單獨(dú)使用欣除，也可以整體引用(bootstrap.js);
2. 調(diào)用上訴十幾個(gè)插件可以用兩種格式
1) 傳統(tǒng)的JS方式調(diào)用
$().dropdown() $().tab();
2) 使用data-*擴(kuò)展屬性方式調(diào)用
<a data-toggle="dropdown">
三住拭、插件—標(biāo)簽頁
<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)
<a class="btn btn-success" data-toggle="modal" href="#modal1">登錄</a>
<button class="btn btn-info" type="button" data-toggle="modal" data-target="#modal1">注冊</button>
<div id="modal1" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
頭部
<span class="close" data-dismiss="modal">×</span>
</div>
<div class="modal-body">主體</div>
<div class="modal-footer">尾部</div>
</div>
</div>
</div>
五历帚、 插件-折疊效果(collapse)
-
觸發(fā)一個(gè)折疊效果
1）<a href="#折疊元素id" data-toggle="collapse"> 2) <button data-toggle="collapse" data-target="#折疊元素id"> -
折疊元素
<div id="折疊元素id" class="collapse in"> </div> -
折疊組件的兩個(gè)擴(kuò)展用途
1) 響應(yīng)式導(dǎo)航條在手機(jī)屏幕中的效果 2) according(手風(fēng)琴) -
手風(fēng)琴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>
