<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap5 Accordions</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
<style type="text/css">.custom-accordion {max-width: 800px;margin: 2rem auto;--bs-accordion-btn-bg: #ffffff;--bs-accordion-active-bg: #f8f9fa;--bs-accordion-active-color: #0d6efd;--bs-accordion-btn-focus-border-color: #e9ecef;--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
}.accordion-button {padding: 1.25rem;font-weight: 500;transition: all 0.3s ease;
}.accordion-button:not(.collapsed) {box-shadow: none;
}.accordion-body {padding: 1.5rem;line-height: 1.6;color: #6c757d;
}.accordion-item {border: 1px solid #e9ecef;margin-bottom: 0.5rem;border-radius: 0.5rem !important;overflow: hidden;
}.accordion-button::after {transition: transform 0.3s ease;
}
</style>
</head><body><div class="container py-5"><div class="accordion custom-accordion" id="modernAccordion"><!-- Accordion Item 1 --><div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">What is Bootstrap 5.3?</button></h2><div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#modernAccordion"><div class="accordion-body">Bootstrap 5.3 is the latest version of the popular front-end framework, offering enhanced features,improved performance, and modern design capabilities for web development.</div></div></div><!-- Accordion Item 2 --><div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">What are the key features?</button></h2><div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#modernAccordion"><div class="accordion-body">Key features include responsive grid system, updated components, custom properties, enhancedutilities, and improved JavaScript plugins for creating modern web interfaces.</div></div></div><!-- Accordion Item 3 --><div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">How to customize styles?</button></h2><div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#modernAccordion"><div class="accordion-body">You can customize Bootstrap styles using CSS variables, custom classes, and the built-in Sassvariables system to create unique and branded designs.</div></div></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
https://www.sitepoint.com/an-introduction-to-native-css-nesting/
https://www.w3.org/TR/css-nesting-1/
https://css-tricks.com/css-nesting-specificity-and-you/
https://drafts.csswg.org/
http://www.dynamicdrive.com/
https://github.com/jobbole/awesome-javascript-cn
https://github.com/sorrycc/awesome-javascript
https://github.com/adminkit/awesome-bootstrap
https://github.com/vuejs/awesome-vue
https://github.com/kencery/Front-end-tutorial
前端技能汇总 Frontend Knowledge Structure
http://html5ify.com/fks/
http://html5ify.com/fks/fks_chart/
https://www.logolounge.com/ VI
好框架或版式设计网站参考：
http://www.thethemelab.com/
http://thethemelab.com/envato/Boshonto/
http://www.csszengarden.com/tr/zh-cn/ 禅意花园
http://www.csszengarden.com/
http://www.mezzoblue.com/zengarden/alldesigns/
https://www.logolounge.com
https://www.tooplate.com/
https://html5up.net/
https://github.com/zce/html5up
https://github.com/Squattydent/html5up.net
https://www.webtopic.com/css-card-design-examples/
Collapse
https://getbootstrap.com/docs/5.0/components/collapse/
Accordion
https://colorlib.com/wp/bootstrap-accordions/
https://freefrontend.com/bootstrap-accordions/
https://bootstrapexamples.com/@prajwal/bootstrap-5-3-accordion