Thanh điều hướng – bootstrap 4 tìm kiếm navbar

Bởi

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

Bạn đang xem : tìm kiếm trên thanh điều hướng bootstrap 4

Thanh điều hướng

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

Cách hoạt động

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

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

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

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

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

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

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 

  
 & lt; button 
 
 class = 
 
 "navbar-toggler" 
 
 type = 
 
 "button" 
 
 data-toggle = 
 
 " thu gọn "
 
 data-target = 
 
" # navbarSupportedContent "
 
 aria-control = 
 
 "navbarSupportedContent" 
 
 aria-expand = 
 
 "false" 
 
 aria-label = 
 
 "Chuyển đổi điều hướng" 
 
 & gt; 

    
 & lt; span 
 
 class = 
 
 "navbar-toggler-icon" 
 
 & gt; & lt; / span & gt; 

  
 & lt; / button & gt; 


  
 & lt; div 
 
 class = 
 
 "sập navbar-sập" 
 
 id = 
 
 "navbarSupportedContent" 
 
 & gt; 

    
 & lt; ul 
 
 class = 
 
 "navbar-nav mr-auto" 
 < p class = "nt"> & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item active" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Trang chủ 
 & lt; span 
 
 class = 
 "sr-only" 
 
 & gt; 
 (hiện tại) 
 & lt; / span & gt; & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Liên kết 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item thả xuống" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link dropdown-toggle" 
 < p class = "na"> href = 
 
 "#" 
 
 id = 
 
 "navbarDropdown" 
 
 role = 
 
 "button" 
 
 data-toggle =  
 "dropdown" 
 
 aria-haspopup = 
 
 "true" 
 
 aria-expand = 
 
 "false" 
 
 & gt; 

          Trình đơn thả xuống
        
 & lt; / a & gt; 

        
 & lt; div 
 
 class = 
 
 "menu thả xuống" 
 
 aria-labellingby = 
 
 "navbarDropdown" 
 
 & gt; 

          
 & lt; a 
 
 class = 
 
 "dropdown-item" 
 
 href = 
 
 "#" 
 
 & gt; 
 Hành động 
 & lt; / a & gt; 

          
 & lt; a 
 
 class = 
 
 "dropdown-item" 
 
 href = 
 
 "#" 
 
 & gt; 
 Một hành động khác 
 & lt ; / a & gt; 

          
 & lt; div 
 
 class = 
 
 "dropdown-divider" 
 
 & gt; & lt; / div & gt; 

          
 & lt; a 
 
 class = 
 
 "dropdown-item" 
 
 href = 
 
 "#" 
 
 & gt; 
 Nội dung khác ở đây 
 & lt; / a & gt; 

        
 & lt; / div & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link bị vô hiệu hóa" 
 
 href = 
 
 "#" 
 
 & gt; 
 Đã tắt 
 & lt ; / a & gt; 

      
 & lt; / li & gt; 

    
 & lt; / ul & gt; 

    
 & lt; form 
 
 class = 
 
 "form-inline my-2 my-lg-0" 
 
 & gt; 

      
 & lt; input 
 
 class = 
 
 "form-control mr-sm-2"  
 type = 
 
 "search" 
 
 placeholder = 
 
" Tìm kiếm "
 
 aria-label = 
 
" Tìm kiếm "
 
 & gt; 

      
 & lt; button 
 
 class = 
 
 "btn btn-outline-success my-2 my-sm -0 "
 
 type = 
 
" submit "
 
 & gt; 
 Tìm kiếm 
 & lt; / button & gt; 

    
 & lt; / form & gt; 

  
 & lt; / div & gt; 


 & lt; / nav & gt;

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

Thương hiệu

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

  
 & lt;! - Dưới dạng liên kết - & gt; 


 & lt; nav 
 
 class = 
 
 "navbar navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 


 & lt; / nav & gt; 



 & lt;! - Dưới dạng tiêu đề - & gt; 


 & lt; nav 
 
 class = 
 
 "navbar navbar-light bg-light" 
 
 & gt; 

  
 & lt; span 
 
 class = 
 
 "navbar-brand mb-0 h1" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / span & gt; 


 & lt; / nav & gt;

