Source

소개

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

빠른 시작

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

CSS

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

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

JS

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

jQuery의 슬림한 빌드 를 사용 하지만 정식 버전도 지원합니다.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

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

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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 개발에 대한 최신 정보를 확인하고 이 유용한 리소스를 통해 커뮤니티에 연락하십시오.

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