Navigation trong bootstrap 4

• 08-07-2020 15:30:04
• by: baobinhnet

Xin chào các bạn, vậy là chúng ta lại tiếp tục đến với bài học mới trong Series Bootstrap 4.  Phần chúng ta chuẩn bị học là Navigation tương đối quan trọng trong việc xây dựng một website bằng bootstrap.  Bây giờ chúng ta hãy bắt đầu tìm hiểu nhé.

Navigation cơ bản trong Bootstrap 4

Ở phần này, mình sẽ hướng dẫn các bạn các khai báo navbar cơ bản mà Bootstrap 4 hỗ trợ sẵn, đó là tạo ra 1 thanh Menu ngang có hỗ trợ Reponsive trên các thiết bị.

Đầu tiên, tạo thanh Menu ngang, các bạn cần khai báo cho thẻ <nav> class .navbar, reponsive sử dụng class .navbar-expand-xl|lg|md|sm cho thẻ <nav> tùy thiết bị hiển thị, bên trong các thẻ con <ul>, <li> hay <a> cũng sẽ có các class con hỗ trợ, các class con hỗ trợ Navigation như sau:

• navbar-nav: định dạng trang trí cho phần menu ul
• .nav-item: định dạng cho thẻ li
• .nav-link: định dạng cho thẻ a
• .navbar-toggle: định dạng hiệu ứng menu đổ xuống

Ok, giờ chúng ta sẽ đến với thực hành cho dễ hiểu:

Sau đây là phần code thực hành:


 

Menu dọc với Navigation trong Bootstrap 4

Tương tự như phần trên, nhưng nếu làm Menu dọc thì các bạn nhớ bỏ class .navbar-expand-xl|lg|md|sm đi là sẽ thu được Menu dọc nhé!

Ví dụ như sau:

Căn vị trí cho Navbar trong Bootstrap 4

Bình thường, các Navbar sẽ hiển thị mặc định bên trái, để Navbar hiển thị ở giữa màn hình, các bạn sử dụng thêm class .justify-content-center cho thẻ <nav>, như sau:

 

Màu sắc Navbar

Trong Bootstrap quy định rất nhiều kiểu màu sắc cho các thành phần, Navbar cũng vậy, các class các bạn có thể sử dụng để có các màu sắc cho Navbar như sau (sử dụng cho thẻ nav):

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light

Lưu ý: Để có Navbar với chữ trắng cho các links các bạn sử dụng thêm class .navbar-dark, ngược lại sử dụng class .navbar-light cho chữ đen.

Ví dụ:

Ví dụ trên, có thể thêm class .active cho thẻ <a> để hiển thị link hiện tại, hoặc nếu muốn vô hiệu hóa link nào thì sử dụng class .disabled cho link đó.

Thêm Brand/Logo cho Navbar trong Bootstrap 4

Class .navbar-brand giúp các bạn có thể thêm các logo hay tên menu, … cho trang đó, sử dụng trong thẻ <a> nhé.

Ví dụ:

 

Xây dựng Menu Reponsive với Navigation trong Bootstrap 4

Bình thường, trên các màn hình nhỏ như máy tính bảng, điện thoại di động, các bạn sẽ muốn ẩn các link Menu điều hướng danh mục và thay thế chúng bằng 1 nút để khi kích vào mới hiển thị danh mục lên. Thì để tạo được Menu dạng đó, Bootstrap 4 hỗ trợ cho nút button các thuộc tính như sau:

• class=”navbar-toggler”
• data-toggle=”collapse”
• data-target=”#thetarget“

Còn ở trong khối div Menu thì sử dụng class="collapse navbar-collapse".

Lưu ý: khối div Menu có id chính là #thetarget trong data-target.

Ví dụ như sau:

 

Kết luận

Như vậy, các bạn đã được học về Navigation hay Navbar trong Bootstrap 4. Với kiến thức của bài này, các bạn có thể sử dụng để làm rất nhiều vấn đề khác nhau như header menu, mobile menu, logo brand, footer link,... Hi vọng các bạn nắm được toàn bộ bài giảng và áp dụng được vào các dự án thực tế. Hẹn gặp lại các bạn ở những bài học sau.

 

---

• Posted by baobinhnet
• 2020-07-08 15:30:04