Thêm hình ảnh vào . navbar-brand 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ụ để minh chứng. 

  
 & lt;! - Chỉ là một hình ảnh - & gt; 


 & lt; nav 
 
 class = 
 
 "navbar navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 href = 
 
 "#" 
 
 & gt; 

    
 & lt; img 
 
 src = 
 
 "/ docs / 4.0 / asset / brand / bootstrap-solid .svg "
 
 width = 
 
" 30 "
 
 height = 
 
 "30" 
 
 alt = 
 
 "" 
 
 & gt; 

  
 & lt; / a & gt; 


 & lt; / nav & gt; 
  

  
 & lt;! - Hình ảnh và văn bản - & gt; 


 & lt; nav 
 
 class = 
 
 "navbar navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 

    
 & lt; img 
 
 src = 
 
 "/ docs / 4.0 / asset / brand / bootstrap-solid .svg "
 
 width = 
 
" 30 "
 
 height = 
 
 "30" 
 
 class = 
 
 "d-inline-block align-top"  
 alt = 
 
 "" 
 
 & gt; 

    Bootstrap
  
 & lt; / a & gt; 


 & lt; / nav & gt;

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

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 

  
 & lt; button 
 
 class = 
 
 "navbar-toggler" 
 
 type = 
 
 "button" 
 
 data-toggle = 
 
 " thu gọn "
 
 data-target = 
 
" # navbarNav "
 
 aria-control = 
 
 "navbarNav" 
 
 aria-expand = 
 
 "false" 
 
 aria-label = 
 
 "Chuyển đổi điều hướng" 
 
 & gt; 

    
 & lt; span 
 
 class = 
 
 "navbar-toggler-icon" 
 
 & gt; & lt; / span & gt; 

  
 & lt; / button & gt; 

  
 & lt; div 
 
 class = 
 
 "sập navbar-sập" 
 
 id = 
 
 "navbarNav" 
 
 & gt; 

    
 & lt; ul 
 
 class = 
 
 "navbar-nav" 
 
 & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item active" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Trang chủ 
 & lt; span 
 
 class = 
 
 "sr-only" 
 
 & gt; 
 (hiện tại) 
 & lt; / span & gt; & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Tính năng 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Định giá 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link bị vô hiệu hóa" 
 
 href = 
 
 "#" 
 
 & gt; 
 Đã tắt 
 & lt ; / a & gt; 

      
 & lt; / li & gt; 

    
 & lt; / ul & gt; 

  
 & lt; / div & gt; 


 & lt; / nav & gt;

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light" 
 
 & gt; 
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 

  
 & lt; button 
 
 class = 
 
 "navbar-toggler" 
 
 type = 
 
 "button" 
 
 data-toggle = 
 
 " thu gọn "
 
 data-target = 
 
" # navbarNavAltMarkup "
 
 aria-control = 
 
 "navbarNavAltMarkup" 
 
 aria-expand = 
 
 "false" 
 
 aria-label = 
 
 "Chuyển đổi điều hướng" 
 
 & gt; 

    
 & lt; span 
 
 class = 
 
 "navbar-toggler-icon" 
 
 & gt; & lt; / span & gt; 

  
 & lt; / button & gt; 

  
 & lt; div 
 
 class = 
 
 "sập navbar-sập" 
 
 id = 
 
 "navbarNavAltMarkup" 
 
 & gt; 

    
 & lt; div 
 
 class = 
 
 "navbar-nav" 
 
 & gt; 

      
 & lt; a 
 
 class = 
 
 "nav-item nav-link active" 
 
 href = 
 
 "#" 
 
 & gt; 
 Trang chủ 
 & lt; span 
 
 class = 
 
" sr-only "
 
 & gt; 
 (hiện tại) 
 & lt; / span & gt; & lt; / a & gt; 

      
 & lt; a 
 
 class = 
 
 "nav-item nav-link" 
 < p class = "na"> href = 
 
 "#" 
 
 & gt; 
 Tính năng 
 & lt; / a & gt; 

      
 & lt; a 
 
 class = 
 
 "nav-item nav-link" 
 < p class = "na"> href = 
 
 "#" 
 
 & gt; 
 Định giá 
 & lt; / a & gt; 

      
 & lt; a 
 
 class = 
 
 "nav-item nav-link bị vô hiệu hóa" 
 
 href = 
 
 "#" 
 
 & gt; 
 Đã tắt 
 & lt; / a & gt; 

    
 & lt; / div & gt; 

  
 & lt; / div & gt; 


 & lt; / nav & gt;

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 

  
 & lt; button 
 
 class = 
 
 "navbar-toggler" 
 
 type = 
 
 "button" 
 
 data-toggle = 
 
 " thu gọn "
 
 data-target = 
 
