Hướng dẫn tab trong bootstrap - tab trong bootstrap
|
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! Show 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. Lúc này, khi show ra ở ngoài frontend, Tab sẽ chỉ hiển thị được đơn giản như thế này  2. Xác định vị trí và các thành phần liên quan trong TabsCũng giống như việc xây dựng các tabs bằng css thông thường thì tabs trong bootstrap 3 cũng được hỗ trợ bằng javasript và chúng ta sẽ xác định vị trí các tabs bằng các id mà chúng ta truyền vào thẻ a href ở trên phần menu, tôi sẽ đặt 3 id khác nhau cho từng menu, ký hiệu id trong css là dấu #, vậy lần lượt ta sẽ có một số id như sau, #home, #profile, #messages, #settings. Thuộc tính data-toggle là thuộc tính riêng mà bootstrap hỗ trợ chúng ta trong rất nhiều component, phần giá trị của nó , chúng ta sẽ điền vào là tab để nó hiểu rằng chúng ta đang làm việc với components tabs.data-toggle là thuộc tính riêng mà bootstrap hỗ trợ chúng ta trong rất nhiều component, phần giá trị của nó , chúng ta sẽ điền vào là tab để nó hiểu rằng chúng ta đang làm việc với components tabs. Sau đây, mình sẽ giải thích phần thứ hai để các bạn nắm rõ hơn về các class của nó. Mọi thành phần muốn hiển thị khi click vào các tabs đều được bọc trong thẻ div có class là tab-content (Class cha) , bên trong nó sẽ còn các thẻ div có các class là tab-pane (Class con). đây sẽ là nơi chứa các nội dung ngoài ra còn là nơi khai báo id css để so sánh với phần id mà chúng ta truyền vào thẻ a herf ở phần thứ nhất, nhằm xác định chính xác vị trí id của từng tabs, để show nội dung cho phù hợp. Lúc này, các bạn đã có thể tạo được Tabs hoàn chỉnh.tab-content (Class cha) , bên trong nó sẽ còn các thẻ div có các class là tab-pane (Class con). đây sẽ là nơi chứa các nội dung ngoài ra còn là nơi khai báo id css để so sánh với phần id mà chúng ta truyền vào thẻ a herf ở phần thứ nhất, nhằm xác định chính xác vị trí id của từng tabs, để show nội dung cho phù hợp. Lúc này, các bạn đã có thể tạo được Tabs hoàn chỉnh. 3. Tabs pillChúng ta thường hay tạo tab dưới dạng thẻ. Tuy nhiên với Bootstrap, các bạn có thể hiển thị các tab dưới dạng button mà không cần chỉnh sửa css hay sử dụng javascript bằng cách rất đơn giản như sau. Trong class của ul, hay thay class nav-tabs bằng class nav-pills là bạn đã hiển thị được tab dạng buttonnav-tabs bằng class nav-pills là bạn đã hiển thị được tab dạng button Và đây là kết quả: 4. Tabs stackĐa số các trường hợp chúng ta show tab theo hàng ngang. Tuy nhiên, các bạn có thể thay đổi hình thức hiển thị tab theo hàng dọc với 1 thao tác đơn giản. Các bạn đã nhận ra sự khác biệt nhỏ nhỏ đó chưa? Đó chỉ là thay class nav-tabs bằng class nav-stacked là bạn đã sắp xếp được tab dạng stack (hàng dọc). Và để hoàn chỉnh hơn, chúng ta cần chỉnh sửa thêm class phân chia chiều rộng cho thẻ ul và tab-content.nav-tabs bằng class nav-stacked là bạn đã sắp xếp được tab dạng stack (hàng dọc). Và để hoàn chỉnh hơn, chúng ta cần chỉnh sửa thêm class phân chia chiều rộng cho thẻ ul và tab-content. Kết quả thu được là: 5. Dropdown Menu trong tabPhần này, chúng ta sẽ nhúng phần dropdown menu vào trong tab. Các bạn có thể nhớ lại cách tạo Dropdown Menu bằng bootstrap qua Bài 3 - Tạo Dropdown Menu với Bootstrap.Dropdown Menu bằng bootstrap qua Bài 3 - Tạo Dropdown Menu với Bootstrap. Và kết quả hiển thị như sau 6. Kết bàiNhư vậy, các bạn đã có thể học thêm được cách tạo tabs - 1 ứng dụng rất phổ biến của bootstrap. Hãy mạnh dạn thử để hưởng thụ thành quả của mình nào. Bài sau, chúng ta sẽ tiếp tục tìm hiểu thêm 1 ứng dụng khác của bootstrap. Đó là gì thì hãy chờ đợi bài tiếp theo nhé! Chúc các bạn thành công! |
