Bài 20: Tabs trong Bootstrap

0
122

Xin chào các bạn, hôm nay chúng ta lại trở lại tiếp với 1 bài tiếp hướng dẫn trong Bootstrap, và nội dung hôm nay mình sẽ giới thiệu là Tabs trong Bootstrap. Khi nghe đến Tabs các bạn cũng phần nào hình dung ra nó là gì rồi đúng không nào, đây là phần sẽ giúp các bạn chia các đối tượng ra thành từng vùng và có phân cách để lựa chọn nhé. Để các bạn hình dung rõ hơn thì chúng ta vào học thôi!

Tabs cơ bản

Đầu tiên thì mình sẽ hướng dẫn các bạn xây dựng định dạng của 1 Tabs cơ bản trong Bootstrap.

Tabs trong Bootstrap được tạo bởi thẻ ul và sử dụng theo là class mẫu .nav nav-tabs. Đồng thời, luôn luôn đánh dấu tab hiện tại với thẻ li sử dụng class .active.

Ví dụ cho dễ hiểu nhé:

Hiển thị ví dụ:

Tabs với Menu Dropdown trong Bootstrap

Bài trước thì mình đã hướng dẫn các bạn làm Menu Dropdown rồi, bài này thì chúng ta sẽ kết hợp cả chia Tab vào nhé:

  • Thẻ <ul> vẫn sử dụng class .nav nav-tabs
  • li hiện hành sử dụng class .active
  • li có Dropdown thì sử dụng class .dropdown, xây dựng khối ul li đổ xuống bên trong li này, ul sử dụng class .dropdown-menu

Ví dụ như sau:

Kết luận

OK, Tabs trong Bootstrap 4 chỉ đơn giản vậy thôi, nên là các bạn hoàn toàn có thể áp dụng vào để cho giao diện website thêm phần đẹp mắt hơn và đôi lúc Tabs giúp các bạn phân chia các thành phần, các menu dễ dàng quản lý và sử dụng hơn đúng không nào. Hẹn gặp lại các bạn trong các bài tiếp theo.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây