Trình đơn thả xuống Bootstrap 4
Cơ bản thả xuống
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:
Thí 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>
Giải thích ví dụ
Lớp .dropdownchỉ 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ó loại .dropdown-togglevà
data-toggle="dropdown"thuộc tính.
Thêm .dropdown-menulớp vào một <div>phần tử để thực sự tạo menu thả xuống. Sau đó, thêm
.dropdown-itemlớp vào từng phần tử (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:
Thí dụ
<div class="dropdown-divider"></div>
Tiêu đề thả xuống
Lớp .dropdown-headerđược sử dụng để thêm tiêu đề bên trong trình đơn thả xuống:
Thí dụ
<div class="dropdown-header">Dropdown header 1</div>
Các mục Tắt và Hoạt động
Đánh dấu một mục thả xuống cụ thể với .activelớp (thêm màu nền xanh lam).
Để tắt một mục trong menu thả xuống, hãy sử dụng .disabledlớp (có màu văn bản xám nhạt và biểu tượng "biển báo cấm đỗ" khi di chuột):
Thí dụ
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Vị trí thả xuống
Bạn cũng có thể tạo menu "nhỏ giọt" hoặc "giọt nước" bằng cách thêm .droprighthoặc .dropleftlớp vào phần tử thả xuống. Lưu ý rằng dấu mũ / mũi tên được thêm tự động:
Chiếm đoạt
<div class="dropdown dropright">
Giọt nước
<div class="dropdown dropleft">
Menu thả xuống bên phải
Để căn phải menu thả xuống, hãy thêm .dropdown-menu-rightlớp vào phần tử bằng .dropdown-menu:
Thí dụ
<div class="dropdown-menu dropdown-menu-right">
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ử <div> với class = "dropdown" thành "dropup":
Thí dụ
<div class="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.
Thí 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>
Các nút được nhóm với menu thả xuống
Thí 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>
Trình đơn thả xuống Nút tách
Thí 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>
Nhóm nút dọc w / thả xuống
Thí 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>
Toàn bộ tham chiếu 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 pháp 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 .