소개

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

빠른 시작

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

CSS

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

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

JS

많은 구성 요소가 작동하려면 JavaScript를 사용해야 합니다. 특히 jQuery , Popper 및 자체 JavaScript 플러그인이 필요합니다. jQuery의 슬림한 빌드 를 사용 하지만 정식 버전도 지원합니다.

다음 중 하나를 <script>페이지 끝 근처에 있는 닫는 태그 바로 앞에 배치 하여 </body>활성화합니다. jQuery가 먼저 오고, Popper가 오고, 그 다음 JavaScript 플러그인이 와야 합니다.

묶음

두 번들 중 하나에 모든 Bootstrap JavaScript 플러그인을 포함합니다. 툴팁 bootstrap.bundle.js과 팝오버 bootstrap.bundle.min.js에는 Popper 가 포함되지만 jQuery 는 포함되지 않습니다 . jQuery를 먼저 포함한 다음 Bootstrap JavaScript 번들을 포함합니다. Bootstrap에 포함된 내용에 대한 자세한 내용은 콘텐츠 섹션을 참조하세요.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

분리된

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

구성품

jQuery, JavaScript 및 Popper가 명시적으로 필요한 구성 요소가 무엇인지 궁금하십니까? 아래 구성 요소 표시 링크를 클릭하십시오. 페이지 구조가 확실하지 않은 경우 예제 페이지 템플릿을 계속 읽으십시오.

JavaScript가 필요한 구성 요소 표시

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

스타터 템플릿

최신 디자인 및 개발 표준으로 페이지를 설정해야 합니다. 이는 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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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, shrink-to-fit=no">

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

상자 크기

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-4있음)에서 찾을 수 있습니다.
개발자는 최대 검색 가능성을 위해 npm 또는 유사한 전달 메커니즘을 bootstrap통해 배포할 때 Bootstrap의 기능을 수정하거나 추가하는 패키지에 키워드를 사용해야 합니다 .

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

CSP 및 임베디드 SVG

여러 Bootstrap 구성 요소에는 CSS에 포함된 SVG가 포함되어 있어 브라우저와 장치 전반에 걸쳐 구성 요소의 스타일을 일관되고 쉽게 할 수 있습니다. 보다 엄격한 CSP 구성 을 사용하는 조직을 위해 포함된 SVG의 모든 인스턴스(모두 를 통해 적용됨 background-image)를 문서화하여 옵션을 보다 철저하게 검토할 수 있습니다.

커뮤니티 대화 를 기반으로 고유한 코드베이스에서 이 문제를 해결하기 위한 몇 가지 옵션에는 URL을 로컬에서 호스팅되는 자산으로 교체하고, 이미지를 제거하고 인라인 이미지를 사용하고(일부 구성 요소에서 가능하지는 않음) CSP를 수정하는 방법이 있습니다. 자체 보안 정책을 신중하게 검토하고 필요한 경우 최선의 경로를 결정하는 것이 좋습니다.