Hướng dẫn dropdown menu bootstrap 5 - menu thả xuống bootstrap 5

1- Bootstrap Dropdown

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: 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

   
   Tutorials
   
   

      Javascript
      Css
      

      Bootstrap
   

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


         

            
             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-* ???

   
   Tutorial
   
   

      Javascript
      Css
      

      Bootstrap
   

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?