亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

整理關(guān)于Bootstrap導(dǎo)航的慕課筆記

 更新時間：2017年03月29日 10:54:31   作者：大大大大大桃子  
這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下

整理自慕課筆記

基礎(chǔ)樣式

導(dǎo)航對于一位前端人員來說并不陌生?？梢哉f導(dǎo)航是一個網(wǎng)站重要的元素組件之一，可以便于用戶查找網(wǎng)站所提供的各項功能服務(wù)。導(dǎo)航的制作方法也是千奇百怪，五花八門。在這一節(jié)中將向大家介紹如何使用Bootstrap框架制作各式各樣的導(dǎo)航。
Bootstrap框架中制作導(dǎo)航條主要通過“.nav”樣式。默認的“.nav”樣式不提供默認的導(dǎo)航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類

<ul class="nav nav-tabs">
  <li><a href="##">Home</a></li>
  <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>

標簽形tab導(dǎo)航

標簽形導(dǎo)航，也稱為選項卡導(dǎo)航。特別是在很多內(nèi)容分塊顯示的時，使用這種選項卡來分組十分適合。
標簽形導(dǎo)航是通過“nav-tabs”樣式來實現(xiàn)。在制作標簽形導(dǎo)航時需要在原導(dǎo)航“nav”上追加此類名，如：

<ul class="nav nav-tabs">
   <li><a href="##">Home</a></li>
   <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>

一般情況之下，選項卡教會有一個當前選中項。其實在Bootstrap框架也相應(yīng)提供了。假設(shè)我們想讓“Home”項為當前選中項，只需要在其標簽上添加類名“class=”active””即可：

<ul class="nav nav-tabs">
   <li class="active"><a href="##">Home</a></li>
   …
</ul>

除了當前項之外，有的選項卡還帶有禁用狀態(tài)，實現(xiàn)這樣的效果，只需要在標簽項上添加“class=”disabled””即可：

<ul class="nav nav-tabs">
   <li class="active"><a href="##">Home</a></li>
   …
   <li class="disabled"><a href="##">Responsive</a></li>
</ul>

注意：我們看到的選項卡效果，點擊菜單項就可以切換內(nèi)容，如果要實現(xiàn)這樣的效果需要配合js插件，這部分將在后面的教程中會介紹。

膠囊形(pills)導(dǎo)航

膠囊形（pills）導(dǎo)航聽起來有點別扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導(dǎo)航。當前項高亮顯示，并帶有圓角效果。其實現(xiàn)方法和“nav-tabs”類似，同樣的結(jié)構(gòu)，只需要把類名“nav-tabs”換成“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>

垂直堆疊的導(dǎo)航

在實際運用當中，除了水平導(dǎo)航之外，還有垂直導(dǎo)航，就類似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導(dǎo)航只需要在“nav-pills”的基礎(chǔ)上添加一個“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)航與膠囊形導(dǎo)航相比，主要是讓導(dǎo)航項不浮動，讓其垂直排列，然后給相鄰導(dǎo)航項留有一定的間距。大家是否還記得，在下拉菜單一節(jié)中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導(dǎo)航也具有這樣的效果，只需要添加在導(dǎo)航項之間添加<li class=”nav-divider”></li>即可：

<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="nav-divider"></li>
  <li class="disabled"><a href="##">Responsive</a></li>
</ul>

或許你會問，如果我在”nav-tabs”上添加“nav-stacked”是不是也能實現(xiàn)垂直的標簽選項導(dǎo)航呢？答案是：在bootstrap V2.x版本可以，但在Bootstrap V3.x版本將這個效果取消了，可能作者覺得垂直選擇項并不太常見，也不美觀吧。

自適應(yīng)導(dǎo)航

使用

自適應(yīng)導(dǎo)航指的是導(dǎo)航占據(jù)容器全部寬度，而且菜單項可以像表格的單元格一樣自適應(yīng)寬度。自適應(yīng)導(dǎo)航和前面使用“btn-group-justified”制作的自適應(yīng)按鈕組是一樣的。只不過在制作自適應(yīng)導(dǎo)航時更換了另一個類名“nav-justified”。當然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：

<ul class="nav nav-tabs nav-justified">
   <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><a href="##">Responsive</a></li>
</ul>

實現(xiàn)原理

實現(xiàn)原理并不難，列表<ul>上設(shè)置寬度為“100%”，然后每個菜單項<li>設(shè)置了“display:table-cell”，讓列表項以模擬表格單元格的形式顯示

