Hướng dẫn navbar-collapse bootstrap 5 not working - navbar-sập bootstrap 5 không hoạt động

Question

Tôi đang cố gắng thu gọn thanh hải quân này nhưng nó không hoạt động. Nút không làm gì cả.

Nội dung chính Show

Làm thế nào nó hoạt động
Nội dung được hỗ trợ
Nhãn hiệu
Các hình thức
Hình ảnh và văn bản
Hành vi đáp ứng
Người chuyển đổi
Nội dung bên ngoài
Làm cách nào để làm cho bootstrap navbar sụp đổ?
Dữ liệu BS chuyển đổi là gì?
Làm cách nào để sắp xếp các vật phẩm Navbar ở bên phải trong Bootstrap 5?
Bạn sẽ sử dụng lớp Bootstrap CSS nào để đặt thanh Nav ở đầu trang?

Đây là mã của tôi:


  {{config ('app.name', 'LSAPP')}}
    
    
      
        
          Home (current)
        
        
          About
        
        
          Services
        
        
            Blog

Sao

1.7636 huy hiệu vàng19 Huy hiệu bạc36 Huy hiệu đồng6 gold badges19 silver badges36 bronze badges

Đã hỏi ngày 2 tháng 3 năm 2019 lúc 20:53Mar 2, 2019 at 20:53

Nó đang hoạt động, vui lòng kiểm tra xem bạn đã liên kết chính xác các tệp bootstrap css và js nếu bạn đang sử dụng cdn thì





//Your navbar code here

Nếu bạn không sử dụng CDN thì bạn nên thay thế SRC bằng đường dẫn tệp

Đã trả lời ngày 2 tháng 3 năm 2019 lúc 21:09Mar 2, 2019 at 21:09

FarazzzfarazzzFarazzz

Huy hiệu đồng 1451 Bạc9 Huy hiệu Đồng1 silver badge9 bronze badges

Tôi đã kiểm tra mã của bạn và hoạt động của nó. Tôi đoán bạn có lỗi javascript trước khi bootstrap.js có thể được tải.

Hoặc jQuery không được tải trước bootstrap.

Vui lòng kiểm tra bảng điều khiển trình duyệt (F12)

Đã trả lời ngày 2 tháng 3 năm 2019 lúc 21:07Mar 2, 2019 at 21:07

Hướng dẫn navbar-collapse bootstrap 5 not working - navbar-sập bootstrap 5 không hoạt động

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

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

NAVBARS yêu cầu gói


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

0 với


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

1 để thu gọn đáp ứng và các lớp bảng màu.

Navbars và nội dung của chúng là chất lỏng theo mặc định. Thay đổi container để giới hạn chiều rộng ngang của chúng theo các cách khác nhau.
Sử dụng các lớp khoảng cách và tiện ích Flex của chúng tôi để kiểm soát khoảng cách và căn chỉnh trong các NAVBARS.
NAVBARS có 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 JavaScript sụp đổ của chúng tôi.

Đảm bảo khả năng truy cập bằng cách sử dụng phần tử


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

2 hoặc, nếu sử dụng một phần tử chung hơn như


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

3, hãy thêm


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

4 vào mọi thanh hải quân để xác định rõ ràng nó là một khu vực mang tính bước ngoặt cho người dùng công nghệ hỗ trợ.

Cho biết mục hiện tại bằng cách sử dụng


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

5 cho trang hiện tại hoặc


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

6 cho mục hiện tại trong một tập hợp.

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

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


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

7 cho công ty, sản phẩm hoặc tên dự án của bạn.


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

8 cho một điều hướng đầy đủ và nhẹ (bao gồm cả hỗ trợ cho các thả xuống).


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

9 để sử dụng với plugin sụp đổ của chúng tôi và các hành vi chuyển đổi điều hướng khác.

Flex và các tiện ích khoảng cách cho bất kỳ điều khiển và hành động hình thức.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

0 để thêm các chuỗi văn bản tập trung theo chiều dọc.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

1 để nhóm và ẩn nội dung của Navbar bằng điểm dừng của cha mẹ.

Thêm một

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

2 tùy chọn để đặt nội dung Navbar được mở rộng và cuộn.

Ở đây, một ví dụ về tất cả các thành phần phụ có trong một thanh điều hướng có chủ đề ánh sáng đáp ứng tự động sụp đổ tại điểm dừng

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

