부트스트랩 5 아코디언
25503 단어 bootstraphtmljavascriptwebdev
부트스트랩 아코디언이란 무엇입니까?
아코디언은 클래스 변경을 통해 콘텐츠를 표시하거나 숨기는 수직 축소 요소입니다.
설치
수동 설치(zip 패키지)
부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 MDB 5 Free package을 설치해야 합니다.
MDB CLI
MDB 5 및 MDB CLI의 모든 잠재력을 발견하고 사용하려면 당사Quick Start Tutorial를 시청하십시오.
고궁
전제 조건
프로젝트를 시작하기 전에 Node LTS (12.x.x recommended)을 설치해야 합니다.
설치
프로젝트에 MDB UI KIT를 설치하려면 터미널에 다음 명령을 쉽게 입력하십시오.
npm i mdb-ui-kit
JS 모듈 가져오기
전체 라이브러리 또는 개별 모듈만 가져올 수 있습니다.
import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
CSS 파일 가져오기
MDB 스타일시트를 가져오려면 다음 구문을 사용하십시오.
@import '~mdb-ui-kit/css/mdb.min.css';
SCSS 모듈 가져오기
개별 SCSS 모듈을 가져올 수도 있습니다. 제대로 하려면 node_modules/mdb-ui-kit/src/scss 위치에서 프로젝트로 직접 복사하고 CSS 파일과 같은 방식으로 가져오는 것이 좋습니다.
웹팩 통합
Starter 을 사용하여 Webpack을 기반으로 새 프로젝트를 만드는 프로세스의 속도를 크게 높일 수 있습니다.
CDN
CDN을 통한 설치는 MDB UI KIT를 프로젝트와 통합하는 가장 쉬운 방법 중 하나입니다. 최신 컴파일된 JS 스크립트 태그와 CSS 링크 태그를 cdnjs에서 애플리케이션으로 복사하기만 하면 됩니다.
필요한 경우 Font Awesome 및 Roboto 글꼴도 추가하는 것을 잊지 마십시오. 다음은 예제 코드입니다.
CSS
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css"
rel="stylesheet"
/>
JS
<!-- MDB -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
></script>
커스터마이징
기본 예
HTML
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="collapseOne"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-mdb-parent="#accordionExample"
>
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div
id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-mdb-parent="#accordionExample"
>
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any of this with custom CSS
or overriding our default variables. It's also worth noting that just about any
HTML can go within the <strong>.accordion-body</strong>, though the transition
does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
Accordion Item #3
</button>
</h2>
<div
id="collapseThree"
class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-mdb-parent="#accordionExample"
>
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
</div>
</div>
</div>
</div>
플러시
.accordion-flush
를 추가하여 기본값background-color
, 일부 테두리 및 일부 둥근 모서리를 제거하여 아코디언을 부모 컨테이너와 가장자리에서 가장자리로 렌더링합니다.HTML
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="flush-collapseOne"
class="accordion-collapse collapse"
aria-labelledby="flush-headingOne"
data-mdb-parent="#accordionFlushExample"
>
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch
et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div
id="flush-collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-mdb-parent="#accordionFlushExample"
>
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch
et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#flush-collapseThree"
aria-expanded="false"
aria-controls="flush-collapseThree"
>
Accordion Item #3
</button>
</h2>
<div
id="flush-collapseThree"
class="accordion-collapse collapse"
aria-labelledby="flush-headingThree"
data-mdb-parent="#accordionFlushExample"
>
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch
et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
📄 Accordion 설명서 페이지에서 더 많은 사용자 지정 예제를 볼 수 있습니다.
중요한 자원
다음은 이 구성 요소로 작업하는 데 도움이 되도록 준비한 리소스입니다.
관련 콘텐츠 및 스타일 옵션 및 기능
1.5시간 안에 부트스트랩 5 배우기
추가 리소스
학습 로드맵을 통해 웹 개발에 대해 알아보세요.
🎓 Start Learning
메일링 리스트에 가입하고 개발자를 위한 독점 리소스를 받으세요.
🎁 Get gifts
영감과 커뮤니티 경험을 위해 비공개 FB 그룹에 가입하세요.
👨👩👧👦 Ask to join
GitHub의 STAR를 사용하여 오픈 소스 패키지 생성 지원
Reference
이 문제에 관하여(부트스트랩 5 아코디언), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mdbootstrap/bootstrap-5-accordion-5cbh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)