[Bootstrap] 부트스트랩 버전 3 버전 4 바뀐점(마이그레이션)

- how to bootstrap 3 to 4 upgrade 

//버전 역사
v1 : 2011/08
v2 : 2012/01
v3 : 2013/08
v4 : 2018/01


//============================
Bootstrap v4 버전의 변경사항(바뀐점)

* LESS => SASS로 변경

* IE 9이하 미지원

* Glyphicons의 미지원으로 fonts 폴더가 없음

* popper.js 추가
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" ></script>


* Normalize.css 에서 Reboot.css 로 변경

* Class속성 “display-*”에서 글꼴 크기를 지정 가능


//==============
    (바뀐점)Bootstrap 4를 5분 안에 배우기(Learn Bootstrap 4 in 5 minutes)
https://www.vobour.com/-css-bootstrap-4%EB%A5%BC-5%EB%B6%84-%EC%95%88%EC%97%90-%EB%B0%B0%EC%9A%B0%EA%B8%B0


* Flatter buttons 모양 향상


* 그리드에 대한 브레이크 포인트 추가
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;


* Flexbox 지원
    grids가 floats 대신 Flexbox로 생성


*  p-* (padding) , m-* (margin) 추가
    classes와 spacing 제어
<div class="d-flex pl-5">I'm a flexbox container!</div>


* 단위 변화 : px, em -> rem
media queries 및 grid 동작을 제외한 모든 위치에서 상대적 측정 단위 (rems)로 pixels을 교체


* Cards
    panels, wells , thumbnails을 대체

//=======================

Migrating to v4 - 매뉴얼
https://getbootstrap.com/docs/4.1/migration/


Bootply Migration Tool  - 변경툴 <====== Good
http://upgrade-bootstrap.bootply.com/
    - v3을 v4로 변경해줌

Bootstrap 4 upgrader - 변경 툴
http://demo.bootstraptor.com/bootstrap4/

//
Migration from Bootstrap 3 to Bootstrap 4 - 비교표
https://coreui.io/blog/2018/01/31/migration-from-bootstrap-3-to-bootstrap-4/


Migration from Bootstrap 3 to Bootstrap 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

Differences Between Bootstrap 3 & 4
https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm