[CSS Framework] Bootstrap | Cards | Carousel | Dropdowns | Spinners | Modal

Card

일반적인 콘텐츠 홀더이자 콘텐츠 컨테이너로 조합해서 활용할 수 있다. 종종 그리드 시스템과 카드 그리드를 만드는데 쓰인다. 제목, 부제, 상단 이미지를 추가할 수 있는옵션이 있다. 또 다른 컴포넌트인 list group을 추가할 수 있다. card를 사용해서 깔끔한 그리드를 만들고 콘텐츠를 표시할 수 있다. 

https://getbootstrap.com/docs/5.2/components/card/

Cards

---

Carousel

사진 갤러리나 이미지 탐색의 슬라이더를 만드는데 쓰인다. 매개변수가 많다. 자동 슬라이더를 고를 수 있다. fade나 slide 효과를 줄 수 있다. JS를 사용하여 더 많은 효과를 줄 수 있다. slide의 클래스에는 꼭 carousel 클래스를 사용해야 한다. data-ride 역시 =carousel이 되어야 한다. 

 

https://getbootstrap.com/docs/5.2/components/carousel/

Carousel

---

Dropdowns

크기도 다양하고 버튼에 붙일 수 있고 위아래로 튀어나오게 할 수 있다. 좌우 방향도 가능하다. 메뉴에 여러 내용을 넣을 수 있고 정렬 방법도 다양하다. 

https://getbootstrap.com/docs/5.2/components/dropdowns/

Dropdowns

---

Spinner

점점 커지는 spinner-grow 

빙글빙글 도는 spiner-border

 

https://getbootstrap.com/docs/5.2/components/spinners/

Spinners

---

Modal

기본적으로 대화창을 띄우는 도구이다. JS가 필요하다. 대화창을 띄우고 닫을 방법을 명시해야 한다. (닫는 버튼을 넣을지에 대한 여부 등) 또한 다양한 옵션이 있다. 대화창을 스크롤 가능하게 했다면 창을 세로로 가운데에 띄우거나 대화창에 그리드를 넣을 수 있다.

https://getbootstrap.com/docs/5.2/components/modal/

Modal