" # navbarNavDropdown "
 
 aria-control = 
 
 "navbarNavDropdown" 
 
 aria-expand = 
 
 "false" 
 
 aria-label = 
 
 "Chuyển đổi điều hướng" 
 
 & gt; 

    
 & lt; span 
 
 class = 
 
 "navbar-toggler-icon" 
 
 & gt; & lt; / span & gt; 

  
 & lt; / button & gt; 

  
 & lt; div 
 
 class = 
 
 "sập navbar-sập" 
 
 id = 
 
 "navbarNavDropdown" 
 
 & gt; 

    
 & lt; ul 
 
 class = 
 
 "navbar-nav" 
 
 & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item active" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Trang chủ 
 & lt; span 
 
 class = 
 
 "sr-only" 
 
 & gt; 
 (hiện tại) 
 & lt; / span & gt; & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Tính năng 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Định giá 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item thả xuống" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 "nav-link dropdown-toggle" 
 
 href = 
 
 "#" 
 < p class = "na"> id = 
 
 "navbarDropdownMenuLink" 
 
 data-toggle = 
 
" dropdown "
 
 aria-haspopup = 
 
" true "
 
 aria- expand = 
 
 "false" 
 
 & gt; 

          Liên kết thả xuống
        
 & lt; / a & gt; 

        
 & lt; div 
 
 class = 
 
 "menu thả xuống" 
 
 aria-labellingby = 
 
 "navbarDropdownMenuLink" 
 
 & gt; 

          
 & lt; a 
 
 class = 
 
 "dropdown-item" 
 
 href = 
 
 "#" 
 
 & gt; 
 Hành động 
 & lt; / a & gt; 

          
 & lt; a 
 
 class = 
 
 "dropdown-item" 
 
 href = 
 
 "#" 
 
 & gt; 
 Một hành động khác 
 & lt ; / a & gt; 

          
 & lt; a 
 
 class = 
 
 "dropdown-item" 
 
 href = 
 
 "#" 
 
 & gt; 
 Nội dung khác ở đây 
 & lt; / a & gt; 

        
 & lt; / div & gt; 

      
 & lt; / li & gt; 

    
 & lt; / ul & gt; 

  
 & lt; / div & gt; 


 & lt; / nav & gt;

Biểu mẫu

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-light bg-light" 
 
 & gt; 

  
 & lt; form 
 
 class = 
 
 "form-inline" 
 
 & gt; 

    
 & lt; input 
 
 class = 
 
 "form-control mr-sm-2"  
 type = 
 
 "search" 
 
 placeholder = 
 
" Tìm kiếm "
 
 aria-label = 
 
" Tìm kiếm "
 
 & gt; 

    
 & lt; button 
 
 class = 
 
 "btn btn-outline-success my-2 my-sm -0 "
 
 type = 
 
" submit "
 
 & gt; 
 Tìm kiếm 
 & lt; / button & gt; 

  
 & lt; / form & gt; 


 & lt; / nav & gt;

Căn chỉnh nội dung của biểu mẫu nội tuyến với các tiện ích khi cần thiết. 

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-light bg-light justify-content-between" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 

  
 & lt; form 
 
 class = 
 
 "form-inline" 
 
 & gt; 

    
 & lt; input 
 
 class = 
 
 "form-control mr-sm-2"  
 type = 
 
 "search" 
 
 placeholder = 
 
" Tìm kiếm "
 
 aria-label = 
 
" Tìm kiếm "
 
 & gt; 

    
 & lt; button 
 
 class = 
 
 "btn btn-outline-success my-2 my-sm -0 "
 
 type = 
 
