BootStrap
BootStrap 은
HTML, CSS, JavaScript 를 활용한
반응형 웹 (Responsive Web) 프레임워크 .
최신버젼은 (2022.01 현재)
5.1.x (이하 BS5)
4.6.x (이하 BS4)
3.4.x (이하 BS3)
BS 장점
- 모던한 스타일을 '손쉽게' + '빨리' 제작 가능케 함
- Mobile-First 로 반응형 웹 설계됨
- typography, forms, buttons, tables, navigation, modals, image carousels 등 다양한 디자인 템플릿 제공
- 현재 시중의 대부분의 브라우저 지원 (IE11 및 그 이하 지원안함)
BS 단점
- 너무 오래 + 널리 사용되어, 이제는 그닥 신선하지 않다.
- 무겁다.(성능)
BS4 → BS5 에서 달라진 점
- 구 브라우저 지원 안함 : IE11 이하, Edge < 16, FireFox < 60, Safari < 12, iOS Safari < 12, Chrome < 60
- jQuery 사용안함
- Popper v1.x → v2.x 사용
- https://getbootstrap.com/docs/5.1/migration/
BS 세팅?
방법1: BS CDN 사용 (Content Delivery Network)
방법2: getbootstrap.com 에서 다운로드
** CDN을 사용하면 브라우저가 cache 하므로. 페이지 로딩 속도가 빨라진다.
** jQuery? Popper? : BS4 의 JavaScript 부분은 jQuery, Popper 라이브러리를 사용한다.
(만약 BS4의 스타일만 사용하는거라면, JS는 굳이 필요하진 않다)
공식: http://getbootstrap.com/
BS5 각종예제: https://getbootstrap.com/docs/5.1/examples/ (함 보자)
BS를 활용한 테마 사이트들 (많다!), 대체로 유료 이긴 하나 공짜 템플릿도 제법 있다.
https://themes.getbootstrap.com/
https://wrapbootstrap.com/
https://themeforest.net/
https://startbootstrap.com/
등등.
BS 사이트 요소들을 담기 위한 컨테이너
.container : responsive, 고정폭 컨테이너
.container-fluid : 전체폭(full-width) 컨테이너
** ↓ 아래 class 를 변경해보며 브라우저에서 확인해보자
.container 의 max-width 는 screen size 에 따라 다르다
Extra small Small Medium Large Extra Large XXL
<576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
max-width 100% 540px 720px 960px 1140px 1320px


pt-5 padding-top
기본적으로(디폴트) container들을 left, right padding 값만 가진다. top, bottom padding 은 없다.
그러나, 수동으로 적절한 패딩을 넣어서 좀더 보기 좋게 할수 있다.
spacing utility class
pt-5, p-5, my-5 같이 padding, margin 을 수동으로 넣어주는 class들
https://getbootstrap.com/docs/5.1/utilities/spacing/#notation

