[Bootstrap] 부트스트랩 정보

 

//-----------------------------------------------------------------------------

 Bootstrap (트위터 부트스트랩)

 twbs /bootstrap
https://github.com/twbs/bootstrap - 155k
    - v5.1.3 , 2021-10
    - v4.6.1 , 2021-10

    - 출시 역사
v2 - 2012-01
v3 - 2013-08

v4 - 2018-01
    - Glyphicons 제거

v5 - 2021-05
    -  jQuery 제거 ,Internet Explorer지원 중단
https://getbootstrap.kr/docs/5.1/migration/

 

 

 

//-----------------------------------------------------------------------------
    - bootstrap 3, bootstrap 4

bootstrap v3 매뉴얼
http://bootstrapk.com/css/
https://getbootstrap.com/docs/3.3/css/


bootstrap v4 매뉴얼
http://bootstrap4.kr/docs/4.0/getting-started/introduction/
https://www.w3schools.com/bootstrap4/default.asp


부트 스트랩 4 로 마이그레이션
https://riptutorial.com/ko/twitter-bootstrap/topic/9090/%EB%B6%80%ED%8A%B8-%EC%8A%A4%ED%8A%B8%EB%9E%A9-4%EB%A1%9C-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98


* 무료 테마, 템플릿 사이트
https://startbootstrap.com/
    - SB Admin 2 (BS4)
    https://startbootstrap.com/template-overviews/sb-admin-2/

 

//==================================================================
* bootstrap CDN

* CloudFlare
    - https://cdnjs.com/libraries/twitter-bootstrap/3.3.7

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


* BootStrap
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

 

//===========
메타태그
<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=no
    - 모바일 기기에서 확대/축소 기능 끄기

shrink-to-fit=no
    - 사파리 브라우저에서 페이지가 화면보다 크면 줄여주는 기능 끄기


//=============
normalize.css 사용중
    - 브라우저 호환성 높이기
https://github.com/necolas/normalize.css/blob/master/normalize.css


proper.js
    - Bootstrap v4에서 필요
    - 드롭다운(Dropdown)의 표시와 위치지정 (Popper.js도 필요)
    - 툴팁(Tooltip)과 팝오버(popover)의 표시와 위치지정
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" ></script>


//===================
bootscrap 기본 폰트 변경

v3 - @font-family-base 를 변경하고 다시 컴파일
http://bootstrapk.com/css/
    scaffolding.less

v4 - $font-family-base 변경 후 부트스트랩을 다시 컴파일
http://bootstrap4.kr/docs/4.0/content/reboot/


//=========
기본클래스
container - 화면크기에 따라 조정
container-fluid - 무조건 화면을 꽉채움