" submit "
 
 & gt; 
 Tìm kiếm 
 & lt; / button & gt; 

  
 & lt; / form & gt; 


 & lt; / nav & gt;

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-light bg-light" 
 
 & gt; 

  
 & lt; form 
 
 class = 
 
 "form-inline" 
 
 & gt; 

    
 & lt; div 
 
 class = 
 
 "input-group" 
 
 & gt; 

      
 & lt; div 
 
 class = 
 
 "input-group-prepend" 
 
 & gt; 

        
 & lt; span 
 
 class = 
 
 "input-group-text" 
 
 id = 
 
 "basic-addon1" 
 
 & gt; 
 @ 
 & lt; / span & gt; 

      
 & lt; / div & gt; 

      
 & lt; input 
 
 type = 
 
 "text" 
 
 class = 
 
" form-control "
 
 placeholder = 
 
" Tên người dùng " 
 
 aria-label = 
 
 "Tên người dùng" 
 
 aria-descriptionby =  
 "basic-addon1" 
 
 & gt; 

    
 & lt; / div & gt; 

  
 & lt; / form & gt; 


 & lt; / nav & gt;

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

  
 & lt; nav 
 class = 
 
 "navbar navbar-light bg-light" 
 
 & gt; 

  
 & lt; form 
 
 class = 
 
 "form-inline" 
 
 & gt; 

    
 & lt; button 
 
 class = 
 
 "btn btn-outline-success" 
 < p class = "na"> type = 
 
 "nút" 
 
 & gt; 
 Nút chính 
 & lt; / nút & gt; 

    
 & lt; button 
 
 class = 
 
 "btn btn-sm btn-outline-Secondary"  
 type = 
 
 "button" 
 
 & gt; 
 Nút nhỏ hơn 
 & lt; / nút & gt; 

  
 & lt; / form & gt; 


 & lt; / nav & gt;

Văn bản

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-light bg-light" 
 
 & gt; 

  
 & lt; span 
 
 class = 
 
 "navbar-text" 
 
 & gt; 

    Văn bản trên thanh điều hướng có phần tử nội tuyến
  
 & lt; / span & gt; 


 & lt; / nav & gt;

Kết hợp và kết hợp với các thành phần và tiện ích khác nếu cần. 

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng w / text 
 & lt; / a & gt; 

  
 & lt; button 
 
 class = 
 
 "navbar-toggler" 
 
 type = 
 
 "button" 
 
 data-toggle = 
 
 " thu gọn "
 
 data-target = 
 
" # navbarText "
 
 aria-control = 
 
 "navbarText" 
 
 aria-expand = 
 
 "false" 
 
 aria-label = 
 
 "Chuyển đổi điều hướng" 
 
 & gt; 

    
 & lt; span 
 
 class = 
 
 "navbar-toggler-icon" 
 
 & gt; & lt; / span & gt; 

  
 & lt; / button & gt; 

  
 & lt; div 
 
 class = 
 
 "sập navbar-sập" 
 
 id = 
 
 "navbarText" 
 
 & gt; 

    
 & lt; ul 
 
 class = 
 
 "navbar-nav mr-auto" 
 < p class = "nt"> & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item active" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Trang chủ 
 & lt; span 
 
 class = 
 
 "sr-only" 
 
 & gt; 
 (hiện tại) 
 & lt; / span & gt; & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Tính năng 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Định giá 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

    
 & lt; / ul & gt; 

    
 & lt; span 
 
 class = 
 
 "navbar-text" 
 
 & gt; 

      Văn bản trên thanh điều hướng có phần tử nội tuyến
    
 & lt; / span & gt; 

  
 & lt; / div & gt; 


 & lt; / nav & gt;

Phối màu

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-dark bg-dark" 
 
 & gt; 

  
 & lt;! - Nội dung trên thanh điều hướng - & gt; 


 & lt; / nav & gt; 



 & lt; nav 
 
 class = 
 
 "navbar navbar-dark bg-primary" 
 
 & gt; 
 & lt;! - Nội dung trên thanh điều hướng - & gt; 


 & lt; / nav & gt; 



 & lt; nav 
 
 class = 
 
 "navbar navbar-light" 
 
 style = 
 
 "background-color: # e3f2fd;" 
 
 & gt; 

  
 & lt;! - Nội dung trên thanh điều hướng - & gt; 


 & lt; / nav & gt;

