부트스트랩 시작하기

Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입에서 프로덕션에 이르기까지 모든 것을 몇 분 만에 구축할 수 있습니다.

이 페이지에서

빠른 시작

빌드 단계 없이 CDN을 통해 Bootstrap의 프로덕션 준비 CSS 및 JavaScript를 포함하여 시작하십시오. 이 Bootstrap CodePen 데모 에서 실제로 확인하십시오 .

index.html프로젝트 루트에 새 파일을 만듭니다 . 모바일 장치에서 적절한 반응 동작<meta name="viewport"> 을 위해 태그도 포함합니다 .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Bootstrap의 CSS 및 JS를 포함합니다. CSS에 대한 태그 <link>와 닫기 전에 JavaScript 번들에 대한 태그(드롭다운 위치 지정을 위한 Popper, 팝퍼 및 도구 설명 포함)를 배치합니다 . CDN 링크 에 대해 자세히 알아보십시오 .<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Popper 와 JS를 별도로 포함할 수도 있습니다 . 드롭다운, 팝오버 또는 도구 설명을 사용하지 않으려면 Popper를 포함하지 않음으로써 몇 킬로바이트를 절약하십시오.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

안녕하세요, 세계입니다! 선택한 브라우저에서 페이지를 열어 부트스트랩 페이지를 봅니다. 이제 자신만의 레이아웃 을 만들고 수십 개의 구성 요소 를 추가 하고 공식 예제 를 활용하여 Bootstrap으로 빌드를 시작할 수 있습니다 .

CDN 링크

참고로 다음은 기본 CDN 링크입니다.

설명	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

CDN을 사용 하여 콘텐츠 페이지에 나열된 추가 빌드 를 가져올 수도 있습니다 .

다음 단계

Bootstrap이 활용하는 몇 가지 중요한 전역 환경 설정 에 대해 조금 더 읽어보십시오 .
콘텐츠 섹션 에서 Bootstrap에 포함된 내용과 JavaScript가 필요한 구성 요소 목록을 아래에서 읽어보십시오.
조금 더 힘이 필요하십니까? 패키지 관리자를 통해 소스 파일을 포함하여 부트스트랩으로 빌드하는 것을 고려하십시오 .
Bootstrap을 모듈로 사용하기를 원 <script type="module">하십니까? Bootstrap을 모듈로 사용 섹션 을 참조하십시오 .

JS 구성 요소

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

JavaScript가 필요한 구성 요소 표시

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

중요한 전역

Bootstrap은 소수의 중요한 전역 스타일과 설정을 사용하며, 모두 거의 전적으로 크로스 브라우저 스타일 의 정규화 에 맞춰져 있습니다. 뛰어들어봅시다.

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 개발에 대한 최신 정보를 확인하고 이러한 유용한 리소스를 통해 커뮤니티에 연락하십시오.

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

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