Source

Thanh điều hướng

Tài liệu và ví dụ về tiêu đề điều hướng mạnh mẽ, đáp ứng của Bootstrap, thanh điều hướng. Bao gồm hỗ trợ xây dựng thương hiệu, điều hướng và hơn thế nữa, bao gồm hỗ trợ cho plugin thu gọn của chúng tôi.

Làm thế nào nó hoạt động

Đây là những điều bạn cần biết trước khi bắt đầu với thanh điều hướng:

  • Navbars yêu cầu một gói .navbarcho các lớp .navbar-expand{-sm|-md|-lg|-xl}thu gọn và phối màu đáp ứng .
  • Các thanh điều hướng và nội dung của chúng là linh hoạt theo mặc định. Sử dụng các vùng chứa tùy chọn để giới hạn chiều ngang của chúng.
  • Sử dụng các lớp tiện ích giãn cách và linh hoạt của chúng tôi để kiểm soát khoảng cách và căn chỉnh trong các thanh điều hướng.
  • Các thanh điều hướng phản hồi theo mặc định, nhưng bạn có thể dễ dàng sửa đổi chúng để thay đổi điều đó. Hành vi đáp ứng phụ thuộc vào plugin Thu gọn JavaScript của chúng tôi.
  • Các thanh điều hướng được ẩn theo mặc định khi in. Buộc chúng phải được in bằng cách thêm .d-printvào .navbar. Xem lớp tiện ích hiển thị .
  • Đảm bảo khả năng truy cập bằng cách sử dụng một <nav>phần tử hoặc nếu sử dụng một phần tử chung chung hơn chẳng hạn như a <div>, hãy thêm a role="navigation"vào mọi thanh điều hướng để xác định rõ ràng nó là một vùng mốc cho người dùng công nghệ hỗ trợ.

Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy vấn phương tiện. Xem phần chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .

Đọc tiếp để biết ví dụ và danh sách các thành phần phụ được hỗ trợ.

Nội dung được hỗ trợ

Navbars đi kèm với hỗ trợ tích hợp cho một số thành phần phụ. Chọn trong số các tùy chọn sau nếu cần:

  • .navbar-brandcho tên công ty, sản phẩm hoặc dự án của bạn.
  • .navbar-navđể có điều hướng đủ độ cao và nhẹ (bao gồm hỗ trợ trình đơn thả xuống).
  • .navbar-togglerđể sử dụng với plugin thu gọn của chúng tôi và các hành vi chuyển đổi điều hướng khác.
  • .form-inlinecho bất kỳ điều khiển và hành động biểu mẫu nào.
  • .navbar-textđể thêm các chuỗi văn bản căn giữa theo chiều dọc.
  • .collapse.navbar-collapseđể nhóm và ẩn nội dung thanh điều hướng bằng điểm ngắt chính.

Dưới đây là ví dụ về tất cả các thành phần phụ có trong thanh điều hướng theo chủ đề ánh sáng đáp ứng tự động thu gọn tại lgđiểm ngắt (lớn).

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Ví dụ này sử dụng các lớp tiện ích color ( bg-light) và spacing ( my-2,, my-lg-0) mr-sm-0.my-sm-0

Nhãn hiệu

Có .navbar-brandthể áp dụng cho hầu hết các phần tử, nhưng một anchor hoạt động tốt nhất vì một số phần tử có thể yêu cầu các lớp tiện ích hoặc kiểu tùy chỉnh.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Việc thêm hình ảnh vào .navbar-brandsẽ luôn yêu cầu các kiểu hoặc tiện ích tùy chỉnh để có kích thước phù hợp. Dưới đây là một số ví dụ để minh chứng.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Các liên kết điều hướng trên thanh điều hướng xây dựng dựa trên các .navtùy chọn của chúng tôi với lớp bổ trợ của riêng chúng và yêu cầu sử dụng các lớp chuyển đổi để tạo kiểu đáp ứng thích hợp. Điều hướng trong thanh điều hướng cũng sẽ phát triển để chiếm nhiều không gian theo chiều ngang nhất có thể để giữ cho nội dung thanh điều hướng của bạn được căn chỉnh an toàn.

Trạng thái hoạt động — với .active—để cho biết trang hiện tại có thể được áp dụng trực tiếp cho .nav-links hoặc cha mẹ trực tiếp của chúng .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Và bởi vì chúng tôi sử dụng các lớp cho nav của chúng tôi, bạn có thể tránh hoàn toàn cách tiếp cận dựa trên danh sách nếu bạn muốn.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Bạn cũng có thể sử dụng trình đơn thả xuống trong điều hướng thanh điều hướng của mình. Menu thả xuống yêu cầu một phần tử bao bọc để định vị, vì vậy hãy đảm bảo sử dụng các phần tử riêng biệt và lồng nhau cho .nav-itemvà .nav-linknhư được hiển thị bên dưới.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Các hình thức

