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ụ
Ví dụ thả xuống
Tự mình thử »
Ví dụ giải thích
Lớp
8 chỉ ra một menu thả xuốngimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Để mở menu thả xuống, hãy sử dụng một nút hoặc liên kết có lớp
9 và thuộc tínhimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
0import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Lớp
1 tạo một biểu tượng mũi tên dấu mũ [], biểu thị rằng nút này là một danh sách thả xuốngimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Thêm lớp
2 vào mộtimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
- yếu tố để thực sự xây dựng menu thả xuống
Dải phân cách thả xuống
Lớp
3 được sử dụ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ỏngimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Tiêu đề thả xuống
Lớp
4 được sử dụng để thêm các tiêu đề bên trong menu thả xuốngimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
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ể bằng. lớp tích cực [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
5 [có màu văn bản xám nhạt và biểu tượng "cấm đỗ xe" khi di chuột]import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Thí dụ
Try it Yourself »
Vị trí thả xuống
Để căn phải danh sách thả xuống, hãy thêm lớp
6 vào phần tử với. trình đơn thả xuốngimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
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
80import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Khả năng truy cập thả xuống
Để giúp cải thiện khả năng truy cập cho những người sử dụng trình đọc màn hình, bạn nên bao gồm các thuộc tính
81 vàimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
82 sau khi tạo menu thả xuốngimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Thí dụ
Hướng dẫn
Tự mình thử »
Kiểm tra bản thân với các bài tập
Tập thể dục
Thêm các lớp và thuộc tính cần thiết để tạo danh sách thả xuống
Dropdown Example
- HTML
- CSS
- JavaScript
Cung cấp câu trả lời "
bắt đầu bài tập
Hoàn thành tài liệu tham khảo thả xuống Bootstrap
Để 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 Bootstrap JS của chúng tôi
Danh sách thả xuống có thể chuyển đổi, lớp phủ theo ngữ cảnh để hiển thị danh sách liên kết và hơn thế nữa. Giống như lớp phủ, Danh sách thả xuống được tạo bằng thư viện của bên thứ ba Popper. js, cung cấp tính năng định vị động và phát hiện khung nhìn
khả năng tiếp cận
Tiêu chuẩn WAI ARIA xác định một , nhưng nó rất cụ thể đối với một loại menu nhất định. Menu ARIA, chỉ được chứa
0,import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
1 hoặcimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
2import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Mặt khác, trình đơn thả xuống của Bootstrap được thiết kế chung chung hơn và ứng dụng trong nhiều tình huống khác nhau. Vì lý do này, chúng tôi không tự động thêm vai trò menu vào đánh dấu. Chúng tôi triển khai một số điều hướng bàn phím cơ bản và nếu bạn cung cấp vai trò "menu", thì react-bootstrap sẽ cố gắng hết sức để đảm bảo quản lý tiêu điểm tuân thủ nguyên tắc soạn thảo ARIA cho menu
ví dụ
Menu thả xuống một nút
Dropdown cơ bản bao gồm một
3 bao bọc vàimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4 bên trong, vàimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4. Theo mặc định,import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4 sẽ hiển thị thành phầnimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
7 và chấp nhận tất cả các đạo cụ giống nhauimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
import Dropdown from 'react-bootstrap/Dropdown';
Action
Another action
Something else
export default BasicExample;
Vì ở trên là một cấu hình phổ biến nên react-bootstrap cung cấp thành phần
4 để giúp giảm bớt việc gõ. Cung cấp một giá đỡimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
9 và một sốimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4 và bạn đã sẵn sàng để bắt đầuimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
3import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
DropdownButton sẽ chuyển tiếp các đạo cụ của Nút tới thành phần Toggle bên dưới
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Menu thả xuống của nút tách
Tương tự, Bạn tạo danh sách thả xuống phân tách bằng cách kết hợp các thành phần Danh sách thả xuống với một Nút và Nhóm Nút khác
5import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Như với DropdownButton,
51 được cung cấp dưới dạng thành phần tiện lợiimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
7import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
định cỡ
Danh sách thả xuống hoạt động với các nút ở mọi kích cỡ
8import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
thả xuống tối
Chọn tham gia menu thả xuống tối hơn để phù hợp với thanh điều hướng tối hoặc kiểu tùy chỉnh bằng cách thêm
52 vào mộtimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
53 hiện có. Ngoài ra, sử dụngimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
54 khi sử dụng thành phầnimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
55import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
3import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Sử dụng
54 trong mộtimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
57import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
6import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Chỉ đường thả
Trình đơn thả xuống kích hoạt bên trên, bên dưới, bên trái hoặc bên phải của các phần tử chuyển đổi của chúng, với giá đỡ
58import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
8import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Mục thả xuống
Trước đây, nội dung menu thả xuống phải là liên kết, nhưng điều đó không còn xảy ra với v4. Giờ đây, bạn có thể tùy ý sử dụng các thành phần trong danh sách thả xuống của mình thay vì chỉ
4simport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Bạn cũng có thể tạo các mục thả xuống không tương tác với
4. Thoải mái tạo kiểu hơn nữa với các tiện ích văn bản hoặc CSS tùy chỉnhimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
1import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Theo mặc định, menu thả xuống được căn chỉnh về bên trái, nhưng bạn có thể chuyển nó bằng cách chuyển
71 thànhimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4,import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4 hoặcimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
30import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
căn chỉnh đáp ứng
Nếu bạn muốn sử dụng căn chỉnh menu đáp ứng, hãy chuyển một đối tượng chứa điểm dừng tới chỗ dựa
75 trênimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4,import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4 hoặcimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
4. Bạn có thể chỉ địnhimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
79 hoặcimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
80 cho các điểm dừng khác nhauimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
31import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Thêm tiêu đề vào các phần nhãn của hành động
32import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Tách các nhóm mục menu có liên quan bằng một dải phân cách
33import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Tự động đóng
Theo mặc định, menu thả xuống bị đóng khi chọn một mục menu hoặc nhấp vào bên ngoài menu thả xuống. Hành vi này có thể được thay đổi bằng cách sử dụng thuộc tính
81import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Theo mặc định,
81 được đặt thành giá trị mặc địnhimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
83 và hoạt động như dự kiến. Bằng cách chọnimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
84, menu thả xuống chỉ có thể được bật bằng cách nhấp vào nút thả xuống.import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
85 làm cho menu thả xuống biến mất chỉ bằng cách chọn một mục menu vàimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
86 đóng menu thả xuống chỉ bằng cách nhấp vào bên ngoàiimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Lưu ý cách trình đơn thả xuống được chuyển đổi trong từng tình huống bằng cách nhấp vào nút
34import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
tùy chỉnh
Nếu cách xử lý mặc định của menu thả xuống và các thành phần chuyển đổi không theo ý thích của bạn, bạn có thể tùy chỉnh chúng bằng cách sử dụng Thành phần
4 cơ bản hơn để chỉ định rõ ràng các thành phần Chuyển đổi và Menuimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
35trộn nó lên phong cách khôn ngoanimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Hoạt động
hành động khác
liên kết riêng biệt
xuất ButtonCustomExample mặc định;
Thành phần thả xuống tùy chỉnh
Đối với những người muốn tùy chỉnh mọi thứ, bạn có thể bỏ qua các thành phần Chuyển đổi và Menu đi kèm và tạo các thành phần của riêng bạn. Bằng cách cung cấp các thành phần tùy chỉnh cho prop
88, bạn có thể kiểm soát cách hoạt động của từng thành phần. Các thành phần menu và chuyển đổi tùy chỉnh phải có thể chấp nhận giới thiệuimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
36import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
API
89Sao chép mã nhập cho thành phần DropdownButtonimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Một thành phần tiện lợi cho danh sách thả xuống sử dụng đơn giản hoặc chung chung. Hiển thị chuyển đổi
7 và tất cảimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
31 được chuyển trực tiếp sangimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
32 mặc định. Thành phần này chấp nhận tất cảimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Tất cả các đạo cụ không xác định được chuyển qua thành phần
3. Chỉ các đạo cụ của Nútimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
35,import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
36 vàimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
37 được chuyển đến nút chuyển đổi, cùng với các đạo cụ liên quan đến menu được chuyển đếnimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
32import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
NameTypeDefaultDescriptionalign
"bắt đầu". "chấm dứt". {m. "bắt đầu". "chấm dứt" }. { md. "bắt đầu". "chấm dứt" }. { lg. "bắt đầu". "chấm dứt" }. { xl. "bắt đầu". "chấm dứt"}. {xxl. "bắt đầu". "chấm dứt"}
vô hiệu hóaCho phép Dropdown lật trong trường hợp phần tử tham chiếu bị chồng chéo. Để biết thêm thông tin tham khảo Popper. tài liệu lật của js
hrefMột
39 được chuyển đến thành phần Chuyển đổiTôiimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Thuộc tính id html cho nút Chuyển đổi, cần thiết cho các công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình
thực đơnVai tròVai trò có thể truy cập ARIA được áp dụng cho thành phần Menu. Khi được đặt thành 'menu', Danh sách thả xuống
thực đơnBiến thểBiến thể màu menu
Bỏ qua điều này sẽ sử dụng màu sáng mặc định
trong một cái nhấp chuộtTrình xử lý
60 được chuyển đến thành phần Chuyển đổikết xuấtMenuOnMountimport ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample[] {
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map[
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase[]}
Action
Another action
Separated link
export default VariantsExample;
Có hiển thị menu thả xuống trong DOM trước lần đầu tiên nó được hiển thị hay không
rootCloseEventSự kiện nào khi được kích hoạt bên ngoài thành phần sẽ khiến nó bị đóng
xem để biết thêm chi tiết
kích thướcBiến thể kích thước thành phần
tiêu đề bắt buộcNội dung của Nút không chuyển đổi
khác nhauCác biến thể phong cách trực quan hoặc theo ngữ cảnh của thành phần
bsPrefixThay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp sửa đổi. Đây là một lối thoát hiểm để làm việc với css bootstrap được tùy chỉnh nhiều