第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

用js控制模態(tài)彈出層

$(function(){
??$(".btn").click(function(){
????$("#mymodal").modal();
??});
});

彈出窗動(dòng)畫：fade

彈出窗初始時(shí)是否顯示：datashow=false(不顯示)

按Esc是否取消：data-keyboard=false(不能)

點(diǎn)擊背景是否取消：data-backdrop=static(不能)

出發(fā)模態(tài)彈出窗的郎中方法

1.模態(tài)彈出窗聲明，只需要自定義兩個(gè)必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發(fā)方法一般依賴于這些自定義的data-xxx 屬性。

????????1、data-toggle必須設(shè)置為modal(toggle中文翻譯過來就是觸發(fā)器)；

????????2、data-target可以設(shè)置為CSS的選擇符，也可以設(shè)置為模態(tài)彈出窗的ID值，一般情況設(shè)置為模態(tài)彈出窗的ID值，因?yàn)镮D值是唯一的值。

<!--?觸發(fā)模態(tài)彈出窗的元素?-->
<button?type="button"?data-toggle="modal"?data-target="#mymodal"?class="btn?btn-primary">點(diǎn)擊我會(huì)彈出模態(tài)彈出窗</button>
<!--?模態(tài)彈出窗?-->
<div?class="modal?fade"?id="mymodal">
????<div?class="modal-dialog">
????????<div?class="modal-content">
????????<!--?模態(tài)彈出窗內(nèi)容?-->
????????</div>
????</div>
</div>

2.觸發(fā)模態(tài)彈出窗也可以是一個(gè)鏈接<a>元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性

<!--?觸發(fā)模態(tài)彈出窗的元素?-->
<a?data-toggle="modal"?href="#mymodal"?class="?btn?btn-primary"?>點(diǎn)擊我會(huì)彈出模態(tài)彈出窗</a>
<!--?模態(tài)彈出窗?-->
<div?class="modal?fade"??id="mymodal"?>
????<div?class="modal-dialog"?>
????????<div?class="modal-content"?>
????????<!--?模態(tài)彈出窗內(nèi)容?-->
????????</div>
????</div>
</div>

模態(tài)彈出框

“modal-header”??“modal-body”??“modal-footer”

<div class="modal show">

? ? <div class="modal-dialog">

? ? ? ? <div class="modal-content">

? ? ? ? ? ? <div class="modal-header">

? ? ? ? ? ? ? ? <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

? ? ? ? ? ? ? ? <h4 class="modal-title">模態(tài)彈出窗標(biāo)題</h4>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="modal-body">

? ? ? ? ? ? ? ? <p>模態(tài)彈出窗主體內(nèi)容</p>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="modal-footer">

? ? ? ? ? ? ? ? <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>

? ? ? ? ? ? ? ? <button type="button" class="btn btn-primary">保存</button>

? ? ? ? ? ? </div>

? ? ? ? </div><!-- /.modal-content -->

? ? </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

徽章與標(biāo)簽基本一致

<a?href="#">Inbox?<span?class="badge">42</span></a>

在button和膠囊型導(dǎo)航中也可以使用(在li中)

頁(yè)面內(nèi)標(biāo)簽的實(shí)現(xiàn)

<h3>Example?heading?<span?class="label?label-default">New</span></h3>

顏色與button顏色的使用一致

翻頁(yè)分頁(yè)

<ul?class="pager">
???<li><a?href="#">&laquo;上一頁(yè)</a></li>
???<li><a?href="#">下一頁(yè)&raquo;</a></li>
</ul>

將兩個(gè)li一個(gè)居左一個(gè)居右

<ul?class="pager">
???<li?class="previous"><a?href="#">&laquo;上一頁(yè)</a></li>
???<li?class="next"><a?href="#">下一頁(yè)&raquo;</a></li>
</ul>

帶頁(yè)碼的分頁(yè)?pagination?

可以控制大小

<ul class="pagination pagination-lg">

? <li><a href="#">&laquo;第一頁(yè)</a></li>

? <li><a href="#">11</a></li>

? <li><a href="#">12</a></li>

? <li class="active"><a href="#">13</a></li>

? <li><a href="#">14</a></li>

? <li><a href="#">15</a></li>

? <li class="disabled"><a href="#">最后一頁(yè)&raquo;</a></li>

</ul>?

反色導(dǎo)航條

將navbar-default變?yōu)閚avbar-inverse

<div class="navbar navbar-inverse" role="navigation">

導(dǎo)航條固定

.navbar-fixed-top:

.navbar-fixed-bottom:

導(dǎo)航條中嵌入表單

navbar-form

<div class="navbar navbar-default" role="navigation">

? 　<div class="navbar-header">

? 　? ? <a href="##" class="navbar-brand">慕課網(wǎng)</a>

? 　</div>

? ? <ul class="nav navbar-nav">

? ? ? ?<li class="active"><a href="##">網(wǎng)站首頁(yè)</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="##">CSS3</a></li>

? ? ? ? <li><a href="##">JavaScript</a></li>

? ? ? ? <li class="disabled"><a href="##">PHP</a></li>

? ? ? ? ? </ul>

? ? ? </li>

? ? ? <li><a href="##">名師介紹</a></li>

? ? ? <li><a href="##">成功案例</a></li>

? ? ? <li><a href="##">關(guān)于我們</a></li>

</ul>

? ? ?<form action="##" class="navbar-form navbar-left" rol="search">

? ? ? ? <div class="form-group">

? ? ? ?<input type="text" class="form-control" placeholder="請(qǐng)輸入關(guān)鍵詞" />

? ? ? ? </div>

? ? ? ? <button type="submit" class="btn btn-default">搜索</button>

? ? ?</form>

</div>

導(dǎo)航條

在制作一個(gè)基礎(chǔ)導(dǎo)航條時(shí)，主要分以下幾步：

第一步：首先在制作導(dǎo)航的列表(<ul class=”nav”>)基礎(chǔ)上添加類名“navbar-nav”

第二步：在列表外部添加一個(gè)容器（div），并且使用類名“navbar”和“navbar-default”

<div class="navbar navbar-default" role="navigation">

? ? ?<ul class="nav navbar-nav">

<li class="active"><a href="##">網(wǎng)站首頁(yè)</a></li>

? ? ? ? <li><a href="##">系列教程</a></li>

? ? ? ? <li><a href="##">名師介紹</a></li>

? ? ? ? <li><a href="##">成功案例</a></li>

? ? ? ? <li><a href="##">關(guān)于我們</a></li>

</ul>

</div>

面包屑式導(dǎo)航 class=breadcrumb

<ol class="breadcrumb">

? <li><a href="#">首頁(yè)</a></li>

? <li><a href="#">我的書</a></li>

? <li class="active">《圖解CSS3》</li>

</ol>?

在導(dǎo)航欄中嵌入二級(jí)目錄

<ul class="nav nav-pills">

? <li class="active"><a href="##">首頁(yè)</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="##">CSS3</a></li>

? ? ? ? <li><a href="##">Sass</a></li>

? ? ? ? <li><a href="##">jQuery</a></li>

? ? ? ? <li><a href="##">Responsive</a></li>

? ? ? </ul>

? </li>

?<li><a href="##">關(guān)于我們</a></li>

</ul>

垂直導(dǎo)航欄(加nav-stacked)

<ul class="nav nav-pills nav-stacked">

? ? ?<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>

膠囊型導(dǎo)航（有框）

加nav 和nav-pills

<ul?class="nav?nav-pills">
??????<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>