導(dǎo)航加下拉菜單（二級導(dǎo)航）

前面介紹的都是使用Bootstrap框架制作一級導(dǎo)航，但很多時候，在Web頁面中是離不開二級導(dǎo)航的效果。那么在Bootstrap框架中制作二級導(dǎo)航就更容易了。只需要將li當作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul，使用前面介紹下拉菜單的方法就可以：

<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>
      …
    </ul>
   </li>
   <li><a href="##">關(guān)于我們</a></li>
</ul>

面包屑式導(dǎo)航

面包屑(Breadcrumb)一般用于導(dǎo)航，主要是起的作用是告訴用戶現(xiàn)在所處頁面的位置（當前位置）。在Bootstrap框架中面包屑也是一個獨立模塊組件

使用方法

使用方式就很簡單，為ol加入breadcrumb類：

<ol class="breadcrumb">
 <li><a href="#">首頁</a></li>
 <li><a href="#">我的書</a></li>
 <li class="active">《圖解CSS3》</li>
</ol>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序利用Canvas繪制圖片和豎排文字詳解

    微信小程序利用Canvas繪制圖片和豎排文字詳解

    這篇文章主要介紹了微信小程序利用Canvas繪制圖片和豎排文字詳解，合成圖片應(yīng)該按照 Canvas 的文檔來做都沒什么問題，主要是有個豎排文字的需求，這里和大家分享一下,需要的朋友可以參考下
    2019-06-06
  • JS實現(xiàn)簡潔、全兼容的拖動層實例

    JS實現(xiàn)簡潔、全兼容的拖動層實例

    這篇文章主要介紹了JS實現(xiàn)簡潔、全兼容的拖動層的方法,實例分析了javascript鼠標事件及頁面元素的操作技巧,非常具有實用價值,需要的朋友可以參考下
    2015-05-05
  • uniapp實現(xiàn)注冊發(fā)送獲取驗證碼功能

    uniapp實現(xiàn)注冊發(fā)送獲取驗證碼功能

    隨著網(wǎng)絡(luò)的發(fā)達,總會有人惡意注冊網(wǎng)站,而使用輸入驗證碼功能可以有效的阻止這一類現(xiàn)象的發(fā)生,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)注冊發(fā)送獲取驗證碼功能的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • 一文詳解JS中的塊級作用域

    一文詳解JS中的塊級作用域

    在JavaScript的世界里,作用域可以分為三種,分別是全局作用域,函數(shù)作用域,塊級作用域,本文主要來和大家聊聊JS中塊級作用域的相關(guān)知識,感興趣的可以了解下
    2023-09-09
  • openlayers實現(xiàn)地圖彈窗

    openlayers實現(xiàn)地圖彈窗

    這篇文章主要為大家詳細介紹了openlayers實現(xiàn)地圖彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • 微信小程序商品詳情頁規(guī)格屬性選擇示例代碼

    微信小程序商品詳情頁規(guī)格屬性選擇示例代碼

    這篇文章主要介紹了微信小程序商品詳情頁規(guī)格屬性選擇的示例代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
    2017-10-10
  • js如何使用Pagination+PageHelper實現(xiàn)分頁

    js如何使用Pagination+PageHelper實現(xiàn)分頁

    本文主要介紹了js如何使用Pagination+PageHelper實現(xiàn)分頁，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-06-06
  • 一個用js實現(xiàn)控制臺控件的代碼

    一個用js實現(xiàn)控制臺控件的代碼

    一個用js實現(xiàn)控制臺控件的代碼...
    2007-09-09
  • js自定義trim函數(shù)實現(xiàn)刪除兩端空格功能

    js自定義trim函數(shù)實現(xiàn)刪除兩端空格功能

    這篇文章主要介紹了js自定義trim函數(shù)實現(xiàn)刪除兩端空格功能,結(jié)合實例形式分析了javascript基于正則替換實現(xiàn)類似trim函數(shù)刪除字符串兩端空格的相關(guān)操作技巧,并附帶jQuery類似功能函數(shù)使用方法,需要的朋友可以參考下
    2018-02-02
  • JavaScript使用Promise封裝Axios進行高效開發(fā)

    JavaScript使用Promise封裝Axios進行高效開發(fā)

    這篇文章主要介紹了JavaScript使用Promise封裝Axios進行高效開發(fā)，Axios是一個基于Promise的HTTP庫，它可以幫助我們更方便地發(fā)起HTTP請求，并且提供了許多高級功能，感興趣的同學可以參考下文
    2023-05-05

最新評論