Card
일반적인 콘텐츠 홀더이자 콘텐츠 컨테이너로 조합해서 활용할 수 있다. 종종 그리드 시스템과 카드 그리드를 만드는데 쓰인다. 제목, 부제, 상단 이미지를 추가할 수 있는옵션이 있다. 또 다른 컴포넌트인 list group을 추가할 수 있다. card를 사용해서 깔끔한 그리드를 만들고 콘텐츠를 표시할 수 있다.
https://getbootstrap.com/docs/5.2/components/card/
Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
getbootstrap.com
Carousel
사진 갤러리나 이미지 탐색의 슬라이더를 만드는데 쓰인다. 매개변수가 많다. 자동 슬라이더를 고를 수 있다. fade나 slide 효과를 줄 수 있다. JS를 사용하여 더 많은 효과를 줄 수 있다. slide의 클래스에는 꼭 carousel 클래스를 사용해야 한다. data-ride 역시 =carousel이 되어야 한다.
https://getbootstrap.com/docs/5.2/components/carousel/
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
getbootstrap.com
Dropdowns
크기도 다양하고 버튼에 붙일 수 있고 위아래로 튀어나오게 할 수 있다. 좌우 방향도 가능하다. 메뉴에 여러 내용을 넣을 수 있고 정렬 방법도 다양하다.
https://getbootstrap.com/docs/5.2/components/dropdowns/
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
getbootstrap.com
Spinner
점점 커지는 spinner-grow
빙글빙글 도는 spiner-border
https://getbootstrap.com/docs/5.2/components/spinners/
Spinners
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
getbootstrap.com
Modal
기본적으로 대화창을 띄우는 도구이다. JS가 필요하다. 대화창을 띄우고 닫을 방법을 명시해야 한다. (닫는 버튼을 넣을지에 대한 여부 등) 또한 다양한 옵션이 있다. 대화창을 스크롤 가능하게 했다면 창을 세로로 가운데에 띄우거나 대화창에 그리드를 넣을 수 있다.
https://getbootstrap.com/docs/5.2/components/modal/
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
'📦 CSS > CSS Framework' 카테고리의 다른 글
| [CSS Framework] Utilities (0) | 2022.12.30 |
|---|---|
| [CSS Framework] Bootstrap | Icons (0) | 2022.12.27 |
| [CSS Framework] Bootstrap | Navbar (0) | 2022.12.27 |
| [CSS Framework] bootstrap | Forms | form-group | form-class (0) | 2022.12.26 |
| [CSS Framework] Grid Utilities (0) | 2022.12.23 |