Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Component Nav và Navbar Trong Bootstrap (Phần 8)

Component Nav và Navbar Trong Bootstrap (Phần 8)


Ngày 1 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component nav và navbar trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Component Nav:

Bootstrap cung cấp component nav để sử dụng một cách nhanh chóng và dễ dàng trong việc tạo thanh điều hướng. Bạn có thể hiểu đơn giản thanh điều hướng là nơi chứa các đường dẫn liên kết đi đến các trang khác để tránh tình trạng người dùng khi muốn chuyển đến trang khác trong trang web thì phải nhập trên thanh địa chỉ của trình duyệt.

Bây giờ thì chúng ta sẽ đi vào tạo một component nav cơ bản bằng cách gọi thẻ nav với class nav và trong nó sẽ có các thẻ con a nơi chứa đường dẫn đi đến các trang khác với class nav-item nav-link. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Component Nav:

See the Pen component nav by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn để ý là đường dẫn khóa học mình sử dụng class là disabled làm cho nó như không thể sử dụng được với màu xám và mất hiệu ứng hover lên đường dẫn. Việc tiếp theo là chúng ta sẽ chỉnh vị trí cho component nav bằng cách sử dụng tiện ích flexbox. Mặc định là nó sẽ có vị trị nằm bên trái giờ mình sẽ chỉnh cho nó nắm giữa trang bằng class justify-content-center vằ nằm bên phải trang bằng class justify-content-end. Để hiểu và nắm rõ hơn bạn xem ví dụ sau đây nhé:

Vị trí Cmponent Nav:

See the Pen position nav Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem rõ hơn bạn chọn chế độ screen là 0.5x, 0.25x trên Codepen nhé. Tiếp theo mình sẽ tạo component nav theo chiều dọc bằng cách sử dụng class flex-column trong Bootstrap. Bạn có thể tìm hiểu thuộc tính này ở đây nhé Thuộc tính flex. Nào chúng ta hãy xem ví dụ dưới đây để nắm rõ hơn nhé:

Class flex-column:

See the Pen flex-column Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nãy giờ thì bạn chỉ tạo component nav cơ bản, tiếp theo mình sẽ hướng dẫn cách thêm một số giao diện cho nó. Đầu tiên là sử dụng class nav-tabs cho thẻ nav. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Class nav-tabs:

See the Pen nav-tabs Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo sẽ là giao diện nav-pills cho thẻ nav. Để nắm rõ hơn bạn xem ví dụ sau đây nhé:

Class nav-pills:

See the Pen nav-pills Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Vậy nếu các bạn muốn component nav có độ rộng 100% của thẻ cha chứa nó thì ta có thể sử dụng hai class trong Bootstrap. Đầu tiên là class nav-fill nhưng nó sẽ chia các thành phần con nav-item có độ rộng không bằng nhau tùy thuộc vào nội dung mà thẻ con chứa. Thứ hai là class nav-justified cũng có chức năng y như vậy nhưng nó sẽ tự động chia các thành phần con nav-item có độ rộng bằng nhau. Để hiểu bạn hãy xem ví dụ dưới đây nhé:

See the Pen width nav Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Component Navbar:

Bây giờ chúng ta sẽ cùng nhau nhau tạo thanh điều hướng hiển thị trên nhiều màn hình khác nhau bằng component navbar. Để tạo được navbar thì mình sẽ gọi một thẻ div với class là navbar và class navbar-expand-(màn hình) với màn hình là xl, lg, md, sm cho việc hiển thị class collapsing tương ứng. Có nghĩa là khi đến màn hình mà mình xác định ở trên thì nó sẽ sắp xếp theo chiều dọc để tương thích với màn hình đó. Để thêm đường dẫn vào navbar thì chúng ta sẽ tao một thẻ ul với class navbar-nav. Sau đó thêm class nav-item cho thẻ li và class nav-link cho thẻ a. Nghe hơi mơ hồ để hiểu rõ hơn bạn xem code bên dưới nhé:

Component navbar:

See the Pen navbar-bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem sự thay đổi bạn chuyển đổi sang chế độ screen 0.5x, 0.25x trong Codepen nhé. Bạn chú ý ở ví dụ trên là độ rộng của trang web ở màn hình điện thoại thì các phần tử nav-item sẽ tự động sắp xếp theo chiều dọc vì nó chịu ảnh hưởng của class navbar-expand-sm. Việc sử dụng class này sẽ tùy thuộc vào nội dung thanh điều hướng của bạn để điều chỉnh cho phù hợp.
Nếu như bạn muốn chèn hình ảnh logo, nhãn hiệu hay tên của công ty lên thanh điều hướng thì Bootstrap cung cấp một class là navbar-brand để giúp mình làm việc đó. Để nắm rõ hơn hãy xem đoạn code dưới đây nhé:

Class navbar-brand:

See the Pen navbar-brand Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn trên những màn hình nhỏ thanh điều hướng sẽ ẩn những đường dẫn đi và thay thế bằng một nút nào đó mà khi người dùng nhấn vào thì mới hiển thị đường dẫn. Để tạo ra một chức năng như vậy thì đầu tiên mình sẽ tạo một nút với class class="navbar-toggler", data-toggle="collapse" and data-target="#doi_tuong". Sau đó chúng ta sẽ để các thành phần con trong thanh điều hướng vào một thẻ div với class collapse navbar-collapse và id doi_tuong. Một chú ý nhỏ là id của thẻ div trên phải tương ứng với giá trị data-target nhé. Để dễ hình dung bạn xem đoạn code sau nhé:

Thu gọn thanh điều hướng:

See the Pen navbar collapse Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bước tiếp theo là chúng ta hay thấy sẽ có một ô nhập trong thanh điều hướng để giúp người dùng có thể tìm kiếm các nội dung mình cần trong trang web nhanh hơn. Do đó mình sẽ chỉ bạn cách tạo một form tìm kiếm trong thanh điều hướng bằng cách sử dụng class form-inline cho thẻ form. Để hiểu rõ hơn hãy xem đoạn code dưới đây nhé:

Form Tìm Kiếm:

See the Pen Form tim kiem by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem sự thay đổi bạn chuyển đổi sang chế độ screen 0.5x, 0.25x trong Codepen nhé. Đôi khi bạn không chỉ muốn hiển thị thanh điều hướng ở đầu trang vì khi người dùng muốn chuyển sang trang khác thì phải kéo lên đầu trang để thấy thanh điều hướng . Để tránh trường hợp bất tiện như vậy thì Bootstrap cung cấp cho chúng ta class fixed-top . Để xem nó hoạt động như thế nào bạn xem ví dụ nhé:

Class fixed-top:

See the Pen Fix-top Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Các bạn thử di chuyển chuột xuống cuối trang thì thanh điều hướng lúc nào cũng nằm trên cùng của trang. Ngoài ra Bootstrap cũng cung cấp một class fixed-bottom có chức năng như ví dụ trên nhưng vị trí của thanh navbar sẽ nằm ở phía dưới cùng. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Class fixed-bottom:

See the Pen fix-bottom Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra còn có một class sticky-top sẽ làm navbar cố định ở đầu trang khi người dùng cuộn chuột qua nó. Để dễ hiểu hơn các bạn xem ví dụ nhé:

Class sticky-top:

See the Pen sticky-top by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn nắm được component Nav và Navbar trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!