Cho tới thời điểm này, chắc các bạn cũng đã khá quen thuộc với việc sử dụng Bootstrap trong quá trình xây dựng HTML. Sẽ còn rất nhiều ứng dụng thú vị của Bootstrap đang chờ chúng ta khám phá. Hôm nay, mình xin giới thiệu về 1 plugin của Bootstrap rất quen thuộc và rất hay được sử dụng. Đó là Tabs. Bài viết này cũng có một mối liên quan mật thiết với component navs vì tabs cũng là dạng danh sách nằm ngang được phân làm từng khối riêng biệt. Ứng dụng này được sử dụng rất rộng rãi nhất là trên các website về tin tức hoặc bán hàng online. Sử dụng tabs không chỉ show được nhiều nội dung hơn mà còn tiết kiệm được diện tích trên 1 page. Cùng bắt tay vào việc tạo** Tabs ** bằng bootstrap luôn nào!Tabs. Bài viết này cũng có một mối liên quan mật thiết với component navs vì tabs cũng là dạng danh sách nằm ngang được phân làm từng khối riêng biệt. Ứng dụng này được sử dụng rất rộng rãi nhất là trên các website về tin tức hoặc bán hàng online. Sử dụng tabs không chỉ show được nhiều nội dung hơn mà còn tiết kiệm được diện tích trên 1 page. Cùng bắt tay vào việc tạo** Tabs ** bằng bootstrap luôn nào!
1. Tạo tabs cơ bản
Ở phần này thì chúng ta sẽ tìm hiểu cách tao ra một dạng tabs cơ bản, tức là nó hiển thị giống như một thanh menu nằm ngang và khi click vào cũng không có điều gì xảy ra cả. Vì nó cũng là một thành phần của nav nên mọi nội dung cũng phải được bọc trong hai cặp thẻ ul,li. Ngoài class nav được gán vào mặc định thì chúng sẽ còn một class con hỗ trợ là nav-tabs, sau khi gán class này vào thì nó mới hiển thị đúng như dạng tabs mà chúng ta thường gặp ở các website. Để đánh dấu tab hiện tại đang hiển thị nội dung, chúng ta có thể dùng class ** .active** ở phần tử li.nav nên mọi nội dung cũng phải được bọc trong hai cặp thẻ ul,li. Ngoài class nav được gán vào mặc định thì chúng sẽ còn một class con hỗ trợ là nav-tabs, sau khi gán class này vào thì nó mới hiển thị đúng như dạng tabs mà chúng ta thường gặp ở các website. Để đánh dấu tab hiện tại đang hiển thị nội dung, chúng ta có thể dùng class ** .active** ở phần tử li.
Tạo Tabs bằng Bootstrap 3
Tạo Tabs cơ bản
- Home
- Profile
- Messages
- Settings
Lúc này, khi show ra ở ngoài frontend, Tab sẽ chỉ hiển thị được đơn giản như thế này
Home