, hãy thêm một 7 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ợ 8 cho trang hiện tại hoặc 9 cho mục hiện tại trong một bộ 5. 1 không được dùng nữa và 2 đã được viết lại để ghi đè các biến CSS thay vì thêm các kiểu bổ sungNộ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
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 30 (lớn) 4Ví dụ này sử dụng các lớp tiện ích nền ( 31) và khoảng cách ( 32, 33, 34, 35)Nhãn hiệu 3 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ỉnhChữThêm văn bản của bạn trong một phần tử với lớp 3 2Hình ảnhBạn có thể thay thế văn bản trong 3 bằng một 39 5Hình ảnh và văn bảnBạn cũng có thể sử dụng một số tiện ích bổ sung để thêm hình ảnh và văn bản cùng một lúc. Lưu ý việc bổ sung 60 và 61 trên 39
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 63 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ànThêm lớp 64 trên 65 để chỉ ra trang hiện tạiXin lưu ý rằng bạn cũng nên thêm thuộc tính 66 trên 65 đang hoạt động
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 3Bạ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 68 và 65 như hình bên dưới 6Cá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 0Các phần tử con ngay lập tức của 5 sử dụng bố cục linh hoạt và sẽ mặc định là 01. 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 3Các nhóm đầu vào cũng hoạt động. Nếu thanh điều hướng của bạn là toàn bộ biểu mẫu hoặc chủ yếu là biểu mẫu, bạn có thể sử dụng phần tử làm vùng chứa và lưu một số HTML 4Cá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 20Chữ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 6. 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 21Trộn và kết hợp với các thành phần và tiện ích khác khi cần 22Phối màuMới trong v5. 2. 0. Chủ đề thanh điều hướng hiện được cung cấp bởi các biến CSS và 1 không được dùng nữa. Các biến CSS được áp dụng cho 5, mặc định là giao diện "nhẹ" và có thể được ghi đè bằng 2Các chủ đề của thanh điều hướng trở nên dễ dàng hơn bao giờ hết nhờ sự kết hợp giữa các biến Sass và CSS của Bootstrap. Mặc định là “thanh điều hướng sáng” của chúng tôi để sử dụng với màu nền sáng, nhưng bạn cũng có thể áp dụng 2 cho màu nền tối. Sau đó, tùy chỉnh với tiện ích 07 23Hộp đựngMặc dù không bắt buộc nhưng bạn có thể bọc thanh điều hướng trong một 08 để căn giữa nó trên một trang–mặc dù lưu ý rằng vẫn cần phải có một vùng chứa bên trong. Hoặc bạn có thể thêm một vùng chứa bên trong 5 để 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 24Sử dụng bất kỳ vùng chứa đáp ứng nào để thay đổi độ rộng của nội dung trong thanh điều hướng của bạn được trình bày 25vị 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 lên trên cùng, cố định xuống dưới cùng, cố định lên trên cùng (cuộn cùng với trang cho đến khi lên đến đầu trang rồi giữ nguyên ở đó) hoặc dính vào dưới cùng (cuộn cùng với trang cho đến khi chạm đến cuối trang rồi giữ nguyên Các thanh điều hướng cố định sử dụng 30, 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. , 31 trên ) để tránh trùng lặp với các phần tử khác 26 27 28 29 50Thêm 32 vào 4 (hoặc thành phần phụ khác của thanh điều hướng) để cho phép cuộn dọc trong nội dung có thể chuyển đổi của thanh điều hướng được thu gọn. Theo mặc định, cuộn bắt đầu ở tốc độ 34 (hoặc 75% chiều cao của chế độ xem), nhưng bạn có thể ghi đè điều đó bằng thuộc tính tùy chỉnh CSS cục bộ 35 hoặc kiểu tùy chỉnh. Ở các khung nhìn lớn hơn khi thanh điều hướng được mở rộng, nội dung sẽ xuất hiện như trong thanh điều hướng mặc địnhXin lưu ý rằng hành vi này đi kèm với nhược điểm tiềm ẩn của 36—khi đặt 37 (bắt buộc phải cuộn nội dung ở đây), 38 tương đương với 39, sẽ cắt một số nội dung theo chiều ngangDưới đây là ví dụ về thanh điều hướng sử dụng 32 với 41, với một số tiện ích bổ sung cho khoảng cách tối ưu 51hành vi đáp ứngThanh điều hướng có thể sử dụng các lớp 5, 43 và 6 để xác định thời điểm 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 45 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 45 nàobật tắtBộ 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ư 3, 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 nhauKhông có 3 hiển thị tại điểm ngắt nhỏ nhất 52Vớ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 53Với một công cụ chuyển đổi ở bên trái và tên thương hiệu ở bên phải 54nội dung bên ngoàiĐôi khi, bạn muốn sử dụng plugin thu gọn để kích hoạt phần tử vùng chứa cho nội dung có cấu trúc nằm bên ngoài 5. Bởi vì plugin của chúng tôi hoạt động trên kết hợp 200 và 201, điều đó dễ dàng thực hiện 55Khi bạn làm điều này, chúng tôi khuyên bạn nên bao gồm JavaScript bổ sung để di chuyển tiêu điểm theo chương trình đến vùng chứa khi nó được mở. Mặt khác, người dùng bàn phím và người dùng công nghệ hỗ trợ có thể sẽ gặp khó khăn khi tìm nội dung mới được tiết lộ - đặc biệt nếu vùng chứa được mở xuất hiện trước nút chuyển đổi trong cấu trúc của tài liệu. Chúng tôi cũng khuyên bạn nên đảm bảo rằng trình chuyển đổi có thuộc tính 202, trỏ tới 200 của vùng chứa nội dung. Về lý thuyết, điều này cho phép người dùng công nghệ hỗ trợ chuyển trực tiếp từ trình chuyển đổi sang vùng chứa mà nó kiểm soát – nhưng hỗ trợ cho điều này hiện khá chắp vá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 các lớp 204 của chúng tôi để tạo thanh bên điều hướng linh hoạt và linh hoạtTrong 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 ngắt, hãy bỏ hoàn toàn lớp 204 56Để tạo thanh điều hướng offcanvas mở rộng thành thanh điều hướng bình thường tại một điểm dừng cụ thể như 30, hãy sử dụng 207 57Khi sử dụng offcanvas trong thanh điều hướng tối, hãy lưu ý rằng bạn có thể cần phải có nền tối trên nội dung offcanvas để tránh văn bản trở nên khó đọc. Trong ví dụ dưới đây, chúng tôi thêm 2 và 209 vào 5, 211 vào 212, 213 vào 214 và 215 vào 216 để có kiểu dáng phù hợp với phông bạt tối màu 58CSSBiếnĐã thêm vào v5. 2. 0Là một phần trong cách tiếp cận các biến CSS đang phát triển của Bootstrap, các thanh điều hướng hiện sử dụng các biến CSS cục bộ trên 5 để tùy chỉnh thời gian thực nâng cao. Các giá trị cho các biến CSS được đặt thông qua Sass, do đó tùy chỉnh Sass cũng vẫn được hỗ trợ 59Một số biến CSS bổ sung cũng có trên 4 0Tùy chỉnh thông qua các biến CSS có thể được nhìn thấy trên lớp 2 nơi chúng tôi ghi đè các giá trị cụ thể mà không cần thêm các bộ chọn CSS trùng lặp 1biến sassCác biến cho tất cả các thanh điều hướng 2Các biến cho thanh điều hướng tối 3vòng lặp sassCác lớp mở rộng/thu gọn thanh điều hướng đáp ứng (e. g. , 207) được kết hợp với bản đồ 221 và được tạo thông qua một vòng lặp trong 222 |