Hướng dẫn bootstrap navbar show hide div - bootstrap navbar hiển thị ẩn div

Question

Tôi có một thanh điều hướng sử dụng các liên kết neo để kết nối với các div khác nhau. Tôi đã ẩn tất cả các div, nhưng tôi muốn chúng hiển thị dựa trên liên kết bạn nhấp.

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
Phối màu
Hộp đựng
Hành vi đáp ứng
Người chuyển đổi
Nội dung bên ngoài
Làm thế nào có thể hiển thị ẩn div trên nút Nhấp vào trong bootstrap?
Làm cách nào để làm cho bootstrap navbar sụp đổ?
Navbar Toggler trong bootstrap là gì?
Làm cách nào để tạo ra một chiếc Navbar trong suốt?


  
  
  
     Home
     Overview
  
  






homepage with title here 



page 1

Tôi biết bạn có thể làm điều đó bằng cách sử dụng jQuery nhưng tôi không thể làm bất cứ điều gì hoạt động. Ngay bây giờ các div được đặt để hiển thị: Không có. 'Trang chủ' sẽ xuất hiện khi bạn tải trang web.

Đã hỏi ngày 26 tháng 3 năm 2014 lúc 16:57Mar 26, 2014 at 16:57

1

Nếu bạn muốn kiểm soát nó bằng jQuery ... hãy thử nó: http://jsfiddle.net/luiggi/krgt6/

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

Đã trả lời ngày 26 tháng 3 năm 2014 lúc 17:16Mar 26, 2014 at 17:16

LuiggiluiggiLuiggi

3583 Huy hiệu bạc12 Huy hiệu đồng3 silver badges12 bronze badges

Bạn có thể sẽ cần thêm một số loại CSS vào các liên kết neo để bạn có thể tìm thấy các kích hoạt cụ thể dễ dàng hơn.

Chỉ từ bộ nhớ, mã sẽ là một cái gì đó như thế này (giả sử các neo có tên lớp "Togglediv").

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

Đã trả lời ngày 26 tháng 3 năm 2014 lúc 17:01Mar 26, 2014 at 17:01

Tài liệu và các ví dụ cho tiêu đề điều hướng mạnh mẽ, phản ứng mạnh mẽ của Bootstrap, The Navbar. Bao gồm hỗ trợ thương hiệu, điều hướng, và nhiều hơn nữa, bao gồm hỗ trợ cho plugin sụp đổ của chúng tôi.

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

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

7 với

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

8 để 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. Sử dụng các thùng chứa tùy chọn để giới hạn chiều rộng ngang của chúng.
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.

NAVBARS được ẩn theo mặc định khi in. Buộc chúng được in bằng cách thêm

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

9 vào

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

7. 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 phần tử

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

   class="collapse navbar-collapse" id="navbarSupportedContent">
     class="navbar-nav mr-auto">
       class="nav-item active">
         class="nav-link" href="#">Home  class="sr-only">(current)


 class="nav-item">
 class="nav-link" href="#">Link

 class="nav-item dropdown">
 class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown

 class="dropdown-menu" aria-labelledby="navbarDropdown">
 class="dropdown-item" href="#">Action
 class="dropdown-item" href="#">Another action
 class="dropdown-divider">


 class="dropdown-item" href="#">Something else here


 class="nav-item">
 class="nav-link disabled" href="#">Disabled


 class="form-inline my-2 my-lg-0">
 class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 class="btn btn-outline-success my-2 my-sm-0" type="submit">Search

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

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

   class="collapse navbar-collapse" id="navbarSupportedContent">
     class="navbar-nav mr-auto">
       class="nav-item active">
         class="nav-link" href="#">Home  class="sr-only">(current)
      
       class="nav-item">
         class="nav-link" href="#">Link
      
       class="nav-item dropdown">
         class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        
         class="dropdown-menu" aria-labelledby="navbarDropdown">
           class="dropdown-item" href="#">Action
           class="dropdown-item" href="#">Another action
           class="dropdown-divider">
 class="dropdown-item" href="#">Something else here


 class="nav-item">
 class="nav-link disabled" href="#">Disabled


 class="form-inline my-2 my-lg-0">
 class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 class="btn btn-outline-success my-2 my-sm-0" type="submit">Search

