프레임 워크 인 Bootstrap을 시작하십시오
컨텐츠 정보
- 6,418 조회
- 0 추천
- 목록
본문
BootstrapCDN 및 템플릿 시작 페이지를 사용하여 반응 형의 모바일 우선 사이트를 구축하기위한 세계에서 가장 널리 사용되는 프레임 워크 인 Bootstrap을 시작하십시오.빠른 시작
프로젝트에 Bootstrap을 빠르게 추가하려고하십니까? StackPath 직원이 무료로 제공하는 BootstrapCDN을 사용하십시오. 패키지 관리자를 사용하거나 소스 파일을 다운로드해야합니까? 다운로드 페이지로 이동하십시오 .
CSS
CSS를로드하기 위해 다른 모든 스타일 시트보다 먼저 스타일 시트 <link>를 복사하여 붙여 넣기하십시오 <head>.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">JS
많은 구성 요소가 작동하려면 JavaScript를 사용해야합니다. 특히 jQuery , Popper.js 및 자체 JavaScript 플러그인이 필요합니다. <script>닫기 </body>태그 바로 앞에 페이지 끝 근처에 다음 을 배치하여 활성화하십시오. jQuery가 먼저 와서 Popper.js와 JavaScript 플러그인이 있어야합니다.
우리는 jQuery의 슬림 빌드 를 사용하지만 정식 버전도 지원됩니다.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
jQuery, JS 및 Popper.js를 명시 적으로 요구하는 컴포넌트가 궁금하십니까? 아래의 컴포넌트 표시 링크를 클릭하십시오. 일반 페이지 구조에 대해 잘 모르는 경우 예제 페이지 템플리트를 계속 읽으십시오.
우리 bootstrap.bundle.js와는 bootstrap.bundle.min.js포함 포퍼 가 아닌 jQuery를 . Bootstrap에 포함 된 내용에 대한 자세한 내용은 내용 섹션을 참조하십시오 .
스타터 템플릿
최신 디자인 및 개발 표준으로 페이지를 설정해야합니다. 즉, 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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
이것이 전체 페이지 요구 사항에 필요한 전부입니다. 레이아웃 문서 또는 공식 예제 를 방문 하여 사이트의 컨텐츠 및 구성 요소를 배치하십시오.
중요한 글로벌
부트 스트랩은 사용할 때 알아야 할 몇 가지 중요한 글로벌 스타일과 설정을 사용합니다 .이 스타일 은 거의 독점적 으로 크로스 브라우저 스타일 의 정규화 에 맞춰져 있습니다. 뛰어 들자
HTML5 독 타입
부트 스트랩에는 HTML5 doctype을 사용해야합니다. 그것이 없으면, 당신은 약간의 펑키 불완전한 스타일을 볼 수 있지만, 포함하면 상당한 딸꾹질을 일으키지 않아야합니다.
<!doctype html>
<html lang="en">
...
</html>반응 형 메타 태그
부트 스트랩은 모바일 우선 개발로 , 모바일 장치 용 코드를 먼저 최적화 한 다음 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 개발에 대한 최신 정보를 얻고 이러한 유용한 리소스를 사용하여 커뮤니티에 문의하십시오.
- 따라 트위터에 @getbootstrap .
- 공식 부트 스트랩 블로그 를 읽고 구독하십시오 .
- 공식 슬랙 룸에 가입 하십시오 .
- IRC에서 동료 부트 스트 래퍼와 채팅하십시오. 온
irc.freenode.net에서 서버,##bootstrap채널. - 구현 도움말은 스택 오버플로 (태그 됨
bootstrap-4) 에서 찾을 수 있습니다 . - 개발자는 검색 가능성을 극대화하기 위해 npm 또는 유사한 전달 메커니즘을
bootstrap통해 배포 할 때 Bootstrap의 기능을 수정하거나 추가하는 패키지에 키워드 를 사용해야합니다 .
또한 따를 수 트위터에 @getbootstrap 최신 험담과 멋진 뮤직 비디오를 위해.
■ ▶ ☞ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다 ♠ . ☞ 본자료는 https://11q.kr 에 등록 된 자료 입니다♠.