Vùng chứa

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

  
 & lt; div 
 
 class = 
 
 "container" 
 
 & gt; 

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light "
 
 & gt; 

    
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 

  
 & lt; / nav & gt; 


 & lt; / div & gt;

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light" 
 
 & gt; 

  
 & lt; div 
 
 class = 
 
 "container" 
 
 & gt; 

    
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 

  
 & lt; / div & gt; 


 & lt; / nav & gt;

Vị trí

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

Cũng xin lưu ý rằng . stick-top sử dụng position: stick , mà không được hỗ trợ đầy đủ trong mọi trình duyệt . 

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Mặc định 
 & lt; / a & gt; 


 & lt; / nav & gt; 
  

  
 & lt; nav 
 
 class = 
 
 "navbar fixed-top navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Đã sửa lỗi 
 & lt ; / a & gt; 


 & lt; / nav & gt; 
  

  
 & lt; nav 
 
 class = 
 
 "navbar fixed-bottom navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Đã sửa lỗi 
 & lt ; / a & gt; 


 & lt; / nav & gt; 
  

  
 & lt; nav 
 
 class = 
 
 "navbar stick-top navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Hàng đầu hấp dẫn 
 & lt ; / a & gt; 


 & lt; / nav & gt;

Hành vi đáp ứng

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

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

Công tắc chuyển đổi

Các trình chuyển đổi thanh điều hướng được căn trái theo mặc định, nhưng nếu chúng đi theo một phần tử anh em như . navbar-brand , chúng sẽ tự động được căn chỉnh về phía ngoài cùng bên phải . Đảo ngược điểm đá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ó . navbar-brand được hiển thị ở điểm ngắt thấp nhất: 

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light" 
 
 & gt; 

  
 & lt; button 
 
 class = 
 
 "navbar-toggler" 
 
 type = 
 
 "button" 
 
 data-toggle = 
 
 " thu gọn "
 
 data-target = 
 
" # navbarTogglerDemo01 "
 
 aria-control = 
 
 "navbarTogglerDemo01" 
 
 aria-expand = 
 
 "false" 
 
 aria-label = 
 
 "Chuyển đổi điều hướng" 
 
 & gt; 

    
 & lt; span 
 
 class = 
 
 "navbar-toggler-icon" 
 
 & gt; & lt; / span & gt; 

  
 & lt; / button & gt; 

  
 & lt; div 
 
 class = 
 
 "sập navbar-sập" 
 
 id = 
 
 "navbarTogglerDemo01" 
 
 & gt; 

    
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thương hiệu ẩn 
 & lt ; / a & gt; 

    
 & lt; ul 
 
 class = 
 
 "navbar-nav mr-auto mt-2 mt-lg -0 "
 
 & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item active" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Trang chủ 
 & lt; span 
 
 class = 
 
 "sr-only" 
 
 & gt; 
 (hiện tại) 
 & lt; / span & gt; & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Liên kết 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link bị vô hiệu hóa" 
 
 href = 
 
 "#" 
 
 & gt; 
 Đã tắt 
 & lt ; / a & gt; 

      
 & lt; / li & gt; 

    
 & lt; / ul & gt; 

    
 & lt; form 
 
 class = 
 
 "form-inline my-2 my-lg-0" 
 
 & gt; 

      
 & lt; input 
 
 class = 
 
 "form-control mr-sm-2"  
 type = 
 
 "search" 
 
 placeholder = 
 
" Tìm kiếm "
 
 aria-label = 
 
" Tìm kiếm "
 
 & gt; 

      
 & lt; button 
 
 class = 
 
 "btn btn-outline-success my-2 my-sm -0 "
 
 type = 
 
" submit "
 
 & gt; 
 Tìm kiếm 
 & lt; / button & gt; 

    
 & lt; / form & gt; 

  
 & lt; / div & gt; 


 & lt; / nav & gt;

Với tên thương hiệu được hiển thị ở bên trái và dấu gạch ngang ở bên phải: 

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light" 
 
 & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 

  
 & lt; button 
 
 class = 
 
 "navbar-toggler" 
 
 type = 
 
 "button" 
 
 data-toggle = 
 
 " thu gọn "
 
 data-target = 
 
