본문 바로가기
반응형웹

Bootstrap3 , Bootstrap4 , Bootstrap5 차이점

by 진격의 파파 2022. 9. 29.
반응형

 

항상 궁금했었는데

이제 진지하게 찾아봤습니다.

 

부트스트랩이란?

"Bootstrap은 웹 디자인 및 UI 개발을 위한 HTML5 기반 Mobile First Front-End Framework입니다. 부트스트랩은 HTML , CSS  Javascript 를 사용하며, 부트스트랩은 2011년 8월 Twitter 개발자 에 의해 개발되었습니다 . 오픈 소스 이며 사용하기 쉽습니다."라고 하는데...

쉽기도 어렵기도 한거 같은데...

 

반응형 홈페이지 제작에 많이 사용되고 있는 툴입니다.

이글을 읽고 계신다면 대부분 부트스트랩에 대해서 아실텐데

그래도 모르는 분들을 위해 아주 약간 설명하면

PC, 태블릿, 모바일 등등 화면 사이즈가 각자 개성이 있죠. 

언놈은 크고 언놈은 작고...

그래서 이걸 화면에 맞게 CSS를 강제로 변경해주면 어떨까 해서 만들어진게 

바로 "부트스트랩" 입니다. 

 

그런데 여기서 부트스트랩이 점점 발전되면서 3버전, 4버전, 5버전이 나오는데

궁금해서 찾아봤습니다. 당췌 먼 차이인지...

 

부트스트랩 5 부트스트랩 4 부트스트랩 3
IE에 대한 지원 없음 IE 8 및 9만 지원하지 않음 Internet Explorer 8 및 9 지원
스마트폰에서 세로 모드와 가로 모드를 모두 분리합니다. 스마트폰에서 세로 모드와 가로 모드를 모두 분리합니다. 세로 및 가로 모드는 모두 동일하게 보입니다.
컨테이너 크기 1320px 컨테이너 크기 1140px 컨테이너 크기 1170px
6개의 클래스 접두사,
즉 col-xxl, col-xl, col-lg-, col-md-, col-sm-, col-.
5개의 클래스 접두사,
즉 col-xl, col-lg-, col-md-, col-sm-, col-.
네 개의 클래스 접두사,
즉 col-lg- , col-md- , col-sm-, col-xs .
CSS Flexbox , CSS 함수 및 변수 사용 CSS Flexbox 를 사용하십시오 . CSS 부동 및 지우기 사용
반응형 레이아웃만 . 반응형 레이아웃만 . 반응하지 않는 레이아웃 옵션 .

IE 8 및 9 지원의 경우 부트스트랩 3을 사용하는데 요즘은 ie8, 9 는 거의 사용안하는듯...

그리고 부트스트랩 4는 IE 10 이상만 지원합니다.

걍 궁금해서 찾아봤는데 

이글을 읽는 누군가에게 미미하게라도 도움이 되셨길 바랍니다 ^^

반응형

'반응형웹' 카테고리의 다른 글

부트스트랩에 대해서  (2) 2017.05.19
반응형 홈페이지란?  (2) 2017.05.18