Tôi có một chiếc Bootstrap 5 Navbar mặc định, nhưng khi tôi cố gắng thả xuống bên phải, danh sách các mục thả xuống ra khỏi màn hình bên phải. Điều này //ibb.co/jf3ghfk.
Tôi đã thử giải pháp được đưa ra cho người khác, ví dụ: Bootstrap 4: Menu thả xuống sẽ tắt bên phải màn hình
Và đây: Bootstrap: Vị trí của menu thả xuống liên quan đến mục Navbar
.
Đây là những gì không hoạt động tốt:
-
Username
Edit settings
Edit profile page
Show profile page
Create profile page
Và đây là mã Navbar của tôi:
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
Regards.
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ủ ý.
Các thả xuống được xây dựng trên thư viện bên thứ ba, Popper, 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
6 /
Dropdown link
Action
Another action
Something else here
7 có chứa popper. Popper isn đượ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.Khả năng tiếp cận
Tiêu chuẩn WAI ARIA xác định một tiện ích
Dropdown link
Action
Another action
Something else here
8 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
Dropdown link
Action
Another action
Something else here
9 và
Action
Action
Another action
Something else here
Separated link
0 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 phần tử
Action
Action
Another action
Something else here
Separated link
1 riêng lẻ bằng cách sử dụng các phím con trỏ và đóng menu với 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
2 hoặc một phần tử khác khai báo
Action
Action
Another action
Something else here
Separated link
3. 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
4 hoặc
Action
Action
Another action
Something else here
Separated link
5 để phù hợp hơn với nhu cầu tiềm năng của bạn. Các ví dụ được hiển thị ở đây sử dụng các yếu tố
Action
Action
Another action
Something else here
Separated link
6 ngữ nghĩa khi thích hợp, nhưng đánh dấu tùy chỉnh được hỗ trợ.Nút đơn
Bất kỳ
Action
Action
Another action
Something else here
Separated link
7 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
5:
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
4:
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 chia
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
0 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
1 ở hai bên của CARET và loại bỏ
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
2 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
...
Thả xuống tối
Chọn tham gia các thả xuống tối hơn để phù hợp với phong cách hải quân tối hoặc kiểu tùy chỉnh bằng cách thêm
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
3 vào
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
4 hiện có. Không có thay đổi được yêu cầu đối với các mục thả xuống.
Dropdown button
Action
Another action
Something else here
Separated link
Và đặt nó vào sử dụng trong một chiếc thuyền nang:
Navbar
Dropdown
Action
Another action
Something else here
Hướng
RTL
Các hướng được nhân đôi khi sử dụng bootstrap trong RTL, có nghĩa là
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
5 sẽ xuất hiện ở phía bên phải.Thả xuống
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.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
0Thả
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.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
1Dropleft
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
5 vào phần tử cha.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
2Bạn có thể sử dụng các yếu tố
Action
Action
Another action
Something else here
Separated link
4 hoặc
Action
Action
Another action
Something else here
Separated link
5 làm mục thả xuống.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
3Bạn cũng có thể tạo các mục thả xuống không tương tác với
Large button
...
Large split button
Toggle Dropdown
...
1. Hãy thoải mái tạo kiểu hơn với CSS tùy chỉnh hoặc các tiện ích văn bản.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
4Tích cực
Thêm
Large button
...
Large split button
Toggle Dropdown
...
2 vào các mục trong bản thả xuống để tạo kiểu chúng là hoạt động. Để truyền tải trạng thái hoạt động để hỗ trợ các công nghệ, hãy sử dụng thuộc tính
Large button
...
Large split button
Toggle Dropdown
...
3 - sử dụng giá trị
Large button
...
Large split button
Toggle Dropdown
...
4 cho trang hiện tại hoặc
Large button
...
Large split button
Toggle Dropdown
...
5 cho mục hiện tại trong một tập hợp.style them as active. To convey the active state to assistive technologies, use the
Large button
...
Large split button
Toggle Dropdown
...
3 attribute — using the
Large button
...
Large split button
Toggle Dropdown
...
4 value for the current page, or
Large button
...
Large split button
Toggle Dropdown
...
5 for the current item in a set.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
5Vô hiệu hóa
Thêm
Large button
...
Large split button
Toggle Dropdown
...
6 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.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
6Theo 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ẹ. Bạn có thể thay đổi điều này với các lớp
Large button
...
Large split button
Toggle Dropdown
...
7 định hướng, nhưng bạn cũng có thể kiểm soát chúng với các lớp sửa đổi bổ sung.Thêm
Large button
...
Large split button
Toggle Dropdown
...
8 vào
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
4 để căn chỉnh menu thả xuống. Các hướng được nhân đôi khi sử dụng bootstrap trong RTL, có nghĩa là
Large button
...
Large split button
Toggle Dropdown
...
8 sẽ xuất hiện ở phía bên trái.
Đứng lên! Các thả xuống được định vị nhờ Popper ngoại trừ khi chúng được chứa trong một chiếc Navbar. Dropdowns are positioned thanks to Popper except when they are contained in a navbar.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
7Liên kết đáp ứng
Nếu bạn muốn sử dụng căn chỉnh đáp ứng, vô hiệu hóa định vị động bằng cách thêm thuộc tính
Small button
...
Small split button
Toggle Dropdown
...
1 và sử dụng các lớp biến thể đáp ứng.Để sắp xếp đúng menu thả xuống với điểm dừng đã cho hoặc lớn hơn, thêm
Small button
...
Small split button
Toggle Dropdown
...
2.right the dropdown menu with the given breakpoint or larger, add
Small button
...
Small split button
Toggle Dropdown
...
2.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
8Để căn chỉnh bên trái menu thả xuống với điểm dừng đã cho hoặc lớn hơn, thêm
Large button
...
Large split button
Toggle Dropdown
...
8 và
Small button
...
Small split button
Toggle Dropdown
...
4.left the dropdown menu with the given breakpoint or larger, add
Large button
...
Large split button
Toggle Dropdown
...
8 and
Small button
...
Small split button
Toggle Dropdown
...
4.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
9Lưu ý rằng bạn không cần thêm thuộc tính
Small button
...
Small split button
Toggle Dropdown
...
1 vào các nút thả xuống trong Navbars, vì Popper isn không được sử dụng trong Navbars.Tùy chọn căn chỉnh
Lấy hầu hết các tùy chọn được hiển thị ở trên, ở đây, một bản demo bồn rửa nhà bếp nhỏ của các tùy chọn liên kết thả xuống khác nhau ở một nơi.
Dropdown button
Action
Another action
Something else here
0Nội dung menu
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 button
Action
Another action
Something else here
1Vách ngăn
Các nhóm các mục menu liên quan với một bộ chia.
Dropdown button
Action
Another action
Something else here
2Chữ
Đặt bất kỳ văn bản miễn phí nào trong menu thả xuống với văn bản và sử dụng các tiện ích khoảng cách. Lưu ý rằng bạn có thể cần các kiểu kích thước bổ sung để hạn chế chiều rộng menu.
Dropdown button
Action
Another action
Something else here
3Các hình thức
Đặ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 button
Action
Another action
Something else here
4
Dropdown button
Action
Another action
Something else here
5Tùy chọn thả xuống
Sử dụng
Small button
...
Small split button
Toggle Dropdown
...
6 hoặc
Small button
...
Small split button
Toggle Dropdown
...
7 để thay đổi vị trí của thả xuống.
Dropdown button
Action
Another action
Something else here
6Tự động đóng hành vi
Theo mặc định, menu thả xuống được đóng khi nhấp vào bên trong hoặc bên ngoài menu thả xuống. Bạn có thể sử dụng tùy chọn
Small button
...
Small split button
Toggle Dropdown
...
8 để thay đổi hành vi thả xuống này.
Dropdown button
Action
Another action
Something else here
7Sass
Biến
Biến cho tất cả các thả xuống:
Dropdown button
Action
Another action
Something else here
8Các biến cho Dark Dropdown:
Dropdown button
Action
Another action
Something else here
9Các biến cho các chất làm thân dựa trên CSS cho thấy tính tương tác của Dropdown:
Dropdown link
Action
Another action
Something else here
0Mixins
Mixin được sử dụng để tạo ra các chất làm thân dựa trên CSS và có thể được tìm thấy trong
Small button
...
Small split button
Toggle Dropdown
...
9.
Dropdown link
Action
Another action
Something else here
1Cá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 chuyển lớp
Dropdown button
Action
Another action
Something else here
Separated link
0 trên cha mẹ
Action
Toggle Dropdown
Action
Another action
Something else here
Separated link
4. Thuộc tính
Dropdown button
Action
Another action
Something else here
Separated link
2 đượ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 các trình xử lý
Dropdown button
Action
Another action
Something else here
Separated link
3 trống cho trẻ em ngay lập tức của yếu tố
Dropdown button
Action
Another action
Something else here
Separated link
4. 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 của 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ý
Dropdown button
Action
Another action
Something else here
Separated link
3 trống bổ sung này được gỡ bỏ.Thông qua các thuộc tính dữ liệu
Thêm
Dropdown button
Action
Another action
Something else here
Separated link
2 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
2Thông qua JavaScript
Gọi các thả xuống qua JavaScript:
Dropdown link
Action
Another action
Something else here
3
Dropdown button
Action
Another action
Something else here
Separated link
2 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,
Dropdown button
Action
Another action
Something else here
Separated link
2 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
Dropdown button
Action
Another action
Something else here
Separated link
9, như trong
Navbar
Dropdown
Action
Another action
Something else here
0. Đảm bảo thay đổi loại trường hợp của tên tùy chọn từ Camelcase sang trường hợp kebab khi chuyển các tùy chọn thông qua các thuộc tính dữ liệu. Ví dụ: thay vì sử dụng
Navbar
Dropdown
Action
Another action
Something else here
1, sử dụng
Navbar
Dropdown
Action
Another action
Something else here
2.
TênLoại hìnhMặc địnhSự mô tả
Navbar
Dropdown
Action
Another action
Something else here
3Chuỗi | yếu tố
Navbar
Dropdown
Action
Another action
Something else here
4Ranh giới ràng buộc tràn của menu thả xuống [chỉ áp dụng cho công cụ sửa đổi phòng ngừa của Popper]. Theo mặc định, đó là
Navbar
Dropdown
Action
Another action
Something else here
4 và có thể chấp nhận tham chiếu htmlelement [chỉ thông qua JavaScript]. Để biết thêm thông tin, hãy tham khảo các tài liệu phát hiện của Popper.
Navbar
Dropdown
Action
Another action
Something else here
6Chuỗi | yếu tố | sự vật
Navbar
Dropdown
Action
Another action
Something else here
7Yếu tố tham chiếu của menu thả xuống. Chấp nhận các giá trị của
Navbar
Dropdown
Action
Another action
Something else here
7,
Navbar
Dropdown
Action
Another action
Something else here
9, tham chiếu htmlelement hoặc một đối tượng cung cấp
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
00. Để biết thêm thông tin, hãy tham khảo các tài liệu xây dựng của Popper và tài liệu phần tử ảo.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
01
sợi dây
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
02
Theo mặc định, chúng tôi sử dụng popper để định vị động. Vô hiệu hóa điều này với
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
03.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
04
Mảng | Chuỗi | hàm số
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
05
Bù đắp cho thả xuống so với mục tiêu của nó. Bạn có thể truyền một chuỗi trong các thuộc tính dữ liệu với các giá trị được phân tách bằng dấu phẩy như:
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
06Khi một hàm được sử dụng để xác định phần bù, nó được gọi với một đối tượng chứa vị trí popper, tham chiếu và popper là đối số đầu tiên của nó. Nút DOM phần tử kích hoạt được truyền dưới dạng đối số thứ hai. Hàm phải trả về một mảng với hai số:
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
07.Để biết thêm thông tin, hãy tham khảo các tài liệu bù của Popper.
Small button
...
Small split button
Toggle Dropdown
...
8Boolean | sợi dây
Large button
...
Large split button
Toggle Dropdown
...
5Định cấu hình hành vi đóng tự động của thả xuống:
Large button
...
Large split button
Toggle Dropdown
...
5 - Dropdown sẽ được đóng bằng cách nhấp vào bên ngoài hoặc bên trong menu thả xuống.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
11 - Dropdown sẽ được đóng bằng cách nhấp vào nút chuyển đổi và gọi thủ công phương thức
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
12 hoặc
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
13. [Cũng sẽ không bị đóng bằng cách nhấn phím ESC]
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
14 - Dropdown sẽ được đóng [chỉ] bằng cách nhấp vào bên trong menu thả xuống.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
15 - Dropdown sẽ được đóng [chỉ] bằng cách nhấp vào bên ngoài menu thả xuống.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
16
null | đối tượng | hàm số
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
17
Để thay đổi cấu hình popper mặc định của Bootstrap, hãy xem cấu hình của Popper.
Khi một hàm được sử dụng để tạo cấu hình popper, nó được gọi với một đối tượng chứa cấu hình popper mặc định của Bootstrap. Nó giúp bạn sử dụng và hợp nhất mặc định với cấu hình của riêng bạn. Hàm phải trả về một đối tượng cấu hình cho popper.
Sử dụng chức năng với
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
16
Dropdown link
Action
Another action
Something else here
4Phương pháp
Phương phápSự mô tả
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
13
Bật menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng được xếp hạng.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
20
Hiển thị menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng tab.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
12
Ẩn menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng tab.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
22
Cập nhật vị trí của một phần tử thả xuống.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
23
Phá hủy một yếu tố thả xuống. [Xóa dữ liệu được lưu trữ trên phần tử DOM]
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
24
Phương thức tĩnh cho phép bạn có được thể hiện thả xuống được liên kết với phần tử DOM, bạn có thể sử dụng nó như thế này:
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
25
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
26
Phương thức tĩnh trả về một thể hiện thả xuống được liên kết với phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó không được khởi tạo. Bạn có thể sử dụng nó như thế này:
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
27
Sự kiện
Tất cả các sự kiện thả xuống được bắn vào phần tử chuyển đổi và sau đó sủi bọt. Vì vậy, bạn cũng có thể thêm người nghe sự kiện vào phần tử cha mẹ ____ 54. Các sự kiện
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
29 và
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
30 có thuộc tính
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
31 [chỉ khi loại sự kiện ban đầu là
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
32] chứa một đối tượng sự kiện cho sự kiện nhấp chuột.
Phương phápSự mô tả
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
13
Bật menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng được xếp hạng.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
20
Hiển thị menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng tab.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
12
Ẩn menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng tab.
Blog
-
Categories
-
Cat1
-
Cat2
-
Cat3
-
Add post
-
Add category
-
Logout
-
Sign in
-
{{ user.first_name }} {{ user.last_name }}
Edit settings
Edit profile page
Show profile page
Create profile page
22
Cập nhật vị trí của một phần tử thả xuống.
Dropdown link
Action
Another action
Something else here
5
Tại sao menu thả xuống của tôi không hoạt động bootstrap?
Tại sao menu thả xuống của tôi không hoạt động trong bootstrap? Giải pháp: Dropdown nên được chuyển đổi thông qua các thuộc tính dữ liệu hoặc sử dụng JavaScript. Trong chương trình trên, chúng tôi đã quên thêm một thuộc tính dữ liệu để việc thả xuống không hoạt động. Vì vậy, thêm dữ liệu-bs-toggle = "thả xuống" để chuyển đổi danh sách thả xuống.The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
Làm thế nào căn chỉnh thực đơn thả xuống trong trung tâm bootstrap?
Nút thả xuống có thể được định vị ở trung tâm của trang bằng cách đặt thuộc tính văn bản-align của DIV DIV của DROD DIV thành trung tâm.Ví dụ sau đây chứa một menu thả xuống Bootstrap đơn giản với một lớp được thêm vào lớp tôi.Tài sản của văn bản-Align: Trung tâm được thêm vào lớp.setting the “text-align” property of dropdown div to center. The following example contains a simple Bootstrap dropdown menu with an added class “my-menu”. The property “text-align: center” is added to the class.
Lớp nào chỉ ra một menu thả xuống trong bootstrap?
Lớp .Dropdown chỉ ra một menu thả xuống.Để mở menu thả xuống, sử dụng nút hoặc liên kết với một lớp .Dropdown-toggle và thuộc tính Data-Toggle = "Dropdown"..dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute.
Làm thế nào chúng ta có thể ẩn biểu tượng mũi tên khỏi bootstrap thả xuống?
Mỗi nút hoặc liên kết thả xuống Bootstrap đều có :: Sau khi chọn trong CSS.:: Sau khi bộ chọn thường được sử dụng để chèn một số văn bản sau nội dung của phần tử.Trong trường hợp này, nội dung là một mũi tên thả xuống.Để loại bỏ nó, chỉ cần làm cho nội dung đi 'không'.Người ta có thể sử dụng tính năng này để tạo các menu điều hướng trong các Navbars hàng đầu.make the content go 'none'. One can use this feature to create navigation menus in top navbars.
Chủ Đề