Đặt các thành phần và điều khiển biểu mẫu khác nhau trong thanh điều hướng với .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Các phần tử con ngay lập tức .navbarđược sử dụng bố cục flex và sẽ được đặt mặc định justify-content: space-between. Sử dụng các tiện ích flex bổ sung nếu cần để điều chỉnh hành vi này.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Nhóm đầu vào cũng hoạt động:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Các nút khác nhau cũng được hỗ trợ như một phần của các biểu mẫu thanh điều hướng này. Đây cũng là một lời nhắc nhở tuyệt vời rằng các tiện ích căn chỉnh theo chiều dọc có thể được sử dụng để căn chỉnh các phần tử có kích thước khác nhau.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Chữ

Navbars có thể chứa các bit văn bản với sự trợ giúp của .navbar-text. Lớp này điều chỉnh căn chỉnh theo chiều dọc và khoảng cách theo chiều ngang cho các chuỗi văn bản.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Trộn và kết hợp với các thành phần và tiện ích khác khi cần thiết.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Phối màu

Tạo điều hướng cho thanh điều hướng chưa bao giờ dễ dàng hơn thế nhờ sự kết hợp của các lớp chủ đề và background-colorcác tiện ích. Chọn .navbar-lightđể sử dụng với màu nền sáng hoặc .navbar-darkmàu nền tối. Sau đó, tùy chỉnh bằng .bg-*các tiện ích.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Hộp đựng

Mặc dù không bắt buộc, bạn có thể quấn thanh điều hướng vào .containergiữa để căn giữa trang hoặc thêm một thanh điều hướng vào bên trong để chỉ căn giữa nội dung của thanh điều hướng trên cùng cố định hoặc tĩnh .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Khi vùng chứa nằm trong thanh điều hướng của bạn, phần đệm ngang của nó sẽ bị loại bỏ tại các điểm ngắt thấp hơn .navbar-expand{-sm|-md|-lg|-xl}lớp được chỉ định của bạn. Điều này đảm bảo chúng tôi không tăng gấp đôi phần đệm một cách không cần thiết trên các cửa sổ xem thấp hơn khi thanh điều hướng của bạn bị thu gọn.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Vị trí

Sử dụng các tiện ích định vị của chúng tôi để đặt các thanh điều hướng ở các vị trí không tĩnh. Chọn từ cố định ở trên cùng, cố định ở dưới cùng hoặc cố định ở trên cùng (cuộn trang cho đến khi trang lên đến đầu, sau đó giữ nguyên ở đó). Đã sửa lỗi sử dụng thanh điều hướng position: fixed, nghĩa là chúng được kéo từ luồng thông thường của DOM và có thể yêu cầu CSS tùy chỉnh (ví dụ: padding-toptrên <body>) để ngăn chồng chéo với các phần tử khác.

Cũng lưu ý rằng các cách .sticky-topsử dụng position: stickykhông được hỗ trợ đầy đủ trong mọi trình duyệt .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Hành vi đáp ứng

Các thanh điều hướng có thể sử dụng .navbar-togglervà .navbar-collapsecác .navbar-expand{-sm|-md|-lg|-xl}lớp để thay đổi khi nội dung của chúng bị thu gọn sau một nút. Kết hợp với các tiện ích khác, bạn có thể dễ dàng chọn thời điểm hiển thị hoặc ẩn các phần tử cụ thể.

Đối với các thanh điều hướng không bao giờ thu gọn, hãy thêm .navbar-expandlớp trên thanh điều hướng. Đối với các thanh điều hướng luôn thu gọn, không thêm bất kỳ .navbar-expandlớp nào.

Người chuyển đổi

Các trình chuyển đổi của thanh điều hướng được căn trái theo mặc định, nhưng nếu chúng đi theo một phần tử anh em như a .navbar-brand, chúng sẽ tự động được căn chỉnh về phía ngoài cùng bên phải. Đảo ngược đánh dấu của bạn sẽ đảo ngược vị trí của trình chuyển đổi. Dưới đây là các ví dụ về các kiểu chuyển đổi khác nhau.

Không .navbar-brandhiển thị ở điểm ngắt thấp nhất:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Với tên thương hiệu được hiển thị ở bên trái và nút chuyển đổi ở bên phải:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Với một nút xoay ở bên trái và tên thương hiệu ở bên phải:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Nội dung bên ngoài

Đôi khi bạn muốn sử dụng plugin thu gọn để kích hoạt nội dung ẩn ở những nơi khác trên trang. Bởi vì plugin của chúng tôi hoạt động dựa trên idvà data-targetđối sánh, điều đó dễ dàng được thực hiện!

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>