테크정보
목록
[프레임워크] Bootstrap 4 vs Bootstrap 5 차이점과 개선된 부분
부트스트랩Bootstrap최신버전비교
Front-End 2024.04.11 64 회 읽음
Front-End 24.04.11 64



부트스트랩은 모바일과 데스크탑에 맞게 반응형으로 작동하는 홈페이지 서비스가 활성화 되면서 함께 인기를 끌고 있는 오픈 소스 프레임 워크입니다. 모바일을 우선으로 접근하는 방식을 이용하여 다양한 기기에서 더 빠르고 쉽게 디자인할 수 있는 강점이 있습니다. HTML, CSS, JS에서 사용할 수 있으며 PHP, Node와 같은 프론트 엔드 UI/UX 구성에도 도움이 됩니다. 디자인 적인 요소가 기본 적용되기 때문에 개발자는 관리자 이외에도 쉽고 간편하게 활용됩니다.


사람들은 왜 부트스트랩을 이용하나요?

빠르면서도 쉽게 사용이 가능합니다.

모바일을 우선 적용하는 디자인으로 심플한 구조 입니다.

무료로 사용이 가능합니다.

다양한 브라우저 지원이 가능합니다.

다양한 화면 크기를 지원 합니다. (576px, 768px, 992px, 1200px)


Bootstrap4 와 Bootstrap5 차이점
구분Bootstrap4Bootstrap5
Grid5개 계층 xs, sm, md, lg, xl 사용6개 계층 xs, sm, md, lg, xl, xxl
Color정해진 몇가지 색상만 사용추가된 색상과 팔레트와 음영 지원
jQuery모든 관련 플러그인 사용jQuery 제거
IEIE 10, IE 11 모두 지원IE 10, IE 11 지원 종료
Form라디오 버튼, 체크박스는 OS를 따르고 기본 브라우저를 따릅니다.폼 양식이 OS나 브라우저에 따라 변경되지 않으며 양식 컨트롤의 추가할 수 있고 브라우저에 
API유틸리티 수정이 불가자유롭게 수정하고 생성 가능
아이콘미지원 Font Awesome 활용자체 SVG 아이콘 지원
Nav인라인 블럭 속성이 있고 dropdown-menu-dark Class는 기본값으로 흰색 드롭다운이 표시인라인 블록 속성 제거, dropdown-menu-dark 기본값으로 검은색 드롭다운이 표시
Flexbox열과 행을 쉽게 구현하고 justify-center-content 클래스 요구에 따라 정렬을 직접 사용고급 그리드 시스템 사용과 상대적 위치가 없다.
RTL오른쪽에서 왼쪽 전환 비활성화오른쪽에서 왼쪽으로 전환 가능


처음 사용하면서 느꼈던 부분은 bootstrp4의 경우 기본 폰트사이즈가 커서 small 테그를 이용해서 사용했으나 bootstrap5의 경우 다시 기본사이즈가 작게 적용이 되었습니다.

클래스 중에도 -left와 -right로 사용하던 클래스가 -home -end로 변경이 되고 여백처리에서 가로 x 세로 y 와 같은 형식도 추가되고 select에서 사용하는 클래스와 같이 이전 버전과는 다른 부분이 있어 문서를 참고하는게 좋습니다.


목록