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

選項(xiàng)卡--JavaScript觸發(fā)方法

除了在HTML設(shè)置 data-toggle 來觸發(fā)選項(xiàng)卡之外，還可以通過JavaScript直接調(diào)用。

調(diào)用方法:

在每個(gè)鏈接的單擊事件中調(diào)用tab("show")方法，顯示對(duì)應(yīng)的標(biāo)簽面板內(nèi)容。針對(duì)上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過下面的腳本來調(diào)用：

$(function(){?????$("#myTab?a").click(function(e){????????????????$(this).tab("show");?????});?})

function(e){ e.preventDefault();這兩行不知道是什么意思

阻止默認(rèn)事件.比如當(dāng)你點(diǎn)擊帶有href值的a標(biāo)簽時(shí),元素響應(yīng)click事件后,還會(huì)發(fā)生頁(yè)面跳轉(zhuǎn).如果加上這個(gè)方法(屬性)后,瀏覽器只會(huì)響應(yīng)click事件,不會(huì)發(fā)生跳轉(zhuǎn).

事件冒泡：例如這樣一個(gè)結(jié)構(gòu) ：<li><a></a></li>，假如你在a標(biāo)簽上綁定了一個(gè)點(diǎn)擊click事件，如：$("a").click(function(){alert("a"); }); 還在li標(biāo)簽上綁定了一個(gè)事件，如：$("li").click(function(){alert("li"); }); ?如果不加e.preventDefault();這一語句，結(jié)果會(huì)在alert("a");執(zhí)行后再次執(zhí)行alert("li")語句，因?yàn)閍標(biāo)簽在li標(biāo)簽中，a標(biāo)簽在li標(biāo)簽范圍中，在執(zhí)行a標(biāo)簽上的事件后會(huì)執(zhí)行l(wèi)i標(biāo)簽上的相同類型事件，從內(nèi)層標(biāo)簽往外層依次執(zhí)行相同類型事件，從里面往外面，此為冒泡。

選項(xiàng)卡--膠囊式選項(xiàng)卡（nav-pills）

在Bootstrap除了可以讓?nav-tabs?具有選項(xiàng)卡的切換功能之外，還可以對(duì)膠囊式?nav-pills?導(dǎo)航也具有選項(xiàng)卡的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關(guān)鍵一點(diǎn)是將?data-toggle="tab"換成data-toggle="pill"。

下面的示例是將上面的 nav-tabs 換成 nav-pills：

<!--?選項(xiàng)卡組件（菜單項(xiàng)nav-pills）-->?<ul?id="myTab"?class="nav?nav-pills"?role="tablist">?????<li?class="active"><a?href="#bulletin"?role="tab"?data-toggle="pill">公告</a></li>?????<li><a?href="#rule"?role="tab"?data-toggle="pill">規(guī)則</a></li>

選項(xiàng)卡--觸發(fā)切換效果

同樣的，選項(xiàng)卡也定義data屬性來觸發(fā)切換效果。當(dāng)然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發(fā)選項(xiàng)卡需要滿足以下幾點(diǎn)要求：
? 1、選項(xiàng)卡導(dǎo)航鏈接中要設(shè)置?data-toggle="tab"

? 2、并且設(shè)置?data-target="對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)";

???? 如果是鏈接的話，還可以通過?href="對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)"

???? 主要起的作用是用戶點(diǎn)擊的時(shí)候能找到該選擇符所對(duì)應(yīng)的面板內(nèi)容 tab-pane。

? 3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中，而且每個(gè)內(nèi)容面板 tab-pane 都需要設(shè)置一個(gè)獨(dú)立的選擇符（最好是ID）與選項(xiàng)卡中的?data-target?或?href?的值匹配。

代碼如下所示：

<!--?選項(xiàng)卡組件（菜單項(xiàng)nav-tabs）-->?<ul?id="myTab"?class="nav?nav-tabs"?role="tablist">?????<li?class="active"><a?href="#bulletin"?role="tab"?data-toggle="tab">公告</a></li>?????<li><a?href="#rule"?role="tab"?data-toggle="tab">規(guī)則</a></li>?????<li><a?href="#forum"?role="tab"?data-toggle="tab">論壇</a></li>?????<li><a?href="#security"?role="tab"??data-toggle="tab">安全</a></li>?????<li><a?href="#welfare"?role="tab"?data-toggle="tab">公益</a></li>?</ul>?<!--?選項(xiàng)卡面板?-->?<div?id="myTabContent"?class="tab-content">?????<div?class="tab-pane?fade?in?active"?id="bulletin">公告內(nèi)容面板</div>?????<div?class="tab-pane?fade"?id="rule">規(guī)則內(nèi)容面板</div>?????<div?class="tab-pane?fade"?id="forum">論壇內(nèi)容面板</div>?????<div?class="tab-pane?fade"?id="security">安全內(nèi)容面板</div>?????<div?class="tab-pane?fade"?id="welfare">公益內(nèi)容面板</div>?</div>

