소개

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

이 페이지에서

빠른 시작

프로젝트에 부트스트랩을 빠르게 추가하고 싶으십니까? 무료 오픈 소스 CDN인 jsDelivr를 사용하세요. 패키지 관리자를 사용하거나 소스 파일을 다운로드해야 합니까? 다운로드 페이지로 이동합니다 .

CSS

CSS를 로드하려면 다른 모든 스타일시트보다 먼저 스타일시트 <link>를 복사하여 붙여넣습니다 .<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

많은 구성 요소가 작동하려면 JavaScript를 사용해야 합니다. 특히, 자체 JavaScript 플러그인과 Popper 가 필요 합니다. 다음 중 하나를 <script>페이지 끝 근처에 있는 닫는 태그 바로 앞에 배치 하여 </body>활성화합니다.

묶음

두 번들 중 하나에 모든 Bootstrap JavaScript 플러그인 및 종속성을 포함합니다. 툴팁과 팝오버를 위한 bootstrap.bundle.jsPopper 를 포함 bootstrap.bundle.min.js합니다 . Bootstrap에 포함된 내용에 대한 자세한 내용은 콘텐츠 섹션을 참조하세요.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

분리된

별도의 스크립트 솔루션을 사용하기로 결정했다면 Popper가 먼저 와야 하고(도구 설명이나 팝오버를 사용하는 경우) 그 다음에 JavaScript 플러그인이 있어야 합니다.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

모듈

를 사용하는 경우 Bootstrap을 모듈로 사용<script type="module"> 섹션 을 참조하십시오 .

구성품

JavaScript와 Popper가 명시적으로 필요한 구성 요소가 무엇인지 궁금하십니까? 아래 구성 요소 표시 링크를 클릭하십시오. 일반적인 페이지 구조가 확실하지 않다면 계속해서 예제 페이지 템플릿을 읽으십시오.

JavaScript가 필요한 구성 요소 표시

닫기 알림
상태 및 확인란/라디오 기능 전환을 위한 버튼
모든 슬라이드 비헤이비어, 컨트롤 및 표시기에 대한 캐러셀
콘텐츠 가시성을 전환하기 위한 축소
표시 및 위치 지정을 위한 드롭다운( Popper 도 필요 )
표시, 위치 지정 및 스크롤 동작을 위한 모달
반응형 동작을 구현하기 위해 Collapse 플러그인을 확장하기 위한 Navbar
표시 및 해제를 위한 토스트
표시 및 위치 지정을 위한 도구 설명 및 팝오버( Popper 도 필요 )
스크롤 동작 및 탐색 업데이트를 위한 Scrollspy

스타터 템플릿

최신 디자인 및 개발 표준으로 페이지를 설정해야 합니다. 이는 HTML5 doctype을 사용하고 적절한 반응 동작을 위해 뷰포트 메타 태그를 포함하는 것을 의미합니다. 모두 합치면 페이지가 다음과 같이 보일 것입니다.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

다음 단계를 위해 레이아웃 문서 또는 공식 예제 를 방문 하여 사이트의 콘텐츠 및 구성요소 레이아웃을 시작하세요.

중요한 전역

부트스트랩은 사용할 때 알아야 할 몇 가지 중요한 전역 스타일 및 설정을 사용합니다. 이 모든 것은 거의 전적으로 크로스 브라우저 스타일 의 정규화 에 맞춰져 있습니다. 뛰어들어봅시다.

HTML5 문서 유형

부트스트랩은 HTML5 doctype을 사용해야 합니다. 그것이 없으면 펑키하고 불완전한 스타일링을 볼 수 있지만 포함하면 상당한 문제가 발생하지 않습니다.

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

반응형 메타 태그

Bootstrap은 모바일 우선 으로 개발되었으며 , 먼저 모바일 장치용 코드를 최적화한 다음 CSS 미디어 쿼리를 사용하여 필요에 따라 구성 요소를 확장하는 전략입니다. 모든 장치에 대해 적절한 렌더링 및 터치 확대/축소를 보장하려면 반응형 뷰포트 메타 태그 를 <head>.

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

시작 템플릿 에서 이 작업의 예를 볼 수 있습니다 .

상자 크기

CSS에서 보다 직접적인 크기 조정을 위해 전역 box-sizing값을 에서 content-box로 전환합니다 border-box. 이렇게 하면 padding요소의 최종 계산 너비에 영향을 미치지 않지만 Google 지도 및 Google 맞춤 검색 엔진과 같은 일부 타사 소프트웨어에 문제가 발생할 수 있습니다.

드문 경우지만 재정의해야 하는 경우 다음과 같이 사용합니다.

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

위의 스니펫을 사용하면 ::before및 를 통해 생성된 콘텐츠를 포함한 중첩 요소가 모두 해당 요소에 대해 지정된 것을 ::after상속합니다 .box-sizing.selector-for-some-widget

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

재부팅

브라우저 간 렌더링 개선을 위해 Reboot 를 사용하여 브라우저와 장치 전반에서 불일치를 수정하는 동시에 일반적인 HTML 요소에 대해 좀 더 독단적인 재설정을 제공합니다.

지역 사회

Bootstrap 개발에 대한 최신 정보를 확인하고 이 유용한 리소스를 통해 커뮤니티에 연락하십시오.

공식 부트스트랩 블로그 를 읽고 구독하십시오 .
IRC에서 동료 부트스트래퍼와 채팅하십시오. irc.libera.chat서버에서, 채널 #bootstrap에서.
구현 도움말은 스택 오버플로(태그 bootstrap-5있음)에서 찾을 수 있습니다.
개발자는 최대 검색 가능성을 위해 npm 또는 유사한 전달 메커니즘을 bootstrap통해 배포할 때 Bootstrap의 기능을 수정하거나 추가하는 패키지에 키워드를 사용해야 합니다 .

Twitter에서 @getbootstrap을 팔로우 하여 최신 가십과 멋진 뮤직 비디오를 볼 수도 있습니다.