Menu hamburger Bootstrap không hoạt động

Chuyển đổi điều hướng thành

• <%= liên kết_đến "Trang chủ", đường dẫn danh sách %>
• <%= link_to "Đánh giá", reviews_path %>
• <%= link_to "My Personal Listings", mylistings_path %>
• Quản trị viên
  <%if user_signed_in? && current_user.admin? %>
  • <%= link_to "Trang quản trị", user_path %>
  • <%= link_to "Thêm danh sách cá nhân", new_mylisting_path %>
  <%end%>
• Tài khoản của bạn
  • <%= link_to 'Đăng nhập', _user_ session_path mới %>
  • <%= link_to 'Đăng ký', new_user_registration_path %>
  • <%= link_to('Đăng xuất', destroy_user_session_path,. phương pháp =>. xóa) %>
• Tài nguyên bổ sung
  • <%= link_to 'Zillow', "http. //www. zillow. com/",. mục tiêu => "_blank"%>
  • <%= link_to 'Người môi giới. com', "https. //www. người môi giới. com/",. mục tiêu => "_blank"%>
  • <%= link_to "Dịch vụ nhiều danh sách", "http. //www. ml. com/",. mục tiêu => "_blank"%>
  • <%= link_to 'Trulia', "https. //www. trulia. com/",. mục tiêu => "_blank"%>
  • <%= link_to 'Redfin', "https. //www. vây đỏ. com/",. mục tiêu => "_blank"%>

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

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

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

• Thanh điều hướng yêu cầu gói
  4 với
  5 cho các lớp phối màu và thu gọn đáp ứng
• Thanh điều hướng và nội dung của chúng linh hoạt theo mặc định. Sử dụng các thùng chứa tùy chọn để giới hạn chiều ngang của chúng
• Sử dụng các lớp tiện ích giãn cách và linh hoạt của chúng tôi để kiểm soát khoảng cách và căn chỉnh trong thanh điều hướng
• Thanh điều hướng phản hồi theo mặc định, nhưng bạn có thể dễ dàng sửa đổi chúng để thay đổi điều đó. Hành vi phản hồi phụ thuộc vào plugin Thu gọn JavaScript của chúng tôi
• Thanh điều hướng được ẩn theo mặc định khi in. Buộc chúng được in bằng cách thêm
  6 vào
  4. Xem lớp tiện ích hiển thị
• Đảm bảo khả năng truy cập bằng cách sử dụng một phần tử hoặc, nếu sử dụng một phần tử chung chung hơn, chẳng hạn như

  , hãy thêm một

  8 vào mọi thanh điều hướng để xác định rõ ràng đó là khu vực mang tính bước ngoặt đối với 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ợ

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 từ những điều sau đây nếu cần

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

• 
  
    
      
      Bootstrap
    
  

  0 để điều hướng có chiều cao đầy đủ và trọng lượng nhẹ (bao gồm hỗ trợ cho menu thả xuống)

• 
  
    
      
      Bootstrap
    
  

  1 để 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

• 
  
    
      
      Bootstrap
    
  

  2 cho mọi hành động và kiểm soát biểu mẫu

• 
  
    
      
      Bootstrap
    
  

  3 để thêm các chuỗi văn bản được căn giữa theo chiều dọc

• 
  
    
      
      Bootstrap
    
  

  4 để nhóm và ẩn nội dung thanh điều hướng theo điểm ngắt gốc

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

  
    
    Bootstrap
  

5 (lớn)

2

Ví dụ này sử dụng các lớp tiện ích màu (

  
    
    Bootstrap
  

6) và khoảng cách (

  
    
    Bootstrap
  

7,

  
    
    Bootstrap
  

8,

  
    
    Bootstrap
  

9,

70)

Nhãn hiệu

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

9

Việc thêm hình ảnh vào

9 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

  
    
    Bootstrap
  

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

73 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 trình chuyển đổi để có kiểu dáng đáp ứng phù hợp. Điều hướng trong thanh điều hướng cũng sẽ phát triển để chiếm càng nhiều không gian theo chiều ngang càng tốt nhằm giữ cho nội dung thanh điều hướng của bạn được căn chỉnh an toàn

Các trạng thái hoạt động—với

74—để biểu thị trang hiện tại có thể được áp dụng trực tiếp cho các

75 hoặc các

76 gốc trực tiếp của chúng

7

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

8

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

76 và

75 như hình bên dưới

1

Các hình thức

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

  
    
    Bootstrap
  

2

3

Các phần tử con ngay lập tức trong

4 sử dụng bố cục linh hoạt và sẽ mặc định là

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

6

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

7

Các nút khác nhau cũng được hỗ trợ như một phần của các biểu mẫu thanh điều hướng này. Đây cũng là một lời nhắc 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

90

Chữ

Thanh điều hướng có thể chứa các đoạn văn bản với sự trợ giúp của

  
    
    Bootstrap
  

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

91

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

92

phối màu

Tạo chủ đề cho thanh điều hướng chưa bao giờ dễ dàng hơn nhờ sự kết hợp của các lớp theo chủ đề và tiện ích

83. Chọn từ

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

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

86

93

Hộp đựng

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

87 để căn giữa nó trên một trang hoặc thêm một thanh 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

94

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 tại các điểm dừng thấp hơn lớp

5 được chỉ định của bạn. Điều này đảm bảo rằng chúng tôi không tăng gấp đôi phần đệm một cách không cần thiết trên các chế độ xem thấp hơn khi thanh điều hướng của bạn bị thu gọn

95

vị trí

Sử dụng các tiện ích vị trí 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 với trang cho đến khi lên đến trên cùng rồi giữ nguyên ở đó). Các thanh điều hướng cố định sử dụng

89, nghĩa là chúng được lấy từ quy trình bình thường của DOM và có thể yêu cầu CSS tùy chỉnh (e. g. ,

10 trên ) để tránh trùng lặp với các phần tử khác

Cũng lưu ý rằng

11 sử dụng

12, không được hỗ trợ đầy đủ trong mọi trình duyệt

96

97____198

99

hành vi đáp ứng

Thanh điều hướng có thể sử dụng các lớp

  
    
    Bootstrap
  

1,

14 và

5 để thay đổi khi nội dung của chúng 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 thành phần cụ thể

Đối với các thanh điều hướng không bao giờ thu gọn, hãy thêm lớp

16 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

16 nào

bật tắt

Bộ 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 phần tử anh chị em như

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

Không có

9 hiển thị ở điểm dừng thấp nhất

0

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

1

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

2

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 ở nơi khác trên trang. Bởi vì plugin của chúng tôi hoạt động trên kết hợp

30 và

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

Bootstrap có menu hamburger không?

CSS hamburger là gì?

Menu hamburger trong Android là gì?

Menu hamburger trong thiết kế web là gì?