Thanh điều hướng Bootstrap bị thu gọn theo mặc định
Tiêu đề điều hướng mạnh mẽ, nhạy bén, thanh điều hướng. Bao gồm hỗ trợ xây dựng thương hiệu, điều hướng, v.v. Show
Tổng quanĐây là những gì bạn cần biết trước khi bắt đầu với Navbar
Tiêu đề điều hướng đáp ứng, bao gồm hỗ trợ xây dựng thương hiệu, điều hướng, v.v. 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 ngắt lg (lớn)
Nhãn hiệuMột thành phần thương hiệu linh hoạt đơn giản. Hình ảnh được hỗ trợ nhưng có thể sẽ yêu cầu kiểu dáng tùy chỉnh để hoạt động tốt
Các hình thứcLiên kết văn bản và không điều hướngVăn bản và liên kết lỏng lẻo có thể được bao bọc __________6 để căn chỉnh chính xác theo chiều dọc
Phối màuTạ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 tạo chủ đề và tiện ích màu nền. Chọn từ 7 để sử dụng với màu nền sáng hoặc 8 cho màu nền tối. Sau đó, tùy chỉnh với prop0_______9 prop hoặc bất kỳ css tùy chỉnh nào
Hộp đựngMặc dù không bắt buộc, nhưng bạn có thể bọc Thanh điều hướng trong thành phần 0 để 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 một trang.
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 giá trị 1 đã 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
vị tríBạn có thể sử dụng các tiện ích vị trí Bootstrap để đặ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 2, 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. , padding-top trên ) để tránh trùng lặp với các phần tử khác. Cũng lưu ý rằng 3 sử dụng 4, mà Vì những nhu cầu định vị này rất phổ biến đối với Thanh điều hướng nên chúng tôi đã thêm các công cụ tiện lợi cho chúng cố định hàng đầuĐáy cố địnhđầu dínhBạn có thể sử dụng giá đỡ 5 trong mộtđể bật cuộn dọc trong nội dung có thể chuyển đổi của thanh điều hướng được thu gọn. Xem tài liệu Bootstrap để biết thêm thông tin
hành vi đáp ứngSử dụng phần chống đỡ 3 cũng như các thành phần 7 và 8 để kiểm soát thời điểm nội dung thu gọn sau một nút Đặt giá đỡ 9 để bắt đầu mở rộng Thanh điều hướng. Đặt 0 để làm cho Thanh điều hướng tự động thu gọn khi người dùng chọn một mục. Bạn cũng có thể kiểm soát tốt hành vi sụp đổ bằng cách sử dụng đạo cụ 1 và 2 0 vải bốChuyển đổi thanh điều hướng mở rộng và thu gọn của bạn thành ngăn kéo offcanvas với thành phần offcanvas. Chúng tôi mở rộng cả hai kiểu mặc định của offcanvas và sử dụng giá trị 3 để tạo thanh bên điều hướng động và linh hoạt Trong ví dụ bên dưới, để tạo một thanh điều hướng offcanvas luôn được thu gọn trên tất cả các điểm dừng, hãy đặt giá trị 3 thành 5 1 API6Sao chép mã nhập cho thành phần Thanh điều hướng TênLoạiMặc địnhMô tả Đặt một yếu tố tùy chỉnh cho thành phần này bgMột chỗ dựa tiện lợi để thêm 7 lớp tiện ích vì chúng thường được sử dụng ở đây. 8 và 9 là những lựa chọn phổ biến nhưng mọi lớp 7 đều được hỗ trợ, bao gồm bất kỳ lớp tùy chỉnh nào bạn có thể xác định Kết hợp độc đáo với giá đỡ 1crashOnSelect 5 Chuyển đổi 1 thành 5 sau sự kiện onSelect của hậu duệ của một đứa trẻhỏa hoạn. Không có gì nếu không có hoặc hậu duệ tồn tại Thay vào đó, nên kiểm soát thủ công 1 thông qua lệnh gọi lại onSelect, đối với các hoạt động phức tạp hơn cần được thực hiện sau sự kiện 6 củahậu duệmở rộng 7 Điểm dừng, bên dưới đó, Thanh điều hướng sẽ sụp đổ. Khi 7, Thanh điều hướng sẽ luôn được mở rộng bất kể kích thước màn hìnhmở rộng điều khiển bởi. 2, chỗ dựa ban đầu. 9 Kiểm soát khả năng hiển thị của nội dung thanh điều hướng đã sửaTạo một thanh điều hướng cố định dọc theo đầu hoặc cuối màn hình để cuộn theo trang. Một chỗ dựa tiện lợi cho các lớp định vị 1onSelect Một cuộc gọi lại được kích hoạt khi một hậu duệ của một đứa trẻ đã được chọn. Nên được sử dụng để thực hiện thao tác đóng phức tạp hoặc các hành động linh tinh khác mong muốn sau khi chọn một hậu duệ của. Không có gì nếu không có hoặc hậu duệ tồn tại. Cuộc gọi lại được gọi với một eventKey, là một chỗ dựa từ hậu duệ đã chọn và một sự kiện2 Rốt cuộc, đối với hành vi đóng cơ bản hậu duệ của các sự kiện onSelect trong chế độ xem trên thiết bị di động, hãy thử sử dụng crashOnSelectGhi chú. Nếu bạn đang đóng thanh điều hướng theo cách thủ công bằng cách sử dụng giá trị 2 này, hãy đảm bảo rằng bạn đang đặt 1 thành false và không chuyển đổi giữa true và falsebậtToggle Một cuộc gọi lại được kích hoạt khi phần thân 0 sụp đổ hoặc mở rộng. Được kích hoạt khi nhấp vào một 0 và được gọi với giá trị boolean 1 mớivai trò 7 Vai trò ARIA cho thanh điều hướng, sẽ mặc định là 'điều hướng' cho các Thanh điều hướng có 8 không phải là.dính Định vị thanh điều hướng ở trên cùng của chế độ xem, nhưng chỉ sau khi cuộn qua nó. Một chỗ dựa tiện lợi cho lớp định vị 9 Không được hỗ trợ trong <= IE11 và các trình duyệt cũ khác không có polyfill biến thể0Biến thể hình ảnh chung a Navbar. Sử dụng kết hợp với các tiện ích 9 prop, 2 hoặc kiểu nền của riêng bạnbsPrefix3 Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp sửa đổi. Đây là một lối thoát hiểm để làm việc với css bootstrap được tùy chỉnh nhiều Làm cách nào để cố định thanh điều hướng trong Bootstrap?Đặt cố định thanh điều hướng lên trên cùng, thêm lớp. navbar-fixed-top đến. lớp thanh điều hướng.
Thanh điều hướng thu gọn là gì?Thu gọn thanh điều hướng đề cập đến menu ở chế độ xem trên thiết bị di động có thanh điều hướng (chứa liên kết và nội dung thân thiện với chuyển đổi). Chúng nằm trong CSS bootstrap (xem tại đây). Xem phần này để biết tóm tắt đầy đủ về cách thanh điều hướng và thu gọn hoạt động cùng nhau.
Tại sao thanh điều hướng của tôi không phản hồi?Bạn đã đặt cho biểu trưng một kích thước nhất định trong Cài đặt hình ảnh . Bạn nên xóa cái này trước, chiều cao và chiều rộng. Sau đó, bên dưới Kích thước cũng xóa 70px và 100% chiều rộng. Sau đó, bạn chỉ cung cấp cho logo chiều cao 50px trong Kích thước.
Làm cách nào để cố định thanh điều hướng trong Bootstrap 5?Sử dụng. lớp dính trên cùng để làm cho thanh điều hướng cố định/ở đầu trang khi bạn cuộn qua nó. |