Tab và Pill trong Bootstrap

Trong bài học Bootstrap trước Taimienphi.vn đã giới thiệu cho bạn về biểu tượng trong Bootstrap. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách tạo Tab và Pill trong Bootstrap.

Bootstrap cung cấp các tùy chọn để dễ dàng tạo các thành phần điều hướng cơ bản như Tab và Pill. Tất cả các thành phần điều hướng trong Bootstrap bao gồm Tab và Pill được tạo bằng cách sử dụng lớp .nav.

tab va pill trong bootstrap hoc bootstrap

Tab và Pill trong Bootstrap

Mục Lục bài viết:
1. Tạo thành phần điều hướng cơ bản trong Bootstrap
2. Căn chỉnh các mục điều hướng
3. Tạo Tab cơ bản trong Bootstrap
4. Tạo Pill trong Bootstrap
5. Tạo menu dạng thả trong Tab và Pill trong Bootstrap
5.1. Tạo menu dạng thả trong Tab
5.2. Tạo menu dạng thả trong Pill
6. Fill và căn chỉnh các thành phần điều hướng

 

1. Tạo thành phần điều hướng cơ bản trong Bootstrap

Để tạo menu điều hướng cơ bản, chúng ta sử dụng lớp .nav trong Bootstrap.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo một menu điều hướng cơ bản:

tab va pill trong bootstrap

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 2

Lưu ý: Chúng ta có thể sử dụng lớp .disabled để giao diện của link trông giống như bị vô hiệu hóa. Tuy nhiên lớp .disabled chỉ thay đổi giao diện trực quan của link bằng cách làm giao diện link có màu xám và xóa hiệu ứng di chuột. Nếu xóa thuộc tính href, link vẫn có thể click được.

 

2. Căn chỉnh các mục điều hướng

Mặc định, các mục điều hướng được căn chỉnh về bên trái, tuy nhiên nếu muốn chúng ta có thể căn chỉnh các mục này chính giữa hoặc sang bên phải bằng cách sử dụng các tiện ích flexbox.

Ví dụ: trong ví dụ dưới đây chúng ta sử dụng lớp .justify-content-center để căn chỉnh các mục điều hướng chính giữa.

tab va pill trong bootstrap 3

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 4

Tương tự chúng ta có thể sử dụng lớp .justify-content-end để căn chỉnh các mục điều hướng sang phải.

Ví dụ: trong ví dụ dưới đây chúng ta sử dụng lớp .justify-content-end để căn chỉnh các mục điều hướng chính giữa.

tab va pill trong bootstrap 5

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 6

Ngoài ra chúng ta cũng có thể căn chỉnh các mục điều hướng theo chiều dọc bằng cách sử dụng lớp .flex-column.

Ví dụ: ví dụ dưới đây minh họa cách căn chỉnh các mục điều hướng theo chiều dọc:

tab va pill trong bootstrap 7

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 8

 

3. Tạo Tab cơ bản trong Bootstrap

Để tạo tab cơ bản, chúng ta chỉ cần thêm lớp .nav-tabs vào thành phần điều hướng cơ bản.

Ví dụ: Ví dụ dưới đây minh họa cách tạo một Tab cơ bản trong Bootstrap:

tab va pill trong bootstrap 9

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 10

Nếu muốn chúng ta cũng có thể thêm các biểu tượng cho các tab để tạo giao diện sinh động hơn như trong ví dụ dưới đây:

tab va pill trong bootstrap 11

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 12

 

4. Tạo Pill trong Bootstrap

Tương tự, để tạo Pill cho các thành phần điều hướng trong Bootstrap, chúng ta thêm lớp .nav-pills trên thành phần điều hướng cơ bản, thay thế lớp .nav-tabs.

Ví dụ: Trong ví dụ dưới đây minh họa cách tạo Pill trong Bootstrap:

tab va pill trong bootstrap 13

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 14

Tương tự như các tab, chúng ta có thể thêm các biểu tượng cho pill để tạo giao diện sinh động hơn như trong ví dụ dưới đây:

tab va pill trong bootstrap 15

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 16

Ngoài ra chúng ta có thể áp dụng lớp .flex-column trên phần tử .nav để căn chỉnh các pill theo chiều dọc, tham khảo ví dụ dưới đây:

tab va pill trong bootstrap 17

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 18

 

5. Tạo menu dạng thả trong Tab và Pill trong Bootstrap

Để tạo menu dạng thả (menu dropdown) trong Tab và Pill trong Bootstrap, chúng ta có thể sử dụng các lớp CSS .dropdown, .dropdown-toggle, .dropdown-menu và lớp .dropdown-item cùng các lớp .nav, .nav-tabs hoặc lớp .nav-pills mà không cần sử dụng mã JavaScript.

 

5.1. Tạo menu dạng thả trong Tab

Trong ví dụ dưới đây minh họa cách thêm menu dạng thả đơn giản trong một tab trong Bootstrap:

tab va pill trong bootstrap 19

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 20

 

5.2. Tạo menu dạng thả trong Pill

Trong ví dụ dưới đây minh họa cách thêm menu dạng thả đơn giản trong một pill trong Bootstrap:

tab va pill trong bootstrap 21

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 22

 

6. Fill và căn chỉnh các thành phần điều hướng

Chúng ta có thể thiết lập các mục điều hướng mở rộng và fill để khớp với tất cả kích thước chiều rộng có sẵn bằng cách sử dụng lớp .nav-fill trên phần tử .nav.

Ví dụ: Trong ví dụ dưới đây minh họa cách fill và căn chỉnh các thành phần điều hướng:

tab va pill trong bootstrap 23

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 24

Ngoài ra nếu muốn fill tất cả không gian theo chiều ngang cũng như các mục điều hướng cùng chiều rộng, chúng ta sử dụng lớp .nav-justified thay vì lớp .nav-fill, tham khảo ví dụ dưới đây:

tab va pill trong bootstrap 25

Kết quả đầu ra có dạng như dưới đây:

tab va pill trong bootstrap 26

https://thuthuat.taimienphi.vn/tab-va-pill-trong-bootstrap-51122n.aspx
Bài học Bootstrap trên đây Taimienphi.vn vừa hướng dẫn bạn cách tạo Tab và Pill trong Bootstrap. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách tạo thanh điều hướng trong Bootstrap. Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

Tác giả: Tin Nguyễn     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Cài đặt môi trường C
Typography trong Bootstrap, khái niệm và cách sử dụng
Card trong Bootstrap, khái niệm và cách sử dụng
Media Object trong Bootstrap, khái niệm và cách sử dụng
Học Bootstrap, khái niệm và cách sử dụng
Từ khoá liên quan:

Tab và Pill trong Bootstrap

, Bootstrap, học Bootstrap,

SOFT LIÊN QUAN
  • Lập trình C++

    Giáo trình lập trình C++

    Lập trình C++ là tài liệu hướng dẫn học lập trình C++ - ngôn ngữ lập trình hướng đối tượng mở rộng từ ngôn ngữ C, cung cấp đến bạn các kiến thức về cách thức và tư duy lập trình. Đây là tài liệu rất hữu ích cho những ai ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá