programming bootstrap

Nút danh sách bootstrap

Menu thả xuống Thuật ngữ đã trở nên quá quen thuộc với mỗi người của chúng ta, và với bootstrap, nó cũng được hỗ trợ một cách tốt nhất để người dùng dễ dàng tạo ra các menu xổ số một cách nhanh chóng và dễ dàng. hôm nay, chúng ta tiếp tục tìm hiểu về cách tạo menu thả xuống với Bootstrap như thế nào

Trước tiên, cần phải bao gồm mọi thứ bên trong bằng 1 thẻ


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

2 được gán lớp


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

3, lớp này sẽ định nghĩa cho toàn bộ nội dung bên trong phần kiểu dáng của nó do bootstrap hỗ trợ. Vui lòng xem đoạn mã dưới đây


  Dropdown
  
    Action
    Another action
    Something else here
    
    Separated link

Bây giờ, chúng ta hãy đi phân tích từng thành phần được bao bởi thẻ


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

2 được phân lớp


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

Đầu tiên là thẻ


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

6. Ở đây, các bạn thấy tôi sử dụng thẻ


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

6 để định nghĩa văn bản thả xuống. Trường hợp này là khi văn bản này được gàn 1 liên kết nào đó. Tuy nhiên, các bạn có thể thay thế thẻ ________ 16 bằng


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

1 đều được [trường hợp khi không sử dụng liên kết]

Trong thẻ


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

6 có 2 thành phần cần lưu ý


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

3 là thuộc tính riêng của bootstrap. Thuộc tính này hỗ trợ chúng tôi về hiệu ứng khi nhấp vào menu thả xuống

Lớp


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

4 nằm trong thẻ


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

5. Lớp này sẽ tạo ra 1 biểu tượng mũi tên quay xuống khi hiển thị lên trang web

Phần thứ 2 là phần được bao bọc bên trong thẻ


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

6 và được định nghĩa bằng lớp


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

7. Phần này được ẩn đi ở trạng thái bình thường và nó được hiển thị khi nhấp hoặc di chuột vào thẻ


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

6 bên trên

Project name

Home
About
Contact
Dropdown
- Action
- Another action
- Something else here
- Nav header
- Separated link
- One more separated link

9 cho 1 thẻ


  Dropdown
  
    Action
    Another action
    Something else here
    
    Separated link

0. Lúc này bạn sẽ không thể thao tác được với menu phần tử đó nữa

Project name

Home
About
Contact
Dropdown
- Action
- Another action
- Something else here
- Nav header
- Separated link
- One more separated link

Đoạn mã từ trên, khi hiển thị trên web sẽ như sau

Project name

Home
About
Contact
Dropdown
- Action
- Another action
- Something else here
- Nav header
- Separated link
- One more separated link

7 cho thẻ


  Dropdown
  
    Action
    Another action
    Something else here
    
    Separated link

0 thay vì thẻ


        
          
            
              Toggle navigation
              
              
              
            
            Project name
          
          
            
              Home
              About
              Contact
              
                Dropdown 
                
                  Action
                  Another action
                  Something else here
                  
                  Nav header
                  Separated link
                  One more separated link

2 như phần đầu tiên. Bởi vì menu thả xuống này được gán cho 1 menu phần tử trong 1 menu hệ thống. Như vậy, để thêm 1 menu thả xuống vào 1 menu hệ thống là rất đơn giản phải không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề