Tạo và sử dụng Tab cùng Pill trong Bootstrap

Bootstrap cung cấp các tùy chọn để 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 và Pill trong Bootstrap

1. Hướng dẫn 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, ta sử dụng lớp .nav trong Bootstrap.

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

Kết quả xuất hiện như sau:

Lưu ý: Chúng ta có thể áp dụng lớp .disabled để giao diện của liên kết trô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 liên kết bằng cách làm cho chúng màu xám và loại bỏ hiệu ứng di chuột. Ngay cả khi loại bỏ thuộc tính href, liên kết vẫn có thể được nhấp chuột.

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

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

Ví dụ: Trong ví dụ sau, chúng ta áp dụng lớp .justify-content-center để căn chỉnh các mục điều hướng vào giữa.

Kết quả xuất hiện như sau:

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 bên phải.

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

Kết quả xuất hiện như sau:

Bên cạnh đó, chúng ta có thể sử dụng lớp .flex-column để căn chỉnh các mục điều hướng theo chiều dọc.

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

Kết quả xuất hiện như dưới đây:

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

Để tạo tab căn 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ụ: Dưới đây là ví dụ minh họa về cách tạo một Tab căn bản trong Bootstrap:

Dưới đây là kết quả:

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 sống động hơn như trong ví dụ dưới đây:

Dưới đây là kết quả:

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 vào thành phần điều hướng cơ bản, thay thế lớp .nav-tabs.

Ví dụ: Trong ví dụ sau đây, mô tả cách tạo Pill trong Bootstrap:

Dưới đây là kết quả:

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

Dưới đây là kết quả:

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

Dưới đây là kết quả:

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

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

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

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

Dưới đây là kết quả:

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

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

Dưới đây là kết quả:

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.

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

Dưới đây là kết quả:

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

Dưới đây là kết quả:

Trong bài học trước đó, Mytour đã hướng dẫn cách tạo Tab và Pill trong Bootstrap. Tiếp theo, Mytour sẽ giới thiệu cách tạo thanh điều hướng trong Bootstrap. Nếu có thắc mắc hoặc câu hỏi, bạn đọc có thể để lại ý kiến trong phần bình luận dưới bài viết.