亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

用js控制模態彈出層

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

彈出窗動畫：fade

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

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

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

出發模態彈出窗的郎中方法

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

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

????????2、data-target可以設置為CSS的選擇符，也可以設置為模態彈出窗的ID值，一般情況設置為模態彈出窗的ID值，因為ID值是唯一的值。

<!--?觸發模態彈出窗的元素?-->
<button?type="button"?data-toggle="modal"?data-target="#mymodal"?class="btn?btn-primary">點擊我會彈出模態彈出窗</button>
<!--?模態彈出窗?-->
<div?class="modal?fade"?id="mymodal">
????<div?class="modal-dialog">
????????<div?class="modal-content">
????????<!--?模態彈出窗內容?-->
????????</div>
????</div>
</div>

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

<!--?觸發模態彈出窗的元素?-->
<a?data-toggle="modal"?href="#mymodal"?class="?btn?btn-primary"?>點擊我會彈出模態彈出窗</a>
<!--?模態彈出窗?-->
<div?class="modal?fade"??id="mymodal"?>
????<div?class="modal-dialog"?>
????????<div?class="modal-content"?>
????????<!--?模態彈出窗內容?-->
????????</div>
????</div>
</div>

模態彈出框

“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">模態彈出窗標題</h4>

? ? ? ? ? ? </div>

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

? ? ? ? ? ? ? ? <p>模態彈出窗主體內容</p>

? ? ? ? ? ? </div>

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

? ? ? ? ? ? ? ? <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>

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

? ? ? ? ? ? </div>

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

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

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

徽章與標簽基本一致

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

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

頁面內標簽的實現

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

顏色與button顏色的使用一致

翻頁分頁

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

將兩個li一個居左一個居右

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

帶頁碼的分頁?pagination?

可以控制大小

<ul class="pagination pagination-lg">

? <li><a href="#">&laquo;第一頁</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="#">最后一頁&raquo;</a></li>

</ul>?

反色導航條

將navbar-default變為navbar-inverse

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

導航條固定

.navbar-fixed-top:

.navbar-fixed-bottom:

導航條中嵌入表單

navbar-form

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

? 　<div class="navbar-header">

? 　? ? <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="##">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="##">關于我們</a></li>

</ul>

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

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

? ? ? ?<input type="text" class="form-control" placeholder="請輸入關鍵詞" />

? ? ? ? </div>

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

? ? ?</form>

</div>

導航條

在制作一個基礎導航條時，主要分以下幾步：

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

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

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

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

面包屑式導航 class=breadcrumb

<ol class="breadcrumb">

? <li><a href="#">首頁</a></li>

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

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

</ol>?

在導航欄中嵌入二級目錄

<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="##">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="##">關于我們</a></li>

</ul>

垂直導航欄(加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>

膠囊型導航（有框）

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