Tiếp tục nối chuỗi series tìm hiểu về Bootstap, hôm nay hãy cùng CNET tìm hiểu về một trong những thành phần vô cùng quan trọng trong Bootstrap - Trình thả xuống Bootstrap Dropdown. Với Bootstrap Dropdowns, chúng ta có thể tạo các menu thả xuống đơn giản hoặc phức tạp, kết hợp với nhiều yếu tố khác nhau như biểu mẫu, nút hoặc thẻ. Bài viết này sẽ hướng dẫn cách sử dụng và tùy chỉnh Dropdowns trong Bootstrap để tạo ra giao diện phong phú và dễ sử dụng.
1.Khám phá trình menu thả xuống cơ bản - Basic Dropdown và lợi ích khi sử dụng Dropdown
- Trình menu thả xuống cơ bản (Basic Dropdown):
Basic Dropdown cho phép hiển thị một danh sách các mục lựa chọn một cách đơn giản và dễ dàng. Người dùng có thể mở Dropdown bằng cách nhấn vào nút hoặc tiêu đề tương ứng, sau đó chọn một mục từ danh sách hiển thị.
Một Menu thả xuống là menu có thể chuyển đổi cho phép người dùng chọn một giá trị từ danh sách được xác định trước. Bạn đọc có thể theo dõi ví dụ dưới đây của CNET để hiểu rõ về Basic Dropdown:
Trong ví dụ trên chúng ta có thể hiểu như sau:
- Lớp .dropdown chỉ ra một menu thả xuống.
- Để mở menu thả xuống, sử dụng nút hoặc liên kết có lớp .dropdown-toggle và thuộc tính.data-toggle="dropdown"
- Lớp .caret tạo biểu tượng mũi tên , cho biết nút này là một danh sách thả xuống.
- Thêm lớp .dropdown-menu vào một phần tử <ul> để thực sự xây dựng menu thả xuống.
Ngoài ra Basic Dropdown cung cấp một số tùy chỉnh cơ bản như màu sắc, kích thước và vị trí hiển thị để bạn có thể điều chỉnh giao diện của nó theo ý muốn
Một số lợi ích khi sử dụng Dropdown:
- Tiết kiệm không gian và thẩm mỹ: Dropdown cho phép hiển thị một danh sách tùy chọn mà không cần nhiều không gian trên giao diện, giúp tối ưu hóa không gian màn hình và tạo ra giao diện gọn gàng.
- Tăng khả năng tương tác: Bằng cách cho phép người dùng chọn từ một danh sách các tùy chọn, Dropdown tăng khả năng tương tác và thuận tiện cho người dùng, giúp họ dễ dàng chọn lựa các tùy chọn mong muốn.
- Tích hợp linh hoạt: Dropdown có thể dễ dàng tích hợp vào nhiều phần khác nhau của giao diện như thanh điều hướng, biểu mẫu hoặc thẻ, tạo ra một trải nghiệm người dùng liền mạch và đồng nhất.
- Tùy biến dễ dàng: Bootstrap cung cấp nhiều tùy chỉnh cho Dropdown, cho phép điều chỉnh màu sắc, kích thước và kiểu dáng để phù hợp với nhu cầu thiết kế cụ thể của bạn.
2. Chia menu thả xuống và tiêu đề thả xuống
Để để phân tách các liên kết bên trong menu thả xuống bằng đường viền ngang mỏng Bootstrap cung cấp lớp class="divider", sử dụng đặt như trong ví dụ sau:
Bootstrap cũng có sẵn lớp .dropdown-header được sử dụng để thêm các tiêu đề bên trong menu thả xuống, ví dụ:
3. Các mục vô hiệu hóa và kích hoạt trong menu thả xuống
Để kích hoạt hoặc vô hiệu hóa trong menu thả xuống ta sử dụng 2 lớp được Bootstrap tích hợp sẵn:
.active (thêm màu nền xanh lam): Đánh dấu một mục thả xuống cụ thể
.disabled (có màu văn bản xám nhạt và biểu tượng "biển báo cấm đỗ xe" khi di chuột): Để tắt một mục trong menu thả xuống
4. Vị trí thả xuống
Một vấn đề nữa khi nhắc tới việc sử dựng Dropdown đó là về vị trí thả xuống. Thông thường để căn chỉnh đúng menu thả xuống, cách dùng nhiều nhất là thêm .dropdown-menu-right hoặc .dropdown-menu-left lớp vào phần tử bằng .dropdown-menu:
Trong trường hợp khác, nếu bạn muốn menu thả xuống mở rộng lên trên thay vì hướng xuống dưới, ta chỉ cần thay đổi phần tử <div> bằng class="dropdown" thành "dropup":
Vậy là tổng kết trên CNET đã chỉ ra cách hoạt động và hướng sử dụng của thành phần Bootstrap Dropdowns. Hy vọng qua bài viết này, bạn đã có cái nhìn sâu hơn về cách sử dụng và tận dụng lợi ích của Bootstrap Dropdowns để tạo ra những trải nghiệm người dùng đáng nhớ và hiệu quả. Hãy khám phá và vận dụng vào dự áncủa bạn đọc để tạo ra Website ấn tượng.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
