溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“Bootstrap中如何導(dǎo)航組件和選項(xiàng)卡組件”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
導(dǎo)航欄是網(wǎng)站系統(tǒng)必須的功能，以前為了做好一個導(dǎo)航欄，需要花很多的功夫，現(xiàn)在有了 Bootstrap5導(dǎo)航，從此做一個漂亮的導(dǎo)航欄，只是片刻功夫復(fù)制粘貼就可以完成。
<!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>導(dǎo)航演示</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>
你還可以讓你的代碼更簡潔
<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>
這段代碼顯示的與上面是一樣的，至于里面的不可用按鈕，除非出于某種特殊目的（例如會員可用，對普通人顯示不可用），否則沒必要放在菜單處。
這兩種寫法各有優(yōu)點(diǎn);
第一種更有條理一點(diǎn)，在導(dǎo)航中有其他修飾元素，如圖標(biāo)等的時候，更加清晰，另外還可以通過寫li的樣式類來更改鏈接顯示方式，甚至在有些公司，會通過代碼量來考核員工的工作績效（聽說不少公司這樣干）。
第二種則更為簡潔，第二種能實(shí)現(xiàn)的，第一種都能，反之不成立，畢竟lite版都是閹割了一些功能的。
后面的演示我就用第二種，所有的演示換成第一種都是完全沒問題的。
使用彈性盒子通用類可以輕松更改導(dǎo)航的水平對齊方式。 默認(rèn)情況下導(dǎo)航會向左對齊，您可以輕松地將其更改為居中或向右對齊。
使用.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>導(dǎo)航演示</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>
您可能還看出了，一個頁面中可以放置多個導(dǎo)航。
通過使用.flex-column通用類更改導(dǎo)航為垂直導(dǎo)航。如果只希望在特定的viewports下堆疊，可使用響應(yīng)式版本（例如.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>導(dǎo)航演示</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>
ps:這個響應(yīng)是當(dāng)大于斷點(diǎn)的時候垂直，因?yàn)榇怪睂?dǎo)航一般用于二級導(dǎo)航或者頁內(nèi)導(dǎo)航，屏幕太小的話，垂直導(dǎo)航占用了閱讀空間，所以劇不用了。如果你想屏幕變小后可以隱藏水平導(dǎo)航的功能，下一章的導(dǎo)航工具條會具體介紹。
使用基本的導(dǎo)航，并加入.nav-tabs以生成具有分頁標(biāo)簽的界面。透過后面“選項(xiàng)卡使用”中的分頁JavaScript插件來創(chuàng)造可切換的塊。 選項(xiàng)卡樣式很簡單，要想實(shí)現(xiàn)具體功能，后面會詳細(xì)介紹，后面也有詳細(xì)代碼。
膠囊使用和選項(xiàng)卡相同，但使用.nav-pills取代nav-tabs：
<ul class="nav nav-pills">
.nav內(nèi)容有兩種寬度擴(kuò)展用的Class，使用.nav-fill會將.nav-item內(nèi)容按照比例分配空間。注意，這會占用所有的水平空間，但并不是每個導(dǎo)航項(xiàng)目都具有相同寬度。
創(chuàng)建等寬元素請使用.nav-justified。所有的水平空間將被導(dǎo)航連接占據(jù)，但與上面的.nav-fill不同，每個導(dǎo)航項(xiàng)都將是相同的寬度。
<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>
大家可以對比一下兩種對齊的區(qū)別。
如果需要響應(yīng)式的導(dǎo)航變化，請使用一系列彈性盒子通用類。這些通用類在斷點(diǎn)之間提供更多的自定義設(shè)定。在下面的示例中，我們的導(dǎo)航將在最小斷點(diǎn)以下堆疊，并從small斷點(diǎn)開始采用水平排版以填滿所有可用寬度。
<!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>導(dǎo)航演示</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>
不同瀏覽器寬度下的顯示。
加入額外的HTML和下拉菜單JavaScript插件
帶下拉列表的選項(xiàng)卡
<!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>導(dǎo)航演示</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>
帶下拉列表的膠囊只需要將nav-tabs換成nav-pills
<ul class="nav nav-pills">
前面的選項(xiàng)卡只有樣式，是不起作用的。其實(shí)bootstrap已經(jīng)為我們寫好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>導(dǎo)航演示</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">聯(lián)系方式</button> </li> </ul> <div id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <h2>首頁內(nèi)容</h2> 這里可以放文字、列表等一切頁面元素 </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <h2>個人資料</h2> 這里可以放文字、列表等一切頁面元素 </div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> <h2>聯(lián)系方式</h2> 這里可以放文字、列表等一切頁面元素 </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
跟前面膠囊一樣，只是換一個標(biāo)簽這么簡單。
<ul class="nav nav-pills" id="myTab" role="tablist">
這個段代碼把普通鏈接改成了按鈕，其實(shí)也是一樣的，看著貌似很復(fù)雜，其實(shí)只需要復(fù)制進(jìn)去，修改一下你要的地方就好了。
需要注意的是，垂直標(biāo)簽的內(nèi)容顯示在右側(cè)（當(dāng)然也可以菜單在右邊，內(nèi)容在左邊），所以在布局的時候跟前面不太一樣。
<!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>導(dǎo)航演示</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"> <h2>首頁內(nèi)容</h2> 這里可以放文字、列表等一切頁面元素 </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> <h2>個人資料</h2> 這里可以放文字、列表等一切頁面元素 </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> <h2>聯(lián)系方式</h2> 這里可以放文字、列表等一切頁面元素 </div> </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
要使選項(xiàng)卡或菜單淡入淡出，請將.fade加到每個.tab-pane分頁中。第一個分頁內(nèi)容還必須具有.show以使初始內(nèi)容可見。事實(shí)上上面已經(jīng)用了淡入淡出效果，試著去掉tab-pane中的fade，看一下效果。
“Bootstrap中如何導(dǎo)航組件和選項(xiàng)卡組件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
