소개

BootstrapCDN 및 템플릿 기초 페이지를 통해서 반응형 모바일 우선 사이트를 구축하기 위한 세계에서 가장 인기있는 프레임워크인 Bootstrap을 시작하세요.

빠른 시작

프로젝트에 Bootstrap을 빠르게 추가하는 방법을 찾고 계신가요? StackPath의 친구들이 무료로 제공하는 BootstrapCDN을 사용해 보세요. 패키지 관리자를 사용하고 계시거나 소스 파일을 다운로드해야 하나요? 다운로드 페이지로 가주세요.

CSS

우리 CSS 스타일시트를 제일 먼저 불러올 수 있도록 <link><head>에 있는 다른 모든 스타일시트보다 앞에 복사해서 붙여넣어 주세요.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

많은 컴포넌트들은 작동하기 위해서 JavaScript를 필요로 합니다. 특히 jQuery, Popper.js, 그리고 직접 가지고 계시는 JavaScript 플러그인을 요구합니다. 다음 <script>들을 </body> 태그가 닫히기 전 페이지 끝에 넣어서 활성화를 해주세요. jQuery가 가장 먼저 와야 하며, 그 다음에는 Popper.js를, 그리고 우리의 JavaScript 플러그인을 넣으면 됩니다.

우리는 jQuery의 slim 빌드를 사용하지만, full 버전도 지원합니다.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

bootstrap.bundle.jsbootstrap.bundle.min.jsPopper를 포함하지만, jQuery는 포함하고 있지 않습니다. Bootstrap에 뭐가 포함되어 있는지에 대한 자세한 정보는 구성요소 섹션에서 확인해 주세요.

JavaScript를 필요로 하는 컴포넌트 보기
  • 알림 무시
  • 버튼 상태 전환 및 체크상자와 라디오의 작동
  • 캐러셀의 모든 슬라이드 동작, 조작 및 인디케이터
  • 컨텐츠를 숨기기 위한 접기 전환
  • 드롭다운 표시 및 배치 (Popper.js도 필요)
  • 모달 표시, 배치 및 스크롤 동작
  • 반응형 동작을 위한 내비게이션 바 접기 플러그인의 확장
  • 툴팁과 팝오버 표시 및 배치 (Popper.js도 필요)
  • 스크롤스파이 스크롤 동작과 네비게이션 갱신

기초 템플릿

최신 디자인 및 개발 표준으로 페이지를 설정해야 합니다. 즉 반응형으로 작동하려면 HTML5 doctype을 사용하고 뷰포트 메타 태그를 포함해야 합니다. 모두 집어넣으면 페이지는 다음과 같아야 합니다.

<!doctype html>
<html lang="en">
  <head>
    <!-- 필수 메타 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- 선택적 JavaScript -->
    <!-- 제일 앞에 jQuery, 그 다음에 Popper.js, 그 뒤에 Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

이것이 페이지 전체에 대한 모든 요구사항입니다. 레이아웃 문서 또는 공식 예제를 통해 사이트의 컨텐츠 및 컴포넌트를 배치해보세요.

중요한 전역 요소

Bootstrap은 사용할 때 알아야 할 몇 가지 중요한 전역 스타일과 설정을 사용합니다. 이 스타일은 거의 모든 크로스 브라우저 스타일의 정규화에만 맞추어져 있습니다. 이제부터 알아봅시다.

HTML5 doctype

Bootstrap은 HTML5 doctype을 사용해야 합니다. 이게 없다면 망가지고 미완성된 화면을 볼 수 있지만 포함한다면 큰 문제는 일어나지 않습니다.

<!doctype html>
<html lang="en">
  ...
</html>

반응형 메타 태그

Bootstrap은 모바일 우선으로 개발되었으며, 모바일 기기가 우선이고 필요한 경우 CSS 미디어 쿼리를 통해서 컴포넌트를 확장합니다. 모든 기기에서 적절한 렌더링 및 터치 줌을 수행하려면 반응형 뷰포트 메타 태그를 <head>에 추가해주세요.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

기초 템플릿에서 이에 관한 예제를 확인할 수 있습니다.

상자 크기 조절

우리는 CSS에서의 간단한 크기 조정을 위해 box-sizing 전역 값을 content-box에서 border-box로 전환했습니다. 이렇게 하면 padding이 요소의 최종 계산된 너비에 영향을 미치지는 않지만 Google 지도나 Google 맞춤 검색엔진 같은 제3자 소프트웨어에서 문제가 발생할 수도 있습니다.

가끔 오버라이드가 필요하다면 다음과 같은 것을 사용하세요.

.selector-for-some-widget {
  box-sizing: content-box;
}

위 스니펫은 ::before::after를 통해서 생성된 컨텐츠를 포함한 중첩 요소는 .selector-for-some-widget에 지정된 박스 크기를 상속합니다.

CSS Tricks에서 상자 모델과 크기 조절에 대해 자세히 알아보세요.

Reboot

더 나은 크로스 브라우저 렌더링을 위해서 우리는 Reboot를 사용하며 브라우저와 기기 간의 차이를 줄이기 위해 일반적인 HTML 요소들을 재설정합니다.

커뮤니티

유용한 리소스를 통해서 Bootstrap 개발에 대한 최신 정보를 얻고 커뮤니티와 함께하세요.

  • Twitter에서 @getbootstrap을 팔로우하세요.
  • 공식 Bootstrap 블로그를 읽어보고 구독하세요.
  • 공식 Slack 방에 참가하세요.
  • 동료 부트스트랩 유저들과 IRC에서 채팅하세요. irc.freenode.net 서버의 ##bootstrap 채널입니다.
  • 구현 도움말을 Stack Overflow (bootstrap-4로 태그됨)에서 찾을 수도 있습니다.
  • 개발자는 Bootstrap을 수정하거나 기능을 추가하는 패키지를 npm이나 비슷한 플랫폼을 통해서 배포할 때 bootstrap 키워드를 사용해서 최대한 찾기 쉽도록 해야 합니다.

Twitter에서 @getbootstrap을 팔로우해서 최신 소식이나 멋진 뮤직 비디오를 확인할 수도 있습니다.