運(yùn)行效果如下：

?

選項(xiàng)卡--為選擇卡添加fade樣式

為了讓面板的隱藏與顯示在切換的過程效果更流暢，可以在面板中添加類名?fade，讓其產(chǎn)生漸入的效果。

在添加 fade 樣式時(shí)，最初的默認(rèn)顯示的內(nèi)容面板一定要記得加上?in?類名，不然其內(nèi)容用戶無法看到。

項(xiàng)卡--選項(xiàng)卡的結(jié)構(gòu)

一個(gè)選項(xiàng)卡主要包括兩個(gè)部分，其一是菜單項(xiàng)，其二是內(nèi)容面板。拿下面的示例來做演示。其HTML結(jié)構(gòu)如下：

<）-->?<ul?id="myTab"?class="nav?nav-tabs"?role="tablist">?????<li?class="active"?role="tab">公告</a></li>?????<li>"?role="tab">規(guī)則</a></li>?????<li><a?href="#forum"?role="tab">論壇</a></li>?????<li>"?role="tab">安全</a></li>?????<li><a?href="#welfare"?role="tab">公益</a></li>?</ul>?<?????<div?class="tab-pane?"?id="bulletin">公告內(nèi)容面板</div>?????<div?class="tab-pane?fade"?id="rule">規(guī)則內(nèi)容面板</div>?????<div?class="tab-pane?fade"?id="forum">論壇內(nèi)容面板</div>?????<div?class="tab-pane?fade"?id="security">安全內(nèi)容面板</div>?????<div?class="tab-pane?fade"?id="welfare">公益內(nèi)容面板</div>?</div>

關(guān)鍵一點(diǎn)，選項(xiàng)卡中鏈接的錨點(diǎn)要與對(duì)應(yīng)的面板內(nèi)容容器的ID相匹配。

滾動(dòng)監(jiān)控器--JavaScript方法觸發(fā)滾動(dòng)監(jiān)控器

在Bootstrap框架中，使用JavaScript方法觸發(fā)滾動(dòng)監(jiān)控器相對(duì)來說較為簡(jiǎn)單，只需要指定兩個(gè)容器的名稱即可。比如下面的結(jié)構(gòu)：

<nav?id="navbar-menu"?class="navbar?navbar-default?navbar-static"?role="navigation">???…?</nav>?<div?class="scrollspy"?id="scrollspy">???…?</div>

JavaScript觸發(fā)可以這樣寫：

$(function(){?????$("#scrollspy").scrollspy({?????????target:?"#navbar-menu"?????});?})

Bootstrap的滾動(dòng)監(jiān)控還提供了一個(gè)方法scrollspy("refresh")。當(dāng)滾動(dòng)監(jiān)控所作用的DOM有增加或刪除頁(yè)面元素的操作時(shí)，需要調(diào)用下面的refresh方法：

$(function(){?????$("[data-spy='scroll']").each(function(){?????????var?$spy=$(this).scrollspy("refresh");?????})?})

需要注意的是，這種refresh方法只對(duì)聲明式用法有效。另外滾動(dòng)監(jiān)控除了options參數(shù)“target”之外，還提供了一個(gè)offset參數(shù)，此參數(shù)默認(rèn)值為10。默認(rèn)情況下，滾動(dòng)內(nèi)容距離滾動(dòng)容器10px以內(nèi)的話，就高一片面前顯示所對(duì)應(yīng)的菜單項(xiàng)。

滾動(dòng)監(jiān)控器--在body中加監(jiān)控

除了這種方法之外，還可以直接在body上進(jìn)行滾動(dòng)條監(jiān)控，此時(shí)要將滾動(dòng)監(jiān)控器移到body上，而且導(dǎo)航nav一定要在body內(nèi)部。如下所示：

