響應(yīng)式導(dǎo)航條
- 特征
- 在PC和平板中默認(rèn)要顯示所有的內(nèi)容
- 在手機中導(dǎo)航條默認(rèn)只顯示logo窥妇，以及一個“菜單折疊展開按鈕”就谜，只有點擊按鈕后才顯示所有的菜單項
- bootstrap中導(dǎo)航條的基本結(jié)構(gòu)
- 基礎(chǔ)類 class="navbar"
- 按位置區(qū)分
- 頂部導(dǎo)航條和底部導(dǎo)航條
- 按顏色區(qū)分
- 淺色底深色的字 - navbar-default
- 深色底淺色的字 - navbar-inverse
- 按定位方式分
- 靜態(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">
<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>
- 應(yīng)用實例
<div class="navbar navbar-default ">
<div class="container">
<!--導(dǎo)航條頭部-->
<div class="navbar-header">
<a href="#" class="navbar-brand">
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#collapse"><span class="glyphicon glyphicon-th-list"></span></button>
</div>
<!--折疊菜單-->
<div class="navbar-collapse collapse in" id="collapse">
<a href="#" class="navbar-link navbar-text navbar-right">注冊</a>
<span class="navbar-text navbar-right">|</span>
<button class="btn btn-danger navbar-btn navbar-right">登陸</button>
<form action="" class="navbar-form navbar-right">
<div class="form-group has-feedback">
<label for="uname" class="sr-only">搜索：</label>
<input type="text" class="form-control">
<span class="form-control-feedback glyphicon glyphicon-search"></span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">吃飯</a></li>
<li><a href="#">睡覺</a></li>
<li><a href="#">打豆豆</a></li>
</ul>
</div>
</div>
</div>
適應(yīng)手機
適應(yīng)PC
插件-標(biāo)簽頁
html代碼
<ul class="nav nav-tabs">
<li><a href="#item1" data-toggle="tab">十元套餐</a></li>
<li class="active"><a href="#item2" data-toggle="tab">二十元套餐</a></li>
<li><a href="#item3" data-toggle="tab">三十元套餐</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="item1">歡迎使用十元套餐Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt optio a ullam aspernatur quasi necessitatibus in saepe neque consectetur officia quod debitis et quam quas placeat alias dolor voluptate eius?</div>
<div class="active tab-pane fade in" id="item2">歡迎使用二十元套餐Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui soluta atque dolorum quasi earum asperiores aspernatur neque unde. Odit libero qui facilis fugit doloremque architecto. Non natus necessitatibus veritatis laudantium.</div>
<div class="tab-pane fade " id="item3">歡迎使用三十元套餐Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius cumque iste quasi laborum earum inventore tempore non ipsum quam nesciunt maiores saepe. Perferendis nulla a vero nihil impedit! Possimus dolores.</div>
</div>
標(biāo)簽頁
插件-彈出框
1. 工具提示框(tooltip)
data-toggle="tooltip"
2. 彈出框(popover)
data-toggle="popover"
3. 警告框(alert)
<div class="alert alert-四種顏色 alert-dismissible>
<span class="close" data-dismiss="alert">×</span>
xxxx
</div>
4. 模態(tài)對話框(modal)
5.模態(tài)對話框
1） 模態(tài)框定義：在父窗體中彈出一個子窗體怪蔑，子窗體若不關(guān)閉，父窗體就無法獲得焦點丧荐，同時父子窗體之間還可以傳遞數(shù)據(jù)缆瓣，window.alert()/confirm()/prompt()就是典型的例子
2）模態(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>
3） 顯示一個模態(tài)框
1） <a href="#模態(tài)框id" data-toggle="modal">
2) <button data-toggle="modal" data-target="#模態(tài)框id">
4） 關(guān)閉一個模態(tài)框
<span data-dismiss="modal">×</span>
應(yīng)用實例
<div class="modal fade in" id="modal1" >
<!--設(shè)置大小和定位-->
<div class="modal-dialog modal-md">
<!--設(shè)置邊框顏色-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">XML和HTML的區(qū)別</h3>
</div>
<div class="modal-body">XHTML是更為嚴(yán)格的HTMLlorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore fuga repellat rerum dolor eos in est. Ipsam minima tenetur fuga voluptatem quae numquam provident saepe ducimus dolorum laboriosam deleniti consequuntur.</div>
<div class="modal-footer">
<button class="btn btn-danger pull-left">上一頁</button>
<button class="btn btn-success pull-left">下一頁</button>
<button class="btn btn-warning pull-right">OK</button>
</div>
</div>
</div>
</div>
<!--讓modal顯示-->
<a href="#modal1" data-toggle="modal">modal的顯示</a>
<button data-toggle="modal" data-target="#modal1">button的modal顯示</button>
模態(tài)提示框
插件-折疊效果
1. 觸發(fā)一個折疊效果
1）<a href="#折疊元素id" data-toggle="collapse">
2) <button data-toggle="collapse" data-target="#折疊元素id">
2. 折疊元素
<div id="折疊元素id" class="collapse in">
</div>
3. 折疊組件的兩個擴展用途
1) 響應(yīng)式導(dǎo)航條在手機屏幕中的效果
2) according(手風(fēng)琴)
4. 手風(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>
應(yīng)用實例
<h1>折疊效果</h1>
<button data-toggle="collapse" data-target="#d1">點擊我折疊</button>
<div class="collapse in" id="d1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus ducimus temporibus blanditiis iusto mollitia ullam ab quam est placeat fuga architecto voluptas aliquam asperiores qui doloremque dolor accusamus deleniti laboriosam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quisquam quos sint laudantium nihil debitis aliquam consequatur velit architecto quidem quis voluptas quia iure maxime harum eum sed repellendus repellat.
</div>
<h1>手風(fēng)琴</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-danger">
<div class="panel-heading"><a href="#pan1" data-toggle="collapse" data-parent="#accordion">西游記</a></div>
<div class="panel-body collapse in" id="pan1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum accusantium excepturi nihil dicta molestias sit soluta? Doloribus laborum minima ad sapiente vel nesciunt accusamus obcaecati consectetur earum alias iste tempora!</div>
</div>
<div class="panel panel-success">
<div class="panel-heading"><a href="#pan2" data-toggle="collapse" data-parent="#accordion">水滸傳</a></div>
<div class="panel-body collapse in" id="pan2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quidem impedit animi deleniti laborum quo debitis odit eos corrupti saepe beatae minus harum voluptate laudantium et architecto blanditiis facilis similique.</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading"><a href="#pan3" data-toggle="collapse" data-parent="#accordion">三國演義</a></div>
<div class="panel-body collapse in" id="pan3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ut voluptate nobis repellendus explicabo nihil maxime dignissimos veniam corrupti asperiores ipsum consequatur odit tenetur reprehenderit dolores assumenda velit. Blanditiis consequatur.</div>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<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>
折疊效果一
手風(fēng)琴
手風(fēng)琴二