" # navbarTogglerDemo02 "
 
 aria-control = 
 
 "navbarTogglerDemo02" 
 
 aria-expand = 
 
 "false" 
 
 aria-label = 
 
 "Chuyển đổi điều hướng" 
 
 & gt; 

    
 & lt; span 
 
 class = 
 
 "navbar-toggler-icon" 
 
 & gt; & lt; / span & gt; 

  
 & lt; / button & gt; 


  
 & lt; div 
 
 class =
 
 "sập navbar-sập" 
 
 id = 
 
 "navbarTogglerDemo02"  
 & gt; 

    
 & lt; ul 
 
 class = 
 
 "navbar-nav mr-auto mt-2 mt-lg -0 "
 
 & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item active" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Trang chủ 
 & lt; span 
 
 class = 
 
 "sr-only" 
 
 & gt; 
 (hiện tại) 
 & lt; / span & gt; & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Liên kết 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link bị vô hiệu hóa" 
 
 href = 
 
 "#" 
 
 & gt; 
 Đã tắt 
 & lt ; / a & gt; 

      
 & lt; / li & gt; 

    
 & lt; / ul & gt; 

    
 & lt; form 
 
 class = 
 
 "form-inline my-2 my-lg-0" 
 
 & gt; 

      
 & lt; input 
 
 class = 
 
 "form-control mr-sm-2"  
 type = 
 
 "search" 
 
 placeholder = 
 
" Tìm kiếm "
 
 & gt; 

      
 & lt; button 
 
 class = 
 
 "btn btn-outline-success my-2 my-sm -0 "
 
 type = 
 
" submit "
 
 & gt; 
 Tìm kiếm 
 & lt; / button & gt; 

    
 & lt; / form & gt; 

  
 & lt; / div & gt; 


 & lt; / nav & gt;

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

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-expand-lg navbar-light bg-light" 
 
 & gt; 

  
 & lt; button 
 
 class = 
 
 "navbar-toggler" 
 
 type = 
 
 "button" 
 
 data-toggle = 
 
 " thu gọn "
 
 data-target = 
 
" # navbarTogglerDemo03 "
 
 aria-control = 
 
 "navbarTogglerDemo03" 
 
 aria-expand = 
 
 "false" 
 
 aria-label = 
 
 "Chuyển đổi điều hướng" 
 
 & gt; 

    
 & lt; span 
 
 class = 
 
 "navbar-toggler-icon" 
 
 & gt; & lt; / span & gt; 

  
 & lt; / button & gt; 

  
 & lt; a 
 
 class = 
 
 "navbar-brand" 
 
 href = 
 
 "#" 
 
 & gt; 
 Thanh điều hướng 
 & lt; / a & gt; 


  
 & lt; div 
 
 class = 
 
 "sập navbar-sập" 
 
 id = 
 
 "navbarTogglerDemo03" 
 
 & gt; 

    
 & lt; ul 
 
 class = 
 
 "navbar-nav mr-auto mt-2 mt-lg -0 "
 
 & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item active" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Trang chủ 
 & lt; span 
 
 class = 
 
 "sr-only" 
 
 & gt; 
 (hiện tại) 
 & lt; / span & gt; & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link" 
 
 href = 
 
 "#" 
 
 & gt; 
 Liên kết 
 & lt; / a & gt; 

      
 & lt; / li & gt; 

      
 & lt; li 
 
 class = 
 
 "nav-item" 
 
 & gt; 

        
 & lt; a 
 
 class = 
 
 "nav-link bị vô hiệu hóa" 
 
 href = 
 
 "#" 
 
 & gt; 
 Đã tắt 
 & lt ; / a & gt; 

      
 & lt; / li & gt; 

    
 & lt; / ul & gt; 

    
 & lt; form 
 
 class = 
 
 "form-inline my-2 my-lg-0" 
 
 & gt; 

      
 & lt; input 
 
 class = 
 
 "form-control mr-sm-2"  
 type = 
 
 "search" 
 
 placeholder = 
 
" Tìm kiếm "
 
 aria-label = 
 
" Tìm kiếm "
 
 & gt; 

      
 & lt; button 
 
 class = 
 
 "btn btn-outline-success my-2 my-sm -0 "
 
 type = 
 
