Trình đơn thả xuống Bootstrap 4
Thả xuống cơ bản
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ụ
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div> Hãy tự mình thử »Ví dụ giải thích
Lớp .dropdown biểu thị 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 phần tử <div> để 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.
Bộ chia 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 tiêu đề bên trong menu thả xuống:
Các mục vô hiệu hóa và kích hoạt
Đánh dấu một mục thả xuống cụ thể bằng lớp .active (thêm màu nền xanh lam).
Để tắt 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 "biển báo cấm đỗ xe" khi di chuột):
Ví dụ
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a> Hãy tự mình thử »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 .dropleft 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 chỉnh đúng menu thả xuống, hãy thêm lớp .dropdown-menu-right vào phần tử có .dropdown-menu:
thả xuống
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, hãy thay đổi phần tử <div> bằng class="dropdown" thành "dropup" :
Văn bản thả xuống
Lớp .dropdown-item-text được sử dụng để thêm văn bản thuần túy vào một 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ụ
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div> Hãy tự mình thử »Các nút được nhóm với danh sách thả xuống
Ví dụ
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div> Hãy tự mình thử »Nút chia thả xuống
Ví dụ
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div> Hãy tự mình thử »Nhóm nút dọc w/Thả xuống
Ví dụ
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div> Hãy tự mình thử »Hoàn thành tham khảo thả xuống Bootstrap 4
Để có tài liệu 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 JS Bootstrap 4 của chúng tôi.
