Bootstrap4 導(dǎo)航

如果你想創(chuàng)建一個(gè)簡單的水平導(dǎo)航欄，可以在

元素上添加 .nav類，在每個(gè)
• 選項(xiàng)上添加 .nav-item 類，在每個(gè)鏈接上添加 .nav-link 類:

  

  實(shí)例

  <
  ul
  
  class
  =
  "
  nav
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  嘗試一下 ?

  導(dǎo)航對齊方式

  .justify-content-center 類設(shè)置導(dǎo)航居中顯示， .justify-content-end 類設(shè)置導(dǎo)航右對齊。

  實(shí)例

  
  
  <
  ul
  
  class
  =
  "
  nav justify-content-center
  "
  >
  
  
  
  <
  ul
  
  class
  =
  "
  nav justify-content-end
  "
  >
  
  div
  >
  
  嘗試一下 ?

  垂直導(dǎo)航

  .flex-column 類用于創(chuàng)建垂直導(dǎo)航：

  實(shí)例

  <
  ul
  
  class
  =
  "
  nav flex-column
  "
  >
  
  嘗試一下 ?

  選項(xiàng)卡

  使用 .nav-tabs 類可以將導(dǎo)航轉(zhuǎn)化為選項(xiàng)卡。然后對于選中的選項(xiàng)使用 .active 類來標(biāo)記。

  實(shí)例

  <
  ul
  
  class
  =
  "
  nav nav-tabs
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  href
  =
  "
  #
  "
  >
  Active
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  嘗試一下 ?

  膠囊導(dǎo)航

  .nav-pills 類可以將導(dǎo)航項(xiàng)設(shè)置成膠囊形狀。

  實(shí)例

  <
  ul
  
  class
  =
  "
  nav nav-pills
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  href
  =
  "
  #
  "
  >
  Active
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  嘗試一下 ?

  導(dǎo)航等寬

  .nav-justified 類可以設(shè)置導(dǎo)航項(xiàng)齊行等寬顯示。

  實(shí)例

  <
  ul
  
  class
  =
  "
  nav nav-pills nav-justified
  "
  >
  ..
  ul
  >
  
  <
  ul
  
  class
  =
  "
  nav nav-tabs nav-justified
  "
  >
  ..
  ul
  >
  
  嘗試一下 ?

  膠囊下拉菜單

  實(shí)例

  <
  ul
  
  class
  =
  "
  nav nav-pills
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  href
  =
  "
  #
  "
  >
  Active
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item dropdown
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link dropdown-toggle
  "
  
  data-toggle
  =
  "
  dropdown
  "
  
  href
  =
  "
  #
  "
  >
  Dropdown
  a
  >
  
  <
  div
  
  class
  =
  "
  dropdown-menu
  "
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 1
  a
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 2
  a
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 3
  a
  >
  
  div
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  嘗試一下 ?

  選項(xiàng)卡下拉菜單

  實(shí)例

  <
  ul
  
  class
  =
  "
  nav nav-tabs
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  href
  =
  "
  #
  "
  >
  Active
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item dropdown
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link dropdown-toggle
  "
  
  data-toggle
  =
  "
  dropdown
  "
  
  href
  =
  "
  #
  "
  >
  Dropdown
  a
  >
  
  <
  div
  
  class
  =
  "
  dropdown-menu
  "
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 1
  a
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 2
  a
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 3
  a
  >
  
  div
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  嘗試一下 ?

  動(dòng)態(tài)選項(xiàng)卡

  如果你要設(shè)置選項(xiàng)卡是動(dòng)態(tài)可切換的，可以在每個(gè)鏈接上添加 data-toggle="tab" 屬性。 然后在每個(gè)選項(xiàng)對應(yīng)的內(nèi)容的上添加 .tab-pane 類，對應(yīng)選項(xiàng)卡內(nèi)容的

  元素使用 .tab-content 類 。。

  如果你希望有淡入效果可以在 .tab-pane 后添加 .fade類:

  實(shí)例

  
  
  <
  ul
  
  class
  =
  "
  nav nav-tabs
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  data-toggle
  =
  "
  tab
  "
  
  href
  =
  "
  #home
  "
  >
  Home
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  data-toggle
  =
  "
  tab
  "
  
  href
  =
  "
  #menu1
  "
  >
  Menu 1
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  data-toggle
  =
  "
  tab
  "
  
  href
  =
  "
  #menu2
  "
  >
  Menu 2
  a
  >
  
  li
  >
  
  ul
  >
  
  
  
  <
  div
  
  class
  =
  "
  tab-content
  "
  >
  
  <
  div
  
  class
  =
  "
  tab-pane active container
  "
  
  id
  =
  "
  home
  "
  >
  ...
  div
  >
  
  <
  div
  
  class
  =
  "
  tab-pane container
  "
  
  id
  =
  "
  menu1
  "
  >
  ...
  div
  >
  
  <
  div
  
  class
  =
  "
  tab-pane container
  "
  
  id
  =
  "
  menu2
  "
  >
  ...
  div
  >
  
  div
  >
  
  嘗試一下 ?

  膠囊狀動(dòng)態(tài)選項(xiàng)卡

  膠囊狀動(dòng)態(tài)選項(xiàng)卡只需要將以上實(shí)例的代碼中 data-toggle 屬性設(shè)置為 data-toggle="pill":

  實(shí)例

  
  
  <
  ul
  
  class
  =
  "
  nav nav-pills
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  data-toggle
  =
  "
  pill
  "
  
  href
  =
  "
  #home
  "
  >
  Home
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  data-toggle
  =
  "
  pill
  "
  
  href
  =
  "
  #menu1
  "
  >
  Menu 1
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  data-toggle
  =
  "
  pill
  "
  
  href
  =
  "
  #menu2
  "
  >
  Menu 2
  a
  >
  
  li
  >
  
  ul
  >
  
  
  
  <
  div
  
  class
  =
  "
  tab-content
  "
  >
  
  <
  div
  
  class
  =
  "
  tab-pane active container
  "
  
  id
  =
  "
  home
  "
  >
  ...
  div
  >
  
  <
  div
  
  class
  =
  "
  tab-pane container
  "
  
  id
  =
  "
  menu1
  "
  >
  ...
  div
  >
  
  <
  div
  
  class
  =
  "
  tab-pane container
  "
  
  id
  =
  "
  menu2
  "
  >
  ...
  div
  >
  
  div
  >
  
  嘗試一下 ?

  
  分享文章：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4導(dǎo)航
  鏈接URL：http://uogjgqi.cn/article/dpegode.html
  

  掃二維碼與項(xiàng)目經(jīng)理溝通

  我們在微信上24小時(shí)期待你的聲音

  解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

  其他資訊

  • .work域名備案容易嗎（work域名可以備案嗎）
  • nuc迷你主機(jī)優(yōu)缺點(diǎn)？（國外主機(jī)的缺點(diǎn)有哪些）
  • 怎么搭建局域網(wǎng)云服務(wù)器
  • 申請哪個(gè)郵箱比較好,哪個(gè)郵箱比較好用,使用的人多?
  • 主機(jī)性能測試