Hướng dẫn bootstrap dropdown menu - trình đơn thả xuống bootstrap
|
Để tạo ra một DropDown menu trình bày HTML theo cấu trúc sau: Show
Ví dụ
Tạo Split buttonThay vì sử dụng phần tử 1 có thể chuyển sang sử dụng phần tử 2 (Xem phần Nút bấm) để tạo ra loại Nút bấm chia làm 2 phần, phần mũi tên bấm vào đổ xuống một Menu 4. Ngoài ra phần nút bấm để đổ menu cho thêm lớp 4 Để tạo ra mũi tên hướng lên, và Menu xuất hiện phía trên Nút bấm thì ở phần tử gốc cho thêm 5. Ngoài ra còn có 6, 7
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.  1- Bootstrap DropdownDropdown về cơ bản là một Component bao gồm một button và một menu, khi người dùng nhấn vào Button thì Menu sẽ xuất hiện cho phép người dùng lựa chọn một giá trị từ một danh sách có sẵn. Dưới đây là hình ảnh của một vài Dropdown: về cơ bản là một Component bao gồm một button và một menu, khi người dùng nhấn vào Button thì Menu sẽ xuất hiện cho phép người dùng lựa chọn một giá trị từ một danh sách có sẵn. Dưới đây là hình ảnh của một vài Dropdown: Dropdown 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: Xem ví dụ đầy đủ: dropdown-example.html
2- Split Button DropdownSplit 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
3- .dropdown, .dropup, dropright, .dropleftTheo 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: 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. .dropdown .dropright .dropup .dropleft 4- Kích thước của ButtonTheo 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. .btn-sm .btn-lg 5- Menu Header.dropdown-header 6- Menu FormsBạ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: Menu Form 0 |
