詳解Bootstrap導航組件

来源:http://www.cnblogs.com/jnslove/archive/2016/04/24/5428470.html
-Advertisement-
Play Games

在bootstrap框架中將導航獨立出來成為一個導航組件，根據不同的版本，可以找到相應的源碼： LESS: navs.less SASS: _navs.scss 標簽形導航，也稱選項卡導航 標簽形導航是通過.nav-tabs樣式來實現的，在製作標簽形導航時需要在原導航類名為.nav的容器上追加類名. ...


在bootstrap框架中將導航獨立出來成為一個導航組件，根據不同的版本，可以找到相應的源碼：

LESS:  navs.less

SASS:  _navs.scss

 

標簽形導航，也稱選項卡導航

標簽形導航是通過.nav-tabs樣式來實現的，在製作標簽形導航時需要在原導航類名為.nav的容器上追加類名.nav-tabs

<ul class="nav nav-tabs">
        <li><a href="#">導航標題1</a></li>
        <li><a href="#">導航標題2</a></li>
        <li><a href="#">導航標題3</a></li>
        <li><a href="#">導航標題4</a></li>
        <li><a href="#">導航標題5</a></li>
    </ul>

原理：

將菜單項li按塊顯示，並讓它們排列在同一水平上，然後定義非高亮菜單的樣式和滑鼠懸浮效果

.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}

一般情況下，選項卡都會有個當前選中項，只需要在其（li）標簽上添加類名.active即可

<ul class="nav nav-tabs">
        <li class="active"><a href="#">導航標題1</a></li>
        <li><a href="#">導航標題2</a></li>
        <li><a href="#">導航標題3</a></li>
        <li><a href="#">導航標題4</a></li>
        <li><a href="#">導航標題5</a></li>
</ul>
.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

除了當前選項外，有的選項卡還帶有禁用狀態，實現這樣的效果，只需在標簽項上添加類名disabled

.nav>li.disabled> a {
  color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
  color: #999;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

如果要實現點擊菜單項就可以切換內容的效果，就需要配合js插件

 

膠囊形（pills）導航

當前高亮顯示，並帶圓角效果，其實現方法和選項卡導航類似，同樣的結構，只需將類名.nav-tabs換成類名.nav-pills

.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
  background-color: #428bca;
}

 

垂直堆疊的導航

除了水平導航，還有垂直導航，製作垂直堆疊的導航只需在.nav-pills的基礎上追加類名.nav-stacked

與膠囊形導航相比，主要是讓導航項不浮動，讓其垂直排列，然後給相鄰導航項留有一定的間距

.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}
<ul class="nav nav-pills nav-stacked">
        <li><a href="#">導航標題0</a></li>
        <li class="active"><a href="#">導航標題1</a></li>
        <li><a href="#">導航標題2</a></li>
        <li><a href="#">導航標題3</a></li>
        <li><a href="#">導航標題4</a></li>
        <li class="disabled"><a href="#">導航標題5</a></li>
</ul>

垂直堆疊導航像下拉菜單組與組間有一分割線一樣，導航項之間也有分割線這樣的效果，只需在導航項之間添加<li class=”divider”></li>

<ul class="nav nav-pills nav-stacked">
        <li ><a href="#">導航標題0</a></li>
        <li class="active"><a href="#">導航標題1</a></li>
        <li><a href="#">導航標題2</a></li>
        <li class="nav-divider"></li>
        <li><a href="#">導航標題3</a></li>
        <li><a href="#">導航標題4</a></li>
        <li class="disabled"><a href="#">導航標題5</a></li>
    </ul>
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

 

自適應導航

自適應導航指的是導航占據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度，自適應導航和之前提到的.btn-group-justified製作的自適應按鈕組件一樣，不過在製作自適應導航時類名.nav-justified需和.nav-tabs或.nav-pills配合一起使用

原理：

列表ul上設置寬度為100%，然後每個菜單項li設置了display：table-cell，讓列表模擬表格單元格的形式顯示；

.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-justified > li {
  display: table-cell;
  width: 1%;
  }
  .nav-justified > li > a {
  margin-bottom: 0;
  }
}

上面有一個媒體查詢條件：@media（min-width:768px）{……}表示自適應導航僅在瀏覽器視窗寬度大於768px才能按上面的風格顯示，但瀏覽器視窗寬度小於768px時，會按下圖的風格顯示

image

.nav-tabs和.nav-justified配合在一起使用，也就是自適應選項卡導航，瀏覽器視窗寬度小於768px時，在樣式上做了另外的處理

.nav-tabs.nav-justified {
 width: 100%;
 border-bottom: 0;
}
.nav-tabs.nav-justified > li {
 float: none;
}
.nav-tabs.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li {
 display: table-cell;
 width: 1%;
  }
