Chào mừng bạn đến với Lamvt Group

Bootstrap Tabs và Pills

Bootstrap Tabs và Pills
5 (100%) 9 votes

Trong bài trước chúng ta đã tìm hiểu làm thế nào để ẩn hiện một lượng lớn nội dung mà không làm ảnh hưởng đến bố cục trang bằng cách sử dụng các lớp có sẵn của Bootstrap Collapse. Trong bài này chúng ta sẽ tìm hiểu về Bootstrap Tabs và Pills. Gần giống như bootstrap collapse, bootstrap tabs và pills cũng giúp chúng ta thu gọn một lượng lớn nội dung và phần nội dung sẽ được hiển thị qua các tabs tương ứng. Ngoài ra, bootstrap tabs và pills còn được sử dụng rất linh hoạt trong menu. Cụ thể:

Xem Thêm: Bootstrap Collapse

  1. Bootstrap Tabs với menu

Hầu hết các trang web đều có menu. Trong html, menu thường được định nghĩa trong một danh sách <ul>. Trong bootstrap, để menu hiển thị nằm ngang có thể hiển thị theo các cách sau:

a. Thêm lớp .list-inline vào phần tử <ul>

Bootstrap Tabs và Pills 01

b. Hoặc bạn có thể hiển thị menu bằng cách sử dụng bootstrap tabs

  • Tabs được tạo khi thêm các lớp: .nav và .nav-tabs vào phần tử <ul>
  • Thêm lớp .active vào phần tử <li> để đánh dấu trang hiện tại

Bootstrap Tabs và Pills 02

Lưu ý: Ví dụ trên hướng dẫn các tạo tab điều hướng cơ bản, nó chưa có tác dụng chuyển đổi nội dung giữa các tabs. Phần dưới mình sẽ hướng dẫn cách chuyển đổi giữa các tabs.

  1. Bootstrap Tabs với Dropdown Menu

Các tabs cũng có thể chứa các menu thả xuống bằng cách kết hợp sử dụng các lớp trong Bootstrap Dropdown mà chúng ta đã học ở bài trước.

Xem thêm: Bootstrap Dropdowns

Bootstrap Tabs và Pills 03

  1. Bootstrap Pills
  • Cũng giống như Tabs, Pills được tạo ra khi thêm lớp .nav và .nav-pills vào phần tử <ul>. Đánh dấu trang hiện tại bằng cách thêm lớp .active vào phần tử <li> tương ứng. Bạn sẽ thấy bootstrap tabs và bootstrap pills giống nhau, tuy nhiên cách hiển thị của chúng lại khác nhau.

Bootstrap Tabs và Pills 04

a. Vertical Pills

Pills có thể được hiển thị theo chiều dọc bằng cách thêm lớp .nav-stacked vào phần tử <ul> chứa các lớp .nav và .nav-pills

Bootstrap Tabs và Pills 05

b. Bootstrap Pills với Dropdown Menu

Cũng giống như Tabs thì Pills cũng có thể chứa các menu thả xuống bằng cách sử dụng các lớp có sẵn trong bootstrap dropdowns

Bootstrap Tabs và Pills 06

Xem Thêm: Bootstrap Grid System: Hệ thống lưới trong bootstrap

  1. Chuyển đổi giữa các Tabs

Để chuyển đổi giữa các tabs:

  • Thêm thuộc tính data-toggle=“tab” vào mỗi liên kết
  • Thêm lớp .tab-pane vào phần tử <div> chứa id trong mỗi tab
  • Tất cả các tab được bao trong phần tử <div> có chứa lớp .tab-content

Bootstrap Tabs và Pills 07

  1. Chuyển đổi giữa các Pills

Tương tự như tabs, các thuộc tính và các lớp tương tự, bạn chỉ cần đổi thuộc tính data-toggle=“pill”.

Tổng kết

Qua phần chuyển đổi giữa các tabs và pills bạn sẽ thấy giống với bootstrap collapse. Tuy nhiên, với bootstrap tabs và pills ngoài việc sử dụng linh hoạt trong việc hiển thị nội dung, chúng còn được sử dụng linh hoạt trong tạo ra menu. Bootstrap tabs và pills cũng tương tự nhau, bạn chỉ cần nắm rõ một cái và tùy theo mục đích của mình mà vận dụng thật linh hoạt.

Xem Thêm: Dịch vụ thiết kế website

Hot Trend: Cửa chống cháy, bảng chữ cái tiếng Việt, bảng chữ cái tiếng Nhật, font chữ đẹp, font vni

Bài Viết Liên Quan

sponsored links - Liên kết được tài trợ

Dương Thành Trung

– Ngày sinh: 16/06
– Quê quán: Lạc Đạo – Văn Lâm- Hưng Yên
Tốt nghiệp Đại học Xây dựng Dương Thành Trung được hướng dẫn về HTML, CSS, JS, Php, MySql và CMS WordPress với nhiều năm trợ giảng cùng Lamvt và nay là Giáo viên dạy lập trình Thiết kế Web tại REACH

liên hệ

Phone

0169 981 5232

Address

Số 25, Phú Thứ - Tây Mỗ, Nam Từ Liêm, Hà Nội

Email

Lamvt19792003@gmail.com

Copyright © 2017 by Lamvt Group. All right reserved.