주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
Check
in English

부트스트랩 시작하기

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

빠른 시작

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


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

참고로 다음은 기본 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을 사용 하여 콘텐츠 페이지에 나열된 추가 빌드 를 가져올 수도 있습니다 .

다음 단계

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을 팔로우 하여 최신 가십과 멋진 뮤직 비디오를 볼 수도 있습니다.