" submit "
 
 & gt; 
 Tìm kiếm 
 & lt; / button & gt; 

    
 & lt; / form & gt; 

  
 & lt; / div & gt; 


 & lt; / nav & gt;

Nội dung bên ngoài

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

  
 & lt; div 
 
 class = 
 
 "pos-f-t" 
 
 & gt; 

  
 & lt; div 
 
 class = 
 
 "sập" 
 
 id = 
 
" navbarToggleExternalContent "
 
 & gt; 

    
 & lt; div 
 
 class = 
 
 "bg-dark p-4" 
 < p class = "nt"> & gt; 

      
 & lt; h4 
 
 class = 
 
 "text-white" 
 
 & gt; 
 Nội dung được thu gọn 
 & lt; / h4 & gt; 

      
 & lt; span 
 
 class = 
 
 "text-muted" 
 
 & gt; 
 Có thể chuyển đổi qua nhãn hiệu thanh điều hướng. 
 & lt; / span & gt; 

    
 & lt; / div & gt; 

  
 & lt; / div & gt; 

  
 & lt; nav 
 
 class = 
 
 "navbar navbar-dark bg-dark" 
 
 & gt; 

    
 & lt; button 
 
 class = 
 
 "navbar-toggler" 
 
 type = 
 
 "button" 
 
 data-toggle = 
 
 " thu gọn "
 
 data-target = 
 
" # navbarToggleExternalContent "
 
 aria-control = 
 
 "navbarToggleExternalContent" 
 
 aria-expand = 
 
 "false" 
 
 aria-label = 
 
 "Chuyển đổi điều hướng" 
 
 & gt; 

      
 & lt; span 
 
 class = 
 
 "navbar-toggler-icon" 
 
 & gt; & lt; / span & gt; 

    
 & lt; / button & gt; 

  
 & lt; / nav & gt; 


 & lt; / div & gt;


Xem thêm những thông tin liên quan đến chủ đề bootstrap 4 tìm kiếm navbar

Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL

  • Tác giả: Academind
  • Ngày đăng: 2018-03-05
  • Đánh giá: 4 ⭐ ( 9432 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The responsive navbar is one of the most important components Bootstrap 4 offers. Learn more about it in this Bootstrap tutorial?
    You prefer CSS? Join the full CSS course: https://acad.link/css
    Check out all our other courses: https://academind.com/learn/our-courses

    With the Bootstrap 4 navbar help, you can easily add an automatically-collapsing (configured by you though) navbar to connect the different pages of your website. Learn more about the navbar core concepts in this Bootstrap 4 tutorial.

    ----------

    Source Code for the Video: https://github.com/academind/bootstrap4-introduction/tree/03-navbar
    Watch the Series on academind.com: https://www.academind.com/learn/css/bootstrap-4-tutorial/responsive-navbar
    Official Navbar Docs: http://getbootstrap.com/docs/4.0/components/navbar/

    ----------

    • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
    • Follow @maxedapps and @academind_real on Twitter
    • Join our Facebook community on https://www.facebook.com/academindchannel/

    See you in the videos!

    ----------

    Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Bootstrap Navbar

  • Tác giả: hiepsiit.com
  • Đánh giá: 5 ⭐ ( 3952 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bootstrap 4 Navigation Bar

  • Tác giả: www.w3schools.com
  • Đánh giá: 4 ⭐ ( 3504 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bootstrap NavBar với các mục được căn trái, giữa hoặc phải

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 4595 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cập nhật 2019 Bootstrap 4 Bây giờ Bootstrap 4 đã có flexbox, việc căn chỉnh Navbar…

Component Nav và Navbar Trong Bootstrap (Phần 8)

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 1818 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component nav và navbar trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Hướng Dẫn Học Bootstrap Framework Buổi 6 – Navbar Part 1

  • Tác giả: wandor-en.gilead.org.il
  • Đánh giá: 4 ⭐ ( 8059 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bootstrap: Thanh điều hướng (Navbar)

  • Tác giả: v1study.com
  • Đánh giá: 5 ⭐ ( 3535 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thanh điều hướng (Navbar)

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tạo một ứng dụng Java Web đơn giản sử dụng Servlet, JSP và JDBC - cài tomcat cho eclipse