Bootstrap 4 Navbar/Dropdown Cheatsheet

Navbar導行列

分結構和樣式

  • 結構
    • nav.navbar
    • nav.navbar-expand-xl
    • ul.navbar-nav
    • li.nav-item
    • a.nav-link
  • 樣式
    • nav.navbar-dark
    • nav.navbar-light
    • nav.bg-dark
    • nav.bg-light
  • 位置
    • nav.fixed-top
    • nav.fixed-bottom
    • nav.sticky-top
  • 顯示/隱藏
    • button.navbar-toggler
      • data-toggle = “collapse”
      • data-target = “#target_name”
    • span.navbar-toggler-icon
    • div.collapse
    • div.navbar-collapse
    • id = “target_name”
  • 下拉選單
    • li.dropdown
    • a.dropdown-toggle
      • data-toggle = ‘dropdown’
      • id = ‘#target_name’
    • div.dropdown-menu
    • div.dropdown-divider
      • aria-labelledby = target_name
    • a.dropdown-item

踩坑

  • 如果沒有加上下拉選單的aria-labelledby的屬性，會出現只能展開無法收合的問題
  • caret已經不支持了，改用dropdown-toggle的class