Tabs trong Bootstrap 4

• 08-08-2020 10:36:57
• by: baobinhnet

Chào các bạn, trong quá trình làm website, chúng ta thường xuyên gặp phải các thiết kế có các phần tab dữ liệu khác nhau. Để code chức năng này thì cũng tương đối mất thời gian, tuy nhiên nếu chúng ta sử dụng tabs trong bootstrap thì giảm được rất nhiều thời gian. Sau đây chúng ta cùng nghiên cứu cách sử dụng tabs của bootstrap 4 nhé.

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ẻ a nằm trong li sử dụng class .active.

Ví dụ code luôn cho dễ hiểu nhé:


 

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
• Thẻ a   nằm trong   li hiện hành sử dụng class .active
• li có Dropdown thì sử dụng class .dropdown-item, 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

Tabs trong Bootstrap thì chỉ đơn giản vậy thôi. Các bạn có thể sử dụng trong rất nhiều trường hợp khác nhau. Hẹn các bạn trong bài học tiếp theo. Chúc các bạn học tập tốt!

 

---

• Posted by baobinhnet
• 2020-07-11 11:33:32