Bootstrap thả xuống ngoài màn hình

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

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;

8 chỉ ra một menu thả xuống

Để mở menu thả xuống, hãy sử dụng một nút hoặc liên kết có lớp

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à thuộc tí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;

0

Lớp

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 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ống

Thêm lớp

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;

2 vào một

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

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;

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ỏng

---

---

Tiêu đề thả xuống

Lớp

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 đượ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ể 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

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;

5 (có màu văn bản xám nhạt và biểu tượng "cấm đỗ xe" khi di chuột)

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

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;

6 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

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;

80

---

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

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;

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ống

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

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;

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ặ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;

2

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

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;

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ần

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;

7 và chấp nhận tất cả các đạo cụ giống nhau

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

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 để 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 đầu

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;

3

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

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;

5

Như với DropdownButton,

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;

51 được cung cấp dưới dạng thành phần tiện lợ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;

7

định cỡ

Danh sách thả xuống hoạt động với các nút ở mọi kích 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;

8

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

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;

52 vào mộ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;

53 hiện có. Ngoài ra, sử dụ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;

54 khi sử dụng thành phần

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;

55

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;

3

Sử dụ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;

54 trong mộ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;

57

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;

6

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á đỡ

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;

58

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;

8

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ỉ

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;

4s

Bạn cũng có thể tạo các mục thả xuống không tương tác vớ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;

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ỉ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;

1

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

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;

71 thà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,

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ặ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;

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;

30

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

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;

75 trên

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,

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ặ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;

4. Bạn có thể chỉ đị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;

79 hoặ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;

80 cho các điểm dừng khác nhau

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

Thêm tiêu đề vào các phần nhãn của hành độ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;

32

Tách các nhóm mục menu có liên quan bằng một dải phân cách

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;

33

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

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;

81

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;

81 được đặt thành giá trị 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;

83 và hoạt động như dự kiến. Bằng cách chọn

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;

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ài

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

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;

34

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

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 cơ bản hơn để chỉ định rõ ràng các thành phần Chuyển đổi và Menu

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;

35
trộn nó lên phong cách khôn ngoan

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

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;

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ệu

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

API

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;

89Sao chép mã nhập cho thành phần DropdownButton

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

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;

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 sang

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;

32 mặc định. Thành phần này chấp nhận tất cả

Tất cả các đạo cụ không xác định được chuyển qua thành phần

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;

3. Chỉ các đạo cụ của Nú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;

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 đến

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;

32

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óa

Cho 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

href

Mộ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;

39 được chuyển đến thành phần Chuyển đổi
Tôi

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ột

Trình xử lý

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;

60 được chuyển đến thành phần Chuyển đổi
kết xuấtMenuOnMount

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

rootCloseEvent

Sự 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ước

Biến thể kích thước thành phần

tiêu đề bắt buộc

Nội dung của Nút không chuyển đổi

khác nhau

Các biến thể phong cách trực quan hoặc theo ngữ cảnh của thành phần

bsPrefix

Thay đổ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