Cách cố dịnh navbar bằng cách nào trong boostrap 4

Bootstrap là thứ không thể thiếu khi các bạn thiết kế website, nó hỗ trợ hầu như mọi thứ để bạn có thể xử lý nhanh chóng mà không phải tốn công ngồi code từng dòng CSS loằng ngoằng nữa. Tài liệu về cách sử dụng nó thì cũng đã có và nhiều vô kể rồi nhưng ở đây.

Những bạn khác sẽ thắc mắc tại sao trên trang tài liệu của Boostrap đã có hướng dẫn rồi mà tại sao bài viết này còn hướng dẫn lại. Đó là bởi vì hiện nay nhiều bạn vẫn chưa có thói quen đọc tài liệu và lười đọc tiếng anh, cho nên bài viết này nhằm nhắm đến những bạn còn yếu hoặc có thói quen như trên.

Nói về Navbar thì có rất nhiều dạng navbar từ đơn giản cho đến phức tạp, bài viết này sẽ không thể đề cập hết những dạng navbar đó. Nhưng bài viết này sẽ giúp các bạn xây dựng những navbar phổ biến hiện nay được nhiều website sử dụng.

Bài viết sử dụng Boostrap 4 trở lên nhé, nếu các bạn sử dụng Boostrap 3 có thể một số code sẽ không hoạt động như ý muốn đó nha.

Cài đặt

Mục này dành cho những bạn chưa biết 😀 . Để có thể sử dụng bootstrap các bạn cần phải nhúng source vào web của mình đã nhé.

Ở đây mình sử dụng CDN cho nhanh. Chỉ cần nhúng những đoạn link bên dưới đây vào phần là được.

//Có đoạn meta này thì Responsive mới chạy được

P/s: Khuyến khích các bạn nên download source về rồi dẫn link trong source của mình nhé.

Hướng dẫn

Menu ngang kiểu 1

Menu này khá đơn giản chỉ bao gôm phần LOGO + MENU, được sử dụng trên hầu hết các website hiện nay.

Demo:

Navbar ngang kiểu 1

Code mẫu:

Menu ngang kiểu 2

Menu này được áp dụng cho các website mua sắm, tin tức, bất động sản,…v…v… mà cần đến thanh công cụ tìm kiếm.

Demo:

Navbar ngang kiểu 2 – với thanh search

Code mẫu:

Tùy chỉnh:

1. Thay đổi màu navbar bằng cách thay navbar-dark bg-dark trong class của thẻ
2. Thay đổi vị trí menu bằng cách: thay ml-auto trong navbar-nav ml-auto của thẻ
   Trong đó: ml-auto: Menu nằm bên phải mr-auto: Menu nằm bên trái

Kết luận

Tạo nav menu bằng Bootstrap giúp tiết kiệm thời gian và công code rất nhiều. Cho nên, khuyến khích các bạn sử dụng những thứ mà Boostrap 4 đã hỗ trợ để thiết kế web.