2, hãy thêm

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

   class="collapse navbar-collapse" id="navbarSupportedContent">
     class="navbar-nav mr-auto">
       class="nav-item active">
         class="nav-link" href="#">Home  class="sr-only">(current)
      
       class="nav-item">
         class="nav-link" href="#">Link
      
       class="nav-item dropdown">
         class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        
         class="dropdown-menu" aria-labelledby="navbarDropdown">
           class="dropdown-item" href="#">Action
           class="dropdown-item" href="#">Another action
           class="dropdown-divider">
 class="dropdown-item" href="#">Something else here


 class="nav-item">
 class="nav-link disabled" href="#">Disabled


 class="form-inline my-2 my-lg-0">
 class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 class="btn btn-outline-success my-2 my-sm-0" type="submit">Search

3 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ợ.

Đọc về mộ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ố ít các thành phần phụ. Chọn từ những điều sau khi cần thiết:

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

   class="collapse navbar-collapse" id="navbarSupportedContent">
     class="navbar-nav mr-auto">
       class="nav-item active">
         class="nav-link" href="#">Home  class="sr-only">(current)


 class="nav-item">
 class="nav-link" href="#">Link

 class="nav-item dropdown">
 class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown

 class="dropdown-menu" aria-labelledby="navbarDropdown">
 class="dropdown-item" href="#">Action
 class="dropdown-item" href="#">Another action
 class="dropdown-divider">
 class="dropdown-item" href="#">Something else here


 class="nav-item">
 class="nav-link disabled" href="#">Disabled


 class="form-inline my-2 my-lg-0">
 class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 class="btn btn-outline-success my-2 my-sm-0" type="submit">Search

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

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

   class="collapse navbar-collapse" id="navbarSupportedContent">
     class="navbar-nav mr-auto">
       class="nav-item active">
         class="nav-link" href="#">Home  class="sr-only">(current)


 class="nav-item">
 class="nav-link" href="#">Link

 class="nav-item dropdown">
 class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown

 class="dropdown-menu" aria-labelledby="navbarDropdown">
 class="dropdown-item" href="#">Action
 class="dropdown-item" href="#">Another action
 class="dropdown-divider">
 class="dropdown-item" href="#">Something else here


 class="nav-item">
 class="nav-link disabled" href="#">Disabled


 class="form-inline my-2 my-lg-0">
 class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 class="btn btn-outline-success my-2 my-sm-0" type="submit">Search

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

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

   class="collapse navbar-collapse" id="navbarSupportedContent">
     class="navbar-nav mr-auto">
       class="nav-item active">
         class="nav-link" href="#">Home  class="sr-only">(current)


 class="nav-item">
 class="nav-link" href="#">Link

 class="nav-item dropdown">
 class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown

 class="dropdown-menu" aria-labelledby="navbarDropdown">
 class="dropdown-item" href="#">Action
 class="dropdown-item" href="#">Another action
 class="dropdown-divider">
 class="dropdown-item" href="#">Something else here


 class="nav-item">
 class="nav-link disabled" href="#">Disabled


 class="form-inline my-2 my-lg-0">
 class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 class="btn btn-outline-success my-2 my-sm-0" type="submit">Search

6 để 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.

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

   class="collapse navbar-collapse" id="navbarSupportedContent">
     class="navbar-nav mr-auto">
       class="nav-item active">
         class="nav-link" href="#">Home  class="sr-only">(current)


 class="nav-item">
 class="nav-link" href="#">Link

 class="nav-item dropdown">
 class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown

 class="dropdown-menu" aria-labelledby="navbarDropdown">
 class="dropdown-item" href="#">Action
 class="dropdown-item" href="#">Another action
 class="dropdown-divider">
 class="dropdown-item" href="#">Something else here


 class="nav-item">
 class="nav-link disabled" href="#">Disabled


 class="form-inline my-2 my-lg-0">
 class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 class="btn btn-outline-success my-2 my-sm-0" type="submit">Search

