부트스트랩 4 시작하기

부트스트랩이란?

부트스트랩은 더 빠르고 쉬운 웹 개발을 위한 무료 프론트엔드 프레임워크입니다.
부트스트랩에는 타이포그래피, 양식, 버튼, 테이블, 탐색, 모달, 이미지 캐러셀 및 기타 여러 가지를 위한 HTML 및 CSS 기반 디자인 템플릿과 선택적 JavaScript 플러그인이 포함되어 있습니다.
또한 부트스트랩은 반응형 디자인을 쉽게 만들 수 있는 기능을 제공합니다.

반응형 웹 디자인이란?

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

부트스트랩 4 예제

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
</div>
</div>

부트스트랩 버전

이 튜토리얼 은 2018년에 출시된 Bootstrap 4 를 따라 Bootstrap 3 로의 업그레이드로 새로운 구성 요소, 더 빠른 스타일시트, 더 빠른 응답성 등을 제공합니다.

Bootstrap 5 (2021년 출시)는 Bootstrap 의 최신 버전입니다 . 모든 주요 브라우저 및 플랫폼의 안정적인 최신 릴리스를 지원합니다. 단, Internet Explorer 11 이하는 지원하지 않습니다.

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

참고: Bootstrap 3 및 Bootstrap 4는 중요한 버그 수정 및 문서 변경 사항에 대해 팀에서 계속 지원하며 계속 사용하는 것이 완전히 안전합니다. 그러나 새로운 기능은 추가되지 않습니다.

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

부트스트랩의 장점:

사용하기 쉬움: HTML 및 CSS에 대한 기본 지식만 있으면 누구나 부트스트랩 사용을 시작할 수 있습니다.
반응형 기능: Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크톱에 맞게 조정됩니다.
모바일 우선 접근 방식: Bootstrap에서 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.
브라우저 호환성: Bootstrap 4는 모든 최신 브라우저(Chrome, Firefox, Internet Explorer 10+, Edge, Safari 및 Opera)와 호환됩니다 .

부트스트랩 4는 어디서 구하나요?

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

다음을 수행할 수 있습니다.

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

부트스트랩 4 CDN

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

jsDelivr 는 Bootstrap의 CSS 및 JavaScript에 대한 CDN 지원을 제공합니다. jQuery도 포함해야 합니다.

jsDeliver:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

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

제이쿼리와 포퍼?
Bootstrap 4는 JavaScript 구성 요소(예: 모달, 도구 설명, 팝오버 등)에 jQuery 및 Popper.js를 사용합니다. 그러나 Bootstrap의 CSS 부분만 사용한다면 필요하지 않습니다.

닫을 수 있는 알림
상태 전환을 위한 버튼 및 체크박스/라디오 버튼
슬라이드, 컨트롤 및 표시기용 캐러셀
콘텐츠 전환을 위한 축소
Dropdowns (also requires Popper.js for perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates

부트스트랩 4 다운로드

Bootstrap 4를 직접 다운로드하고 호스팅하려면 https://getbootstrap.com/ 으로 이동하여 지침을 따르십시오.

Bootstrap 4로 첫 번째 웹 페이지 만들기

1. HTML5 문서 유형 추가

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

lang 속성 및 올바른 문자 집합과 함께 페이지 시작 부분에 항상 HTML5 문서 유형을 포함합니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

2. Bootstrap 4는 모바일 우선입니다.

Bootstrap 4는 모바일 장치에 반응하도록 설계되었습니다. 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.

적절한 렌더링 및 터치 확대/축소를 보장하려면 요소 <meta>내부에 다음 태그 를 추가하세요.<head>

이 width=device-width부분은 장치의 화면 너비를 따르도록 페이지 너비를 설정합니다(장치에 따라 다름).

이 initial-scale=1부분은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정합니다.

3. 컨테이너

또한 부트스트랩 4에는 사이트 콘텐츠를 래핑하기 위한 포함 요소가 필요합니다.

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

.container클래스는 반응형 고정 너비 컨테이너 를 제공합니다 .
이 .container-fluid클래스는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너 를 제공합니다.

.컨테이너

.용기 유체

2개의 기본 부트스트랩 4 페이지

다음 예제는 기본 Bootstrap 4 페이지(반응형 고정 너비 컨테이너 포함)에 대한 코드를 보여줍니다.

컨테이너 예

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

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

다음 예는 기본 Bootstrap 4 페이지(전폭 컨테이너 포함)에 대한 코드를 보여줍니다.

용기 유체 예

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

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

❮ 이전의 다음 ❯

부트스트랩 4 튜토리얼

부트스트랩 4 그리드

부트스트랩 4 기타

부트스트랩 4 참조