????<div?class="navbar?navbar-default?navbar-fixed-top"?id="navbar-menu">?????</div>?????<h3?id="blog">Blog</h3>?????<p>…</p>?</body>

注意：導(dǎo)航條必須設(shè)置為頂部固定樣式（navbar-fixed-top）

<div class="scrollspy-example" data-offset="0" data-target="#navbar-example2" data-spy="scroll">

注意這段是寫在文本那里的div的，data-target對(duì)應(yīng)導(dǎo)航條的id

滾動(dòng)監(jiān)控器--聲明屬性觸發(fā)滾動(dòng)監(jiān)控

為監(jiān)控對(duì)象設(shè)置被監(jiān)控的data屬性：data-spy="scroll"，指定監(jiān)控的導(dǎo)航條：data-target="#navbar-menu"。同時(shí)定義監(jiān)控過程中滾動(dòng)條偏移位置data-offset="60"。代碼如下：

<div?class="scrollspy"?data-spy="scroll"?data-target="#navbar-menu"?data-offset="60">???…?</div>

現(xiàn)在瀏覽器中預(yù)覽，則可以看到當(dāng)滾動(dòng)div.scrollspy的滾動(dòng)條時(shí)，導(dǎo)航條會(huì)實(shí)時(shí)監(jiān)控并更新當(dāng)前被激活的菜單項(xiàng)，如下圖所示：

? ?

如果導(dǎo)航里有下拉菜單，并且滾動(dòng)區(qū)域的內(nèi)容到達(dá)下拉菜單子項(xiàng)所對(duì)應(yīng)的區(qū)域，除了菜單高亮以外，子菜單的父元素dropdown也會(huì)高亮，如下圖所示：

滾動(dòng)監(jiān)控器--滾動(dòng)監(jiān)控器的設(shè)計(jì)

在Web頁(yè)面中實(shí)現(xiàn)Bootstrap滾動(dòng)監(jiān)控器其實(shí)非常簡(jiǎn)單，接下來我們一步一步來看滾動(dòng)監(jiān)控器是如何設(shè)計(jì)的。
第一步：使用滾動(dòng)監(jiān)控器，首要的條件是在頁(yè)面中加載對(duì)應(yīng)的插件。在這里你可以加載合并好的bootstrap.js或者其獨(dú)立的插件文件scrollspy.js。這里以加載合并好的js為例：

<script?src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>?<script?src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

第二步：設(shè)計(jì)一個(gè)帶有下拉菜單的導(dǎo)航條。分別為導(dǎo)航條和下拉菜單項(xiàng)定義一個(gè)錨點(diǎn)鏈接，錨點(diǎn)分別為“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同時(shí)為導(dǎo)航條定義一個(gè)id值“navbar-menu”（id名稱可自由定義），方便滾動(dòng)監(jiān)控。

第三步：設(shè)計(jì)監(jiān)控對(duì)象。這里將監(jiān)控對(duì)象內(nèi)容都放置在一個(gè)div名為scrollspy（這個(gè)類名可自由定義）的容器中，其中放了多個(gè)子內(nèi)容框。每個(gè)子內(nèi)容框有一個(gè)標(biāo)題，而且每個(gè)標(biāo)題的ID值與導(dǎo)航菜單項(xiàng)中的錨點(diǎn)鏈接名相對(duì)應(yīng)，并且注意加入“data-target="#navbar-menu"”屬性（這個(gè)屬性值要與前面的nav標(biāo)簽的id名稱保持一致）

<div?class="scrollspy"?data-target="#navbar-menu">?????<h4?id="blog">Blog</h4>?????<p>…</p>?????<h4?id="html">Html</h4>?????<p>…</p>?????<h4?id="css">CSS</h4>?????<p>…</p>?????<h4?id="sass">Sass</h4>?????<p>…</p>?????<h4?id="js">JavaScript</h4>?????<p>…</p>?????<p>…</p>?????<h4?id="php">PHP</h4>?????<p>…</p>?????<p>…</p>?????<h4?id="about">About</h4>?????<p>…</p>?????<p>…</p>?</div>

第四步：為監(jiān)控對(duì)象定義樣式，設(shè)置容器scrollspy大?。ㄔO(shè)置高度目的是為了產(chǎn)生垂直滾動(dòng)條）。

.scrollspy{?????height:500px;?????font-size:20px;?????overflow:auto;?}

