Hướng dẫn bootstrap 4 select dropdown - bootstrap 4 chọn menu thả xuống
Chuyển đổi lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và nhiều hơn nữa với plugin thả xuống Bootstrap.
Tổng quan
Dropdowns có thể bật, lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và nhiều hơn nữa. Họ đã thực hiện tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Họ đã chuyển đổi bằng cách nhấp vào, không phải bằng cách lơ lửng; Đây là một quyết định thiết kế có chủ ý.
Dropdowns được xây dựng trên thư viện bên thứ ba, popper.js, cung cấp định vị động và phát hiện chế độ xem. Hãy chắc chắn bao gồm popper.min.js trước bootstrap từ javascript hoặc sử dụng
Dropdown link
Action
Another action
Something else here
9 /
Action
Action
Another action
Something else here
Separated link
0 có chứa popper.js. Popper.js không được sử dụng để định vị các thả xuống ở Navbars mặc dù định vị động là không cần thiết.Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầu
Action
Action
Another action
Something else here
Separated link
1.Khả năng tiếp cận
Tiêu chuẩn WAI ARIA xác định một tiện ích
Action
Action
Another action
Something else here
Separated link
2 thực tế, nhưng điều này là cụ thể cho các menu giống như ứng dụng kích hoạt các hành động hoặc chức năng. Menu ARIA chỉ có thể chứa các mục menu, các mục menu hộp kiểm, các mục menu nút radio, nhóm nút radio và các menu phụ.Mặt khác, thả xuống Bootstrap, được thiết kế chung chung và áp dụng cho nhiều tình huống và cấu trúc đánh dấu. Chẳng hạn, có thể tạo các thả xuống có chứa các đầu vào và điều khiển hình thức bổ sung, chẳng hạn như các trường tìm kiếm hoặc biểu mẫu đăng nhập. Vì lý do này, Bootstrap không mong đợi [cũng không tự động thêm] bất kỳ thuộc tính
Action
Action
Another action
Something else here
Separated link
3 và
Action
Action
Another action
Something else here
Separated link
4 cần thiết cho các menu ARIA thực sự. Các tác giả sẽ phải bao gồm các thuộc tính cụ thể hơn này.Tuy nhiên, Bootstrap thực hiện hỗ trợ tích hợp cho hầu hết các tương tác menu bàn phím tiêu chuẩn, chẳng hạn như khả năng di chuyển qua các yếu tố
Action
Action
Another action
Something else here
Separated link
5 riêng lẻ bằng các phím con trỏ và đóng menu bằng phím ESC.Ví dụ
Bao bọc chuyển đổi thả xuống [nút hoặc liên kết của bạn] và menu thả xuống trong
Action
Action
Another action
Something else here
Separated link
6 hoặc một phần tử khác tuyên bố
Action
Action
Another action
Something else here
Separated link
7. Các thả xuống có thể được kích hoạt từ các yếu tố
Action
Action
Another action
Something else here
Separated link
8 hoặc
Action
Action
Another action
Something else here
Separated link
9 để phù hợp hơn với nhu cầu tiềm năng của bạn.Thả xuống một nút
Bất kỳ
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
0 nào cũng có thể được biến thành một chuyển đổi thả xuống với một số thay đổi đánh dấu. Tại đây, cách bạn có thể đưa chúng vào làm việc với các yếu tố
Action
Action
Another action
Something else here
Separated link
9:
Dropdown button
Action
Another action
Something else here
Và với các yếu tố
Action
Action
Another action
Something else here
Separated link
8:
Dropdown link
Action
Another action
Something else here
Phần tốt nhất là bạn cũng có thể làm điều này với bất kỳ biến thể nút nào:
Action
Action
Another action
Something else here
Separated link
Nút thả xuống
Tương tự, tạo các thả xuống nút phân chia với gần như đánh dấu giống như các thả xuống nút đơn, nhưng với việc bổ sung
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
3 cho khoảng cách thích hợp xung quanh Caret thả xuống.Chúng tôi sử dụng lớp bổ sung này để giảm 25% theo chiều ngang
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
4 ở hai bên của CARET và loại bỏ
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
5 mà đã thêm vào để thả xuống nút thông thường. Những thay đổi bổ sung đó giữ cho Caret tập trung vào nút phân chia và cung cấp một khu vực nhấn có kích thước phù hợp hơn bên cạnh nút chính.
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
Kích thước
Dropdown Nút hoạt động với các nút thuộc mọi kích cỡ, bao gồm các nút thả xuống mặc định và phân chia.
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
Biến thể bỏ rơi
Các menu thả xuống kích hoạt các phần tử trên bằng cách thêm
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
6 vào phần tử cha.
Dropup
Split dropup
Toggle Dropdown
Biến thể thả
Các menu thả xuống kích hoạt ở bên phải của các phần tử bằng cách thêm
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
7 vào phần tử cha.
Dropright
Split dropright
Toggle Dropright
Biến thể Dropleft
Các menu thả xuống kích hoạt ở bên trái của các phần tử bằng cách thêm
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
8 vào phần tử cha.
Dropleft
Toggle Dropleft
Split dropleft
Trong lịch sử, nội dung menu thả xuống phải là liên kết, nhưng điều đó không còn là trường hợp với V4. Bây giờ bạn có thể tùy chọn sử dụng các yếu tố
Action
Action
Another action
Something else here
Separated link
9 trong các lần thả xuống thay vì chỉ
Action
Action
Another action
Something else here
Separated link
8s.
Dropdown
Action
Another action
Something else here
Theo mặc định, một menu thả xuống được tự động định vị 100% từ trên cùng và dọc theo bên trái của cha mẹ. Thêm
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
1 vào
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
2 để căn chỉnh menu thả xuống.
Đứng lên! Các thả xuống được định vị nhờ popper.js [ngoại trừ khi chúng được chứa trong một thanh hải quân]. Dropdowns are positioned thanks
to Popper.js [except when they are contained in a navbar].
Right-aligned menu
Action
Another action
Something else here
Thêm một tiêu đề vào các phần của các phần hành động trong bất kỳ menu thả xuống nào.
Dropdown link
Action
Another action
Something else here
0Các nhóm các mục menu liên quan với một bộ chia.
Dropdown link
Action
Another action
Something else here
1Đặt một biểu mẫu trong menu thả xuống, hoặc biến nó thành một menu thả xuống và sử dụng các tiện ích lề hoặc phần đệm để cung cấp cho nó không gian âm bạn yêu cầu.
Dropdown link
Action
Another action
Something else here
2
Dropdown link
Action
Another action
Something else here
3Thêm
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
3 vào các mục trong bản thả xuống để tạo kiểu chúng là hoạt động.style them as active.
Dropdown link
Action
Another action
Something else here
4
Thêm
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
4 vào các mục trong danh sách thả xuống để tạo kiểu chúng là vô hiệu hóa.style them as disabled.
Dropdown link
Action
Another action
Something else here
5Cách sử dụng
Thông qua các thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống bật nội dung ẩn [menu thả xuống] bằng cách bật lớp
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
5 trên mục danh sách cha mẹ. Thuộc tính
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
6 được dựa vào để đóng các menu thả xuống ở cấp độ ứng dụng, do đó, một ý tưởng tốt là luôn luôn sử dụng nó.Trên các thiết bị hỗ trợ cảm ứng, việc mở một thả xuống thêm trống [
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
7]
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
8 Trình xử lý cho trẻ em ngay lập tức của yếu tố
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
9. Việc hack xấu xí này phải thừa nhận là cần thiết để làm việc xung quanh một sự giải quyết trong phái đoàn sự kiện iOS, điều này sẽ ngăn chặn một cú chạm ở bất cứ nơi nào bên ngoài việc thả xuống khi kích hoạt mã đóng lại thả xuống. Sau khi thả xuống, các trình xử lý
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
8 trống bổ sung này được gỡ bỏ.Thông qua các thuộc tính dữ liệu
Thêm
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
6 vào một liên kết hoặc nút để chuyển một thả xuống.
Dropdown link
Action
Another action
Something else here
6Thông qua JavaScript
Gọi các thả xuống qua JavaScript:
Dropdown link
Action
Another action
Something else here
7
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
6 vẫn được yêu cầuBất kể bạn có gọi cho thả xuống qua JavaScript hay thay vào đó sử dụng Data-API,
Large button
...
Large split button
Toggle Dropdown
...
Small button
...
Small split button
Toggle Dropdown
...
6 luôn được yêu cầu phải có mặt trên phần tử kích hoạt thả xuống.Tùy chọn
Các tùy chọn có thể được truyền qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào
Dropup
Split dropup
Toggle Dropdown
4, như trong
Dropup
Split dropup
Toggle Dropdown
5.
TênLoại hìnhMặc địnhSự mô tả
| bù lại | Số | Chuỗi | hàm số | 0 | Bù đắp cho thả xuống so với mục tiêu của nó. Để biết thêm thông tin, hãy tham khảo các tài liệu bù của popper.js. |
| Lật | Boolean | thật | Cho phép thả xuống để lật trong trường hợp chồng chéo trên phần tử tham chiếu. Để biết thêm thông tin, hãy tham khảo tài liệu lật của popper.js. |
| ranh giới | Chuỗi | yếu tố | 'cuộn giấy' | Ranh giới ràng buộc tràn của menu thả xuống. Chấp nhận các giá trị của
Dropup
Split dropup
Toggle Dropdown
6,
Dropup
Split dropup
Toggle Dropdown
7,
Dropup
Split dropup
Toggle Dropdown
8 hoặc tham chiếu htmlelement [chỉ JavaScript]. Để biết thêm thông tin, hãy tham khảo tài liệu phòng ngừa của Popper.js. |
Lưu ý Khi
Dropup
Split dropup
Toggle Dropdown
9 được đặt thành bất kỳ giá trị nào khác ngoài
Dropup
Split dropup
Toggle Dropdown
8, kiểu
Dropright
Split dropright
Toggle Dropright
1 được áp dụng cho thùng chứa
Action
Action
Another action
Something else here
Separated link
6.Phương pháp
Phương phápSự mô tả
| bù lại | Số | Chuỗi | hàm số |
| Bù đắp cho thả xuống so với mục tiêu của nó. Để biết thêm thông tin, hãy tham khảo các tài liệu bù của popper.js. | Lật |
| Boolean | thật |
Cho phép thả xuống để lật trong trường hợp chồng chéo trên phần tử tham chiếu. Để biết thêm thông tin, hãy tham khảo tài liệu lật của popper.js.
ranh giới
Chuỗi | yếu tốSự mô tả
| bù lại | Số | Chuỗi | hàm số |
| Bù đắp cho thả xuống so với mục tiêu của nó. Để biết thêm thông tin, hãy tham khảo các tài liệu bù của popper.js. | Lật |
| Boolean | thật |
| Cho phép thả xuống để lật trong trường hợp chồng chéo trên phần tử tham chiếu. Để biết thêm thông tin, hãy tham khảo tài liệu lật của popper.js. | ranh giới |
Dropdown link
Action
Another action
Something else here
8