7 cho bất kỳ điều khiển và hành động biểu mẫu.

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

   class="collapse navbar-collapse" id="navbarSupportedContent">
     class="navbar-nav mr-auto">
       class="nav-item active">
         class="nav-link" href="#">Home  class="sr-only">(current)


 class="nav-item">
 class="nav-link" href="#">Link

 class="nav-item dropdown">
 class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown

 class="dropdown-menu" aria-labelledby="navbarDropdown">
 class="dropdown-item" href="#">Action
 class="dropdown-item" href="#">Another action
 class="dropdown-divider">
 class="dropdown-item" href="#">Something else here


 class="nav-item">
 class="nav-link disabled" href="#">Disabled


 class="form-inline my-2 my-lg-0">
 class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 class="btn btn-outline-success my-2 my-sm-0" type="submit">Search

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

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

   class="collapse navbar-collapse" id="navbarSupportedContent">
     class="navbar-nav mr-auto">
       class="nav-item active">
         class="nav-link" href="#">Home  class="sr-only">(current)


 class="nav-item">
 class="nav-link" href="#">Link

 class="nav-item dropdown">
 class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown

 class="dropdown-menu" aria-labelledby="navbarDropdown">
 class="dropdown-item" href="#">Action
 class="dropdown-item" href="#">Another action
 class="dropdown-divider">
 class="dropdown-item" href="#">Something else here


 class="nav-item">
 class="nav-link disabled" href="#">Disabled


 class="form-inline my-2 my-lg-0">
 class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 class="btn btn-outline-success my-2 my-sm-0" type="submit">Search

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

Ở đâ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


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">Navbar



 class="navbar navbar-light bg-light">
   class="navbar-brand mb-0 h2">Navbar

0 (lớn).

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

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