滾動(dòng)監(jiān)控器

插件源文件：scrollspy.js

（官方發(fā)布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js）

滾動(dòng)監(jiān)控器是Bootstrap提供的非常實(shí)用的JavaScript插件，被廣泛應(yīng)用到Web開發(fā)中。其表現(xiàn)形式是：

1、當(dāng)用戶鼠標(biāo)滾動(dòng)時(shí)，滾動(dòng)條的位置會(huì)自動(dòng)更新導(dǎo)航條中相應(yīng)的導(dǎo)航項(xiàng)。如Bootstrap官網(wǎng)提供的示例：

（右側(cè)結(jié)果窗口單擊全屏按鈕查看效果）

2、用戶拖動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)到@mdo時(shí)，上面的@mdo導(dǎo)航項(xiàng)就會(huì)高亮顯示：

這是因?yàn)樵摬寮梢宰詣?dòng)檢測(cè)滾動(dòng)條到達(dá)哪個(gè)位置，然后在需要高亮的菜單元素上加了一個(gè)“active”樣式。

下拉菜單--JavaScript觸發(fā)方法

和模態(tài)彈出窗一樣，Bootstrap框架中的下拉菜單也支持JavaScript方法觸發(fā)下拉菜單顯示。使用JavaScript觸發(fā)下拉菜單和聲明式原理是基本類似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者樣式。同樣用一個(gè)簡(jiǎn)單的示例來做演示：

<ul?class="nav?nav-pills">
????<li?class="dropdown">
????????<a?href="##"??class="dropdown-toggle"??role="button"?id="tutorial">教程<b?class="caret"></b></a>
????????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="tutorial">

相當(dāng)于直接用$(function(){
 ? ?$(".dropdown-toggle").dropdown();
})代替了 date-toggle="dropdown" 觸發(fā)

使用JavaScript調(diào)用dropdown()方法后，單擊激活按鈕，會(huì)彈出下拉菜單，再次單擊的時(shí)候會(huì)收起下拉菜單。

$(function(){
????$(".dropdown-toggle").dropdown();
})

還可以使用參數(shù)“toggle”。當(dāng)下拉菜單隱藏時(shí)，調(diào)用dropdown(“toggle”)方法可以顯示下拉菜單，反之，如果下拉菜單顯示時(shí)，調(diào)用dropdown(“toggle”)方法可以讓下拉菜單隱藏。

$(function(){
????$(".dropdown-toggle").dropdown("toggle");
})

不過使用該參數(shù)，每次單擊都要兩次toggle，就會(huì)一直是一個(gè)不變的狀態(tài)。所以，一般情況下，使用示例中不帶參數(shù)的方法?。?！。就算你需要使用參數(shù)“toggle”，也建議使用jQuery的one方法：

$(".dropdown-toggle").one("click",function(){
????$(this).dropdown("toggle");
})

js調(diào)用dropdown時(shí)無法隱藏

a 標(biāo)簽的?data-toggle="dropdown" 都沒有刪掉 是可以隱藏的呀. 然后那個(gè)js代碼就沒什么必要了

下拉菜單--屬性聲明式方法（二)

從上一節(jié)的兩個(gè)示例，我們可以知道，用戶只需要點(diǎn)擊有向下三角形的按鈕鏈接或者直接點(diǎn)擊三角形就會(huì)彈出下拉菜單。實(shí)現(xiàn)這個(gè)效果，都是依賴于HTML相關(guān)元素自定義的屬性完成。所以在編寫HTML結(jié)構(gòu)的時(shí)候必須滿足下面的規(guī)則：

? ?按照制作菜單的結(jié)構(gòu)編寫結(jié)構(gòu)，如前面“下拉菜單”一節(jié)(5-21)所介紹

? ?被點(diǎn)擊的菜單項(xiàng)鏈接或按鈕需要添加自定義屬性?data-toggle="dropdown"

實(shí)現(xiàn)下拉菜單原理：

Dropdown插件加載時(shí)，對(duì)所有帶 有“data-toggle=dropdown”樣式的元素綁定了事件，用戶單擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時(shí)， 會(huì)觸發(fā)JavaScript事件代碼。當(dāng)用戶點(diǎn)擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時(shí)，下拉菜單的父容器（上面的示例是 “<li class="dropdown">”）會(huì)添加一個(gè)open類名，此時(shí)下拉菜單顯示；再次單擊時(shí)，JavaScript會(huì)刪除剛添加的open類 名，此時(shí)下拉菜單將隱藏。