4 (lớn).

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

Ví dụ này sử dụng nền (

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

5) và khoảng cách (

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

6,

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

7,

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

8,

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

9) Các lớp tiện ích.

Nhãn hiệu


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

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

Chữ

Thêm văn bản của bạn trong một phần tử với lớp


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

7.


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

Hình ảnh

Bạn có thể thay thế văn bản trong


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

7 bằng

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

3.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    a>
  div>
nav>

Hình ảnh và văn bản

Bạn cũng có thể sử dụng một số tiện ích bổ sung để thêm hình ảnh và văn bản cùng một lúc. Lưu ý việc bổ sung

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

4 và

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

5 trên

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

3.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

Nav

Các liên kết điều hướng Navbar được xây dựng trên các tùy chọn

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

7 của chúng tôi với lớp sửa đổi riêng của chúng và yêu cầu sử dụng các lớp Toggler để tạo kiểu phản hồi thích hợp. Điều hướng trong Navbars cũng sẽ phát triển để chiếm càng nhiều không gian ngang càng tốt để giữ cho nội dung của bạn được sắp xếp an toàn.Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

Thêm lớp

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

8 trên

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

9 để chỉ trang hiện tại.

Xin lưu ý rằng bạn cũng nên thêm thuộc tính

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
    div>
  div>
nav>

0 trên

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

9 hoạt động.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
    div>
  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 được phương pháp dựa trên danh sách hoàn toàn nếu bạn muốn.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea>
        <a class="nav-link" href="#">Featuresa>
        <a class="nav-link" href="#">Pricinga>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      div>
    div>
  div>
nav>

Bạn cũng có thể sử dụng các thả xuống trong thanh điều hướng của bạn. Các menu thả xuống yêu cầu một phần tử gói để định vị, vì vậy hãy chắc chắn sử dụng các phần tử riêng biệt và lồng nhau cho

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
    div>
  div>
nav>

2 và

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

9 như được hiển thị bên dưới.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>

Các hình thức

Đặt các điều khiển hình thức và các thành phần khác nhau trong một chiếc Navbar:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Searchbutton>
    form>
  div>
nav>

Các yếu tố trẻ em ngay lập tức của


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

0 Sử dụng bố cục flex và sẽ mặc định là

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
    div>
  div>
nav>

5. Sử dụng các tiện ích linh hoạt bổ sung khi cần thiết để điều chỉnh hành vi này.





//Your navbar code here

0

Các nhóm đầu vào cũng hoạt động. Nếu thanh điều hướng của bạn là toàn bộ biểu mẫu hoặc chủ yếu là một biểu mẫu, bạn có thể sử dụng phần tử

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
    div>
  div>
nav>

6 làm container và lưu một số HTML.





//Your navbar code here

1

Các nút khác nhau được hỗ trợ như một phần của các hình thức Navbar này, quá. Đâ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 dọc có thể được sử dụng để căn chỉnh các yếu tố có kích thước khác nhau.





//Your navbar code here

2

Chữ

Thêm văn bản của bạn trong một phần tử với lớp


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

7.

Hình ảnh





//Your navbar code here

3

Bạn có thể thay thế văn bản trong


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

7 bằng

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

3.





//Your navbar code here

4

Hình ảnh và văn bản

Bạn cũng có thể sử dụng một số tiện ích bổ sung để thêm hình ảnh và văn bản cùng một lúc. Lưu ý việc bổ sung

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

4 và

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

5 trên

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

3.





//Your navbar code here

5

Nav

Các liên kết điều hướng Navbar được xây dựng trên các tùy chọn

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

7 của chúng tôi với lớp sửa đổi riêng của chúng và yêu cầu sử dụng các lớp Toggler để tạo kiểu phản hồi thích hợp. Điều hướng trong Navbars cũng sẽ phát triển để chiếm càng nhiều không gian ngang càng tốt để giữ cho nội dung của bạn được sắp xếp an toàn.





//Your navbar code here

6

Thêm lớp

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

8 trên

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    a>
  div>
nav>

9 để chỉ trang hiện tại.





//Your navbar code here

7

Vị trí

Sử dụng các tiện ích vị trí của chúng tôi để đặt Navbars vào các vị trí không tĩnh. Chọn từ cố định lên trên cùng, cố định xuống phía dưới hoặc dính vào trên cùng (cuộn với trang cho đến khi nó đạt đến đỉnh, sau đó ở đó). NAVBAR đã cố định sử dụng

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea>
        <a class="nav-link" href="#">Featuresa>
        <a class="nav-link" href="#">Pricinga>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      div>
    div>
  div>
