Hướng dẫn bootstrap 4 accordion - bootstrap 4 accordion

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. 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.
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.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook Facebook

1- Bootstrap Collapse

Bootstrap Collapse là một thành phần hữu ích nó giúp ẩn hoặc hiện một "vùng" (area) trên trang, người dùng có thể chủ động mở rộng (expand) một "vùng" để xem nội dung tại đó, hoặc ẩn nó để tiết kiệm không gian. là một thành phần hữu ích nó giúp ẩn hoặc hiện một "vùng" (area) trên trang, người dùng có thể chủ động mở rộng (expand) một "vùng" để xem nội dung tại đó, hoặc ẩn nó để tiết kiệm không gian.

Collapse

    What is Lorem Ipsum?


   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ...





    Why do we use it?


   It is a long established fact that a reader will be distracted by the
   readable content of a page when looking at its layout...

Xem ví dụ đầy đủ:

collapse-example.html

   
      
      
      
   
   
      

         
Collapse Example

         
             What is Lorem Ipsum?
         
         

            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ...
         

         



         
             Why do we use it?
         
         

            It is a long established fact that a reader will be distracted by the
            readable content of a page when looking at its layout...
         
      
      
      
      
   

Collapse bao gồm 2 thành phần, button (hoặc Link) và mục tiêu (target), khi người dùng nhấn vào button, mục tiêu sẽ được ẩn hoặc hiện. Bootstrap sử dụng jQuery để xử lý hoạt động này. bao gồm 2 thành phần, button (hoặc Link) và mục tiêu (target), khi người dùng nhấn vào button, mục tiêu sẽ được ẩn hoặc hiện. Bootstrap sử dụng jQuery để xử lý hoạt động này.

1. Ban đầu lớp .collapse được áp dụng cho mục tiêu (target), lúc này mục tiêu đang ẩn..collapse được áp dụng cho mục tiêu (target), lúc này mục tiêu đang ẩn.
2. Người dùng nhấn vào button, lớp .collapsing được áp dụng cho mục tiêu. Bạn sẽ thấy mục tiêu đang được mở rộng (expand).button, lớp .collapsing được áp dụng cho mục tiêu. Bạn sẽ thấy mục tiêu đang được mở rộng (expand).
3. Cuối cùng khi nội dung đã được hiển thị hoàn toàn, mục tiêu sẽ được thiết lập lớp .collapse.show.collapse.show

2- Nhiều mục tiêu (Multi Targets)

Bạn có thể chỉ định nhiều mục tiêu (target) cho một button (hoặc Link) bằng cách sử dụng jQuery Selector, điều này có nghĩa khi người dùng nhấn vào button nhiều mục tiêu sẽ ẩn hoặc hiện. button (hoặc Link) bằng cách sử dụng jQuery Selector, điều này có nghĩa khi người dùng nhấn vào button nhiều mục tiêu sẽ ẩn hoặc hiện.

Multi Target

   
     Show/Hide Target 1
   
   
     Show/Hide Target 2
   
   
     Toggle both Targets
   



   

      

         

            Lorem Ipsum is simply dummy text of the printing and typesetting industry...
         
      
   
   

      

         

            Anim pariatur cliche reprehenderit,
            enim eiusmod high life accusamus terry richardson ad squid....
         
      
   

 

3- Accordion

Accordion là một thành phần giao diện, nó được tạo thành từ nhiều ".card" xếp chồng lên nhau theo chiều thẳng đứng. Mỗi .card có thể được mở rộng (expand) hoặc thu nhỏ (collapse) tùy thuộc vào việc cấu hình. là một thành phần giao diện, nó được tạo thành từ nhiều ".card" xếp chồng lên nhau theo chiều thẳng đứng. Mỗi .card có thể được mở rộng (expand) hoặc thu nhỏ (collapse) tùy thuộc vào việc cấu hình.

Đây là hình ảnh minh họa cấu trúc của một Accordion:Accordion:

accordion-example.html

   
      
      
      
   
   
      

         
Accordion Example

         

            

               

                  

                     
                     Javascript
                     
                  
               
               

                  

                     JavaScript is a scripting or programming language that
                     allows you to implement complex things on web pages ..
                  
               
            

            

               

                  

                     
                     Css
                     
                  
               
               

                  

                     CSS stands for Cascading Style Sheets.
                     CSS describes how HTML elements are to be displayed on screen,
                     paper, or in other media ..
                  
               
            

            

               

                  

                     
                     Bootstrap
                     
                  
               
               

                  

                     Bootstrap is a free front-end framework for faster and easier web development.
                     Bootstrap includes HTML and CSS based design templates for typography ...