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