nav>

4, có nghĩa là chúng đã rút ra từ dòng chảy bình thường của DOM và có thể yêu cầu CSS tùy chỉnh (ví dụ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea>
        <a class="nav-link" href="#">Featuresa>
        <a class="nav-link" href="#">Pricinga>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      div>
    div>
  div>
nav>

5 trên

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea>
        <a class="nav-link" href="#">Featuresa>
        <a class="nav-link" href="#">Pricinga>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      div>
    div>
  div>
nav>

6) để ngăn chặn sự chồng chéo với các yếu tố khác.

Cũng lưu ý rằng

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea>
        <a class="nav-link" href="#">Featuresa>
        <a class="nav-link" href="#">Pricinga>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      div>
    div>
  div>
nav>

7 sử dụng

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea>
        <a class="nav-link" href="#">Featuresa>
        <a class="nav-link" href="#">Pricinga>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      div>
    div>
  div>
nav>

8, được hỗ trợ đầy đủ trong mọi trình duyệt.
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbara> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea> <a class="nav-link" href="#">Featuresa> <a class="nav-link" href="#">Pricinga> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda> div> div> div> nav>
7 uses
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbara> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea> <a class="nav-link" href="#">Featuresa> <a class="nav-link" href="#">Pricinga> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda> div> div> div> nav>
8, which isn’t fully supported in every browser.





//Your navbar code here

8





//Your navbar code here

9

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

0

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

1

Thêm

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea>
        <a class="nav-link" href="#">Featuresa>
        <a class="nav-link" href="#">Pricinga>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      div>
    div>
  div>
nav>

9 vào


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

8 (hoặc thành phần phụ Navbar khác) để cho phép cuộn dọc trong các nội dung có thể chuyển đổi của một chiếc Navbar bị thu gọn. Theo mặc định, việc cuộn đá vào lúc

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>

1 (hoặc 75% chiều cao chế độ xem), nhưng bạn có thể ghi đè nó với thuộc tính tùy chỉnh CSS cục bộ

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>

2 hoặc kiểu tùy chỉnh. Tại các chế độ xem lớn hơn khi thanh điều hướng được mở rộng, nội dung sẽ xuất hiện như trong một chiếc Navbar mặc định.

Xin lưu ý rằng hành vi này đi kèm với một nhược điểm tiềm năng của ____ 83 khi cài đặt

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>

4 (bắt buộc phải cuộn nội dung ở đây),

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>

5 tương đương với

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>

6, sẽ cắt một số nội dung ngang.

Ở đây, một ví dụ Navbar sử dụng

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Homea>
        <a class="nav-link" href="#">Featuresa>
        <a class="nav-link" href="#">Pricinga>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      div>
    div>
  div>
nav>

9 với

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>

8, với một số tiện ích ký quỹ bổ sung cho khoảng cách tối ưu.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

2

Hành vi đáp ứng

NAVBARS có thể sử dụng các lớp


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

9,

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Searchbutton>
    form>
  div>
nav>

0 và


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

1 để xác định khi nào nội dung của chúng sụp đổ 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 khi nào nên hiển thị hoặc ẩn các yếu tố cụ thể.

Đối với Navbars không bao giờ sụp đổ, hãy thêm lớp

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Searchbutton>
    form>
  div>
nav>

2 trên thanh Nav. Đối với Navbars luôn sụp đổ, don lồng thêm bất kỳ lớp

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Searchbutton>
    form>
  div>
nav>

2 nào.

Người chuyển đổi

Bộ chuyển đổi Navbar được liên kết trái theo mặc định, nhưng nếu họ tuân theo một yếu tố anh chị em như


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

7, họ sẽ tự động được căn chỉnh ở bên phải. Đảo ngược đánh dấu của bạn sẽ đảo ngược vị trí của bộ chuyển đổi. Dưới đây là ví dụ về các kiểu chuyển đổi khác nhau.

Không có


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

7 hiển thị ở điểm dừng nhỏ nhất:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

3

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

4

Với một người chuyển đổi ở 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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

5

Nội dung bên ngoài

