简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

青灯夜游
青灯夜游轉載
2021-11-23 18:48:441912瀏覽

這篇文章帶大家一起了解一下bootstrap中的導航和選項卡元件，介紹一下導航元件和選項卡元件的使用方法，希望對大家有所幫助！

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

1 導航基礎

導覽列是網站系統必須的功能，以前為了做好一個導航欄，需要花很多的功夫，現在有了Bootstrap5導航，從此做一個漂亮的導航欄，只是片刻功夫複製貼上就可以完成。 【相關推薦：《bootstrap教學》】

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <ul>
                <li>
                <a class="nav-link href="#">首页</a>
                </li>
                <li>
                <a href="#">文章</a>
                </li>
                <li>
                <a href="#">图片</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
                </li>
                </ul>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

#你也可以讓你的程式碼更簡潔

<nav class="nav">
  <a class="nav-link" href="#">首页</a>
  <a class="nav-link" href="#">文章</a>
  <a class="nav-link" href="#">图片</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>

這段程式碼顯示的與上面是一樣的，至於裡面的不可用按鈕，除非出於某種特殊目的（例如會員可用，對普通人顯示不可用），否則沒必要放在菜單處。

這兩種寫法各有優點;

  • 第一種更有條理一點，在導航中有其他修飾元素，如圖標等的時候，更加清晰，另外還可以透過寫li的樣式類別來更改連結顯示方式，甚至在有些公司，會透過程式碼量來考核員工的工作績效（聽說不少公司這樣幹）。
  • 第二種則更為簡潔，第二種能實現的，第一種都能，反之不成立，畢竟lite版都是閹割了一些功能的。
  • 後面的示範我就用第二種，所有的示範換成第一種都是完全沒問題的。

2 常用樣式

2.1 水平對齊

使用彈性盒子通用類別可以輕鬆更改導航的水平對齊方式。 預設情況下導覽會向左對齊，您可以輕鬆地將其變更為居中或向右對齊。

  • 使用.justify-content-center居中對齊：
  • 使用.justify-content-end靠右對齊：
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav justify-content-center">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav justify-content-end">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

#您可能也看出了，一個頁面中可以放置多個導覽。

2.2 垂直導覽

透過使用.flex-column通用類別變更導覽為垂直導覽。如果只希望在特定的viewports下堆疊，可使用響應式版本（例如.flex-sm-column）。 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav flex-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav flex-sm-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

ps:這個回應是當大於斷點的時候垂直，因為垂直導航一般用於二級導航或頁內導航，螢幕太小的話，垂直導航佔了閱讀空間，所以劇不用了。如果你想螢幕變小後可以隱藏水平導航的功能，下一章的導航工具條會具體介紹。

2.3 選項卡樣式

使用基本的導航，並加入.nav-tabs以產生具有分頁標籤的介面。透過後面「選項卡使用」中的分頁JavaScript插件來創造可切換的區塊。 選項卡樣式很簡單，要實現具體功能，後面會詳細介紹，後面也有詳細程式碼。

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

2.4 膠囊

膠囊使用和選項卡相同，但使用.nav-pills取代nav-tabs：

<ul class="nav nav-pills">

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

#2.5 填滿並對齊

.nav內容有兩個寬度擴充的Class，使用.nav-fill會將.nav-item內容依照比例分配空間。注意，這會佔用所有的水平空間，但並不是每個導航項目都具有相同寬度。

建立等寬元素請使用.nav-justified。所有的水平空間將被導航連接佔據，但與上面的.nav-fill不同，每個導航項目都將是相同的寬度。 

 <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

            <br><br>

            <ul class="nav nav-pills nav-justified">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

大家可以比較一下兩種對齊的差異。

3 導航元件的進一步擴展

3.1 使用彈性盒子實用類別

如果需要響應式的導航變化，請使用一系列彈性盒子通用類別。這些通用類別在斷點之間提供更多的自訂設定。在下面的範例中，我們的導覽將在最小斷點以下堆疊，並從small斷點開始採用水平排版以填滿所有可用寬度。 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="nav nav-pills flex-column flex-sm-row">
                <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
                <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

不同瀏覽器寬度下的顯示。

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

3.2 使用下拉列表

加入额外的HTML和下拉菜单JavaScript插件

带下拉列表的选项卡

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <br><br><br>
            <ul class="nav nav-tabs">
                <li>
                <a class="nav-link active" aria-current="page" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                <ul>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><hr></li>
                <li><a href="#">Separated link</a></li>
                </ul>
                </li>
                <li>
                <a href="#">Link</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
                </ul>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

带下拉列表的胶囊只需要将nav-tabs换成nav-pills

<ul class="nav nav-pills">

Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

4 使用选项卡

4.1 普通选项卡

前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
                </li>
                <li role="presentation">
                <button id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">资料</button>
                </li>
                <li role="presentation">
                <button id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系方式</button>
                </li>
                </ul>

                <div id="myTabContent">

                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                </div>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

4.2 胶囊选项卡

跟前面胶囊一样，只是换一个标签这么简单。

<ul class="nav nav-pills" id="myTab" role="tablist">

1Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

4.3 垂直胶囊选项卡

这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。

需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <div class="d-flex align-items-start">
                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
                <button id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">资料</button>
                <button id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">信息</button>
                </div>

                <div id="v-pills-tabContent">

                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
               
            </div>
            </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析

4.4 淡入淡出效果

要使选项卡或菜单淡入淡出，请将.fade加到每个.tab-pane分页中。第一个分页内容还必须具有.show以使初始内容可见。事实上上面已经用了淡入淡出效果，试着去掉tab-pane中的fade，看一下效果。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上是Bootstrap中怎麼加入導覽元件和選項卡元件？用法淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript bootstrap html 堆 class JS column flex li
陳述：
本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除
上一篇：Bootstrap中怎麼使用表格？強大表格的用法淺析下一篇：Bootstrap中怎麼使用表格？強大表格的用法淺析

相關文章

看更多