Bootstrap 5 초보자 가이드

Bootstrap는 무엇인가요?

  • Bootstrap는 무료의 프론트엔드 프레임워크로, 더 빠르고 쉬운 웹 개발을 위해 사용됩니다
  • Bootstrap는 레이아웃, 양식, 버튼, 테이블, 네비게이션, 모달, 이미지 슬라이드 등을 위한 HTML과 CSS 기반의 디자인 템플릿을 포함합니다
  • Bootstrap는 다양한 JavaScript 플러그인을 제공합니다
  • Bootstrap는 반응형 디자인을 쉽게 만들 수 있게 합니다

반응형 웹 디자인이 무엇인가요?

반응형 웹 디자인은 모든 장치에서 사용자 경험을 강화할 수 있는 자동으로 조정되는 웹사이트를 만들기 위해 목표합니다. 모바일이든 대형 데스크톱이든.

Bootstrap 5 예제

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>제 하나의 첫 번째 Bootstrap 페이지</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>행 1: 봄날</h3>
      <p>좋은 날에 상쾌한 물가로 향하니, 끝없는 풍경이 한 순간 새로워졌습니다.</p>
      <p>빈하게도 동쪽의 바람을 알 수 있습니다. 만물이 벚꽃빛과 보라빛을 가지고 있으며, 항상 봄입니다.</p>
    </div>
    <div class="col-sm-4">
      <h3>행 2: 초여름 절구</h3>
      <p>모두가 황금빛과 보라빛이 먼지가 되었고, 여름이 새로워졌습니다.</p>
      <p>길을 따라 소나무와 매화를 걸어도 끝이 없습니다. 이제 나는 태평인임을 알게 되었습니다.</p>
    </div>
    <div class="col-sm-4">
      <h3>행 3: 산행</h3>
      <p>서쪽의 차가운 산에 돌길이 기울어, 백구 소리에 사람이 살고 있습니다.</p>
      <p>서로이는 인간을 사랑하여 차도에 앉아, 동백잎이 언제나 2월의 꽃보다 붉습니다.</p>
    </div>
  </div>
</div>

직접 시도해보세요

Bootstrap 버전

Bootstrap 5(2021년发布)는 Bootstrap의 최신 버전(2013년发布)입니다. 새로운 컴포넌트, 더 빠른 스타일 시트를 제공하여 더 빠른 반응성을 제공합니다.

Bootstrap 5는 모든 주요 브라우저와 플랫폼의 최신 안정 버전을 지원합니다. 그러나 Internet Explorer 11 및 이하 버전을 지원하지 않습니다.

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

주석:팀은 Bootstrap 3과 Bootstrap 4의 중요한 버그 수정 및 문서 변경을 지속적으로 지원하고 있으며, 이들을 계속 사용하는 것은 완전히 안전합니다. 하지만 새로운 기능을 추가하지는 않습니다.

왜 Bootstrap를 사용해야 합니까?

Bootstrap의 장점:

  • 사용하기 쉽습니다:HTML과 CSS에 기본적인 이해가 있는 사람이라면 Bootstrap를 즉시 사용할 수 있습니다.
  • 반응형 특성:Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크톱을 대상으로 조정할 수 있습니다.
  • 모바일 우선 방법:Bootstrap에서는 모바일 우선 스타일이 기본 프레임워크의 일부입니다.
  • 브라우저 호환성:Bootstrap 5는 Chrome, Firefox, Edge, Safari, Opera와 같은 모든 현대 브라우저와 호환됩니다.

주의:IE11 및 이하 버전을 지원해야 한다면 BS4 또는 BS3를 사용해야 합니다.

Bootstrap 5를 어디서 얻을 수 있습니까?

Bootstrap 5를 자신의 웹사이트에서 사용할 수 있는 두 가지 방법이 있습니다.

