Javascript Css
BootstrapHướng dẫn dropdown menu bootstrap 5 - menu thả xuống bootstrap 5
Cấu trúc của Dropdown được mô tả một cách đơn giản như hình minh họa dưới đây: Dropdown được mô tả một cách đơn giản như hình minh họa dưới đây: Dropdown được mô tả một cách đơn giản như hình minh họa dưới đây:
Xem ví dụ đầy đủ:
dropdown-example.html
Dropdown Example
Dropdown Example
Tutorials
Javascript
Css
Bootstrap
Các thuộc tính aria-* [aria-haspopup, aria-expanded,..] là các thuộc tính của HTML5, bạn có thể không cần quan tâm đến chúng. Và nó không ảnh hưởng đến các thành phần của Bootstrap, chúng thường sử dụng như một gợi ý cho các thiết bị như Screen Reader [Thiết bị đọc màn hình cho người mù]. aria-* [aria-haspopup, aria-expanded,..] là các thuộc tính của HTML5, bạn có thể không cần quan tâm đến chúng. Và nó không ảnh hưởng đến các thành phần của Bootstrap, chúng thường sử dụng như một gợi ý cho các thiết bị như Screen Reader [Thiết bị đọc màn hình cho người mù]. aria-* [aria-haspopup, aria-expanded,..] là các thuộc tính của HTML5, bạn có thể không cần quan tâm đến chúng. Và nó không ảnh hưởng đến các thành phần của Bootstrap, chúng thường sử dụng như một gợi ý cho các thiết bị như Screen Reader [Thiết bị đọc màn hình cho người mù].
aria-* ???
2- Split Button Dropdown
Split Button Dropdown mà bạn nhìn thấy trên giao diện, nó giống như một Button được chia làm 2 phần, bên trái và bên phải. Bên trái hoạt động như một button thông thường, còn bên phải hoạt động như một Menu. Thực tế thì nó là 2 button nằm rất sát nhau, và nằm trong cùng một ".btn-group". Dưới đây là cấu trúc của Split Button Dropdown: mà bạn nhìn thấy trên giao diện, nó giống như một Button được chia làm 2 phần, bên trái và bên phải. Bên trái hoạt động như một button thông thường, còn bên phải hoạt động như một Menu. Thực tế thì nó là 2 button nằm rất sát nhau, và nằm trong cùng một ".btn-group". Dưới đây là cấu trúc của Split Button Dropdown: mà bạn nhìn thấy trên giao diện, nó giống như một Button được chia làm 2 phần, bên trái và bên phải. Bên trái hoạt động như một button thông thường, còn bên phải hoạt động như một Menu. Thực tế thì nó là 2 button nằm rất sát nhau, và nằm trong cùng một ".btn-group". Dưới đây là cấu trúc của Split Button Dropdown:
Split Button Dropdown
Go to Home Page
Toggle Dropdown
Javascript
Css
Bootstrap
Chú ý: Lớp .sr-only [Screen Reader Only] là một lớp ẩn. Nó chỉ có ý nghĩa đối với các thiết bị đọc màn hình [Screen Reader] [Một thiết bị dành cho người mù]. .sr-only [Screen Reader Only] là một lớp ẩn. Nó chỉ có ý nghĩa đối với các thiết bị đọc màn hình [Screen Reader] [Một thiết bị dành cho người mù]. .sr-only [Screen Reader Only] là một lớp ẩn. Nó chỉ có ý nghĩa đối với các thiết bị đọc màn hình [Screen Reader] [Một thiết bị dành cho người mù].
3- .dropdown, .dropup, dropright, .dropleft
Theo mặc định Menu sẽ hiển thị theo chiều xuống [down], tuy nhiên bạn cũng có thể thiết lập hành vi khác cho nó, chẳng hạn hiển thị bên trái, bên phải hoặc hiển thị theo chiều lên [up]. Các hành vi đó giống như hình minh họa dưới đây: Menu sẽ hiển thị theo chiều xuống [down], tuy nhiên bạn cũng có thể thiết lập hành vi khác cho nó, chẳng hạn hiển thị bên trái, bên phải hoặc hiển thị theo chiều lên [up]. Các hành vi đó giống như hình minh họa dưới đây: Menu sẽ hiển thị theo chiều xuống [down], tuy nhiên bạn cũng có thể thiết lập hành vi khác cho nó, chẳng hạn hiển thị bên trái, bên phải hoặc hiển thị theo chiều lên [up]. Các hành vi đó giống như hình minh họa dưới đây:
Chú ý rằng, mặc dù bạn thiết lập hướng để Menu hiển thị, nhưng điều đó chỉ là một gợi ý, nó không được đảm bảo trong mọi tình huống, chẳng hạn bạn thiết lập để Menu hiển thị bên phải, nhưng vùng không gian bên phải không đủ nó sẽ hiển thị bên trái. Menu hiển thị, nhưng điều đó chỉ là một gợi ý, nó không được đảm bảo trong mọi tình huống, chẳng hạn bạn thiết lập để Menu hiển thị bên phải, nhưng vùng không gian bên phải không đủ nó sẽ hiển thị bên trái. Menu hiển thị, nhưng điều đó chỉ là một gợi ý, nó không được đảm bảo trong mọi tình huống, chẳng hạn bạn thiết lập để Menu hiển thị bên phải, nhưng vùng không gian bên phải không đủ nó sẽ hiển thị bên trái.
.dropdown .dropright .dropup .dropleft
.dropright
Javascript
Bootstrap
Button
Toggle Dropdown
Javascript
Bootstrap
4- Kích thước của Button
Theo mặc định các Button có kích thước .btn-md "Medium" [Trung bình]. Tuy nhiên bạn có thể thiết lập cho nó kích thước khác bằng cách sử dung lớp .btn-lg [Large] để có một Button kích thước lớn hơn, hoặc sử dụng lớp .btn-sm [Small] để có một Button kích thước nhỏ hơn. Button có kích thước .btn-md "Medium" [Trung bình]. Tuy nhiên bạn có thể thiết lập cho nó kích thước khác bằng cách sử dung lớp .btn-lg [Large] để có một Button kích thước lớn hơn, hoặc sử dụng lớp .btn-sm [Small] để có một Button kích thước nhỏ hơn.Button có kích thước .btn-md "Medium" [Trung bình]. Tuy nhiên bạn có thể thiết lập cho nó kích thước khác bằng cách sử dung lớp .btn-lg [Large] để có một Button kích thước lớn hơn, hoặc sử dụng lớp .btn-sm [Small] để có một Button kích thước nhỏ hơn.
.btn-sm .btn-lg
Small
Javascript
Css
Bootstrap
5- Menu Header
.dropdown-header
Tutorials
Frontend Tutorials:
Javascript
Css
Backend Tutorials
Java
6- Menu Forms
Bạn có thể đặt Form vào trong ".dropdown-menu" giống như ví dụ dưới đây: Form vào trong ".dropdown-menu" giống như ví dụ dưới đây: Form vào trong ".dropdown-menu" giống như ví dụ dưới đây:
Menu Form
Login
Email address
Password
Remember me
Sign in
New around here? Sign up
Forgot password?