.nav-tabs.nav-justified > li > a {
 margin-bottom: 0;
  }
}
.nav-tabs.nav-justified > li > a {
 margin-right: 0;
 border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border: 1px solid #ddd;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li > a {
 border-bottom: 1px solid #ddd;
 border-radius: 4px 4px 0 0;
  }
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border-bottom-color: #fff;
  }
}

 

導航加下拉菜單（二級導航）

製做二級導航只需將li當做父容器，使用類名.dropdown，同時在li中嵌套另一個ul列表

<ul class="nav nav-tabs">
        <li><a href="#">導航菜單1</a></li>
        <li><a href="#">導航菜單2</a></li>
        <li><a href="#">導航菜單3</a></li>
        <li><a href="#">導航菜單4</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle"data-toggle="dropdown">
                導航菜單5
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">下拉菜單1</a></li>
                <li><a href="#">下拉菜單2</a></li>
                <li><a href="#">下拉菜單3</a></li>
                <li><a href="#">下拉菜單4</a></li>
            </ul>
        </li>
        <li><a href="#">導航菜單6</a></li>
    </ul>

 

麵包屑式導航

麵包屑一般用於導航，主要的作用是告訴用戶現在所處頁面的位置，在bootstrap框架中麵包屑也是一個獨立的模塊組件。

LESS: breadcrumbs.less

SASS:_breadcrumbs.scss

<ol class="breadcrumb">
        <li><a href="#">首頁</a></li>
        <li><a href="#">我的書</a></li>
        <li class="active">圖解css</li>
    </ol>
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}

.breadcrumb> li {
display: inline-block;
}

.breadcrumb> li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}

.breadcrumb> .active {
color: #999;
}

上面使用li+li：before實現li與li之間的分隔符，這種方案在低版本ie不支持


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery.query.js 取參數的兩點問題
    最近在項目中使用jQuery.query.js這個插件進行頁面間URL傳值，遇到如下兩點問題： 1. 參數中存在空格時取到的值中空格被替換為加號:+ 2. 當參數某個key的value不存在時，獲取到的value並不是空/null 而是true。 在網上找到了個解決方案，可以參考下（是否有其他副作用 ...
  • javascript工具--控制台詳解
    一、顯示信息的命令 console.log(); //控制台輸入 網頁中不會輸出 console.info(); //一般信息 console.debug(); //除錯信息 console.warn(); //警告提示 console.error(); //錯誤提示 “console.log(); ...
  • 註冊頁面的一些記錄
    註冊頁面是大多數網站必備的頁面，所以很有必要對自己的註冊頁面做些精心的設計。下麵三張圖，第一張是註冊的展示頁面，第二張思維導圖就一個簡單的邏輯，第三張是通過firebug查看調用的JS文件。 註冊的展示頁面 簡單的邏輯 通過firebug查看調用的JS文件 一、給每個輸入框寫下說明 在用戶看到這個輸 ...
  • 數據共用和數據傳遞
    數據共用和數據傳遞是相輔相成的，我們一起來討論這個問題。首先要說的是共用和傳遞都是有作用域的。作用域就是起作用的區域，在同一個作用域數據可以共用，超過這個作用域就是跨作用域，就得用到數據傳遞了。 作用域 ui作用域每一個ui文件預設都有對應的ui.js。他們作為一個閉合的作用域。ui.js里根據ui ...
  • 第2 章 基本格式
    學習要點： 1.HTML5 文檔結構 2.文檔結構解析 3.元素標簽探討 主講教師：李炎恢 本章主要先從 HTML5 的文檔結構談起。 這些基礎元素確定了 HTML 文檔的輪廓以及瀏覽器的初始環境。幾乎所有頁面都必須首先鍵入這些元素。 一．HTML5 文檔結構 1.第一步：打開 Sublime Te ...
  • 訪問DOM節點
    我們來個例子，一個HTML里包含一段文本和一個無序的列表。 上面例子里，我們使用getElementById DOM方法來訪問p段落，在SCRIPT里添加如下代碼： 變數introParagraph現在已經引用到該DOM節點上了，我們可以對該節點做很多事情，比如查詢內容和屬性，或者其它任何操作，甚至 ...
  • DOM
    DOM對象**1.屬性** docment.title 返回當前文檔的標題docment.URL 返迴文檔完整的URLdocument.bgColor 背景色document.fgColor 前景色 **2.方法** 2.1 document.getElementById(“elementID”); ...
  • 第 1 章 HTML5 概述
    學習要點： 1.HTML5 的歷史 2.HTML5 的功能 3.HTML5 的特點 4.課程學習問題 主講教師：李炎恢 HTML5 是繼 HTML4.01 和 XHTML1.0 之後的超文本標記語言的最新版本。 它是由一群自由思想者組成的團隊設計出來，並最終實現多媒體支持、交互性、更加智能的表單，以 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類