thả xuống
Để biết hướng dẫn về Trình đơn thả xuống, hãy đọc Hướng dẫn thả xuống Bootstrap của chúng tôi
Lớp Mô tảVí dụ. menu thả xuốngCho biết menu thả xuốngHãy dùng thử. menu thả xuốngXây dựng menu thả xuốngHãy dùng thử. dropdown-menu-right Căn phải menu thả xuống Hãy dùng thử. dropdown-headerThêm tiêu đề bên trong menu thả xuốngHãy dùng thử. dropupCho biết menu dropupHãy dùng thử. bị vô hiệu hóa một mục trong menu thả xuốngHãy thử. dải phân cáchTách các mục bên trong menu thả xuống bằng một đường kẻ ngangHãy thửsập
Để biết hướng dẫn về khả năng thu gọn, hãy đọc Hướng dẫn Thu gọn Bootstrap của chúng tôi
Lớp Mô tảVí dụ. thu gọnCho biết nội dung có thể thu gọn - có thể ẩn hoặc hiển thị theo yêu cầuHãy dùng thử. sụp đổ. i Hiển thị nội dung có thể thu gọn theo mặc định Hãy thử. panel-collapseBảng điều khiển có thể thu gọn [chuyển đổi giữa [các] bảng ẩn và hiển thị]Hãy dùng thửNhóm danh sách có thể thu gọnHãy dùng thửAccordionHãy dùng thử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
Ví dụ
nút thả xuống
Tự mình thử »
Ví dụ giải thích
Lớp .dropdown
chỉ ra một menu thả xuống
Để mở menu thả xuống, hãy sử dụng nút hoặc liên kết có lớp .dropdown-toggle
và thuộc tính data-toggle="dropdown"
Thêm lớp .dropdown-menu
vào một
yếu tố để thực sự xây dựng menu thả xuống. Sau đó, thêm lớp .dropdown-item
vào từng thành phần [liên kết hoặc nút] bên trong menu thả xuống
Dải phân cách thả xuống
Lớp .dropdown-divider
được sử dụng để phân tách các liên kết bên trong menu thả xuống bằng một đường viền ngang mỏng
Tiêu đề thả xuống
Lớp .dropdown-header
được sử dụng để thêm các tiêu đề bên trong menu thả xuống
Vô hiệu hóa và kích hoạt các mục
Đánh dấu một mục thả xuống cụ thể với lớp .active
[thêm màu nền xanh lam]
Để vô hiệu hóa một mục trong menu thả xuống, hãy sử dụng lớp .disabled
[có màu văn bản xám nhạt và biểu tượng "cấm đỗ xe" khi di chuột]
Ví dụ
Vị trí thả xuống
Bạn cũng có thể tạo menu "dropright" hoặc "dropleft" bằng cách thêm lớp .dropright
hoặc .dropdown-toggle
0 vào phần tử thả xuống. Lưu ý rằng dấu mũ/mũi tên được thêm tự động
Menu thả xuống bên phải
Để căn phải menu thả xuống, hãy thêm lớp .dropdown-toggle
1 vào phần tử với. trình đơn thả xuống
dropup
Nếu bạn muốn menu thả xuống mở rộng lên trên thay vì xuống dưới, hãy thay đổi
phần tử có class="dropdown" thành .dropdown-toggle
2
Văn bản thả xuống
Lớp .dropdown-toggle
3 được sử dụng để thêm văn bản thuần túy vào mục thả xuống hoặc được sử dụng trên các liên kết để tạo kiểu liên kết mặc định
Ví dụ
Chỉ nhắn tin
Các nút được nhóm với danh sách thả xuống
Ví dụ
Quả táo
SAMSUNG
sony
Tự mình thử »
Tách nút thả xuống
Ví dụ
Sơ đẳng
Tự mình thử »
Nhóm nút dọc với danh sách thả xuống
Ví dụ
Quả táo
SAMSUNG
sony
Tự mình thử »
Hoàn thành Tài liệu tham khảo thả xuống Bootstrap 4
Để có tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện thả xuống, hãy truy cập Tài liệu tham khảo thả xuống Bootstrap 4 JS của chúng tôi
Tải xuống
Tải xuống SVG để sử dụng hoặc chỉnh sửa
Tải xuống SVGphông chữ biểu tượng
Sử dụng phông chữ web?
điểm mã
- bảng chữ cái.
U+F5D3
- CSS.
\F5D3
- JS.
\uF5D3
- HTML.
Sao chép HTML
Dán SVG ngay vào mã dự án của bạn