Bootstrap 4教程-Bootstrap 4 Collapse - 书目录

Bootstrap 4教程-Bootstrap 4 Collapse

Add collapsible content easily with Bootstrap’s .collapse and related classes.

You can make your content collapsible by adding data-toggle="collapse" to either a button or a hyperlink.

The button or link references the ID of the content to collapse.

Using a Link

Use the <a> tag with an href value of the ID of the content to collapse.

On the collapsible content’s container, add the .collapse class, and be sure to give it an ID.




Using a Button

Use the data-target attribute with a value of the ID of the content to collapse.

On the collapsible content’s container, add the .collapse class, and be sure to give it an ID.

Accordion

Collapsible content is often used to make an “accordion”. Accordions are popular for content such as FAQs, product overviews, etc

You can use Bootstrap cards to style the accordion like below.

Add the .show class to the collapsible content to have it expanded when the page loads. Also use aria-expanded="true" in this case.

133621

 

英语原文:https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_collapse.cfm 由工具自动翻译,由书目录整理