당신은 다음과 같이 할 수 있습니다:

  • CDN에서 가져온 Bootstrap 5를 포함합니다
  • getbootstrap.com에서 Bootstrap 5 다운로드

Bootstrap 5 CDN

Bootstrap 5를 직접 다운로드하고 호스팅하지 않고자 한다면, CDN(콘텐츠 전달 네트워크)에서 참조할 수 있습니다.

CodeW3C.com은 Bootstrap의 CSS와 JavaScript에 CDN 지원을 제공합니다:

MaxCDN:

<!-- 최신 컴파일 및 압축된 CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- 최신 컴파일된 JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Bootstrap 5 CDN의 장점 중 하나는 다음과 같습니다:

많은 사용자는 다른 사이트에 방문할 때 jsDelivr에서 Bootstrap 5를 다운로드한 적이 있습니다. 따라서 그들이 여러분의 웹사이트에 방문할 때, 그것은 캐시에서 로드되어 로드 시간을 단축합니다. 또한, 대부분의 CDN은 사용자가 파일을 요청하면 가장 가까운 서버에서 서비스를 제공하도록 보장하여 더 빠른 로드 시간을 초래합니다.

JavaScript?

Bootstrap 5는 다양한 컴포넌트(모달, 툴팁, 팝업 등)에 JavaScript를 사용합니다. 그러나 Bootstrap의 CSS 부분만 사용하면 필요하지 않습니다.

Bootstrap 5 다운로드

Bootstrap 5를 직접 다운로드하고 호스팅하려면 다음을 방문하세요 https://getbootstrap.com/그 다음, 해당 안내를 따라 진행하세요.

Bootstrap 5를 사용하여 여러분의 첫 번째 웹 페이지를 만들어 보세요

1. HTML5 문서 유형 추가

Bootstrap 5는 HTML5 doctype가 필요한 HTML 요소와 CSS 속성을 사용합니다.

항상 페이지의 시작 부분에 HTML5 doctype을 포함하고, lang 속성과 올바른 제목, 문자집합을 설정하세요:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 예제</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 모바일 우선

Bootstrap 5의 설계 목표는 반응형 모바일 장치입니다. 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.

정확한 렌더링과 터치 확대를 보장하기 위해 다음을 설정하세요 <head> 요소 내에 다음을 추가하세요 <meta> 표지:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 화면 너비를 기기의 screen-width에 따라 설정합니다.(기기마다 다릅니다).

initial-scale=1 브라우저가 페이지를 처음 로드할 때 초기 확대 수준을 설정합니다.

3. 컨테이너

Bootstrap 5 은 사이트 내용을 감싸는 요소가 필요합니다.

선택할 수 있는 두 가지 컨테이너 클래스가 있습니다:

  1. .container 클래스는 반응형 고정 너비 컨테이너를 제공합니다
  2. .container-fluid 클래스는 전체 화면 너비를 가진 전체 화면 너비 컨테이너를 제공합니다

두 개의 기본적인 Bootstrap 5 페이지

container 예제

다음은 기본적인 Bootstrap 5 페이지 코드(반응형 고정 너비 컨테이너를 포함)를 보여줍니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 예제</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>제 하나의 첫 번째 Bootstrap 페이지</h1>
  <p>이 부분은 .container 클래스 내에 있습니다.</p>
  <p>.container 클래스는 반응형 고정 너비 컨테이너를 제공합니다.</p>
</div>
</body>
</html>

직접 시도해보세요

Container Fluid 예제

다음은 기본적인 Bootstrap 5 페이지 코드(전체 너비 컨테이너를 포함)를 보여줍니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 예제</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>제 하나의 첫 번째 Bootstrap 페이지</h1>
  <p>이 부분은 .container-fluid 클래스 내에 있습니다.</p>
  <p>.container-fluid 클래스는 전체 화면 너비를 가진 전체 너비 컨테이너를 제공합니다.</p>
</div>
</body>
</html>

직접 시도해보세요