프레임 워크 인 Bootstrap을 시작하십시오

11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성
192.♡.0.1 아이피
작성일 2020.05.03 11:57

5,473 조회
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에 포함 된 내용에 대한 자세한 내용은 내용 섹션을 참조하십시오 .

JavaScript가 필요한 구성 요소 표시

스타터 템플릿

최신 디자인 및 개발 표준으로 페이지를 설정해야합니다. 즉, 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의 기능을 수정하거나 추가하는 패키지에 키워드 를 사용해야합니다 .