Ví dụ này sử dụng màu (


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">Navbar



 class="navbar navbar-light bg-light">
   class="navbar-brand mb-0 h2">Navbar

1) và khoảng cách (


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">Navbar



 class="navbar navbar-light bg-light">
   class="navbar-brand mb-0 h2">Navbar

2,


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">Navbar



 class="navbar navbar-light bg-light">
   class="navbar-brand mb-0 h2">Navbar

3,


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">Navbar



 class="navbar navbar-light bg-light">
   class="navbar-brand mb-0 h2">Navbar

4,


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">Navbar



 class="navbar navbar-light bg-light">
   class="navbar-brand mb-0 h2">Navbar

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

Nhãn hiệu

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

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

4 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.

Thanh điều khiển NavbarNavbar


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">Navbar



 class="navbar navbar-light bg-light">
   class="navbar-brand mb-0 h2">Navbar

Thêm hình ảnh vào

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

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

4 có thể sẽ 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ụ để chứng minh.


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap

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


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">Navbar



 class="navbar navbar-light bg-light">
   class="navbar-brand mb-0 h2">Navbar

8 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.

Các trạng thái hoạt động, với ____ 49 49 để chỉ ra trang hiện tại có thể được áp dụng trực tiếp cho các ____50 hoặc cha mẹ ngay lập tức của họ.

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

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.

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

Bạn cũng có thể sử dụng các thả xuống trong Navbar Nav của bạn. Các menu thả xuống yêu cầu một yếu 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


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">

1 và


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">

0 như hình dưới đây.

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

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 với

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

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

7.

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

0

Căn chỉnh nội dung của các hình thức nội tuyến của bạn với các tiện ích khi cần thiết.

Thanh điều khiển

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

1

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

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

2

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.

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

3

Chữ

NAVBARS có thể chứa các bit văn bản với sự trợ giúp của

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

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

8. Lớp này điều chỉnh căn chỉnh dọc và khoảng cách ngang cho các chuỗi văn bản.

Văn bản Navbar có phần tử nội tuyến

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

4

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.

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

5

Phối màu

Theo chủ đề Navbar chưa bao giờ dễ dàng hơn nhờ sự kết hợp của các lớp theo chủ đề và các tiện ích


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">

6. Chọn từ


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">

7 để sử dụng với màu nền ánh sáng hoặc


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">

8 cho các màu nền tối. Sau đó, tùy chỉnh với các tiện ích


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">

9.

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

6

Hộp đựng

Mặc dù nó không bắt buộc, bạn có thể bọc một thanh điều hướng trong


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap

0 để tập trung nó trên một trang hoặc thêm một trang trong chỉ trung tâm nội dung của một chiếc Navbar hàng đầu cố định hoặc tĩnh.

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

7

Khi container nằm trong thanh điều hướng của bạn, phần đệm ngang của nó được gỡ bỏ ở các điểm dừng thấp hơn so với lớp

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

8 đượ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 khi đệm không cần thiết trên các khung nhìn thấp hơn khi thanh điều hướng của bạn bị sụp đổ.

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

8

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


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap

2, 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ụ:


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap

3 trên


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap

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

Cũng lưu ý rằng


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap

5 sử dụng


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap

6, được hỗ trợ đầy đủ trong mọi trình duyệt.
class="navbar navbar-light bg-light"> class="navbar-brand" href="#"> src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap
5 uses
class="navbar navbar-light bg-light"> class="navbar-brand" href="#"> src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap
6, which isn’t fully supported in every browser.

Mặc định

$(document).ready(function () {
    $("li.home").click(function () {
        $("#home").toggle();
        $("#page1").hide();
    });

    $("li.overview").click(function () {
        $("#page1").toggle();
        $("#home").hide();
    });
});

9

Đã sửa lỗi đầu

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

0

Đã sửa lỗi dưới cùng

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

1

Dính trên cùng

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

2

Hành vi đáp ứng

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

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

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

6,


 class="navbar navbar-light bg-light">
   class="navbar-brand" href="#">
     src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap

8 và

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

8 để thay đổi khi 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

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

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

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

0 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ư

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

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

4, 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ó

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

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

4 được hiển thị trong điểm dừng thấp nhất:

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

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:

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

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:

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

5

Nội dung bên ngoài

Đôi khi bạn muốn sử dụng plugin sụp đổ để kích hoạt nội dung ẩn ở nơi khác trên trang. Bởi vì plugin của chúng tôi hoạt động trên khớp

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

4 và

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

5, đ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.

$('.ToggleDiv').each(function(el){
     var divId = $(el).attr("href");
     $(el).click(function(){
         $(divId).Toggle();
     });
})

6

Làm thế nào có thể hiển thị ẩn div trên nút Nhấp vào trong bootstrap?

Bạn cần đảm bảo Div đích có ID. Bootstrap có một lớp "sụp đổ", điều này sẽ ẩn khối của bạn theo mặc định. Nếu bạn muốn div của bạn có thể thu gọn và được hiển thị theo mặc định, bạn cần thêm lớp "in" vào sự sụp đổ. Nếu không, hành vi chuyển đổi sẽ không hoạt động đúng.make sure the target div has an ID. Bootstrap has a class "collapse", this will hide your block by default. If you want your div to be collapsible AND be shown by default you need to add "in" class to the collapse. Otherwise the toggle behavior will not work properly.

Để 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", tiếp theo là một ID phù hợp với mục tiêu dữ liệu của nút: "Thetarget".

Navbar chuyển đổi nhãn Bootstrap Thành phần Navbar được thiết kế cho phương pháp đầu tiên trên thiết bị di động.Do đó, Navbar hiển thị khi bị sụp đổ trên các thiết bị di động.Nó có thể được bật bằng một nút hamburger.Thật không may, các biểu tượng hamburger được chứng minh là kém hiệu quả và không thể sử dụng được.Thành phần chuyển đổi Navbar mở rộng mặc định.designed for mobile first approach. Therefore, the navbar renders as collapsed on mobile devices. It can be toggled by a hamburger button. Unfortunately, hamburger icons are proved to be less efficient and not very usable. Navbar Toggle component extends the default .

Tạo một thanh điều hướng trong suốt rất dễ dàng - chỉ cần không thêm lớp màu .bg-* vào thanh điều hướng.Trong trường hợp này, thanh điều hướng sẽ lấy màu của màu nền của cha mẹ.don't add a color class . bg-* to the navbar. In this case, the Navbar will take the color of the parent's background color.

programming bootstrap Bootstrap navbar navbar-collapse Navbar Bootstrap 5 Navbar Bootstrap 4 Bootstrap navbar template navbar-expand-lg Header Bootstrap navbar-brand

Hướng dẫn bootstrap navbar show hide div - bootstrap navbar hiển thị ẩn div

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

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

Nhãn hiệu

Nav

Các hình thức

Chữ

Phối màu

Hộp đựng

Vị trí

Hành vi đáp ứng

Người chuyển đổi

Nội dung bên ngoài

Nội dung sụp đổ

Làm thế nào có thể hiển thị ẩn div trên nút Nhấp vào trong bootstrap?

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

Navbar Toggler trong bootstrap là gì?

Làm cách nào để tạo ra một chiếc Navbar trong suốt?

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