Đôi khi bạn muốn sử dụng plugin sụp đổ để kích hoạt phần tử container cho nội dung có cấu trúc nằm ngoài


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
  div>
nav>


<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h2">Navbarspan>
  div>
nav>

0. Bởi vì plugin của chúng tôi hoạt động trên khớp

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Searchbutton>
    form>
  div>
nav>

7 và

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Searchbutton>
    form>
  div>
nav>

8, điều đó dễ dàng thực hiện!

Nội dung sụp đổ

Có thể chuyển đổi thông qua thương hiệu Navbar.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

6

Khi bạn làm điều này, chúng tôi khuyên bạn nên bao gồm JavaScript bổ sung để di chuyển lập trình lấy nét sang container khi nó được mở. Mặt khác, người dùng bàn phím và người dùng của các công nghệ hỗ trợ có thể sẽ gặp khó khăn trong việc tìm nội dung mới được tiết lộ - đặc biệt nếu bộ chứa được mở xuất hiện trước khi Toggler trong cấu trúc tài liệu. Chúng tôi cũng khuyên bạn nên đảm bảo rằng Toggler có thuộc tính

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Searchbutton>
    form>
  div>
nav>

9, trỏ đến

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Searchbutton>
    form>
  div>
nav>

7 của container nội dung. Về lý thuyết, điều này cho phép người dùng công nghệ hỗ trợ nhảy trực tiếp từ Toggler sang container mà nó điều khiển, nhưng hỗ trợ cho điều này hiện khá chắp vá.

Sass

Biến

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

7

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

8

Vòng

Các lớp mở rộng/sụp đổ của Navbar phản hồi (ví dụ:





//Your navbar code here

01) được kết hợp với bản đồ





//Your navbar code here

02 và được tạo thông qua một vòng lặp trong





//Your navbar code here

03.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

9

Để tạo thanh điều hướng có thể thu gọn, hãy sử dụng nút có lớp = "navbar-toggler", data-toggle = "squalse" và data-Target = "#thetarget". Sau đó, bọc nội dung Navbar (liên kết, v.v.) bên trong một phần tử div với class = "thu gọn điều hướng kết hợp", theo sau là một ID phù hợp với mục tiêu dữ liệu của nút: "Thetarget".

Dữ liệu BS chuyển đổi là gì?

Data-Toggle là thuộc tính dữ liệu HTML-5 được xác định trong Bootstrap.Ưu điểm của việc sử dụng điều này là, bạn có thể chọn một lớp hoặc ID và kết nối phần tử với một tiện ích cụ thể.an HTML-5 data attribute defined in Bootstrap. The advantage of using this is that, you can select a class or an id and hook up the element with a particular widget.

Sử dụng lớp căn chỉnh Flex Các mục Navbar có thể được căn chỉnh bằng tiện ích Flex.Sử dụng .Justify-Content-End Class trên menu sụp đổ để biện minh cho các mục ở bên phải.Use . justify-content-end class on collapse menu to justify items to the right.

Bạn sẽ sử dụng lớp Bootstrap CSS nào để đặt thanh Nav ở đầu trang?

Trong thẻ này, chúng tôi sẽ gọi Class = xông Navbar Navbar-Default, đó là các lớp sẵn có của bootstrap cung cấp không gian trên cùng của trang web của bạn cho phần điều hướng của bạn và phần mặc định là cho chế độ xem mặc định của thanh đó mà thanh đócó màu trắng.=”navbar navbar-default” which are the inbuilt classes of the bootstrap that give the top space of your web page to your navigation part and the default part is for the default view of that bar which is white in color.

programming bootstrap

Hướng dẫn navbar-collapse bootstrap 5 not working - navbar-sập bootstrap 5 không hoạt động

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

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

Nhãn hiệu

Chữ

Hình ảnh

Hình ảnh và văn bản

Nav

Các hình thức

Chữ

Hình ảnh và văn bản

Nav

Vị trí

Hành vi đáp ứng

Người chuyển đổi

Nội dung bên ngoài

Nội dung sụp đổ

Sass

Biến

Vòng

Làm cách nào để làm cho bootstrap navbar sụp đổ?

Dữ liệu BS chuyển đổi là gì?

Làm cách nào để sắp xếp các vật phẩm Navbar ở bên phải trong Bootstrap 5?

Bạn sẽ sử dụng lớp Bootstrap CSS nào để đặt thanh Nav ở đầu trang?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội