[bootstrap 5] Bootstrap 5 시작하기

Bootstrap이란?

Bootstrap은 더 빠르고 쉬운 웹 개발을 위한 무료 프런트 엔드 프레임워크이다.

bootstrap에는 typography, forms, buttons, tables, navigation, modals, image caruousels 등을 위한 HTML 및 CSS 기반 디자인 템플릿과 JavaScript 플러그인이 포함되어 있다.

Bootstrap은 반응형 디자인을 쉽게 만들 수 있는 기능을 제공한다.

Bootstrap 5

Bootstrap 5는 Bootstap의 최신 버전이다.(2021년 출시)

새로운 구성요소, 더 빨라진 스타일시트, 응답성을 제공한다.

Bootstrap 5는 모든 주요 브라우저 및 플랫폼의 최신 안정적인 릴리스를 지원한다.

단. Internet Explorer 11 이하는 지원하지 않는다.

Bootstrap 5와 Bootstra 4,3의 차이점은 Bootstrap 5는 jQuery 대신 vanilla JavaScript로 바꿨다.

Bootstrap을 사용하는 이유

사용하기 쉬움

- HTML과 CSS에 대한 기본 지식만 있으면 누구나 Bootstrap을 사용할 수 있다.

Bootstrap의 반응형

- CSS의 경우 휴대폰, 태블릿, 데스크탑에 맞게 조정이된다.

모바일 우선 접근 방식

- Bootstrap에서는 핵심 프레임워크 중 일부에 모바일 우선 스타일이 있다.

브라우저 호환성

Bootstrap5는 모든 최신 브라우저(Chrome, Firefox, Edge, Safari, Opera)와 호환이 된다.

IE11 이하의 경우 BS4 또는 BS3를 사용해야한다.

Bootstrap 5 CDN

아래는 CDN을 이용해 코드를 작성한 것이다.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

위의 코드를 진행시키면 다음과 같이 나온다.

직접 코드를 실행시키고 브라우저 사이즈를 변경시키면서 결과를 확인해보자!

Bootstrap 5 CDN 사용방법

CDN을 사용하는 방법은 두가지가 존재한다.

1. Bootstrap 5 다운로드

아래 링크를 통해 다운로드 방법이 있다.

https://getbootstrap.com/

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

2. 다운로드가 귀찮은 경우

아래의 코드를 입력한다.

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

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

'웹프로그래밍 > bootstrap5' 카테고리의 다른 글

[bootstrap 5] 부트스트랩 그리드(Grid) & 실습 연습 (0)	2023.09.16
[bootstrap 5] Container vs Fluid Container (0)	2023.09.14

유노의 지식저장소

[bootstrap 5] Bootstrap 5 시작하기

Bootstrap이란?

Bootstrap 5