簡(jiǎn)單的說，要制作下拉菜單，其結(jié)構(gòu)基本如下：

<div?class="dropdown">
????<a?data-toggle="dropdown"?href="#">下拉菜單觸發(fā)器</a>
????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="dLabel">?...?</ul>
</div>

如果觸發(fā)下拉菜單的元素是一個(gè)鏈接元素，為了避免點(diǎn)擊鏈接，頁(yè)面跳到頂部，可以使用data-target="#"來替代href="#"：

<div?class="dropdown">
????<a?id="dLabel"?role="button"?data-toggle="dropdown"?data-target="#"?href="/page.html">?Dropdown?<span?class="caret"></span></a>
????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="dLabel">?...?</ul>
</div>

aria-labelledby="tutorial"有什么用？

aria-labelledby="tutorial"表示以下的標(biāo)簽是"tutorial"菜單的選項(xiàng)，而上面必須要定義一個(gè)id為"tutorial"的標(biāo)簽來觸發(fā)這個(gè)菜單

?<li?class="dropdown">
????????<a?href="##"?data-toggle="dropdown"?class="dropdown-toggle"?role="button"?關(guān)于我們<b?class="caret"></b></a>
????????<ul?class="dropdown-menu"?role="menu">
????????????<li?role="presentation"><a?href="##">團(tuán)隊(duì)成長(zhǎng)</a></li>

下拉菜單--屬性聲明式方法（一）

屬性聲明式方法：

一般下拉菜單都是出現(xiàn)在導(dǎo)航條中，比如下圖的一個(gè)效果，用戶點(diǎn)擊帶有三角形的菜單項(xiàng)都會(huì)彈出下拉菜單項(xiàng)：

<div?class="navbar?navbar-default"?id="navmenu">?????<a?href="##"?class="navbar-brand">W3cplus</a>?????<ul?class="nav?navbar-nav">?????????<li?class="dropdown">?????????????<a?href="##"?data-toggle="dropdown"?class="dropdown-toggle"?role="button"?id="tutorial">教程<b?class="caret"></b></a>?????????????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="tutorial">?????????????????<li?role="presentation"><a?href="##">CSS3</a></li>?????????????????<li?role="presentation"><a?href="##">HTML5</a></li>?????????????????<li?role="presentation"><a?href="##">Sass</a></li>?????????????</ul>?????????</li>?????????<li><a?href="##">前端論壇</a></li>?????????<li><a?href="##">關(guān)于我們</a></li>?????</ul>?</div>

除了這種導(dǎo)航條之外，在膠囊式導(dǎo)航中也具有下拉菜單，其結(jié)構(gòu)如：

<ul?class="nav?nav-pills">?????<li?class="dropdown">?????????<a?href="##"?data-toggle="dropdown"?class="dropdown-toggle"?role="button"?id="tutorial">教程<b?class="caret"></b></a>?????????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="tutorial">?????????????<li?role="presentation"><a?href="##">CSS3</a></li>?????????????<li?role="presentation"><a?href="##">HTML5</a></li>?????????????<li?role="presentation"><a?href="##">Sass</a></li>?????????</ul>?????</li>?????<li?class="active"><a?href="##">前端論壇</a></li>?????<li><a?href="##">關(guān)于我們</a></li>?</ul>

運(yùn)行效果如下：

動(dòng)畫過渡：transition.js

模態(tài)彈窗：modal.js

下拉菜單：dropdown.js

滾動(dòng)偵測(cè)：scrollspy.js

選項(xiàng)卡：tab.js

提示框：tooltop.js

警告框：alert,js

按鈕：button.js

折疊/手風(fēng)琴：collapse.js

圖片輪播：carousel,js

自動(dòng)定位浮標(biāo)A覅下：affix.js

下載地址

https://github.com/twbs/bootstrap

<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>

<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
?? ??? ??? ??? ?<li role="presentation"><a href="##">CSS3</a></li>
?? ??? ??? ??? ?<li role="presentation"><a href="##">HTML5</a></li>
?? ??? ??? ??? ?<li role="presentation"><a href="##">Sass</a></li>
?? ??? ??? ?</ul>

Bootstrap中文定制頁(yè)面：http://v3.bootcss.com/customize/