-
用戶點(diǎn)擊或懸浮對應(yīng)的菜單項(xiàng)，能切換出對應(yīng)的內(nèi)容。 ?選項(xiàng)卡組件（也就是菜單組件），對應(yīng)的是 Bootstrap的 nav-tabs） ?底部可以切換的選項(xiàng)卡面板，在 Bootstrap 中通常 tab-pane 來表示 <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 active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane" id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane" id="forum">論壇內(nèi)容面板</div> <div class="tab-pane" id="security">安全內(nèi)容面板</div> <div class="tab-pane" id="welfare">公益內(nèi)容面板</div> </div>查看全部
-
模態(tài)事件查看全部
-
$("#mymodal").on('show.bs.modal',function(e){ alert('模態(tài)彈出前！'); }); $("#mymodal").on('shown.bs.modal',function(e){ alert('模態(tài)彈出后！'); }); $("#mymodal").on('hide.bs.modal',function(e){ alert('模態(tài)隱藏前！'); }); $("#mymodal").on('hidden.bs.modal',function(e){ alert('模態(tài)隱藏后！'); });查看全部
-
關(guān)鍵一點(diǎn)，選項(xiàng)卡中鏈接的錨點(diǎn)要與對應(yīng)的面板內(nèi)容容器的ID相匹配。查看全部
-
在Web頁面中實(shí)現(xiàn)Bootstrap滾動(dòng)監(jiān)控器其實(shí)非常簡單，接下來我們一步一步來看滾動(dòng)監(jiān)控器是如何設(shè)計(jì)的。 第一步：使用滾動(dòng)監(jiān)控器，首要的條件是在頁面中加載對應(yīng)的插件。在這里你可以加載合并好的bootstrap.js或者其獨(dú)立的插件文件scrollspy.js。 第二步：設(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)控對象。這里將監(jiān)控對象內(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)鏈接名相對應(yīng)，并且注意加入“data-target="#navbar-menu"”屬性（這個(gè)屬性值要與前面的nav標(biāo)簽的id名稱保持一致） 第四步：為監(jiān)控對象定義樣式，設(shè)置容器scrollspy大小（設(shè)置高度目的是為了產(chǎn)生垂直滾動(dòng)條）。 .scrollspy{ height:500px; font-size:20px; overflow:auto; }查看全部
-
滾動(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)。 2、用戶拖動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)到@mdo時(shí)，上面的@mdo導(dǎo)航項(xiàng)就會(huì)高亮顯示 這是因?yàn)樵摬寮梢宰詣?dòng)檢測滾動(dòng)條到達(dá)哪個(gè)位置，然后在需要高亮的菜單元素上加了一個(gè)“active”樣式。查看全部
-
和模態(tài)彈出窗一樣，Bootstrap框架中的下拉菜單也支持JavaScript方法觸發(fā)下拉菜單顯示。使用JavaScript觸發(fā)下拉菜單和聲明式原理是基本類似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者樣式。 $('.dropdown-toggle').dropdown()查看全部
-
用戶只需要點(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í)，對所有帶 有“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é)構(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)擊鏈接，頁面跳到頂部，可以使用data-target="#"來替代href="#"查看全部
-
和模態(tài)彈出窗一樣，觸發(fā)下拉菜單方式有兩種，一種是屬性聲明式用法，另一種是JavaScript方法。查看全部
-
參數(shù)設(shè)置： 在Bootstrap框架中還為模態(tài)彈出窗提供了三種參數(shù)設(shè)置 toggle show hide 事件設(shè)置： 模態(tài)彈出窗還支持四種類型的事件，分別是模態(tài)彈出窗的彈出前、彈出后，關(guān)閉前、關(guān)閉后 show.bs.modal 在show方法調(diào)用時(shí)立即觸發(fā)（尚未顯示之前）；如果單擊了一個(gè)元素，那么該元素將作為事件的relatedTarget屬性 shown.bs.modal 該事件在模態(tài)彈出窗完全顯示給用戶之后（并且等CSS動(dòng)畫完成之后）觸發(fā)；如果單擊了一個(gè)元素，那么該元素將作為事件的relatedTarget事件 hide.bs.modal 在hide方法調(diào)用時(shí)（但還未關(guān)閉隱藏）立即觸發(fā) hidden.bs.modal 該事件在模態(tài)彈出窗完全隱藏之后（并且CSS動(dòng)畫漂完成之后）觸發(fā) $('#myModal').on('hidden.bs.modal', function (e) { // 處理代碼... })查看全部
-
手風(fēng)琴標(biāo)簽查看全部
-
自定義Bootstrap框架主要有兩種方式來實(shí)現(xiàn)： 1.使用 CSS 預(yù)處理器語言 2.使用在線自定義設(shè)置 在Bootstrap框架的官網(wǎng)為大家提供了一個(gè)在線自定義 Bootstrap 框架的配置頁面 http://getbootstrap.com/customize/ ，可以通過這里進(jìn)行配置。 在線自定義設(shè)置主要包括三個(gè)部分： Bootstrap 組件 Bootstrap 插件 Bootstrap 的 LESS 版本變量設(shè)置查看全部
-
固定定位--聲明式觸發(fā)固定定位 通過自定義屬性 data 來觸發(fā)。其主要包括兩個(gè)參數(shù)： 1、data-spy：取值 affix，表示元素固定不變的。 2、data-offset：整數(shù)值，比如 90，表示元素 top 和 bottom 的值都是 90px查看全部
-
圖片輪播--聲明式觸輪播圖的播放（一） 聲明式方法是通過定義 data 屬性來實(shí)現(xiàn)，data 屬性可以很容易地控制輪播的位置。 data-ride 屬性：取值 carousel，并且將其定義在 carousel 上。 data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識(shí)別符，如前面示例所示，取值為“#slidershow”，并且將其定義在輪播圖計(jì)數(shù)器的每個(gè) li 上。 data-slide 屬性：取值包括 prev，next，prev表示向后滾動(dòng)，next 表示向前滾動(dòng)。該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時(shí)設(shè)置控制器 href 值為容器 carousel 的 ID 名或其他樣式識(shí)別符。 data-slide-to 屬性：用來傳遞某個(gè)幀的下標(biāo)，比如 data-slide-to="2"，可以直接跳轉(zhuǎn)到這個(gè)指定的幀（下標(biāo)從0開始計(jì)），同樣定義在輪播圖計(jì)數(shù)器的每個(gè) li 上。查看全部
-
圖片輪播--輪播圖片的設(shè)計(jì)（三）: 設(shè)計(jì)輪播圖片控制器 在 Carousel 中通過 carousel-control 樣式配合 left 和 right 來實(shí)現(xiàn)查看全部
舉報(bào)
0/150
提交
取消