shb 2022. 3. 18. 14:09

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