BootstrapBay
433
BootstrapBay
4
BootstrapBay
435
BootstrapBay
79
BootstrapBay
8
BootstrapBay
438
BootstrapBay
80
BootstrapBay
8
BootstrapBay
441
BootstrapBay
442
BootstrapBay
435
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
426
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72
BootstrapBay
428
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
426
BootstrapBay
4____8428
BootstrapBay
79
BootstrapBay
8
BootstrapBay
431____95
BootstrapBay
433
BootstrapBay
4
BootstrapBay
435
BootstrapBay
79
BootstrapBay
8
BootstrapBay
438
BootstrapBay
80
BootstrapBay
8
BootstrapBay
441
BootstrapBay
465
BootstrapBay
435
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
426
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72
BootstrapBay
428
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
426
BootstrapBay
4____8428
BootstrapBay
79
BootstrapBay
8
BootstrapBay
431____95
BootstrapBay
433
BootstrapBay
4
BootstrapBay
435
BootstrapBay
79
BootstrapBay
8
BootstrapBay
438
BootstrapBay
80
BootstrapBay
8
BootstrapBay
441
BootstrapBay
488
BootstrapBay
435
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
426
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72
BootstrapBay
428
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
426
BootstrapBay
4____8428
BootstrapBay
79
BootstrapBay
8
BootstrapBay
431____95
BootstrapBay
433
BootstrapBay
4
BootstrapBay
435
BootstrapBay
79
BootstrapBay
8
BootstrapBay
438
BootstrapBay
80
BootstrapBay
8
BootstrapBay
441
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
435
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
426
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72
BootstrapBay
428
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
400
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72
BootstrapBay
421
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72____8414
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72____878
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72
BootstrapBay
71
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72
BootstrapBay
- Home [current]
- About Us
- Blog
đầu ra.
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
4
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
8
BootstrapBay
-
Home [current]
-
About Us
-
Blog
7
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
4
BootstrapBay
7
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
4
BootstrapBay
42
BootstrapBay
43
BootstrapBay
42
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
4
BootstrapBay
48
BootstrapBay
49
BootstrapBay
8
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
4
BootstrapBay
48
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
8
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
4
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
8
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
80
BootstrapBay
8
BootstrapBay
82
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
4
BootstrapBay
86
BootstrapBay
87
BootstrapBay
8
BootstrapBay
89
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72____886
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
4
BootstrapBay
86
BootstrapBay
87
BootstrapBay
8
BootstrapBay
-
Home [current]
-
About Us
-
Blog
50
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72____886
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
4
BootstrapBay
86
BootstrapBay
87
BootstrapBay
8
BootstrapBay
41
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72____886
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
-
Home [current]
-
About Us
-
Blog
72
BootstrapBay
7
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
4
BootstrapBay
71
BootstrapBay
72
BootstrapBay
8
BootstrapBay
74
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5
BootstrapBay
40
BootstrapBay
4
BootstrapBay
78
BootstrapBay
79
BootstrapBay
8
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
72
BootstrapBay
8
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5 Xin chào và chào mừng đến với ngày thứ 10 của Bootstrap 4 💁🏻 Hôm nay chúng ta sẽ tìm hiểu về Thanh điều hướng Bootstrap 4. Đây là một phần thiết yếu của mọi trang và rất khó để tự tạo, đặc biệt là với hành vi khác dành cho thiết bị di động. Trong bài viết này, chúng ta sẽ thấy các lớp Bootstrap 4 để tạo thanh điều hướng và thêm các thành phần như thương hiệu, liên kết, văn bản, hình ảnh và biểu mẫu. Chúng tôi cũng sẽ xem xét các tùy chọn về màu sắc, vị trí và hành vi phản hồi
Bài viết sẽ được chia thành các phần sau
- Bootstrap 4 Phần tử thanh điều hướng
- Thương hiệu
- Danh sách liên kết
- Thanh điều hướng đáp ứng
- thả xuống
- Chữ
- Hình ảnh
- Các hình thức
- Định vị các mục bên trong thanh điều hướng
- Sử dụng ký quỹ tự động
- Sử dụng Tiện ích Bootstrap 4 Flex
- Thanh điều hướng Bootstrap 4 phức tạp
- Sử dụng Bootstrap 4 Container
- Đặt các Container trong Bootstrap 4 Navbars
- Tô màu Bootstrap 4 Navbar
- Lớp thanh điều hướng
- Tiện ích nền
- Lớp học tùy chỉnh
- Bootstrap 4 Vị trí thanh điều hướng
- cố định hàng đầu
- Đáy cố định
- đầu dính
- Đọc thêm
Hãy bắt đầu tìm hiểu về điều hướng trong Bootstrap 4
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Thương hiệu thanh điều hướng Bootstrap 4
Yếu tố đầu tiên thường nằm trong thanh điều hướng là thương hiệu. Để làm cho nó nổi bật so với các phần tử còn lại trong thanh điều hướng, bạn cần lớp
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
-
Home [current]
-
About Us
-
Blog
0,
BootstrapBay
-
Home [current]
-
About Us
-
Blog
1,
BootstrapBay
- Home [current]
- About Us
- Blog
tối
________số 8lưu ý bên lề. Ngoài
BootstrapBay
-
Home [current]
-
About Us
-
Blog
3, mình cũng sử dụng 2 lớp để tô màu cho thanh điều hướng, mình sẽ giải thích trong phần tiếp theo của bài viếtBạn cũng có thể đặt một logo bên trong
BootstrapBay
- Home [current]
- About Us
- Blog
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Danh sách liên kết thanh điều hướng Bootstrap 4
Điều tiếp theo thường thấy trong các thanh điều hướng sau thương hiệu là danh sách các liên kết được sắp xếp theo chiều ngang. Để sử dụng thiết kế Bootstrap 4, bạn nên thêm lớp
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5 vào danh sách phần tử
BootstrapBay
-
Home [current]
-
About Us
-
Blog
6 và lớp
BootstrapBay
-
Home [current]
-
About Us
-
Blog
7 cho mỗi phần tử. Các liên kết sẽ nhận được lớp
BootstrapBay
-
Home [current]
-
About Us
-
Blog
8. Đây là mã cho thanh điều hướng với danh sách 3 liên kết
BootstrapBay
- Home [current]
- About Us
- Blog
Thanh điều hướng kết quả sẽ trông như thế này
tối
Đây không phải là những gì chúng tôi thực sự đang cố gắng thực hiện vì chúng tôi muốn có một danh sách liên kết theo chiều ngang. Để đạt được điều đó, chúng ta cần hiểu hành vi mặc định này. Danh sách các liên kết xuất hiện theo chiều dọc vì đây là hành vi dành cho thiết bị di động [và Bootstrap 4 là thư viện ưu tiên thiết bị di động]. Vì vậy, sự xuất hiện này là do thiết kế. Tuy nhiên, ngay cả như vậy, hành vi này không hoàn toàn là những gì chúng tôi muốn cho thiết bị di động. Vì nó sẽ chiếm phần lớn không gian trên màn hình di động nên thông lệ phổ biến là có một nút chuyển đổi để thu gọn menu
Để có thể chuyển đổi danh sách các liên kết trên thiết bị di động, chúng ta cần gói nó trong một div với các lớp
BootstrapBay
-
Home [current]
-
About Us
-
Blog
9 và
BootstrapBay
- Home [current]
- About Us
- Blog
tối
BootstrapBay
-
Home [current]
-
About Us
-
Blog
Nút bật tắt cần lớp
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Ghi chú bên lề. Hãy chắc chắn rằng bạn có Popper. js được bao gồm trong tệp của bạn để tính năng thu gọn hoạt động. Bạn có thể xem lại Ngày 1. Bootstrap 4 CDN và Mẫu dành cho người mới bắt đầu để xem cách bao gồm Javascript cần thiết
Bootstrap 4 Thanh điều hướng đáp ứng
Nếu chúng ta để thanh điều hướng Bootstrap 4 như vậy, nó cũng sẽ hiển thị hành vi phản hồi. Bất kể bạn đang ở độ phân giải màn hình nào, bạn sẽ thấy một nút menu burger và khi nhấn vào đó, bạn sẽ thấy danh sách các liên kết được sắp xếp theo chiều dọc. Tuy nhiên, nếu bạn muốn hiển thị các liên kết ở định dạng ngang, bạn có thể làm điều đó bằng cách chỉ định điểm dừng nơi bạn muốn bắt đầu thấy hành vi này với lớp
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Dưới đây là một ví dụ với danh sách thanh điều hướng nằm ngang bắt đầu bằng độ phân giải của máy tính bảng
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Bootstrap 4 Thanh điều hướng thả xuống
Bạn có thể thêm danh sách thả xuống vào thanh điều hướng. Bạn sẽ cần đặt lớp
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
-
Home [current]
-
About Us
-
Blog
7. Phần tử này sẽ chứa cả trình chuyển đổi thả xuống và menu thả xuống. Trình chuyển đổi cần lớp
BootstrapBay
-
Home [current]
-
About Us
-
Blog
8 [giống như bất kỳ liên kết nào khác trong thanh điều hướng] và
BootstrapBay
- Home [current]
- About Us
- Blog
Đây là một ví dụ
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Văn bản thanh điều hướng Bootstrap 4
Nếu bạn muốn hiển thị văn bản trong thanh điều hướng, bạn có thể sử dụng lớp
BootstrapBay
- Home [current]
- About Us
- Blog
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Hình ảnh thanh điều hướng Bootstrap 4
Thông thường, tôi cần hiển thị hình ảnh trong thanh điều hướng dưới dạng hình thu nhỏ cho người dùng đã đăng nhập. Bạn có thể thực hiện việc này bằng cách sử dụng các tiện ích viền và tiện ích căn chỉnh của Bootstrap 4. Để xem chi tiết, bạn có thể vào Ngày 5. Bootstrap 4 Hình ảnh Hướng dẫn và Ví dụ
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Bạn cũng có thể sử dụng hình ảnh làm điểm neo cho danh sách thả xuống [hiển thị các trang mà người dùng có thể truy cập nếu đăng nhập]
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Bootstrap 4 Biểu mẫu thanh điều hướng
Một yếu tố khác mà bạn có thể cần trong thanh điều hướng là biểu mẫu. Vì thanh điều hướng không có nhiều không gian theo chiều dọc, nên
BootstrapBay
- Home [current]
- About Us
- Blog
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Và bạn có thể sử dụng các biến thể khác nhau cho đầu vào và nút
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Trong ví dụ này, chúng tôi đã sử dụng các nhóm đầu vào có kích thước nhỏ và các nút nhỏ. Để xem thêm các tùy chọn cho các phần tử biểu mẫu, bạn có thể quay lại hướng dẫn Bootstrap 4 nút, hướng dẫn Bootstrap 4 đầu vào và hướng dẫn biểu mẫu Bootstrap 4
Định vị các mục bên trong thanh điều hướng
Như tôi đã nói ở đầu bài viết, thanh điều hướng hoạt động giống như một thùng chứa Flex Bootstrap 4. Một trong những điều bạn cần lưu ý là hành vi phản hồi có hướng linh hoạt được đặt thành
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Trong các ví dụ tiếp theo, chúng tôi sẽ minh họa các trường hợp sử dụng cho phiên bản mở rộng [trên thiết bị di động không có nhiều tùy chọn để định vị nút chuyển đổi]
Sử dụng ký quỹ tự động
Hãy bắt đầu với việc kéo menu có liên kết sang bên phải. Chúng ta có thể làm điều này bằng cách áp dụng
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5tối
BootstrapBay
- Home [current]
- About Us
- Blog
Phần tử có thể thu gọn cũng là một thùng chứa linh hoạt phát triển thành toàn bộ không gian mà nó có thể chiếm. Để căn chỉnh các phần tử bên trong nó, bạn cũng có thể sử dụng các lớp flex. Vì vậy, chúng tôi có thể định vị
BootstrapBay
-
Home [current]
-
About Us
-
Blog
5 bên trong
BootstrapBay
-
Home [current]
-
About Us
-
Blog
9 bằng cách sử dụng lớp
BootstrapBay
- Home [current]
- About Us
- Blog
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Sử dụng Tiện ích Bootstrap 4 Flex
Hãy cũng thêm một số văn bản và định vị danh sách các liên kết và văn bản ở hai đầu đối diện. Nếu chúng ta đặt cả hai phần tử trong div
BootstrapBay
-
Home [current]
-
About Us
-
Blog
9, chúng ta có thể thêm lớp
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
-
Home [current]
-
About Us
-
Blog
9. Kết quả sẽ như thế nàytối
BootstrapBay
- Home [current]
- About Us
- Blog
Và chúng ta cũng có thể thêm các yếu tố khác, như biểu mẫu và hình ảnh. Trong ví dụ tiếp theo, chúng tôi muốn 2 phần tử được kéo sang phải. một hình thức tìm kiếm và một danh sách thả xuống với một hình ảnh. Bởi vì chúng tôi muốn nhóm chúng lại với nhau, chúng tôi sẽ đặt chúng cùng nhau trong cùng một div. Và vì chúng tôi muốn 2 phần tử này được căn chỉnh theo chiều ngang, chúng tôi cũng sẽ đặt div cha của chúng thành một hộp chứa flex
tối
BootstrapBay
- Home [current]
- About Us
- Blog
lưu ý bên lề. Chúng ta cũng có thể để cả 3 yếu tố là con trực tiếp của thanh điều hướng. danh sách liên kết, biểu mẫu tìm kiếm và hình ảnh và thêm lớp
BootstrapBay
- Home [current]
- About Us
- Blog
Có nhiều tùy chọn để trộn và kết hợp các yếu tố và vị trí của chúng. Miễn là bạn hiểu Bootstrap 4 flex hoạt động như thế nào, thì không có gì bạn không thể làm được. Nếu bạn không chắc chắn về cách đạt được điều gì đó, vui lòng chuyển sang Ngày thứ 3. Hướng dẫn và ví dụ về Bootstrap 4 Flex và cũng có thể hỏi tôi trong các nhận xét và tôi sẽ cố gắng kiểm tra nó
Thanh điều hướng Bootstrap 4 phức tạp
Ví dụ cuối cùng của chúng tôi về việc định vị các thành phần trong thanh điều hướng khó hơn một chút và tôi đã thực hiện từng bước để tạo ra nó. Đây là cách nó trông
tối
lưu ý bên lề. Để xem giao diện của thanh điều hướng trên màn hình lớn hơn, bạn có thể chọn 0. 5X trong iframe CodePen hoặc bạn có thể mở nó trong một cửa sổ riêng
BootstrapBay
- Home [current]
- About Us
- Blog
Đầu tiên, lời giải thích cho phiên bản di động. như tôi đã đề cập trước đây, thanh điều hướng hoạt động giống như một hộp chứa linh hoạt với
BootstrapBay
- Home [current]
- About Us
- Blog
Menu có thể thu gọn không xuất hiện theo mặc định, vì vậy, chúng tôi chỉ cần chỉ định thứ tự mà thương hiệu và nút chuyển đổi được hiển thị [vì vậy chúng tôi đã thêm lớp
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Thứ hai, chúng tôi xử lý giao diện của thanh điều hướng trên màn hình lớn hơn [bắt đầu với điểm ngắt
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Chúng tôi sẽ cần chỉ định thứ tự mới cho các phần tử trên các màn hình này. Vì vậy, chúng tôi cung cấp lớp
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Vì chúng tôi muốn thương hiệu được căn giữa, nên chúng tôi sẽ cần các phần tử bên trái và bên phải có cùng chiều rộng. Đó là lý do tại sao chúng tôi đã thêm lớp
BootstrapBay
- Home [current]
- About Us
- Blog
Vì
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Sử dụng Bootstrap 4 Container
Nếu bạn không muốn thanh điều hướng đi từ đầu đến cuối trên màn hình, bạn có thể đặt nó trong vùng chứa Bootstrap 4
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Bạn có thể sử dụng các tiện ích bán kính đường viền từ ngày thứ 5 để bo tròn các góc cho đẹp hơn
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Đặt các Container trong Bootstrap 4 Navbars
Bạn cũng có thể chọn đặt thanh điều hướng từ đầu đến cuối nhưng đặt nội dung bên trong vùng chứa
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Bạn cần lưu ý rằng nếu bạn sử dụng vùng chứa trong thanh điều hướng, nó sẽ chỉ hoạt động với độ phân giải bằng hoặc cao hơn điểm ngắt mà bạn đã chỉ định để mở rộng. Trên màn hình di động, nó sẽ không hiển thị nên các thành phần bên trong không có phần đệm kép
Tô màu Bootstrap 4 Navbar
Các lớp thanh điều hướng Bootstrap 4
Để tô màu cho thanh điều hướng, bạn có thể sử dụng các lớp tạo chủ đề cho thanh điều hướng và các tiện ích nền. Có 2 lớp thanh điều hướng.
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Vì vậy, khi bạn sử dụng tiện ích nền tối, bạn sẽ cần lớp
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
Bootstrap 4 Tiện ích nền
Dưới đây là các tùy chọn mà bạn có thể chọn từ việc sử dụng các tiện ích nền
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Lớp học tùy chỉnh
Nếu các tùy chọn Bootstrap 4 không phải là thứ bạn đang tìm kiếm, bạn có thể ghi đè lên một trong các lớp bằng màu bạn muốn. Hoặc bạn có thể tạo lớp riêng cho màu bạn cần
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Hoặc chúng ta có thể sử dụng một gradient
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Bootstrap 4 Vị trí thanh điều hướng
Hành vi mặc định cho thanh điều hướng khi cuộn là di chuyển theo phần còn lại của trang
cố định hàng đầu
Nếu bạn muốn thanh điều hướng luôn hiển thị, bạn có thể chọn luôn đặt nó ở trên cùng với lớp
BootstrapBay
- Home [current]
- About Us
- Blog
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Đáy cố định
Hoặc bạn luôn có thể đặt nó ở cuối trang với lớp
BootstrapBay
- Home [current]
- About Us
- Blog
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Cả hai lớp
BootstrapBay
- Home [current]
- About Us
- Blog
BootstrapBay
- Home [current]
- About Us
- Blog
đầu dính
Một cách khác để sửa thanh điều hướng ở trên cùng là thêm lớp
BootstrapBay
- Home [current]
- About Us
- Blog
tối
BootstrapBay
- Home [current]
- About Us
- Blog
Đây là Codepen cho thấy sự khác biệt giữa phần tử cố định và phần tử cố định. https. // codepen. io/nyctophiliac/pen/xpmpypMặc dù đây là một tiện ích tiện lợi nhưng nó vẫn chưa được hỗ trợ đầy đủ trong tất cả các trình duyệt, vì vậy hãy đảm bảo kiểm tra và xem thanh điều hướng của bạn có bị hỏng không. Nếu có, có lẽ tốt nhất là sử dụng một vị trí cố định
Và đây là tất cả cho ngày hôm nay. Chúng tôi đã cố gắng bao gồm tất cả các lớp mà Bootstrap 4 cung cấp cho thanh điều hướng. Như bạn có thể thấy, bên cạnh việc hiểu và sử dụng các lớp này, bạn cần có một nền tảng vững chắc về cách thức hoạt động của Bootstrap 4 flex. Hy vọng rằng giờ đây bạn đã tự tin vào kỹ năng điều hướng của mình và có thể dễ dàng tạo các thanh điều hướng bằng Bootstrap 4
Tín dụng hình ảnh cho Bettina Hoeber cho cảnh quay của cô ấy
Đọc thêm
Tất cả các ví dụ được sử dụng trong bài viết này đều có sẵn tại CodePen. Bạn có thể dễ dàng sửa đổi và tạo thanh điều hướng của riêng mình dựa trên chúng. Và nếu bạn có chút thời gian rảnh rỗi, tôi khuyên bạn nên sử dụng các tài nguyên sau