[Bootstrap5] Bootstrap이란?

Bootstrap이란

• 부트스트랩은 빠르고 쉬운 웹 개발을 위한 프론트엔드 프레임워크입니다.
• 부트스트랩에는 typography, forms, buttons, tables, navigation, modals, image carousels 및 기타 여러 가지를 위한 HTML 및 CSS 기반 디자인 템플릿과 선택적 JavaScript 플러그인이 포함되어 있습니다.
• 부트스트랩은 반은형 디자인을 쉽게 만들 수 있는 기능을 제공합니다.

 

반응형 웹 디자인이란

반응형 웹 디자인은 소형 휴대폰에서 대형 데스크탑에 이르기까지 모든 장치에서 잘 보이도록 자동으로 조정되는 웹 사이트를 만드는 것입니다.

 

부트스트랩 버전

Bootstrap 5(2021년 출시)는 Bootstrap(2013년 출시)의 최신 버전입니다. 새로운 구성 요소, 더 빠른 스타일시트 및 더 나은 응답성을 제공합니다.

 

Bootstrap 5는 모든 주요 브라우저 및 플랫폼의 안정적인 최신 릴리스를 지원합니다. 단, Internet Explore 11 이하는 지원하지 않습니다.

 

Bootstrap 5와 Bootstrap 3&4의 주요 차이점은 Bootstrap 5가 jQuery 대신 바닐라 JavaScript로 전환되었다는 것입니다.

 

부트스트랩을 사용하는 이유

• 사용하기 쉬윔: HTML 및 CSS에 대한 기본 지식만 있으면 누구나 부트스트랩 사용을 시작할 수 있습니다.
• 반응형 기능: Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크톱에 맞게 조정됩니다.
• 모바일 우선 접근 방식: Bootstrap에서 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.
• 브라우저 호환성: Bootstrap 5는 모든 최신 브라우저 (크롬, 파이어폭스, 엣지, 사파리, 오페라)와 호환됩니다.
• IE11 이하에 대한 지원이 필요한 경우 BS$ 또는 BS3을 사용해야 합니다.

 

Where to Get Bootstrap 5?

• CDN에서 부트스트랩 5 포함 
• getbootstrap.com에서 부트스트랩 5 다운로드

 

부트스트랩 5 CDN

 

부트스트랩 5를 직접 다운로드하고 호스팅하지 않으려면 CDN(Content Delivery Network)에서 포함할 수 있습니다. 

 

jsDeliver는 Bootstrap의 CSS 및 JavaScript에 대한 CDN 지원을 제공합니다.

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5 CDN 사용의 한 가지 이점

많은 사용자가 다른 사이트를 방문할 때 이미 jsDelivr에서 Bootstrap 5를 다운로드 했습니다. 결과적으로 사용자가 사이트를 방문할 때 캐시에서 로드되므로 로드 시간이 빨라집니다. 또한 대부분의 CDN은 사용자가 파일을 요청하면 가장 가까운 서버에서 제공되므로 로딩 시간이 빨라집니다.

 

자바스크립트

부트스트랩 5는 modal, tooltips, popovers 등과 같은 다양한 구성요소에 JavaScript를 사용합니다. 그러나 Bootstrap의 CSS 부분만 사용한다면 필요하지 않습니다.

 

REFERENCE

https://www.w3schools.com/bootstrap5/bootstrap_get_started.php