부트 스트랩 설치는 매우 쉽습니다. 이 기사는 내 연구에 대한 요약으로 향후 문의 및 학습에 편리합니다. 동시에, 나는 당신을 도와 주길 바랍니다.
1. 다운로드 부트 스트랩
http://getbootstrap.com/에서 최신 버전의 Bootstrap을 다운로드 할 수 있습니다. 이 링크를 클릭하면 다음과 같은 웹 페이지가 표시됩니다.
두 개의 버튼이 표시됩니다.
Bootstrap 다운로드 : Bootstrap을 다운로드하십시오. 이 버튼을 클릭하면 압축 된 압축 버전의 부트 스트랩 CSS, JavaScript 및 글꼴을 다운로드 할 수 있습니다. 문서 및 원래 소스 코드 파일은 포함되지 않습니다.
다운로드 출처 : 소스 코드 다운로드. 이 버튼을 클릭하면 최신 부트 스트랩이 적고 JavaScript 소스 코드를 직접 가져올 수 있습니다.
컴파일되지 않은 소스 코드를 사용하는 경우 재사용 가능한 CSS 파일을 생성하려면 적은 파일을 컴파일해야합니다. 적은 파일을 컴파일하기 위해 Bootstrap은 RECESS 만 지원하며 Twitter의 Less.js 기반 CSS 프롬프트입니다.
더 잘 이해하고 쉽게 사용하기 위해이 튜토리얼에서 선행 버전의 부트 스트랩을 사용합니다.
파일이 컴파일되고 압축되므로 독립적 인 기능 개발에서 매번 이러한 독립적 인 파일을 포함 할 필요가 없습니다.
이 연구 노트는 최신 버전입니다 (Bootstrap 3).
2. 파일 구조
1. 사전 컴파일 된 부트 스트랩
컴파일 된 버전의 Bootstrap을 다운로드하고 Zip 파일을 압축 해제하면 다음 파일/디렉토리 구조가 표시됩니다.
위의 이미지에서 볼 수 있듯이 컴파일 된 CSS 및 JS (Bootstrap.*)와 컴파일 된 압축 CSS 및 JS (bootstrap.min.*)를 볼 수 있습니다. 또한 옵션 부트 스트랩 테마 인 글리 피콘의 글꼴도 포함됩니다.
2. 부트 스트랩 소스 코드
부트 스트랩 소스 코드를 다운로드 한 경우 파일 구조가 다음과 같습니다.
Less/, JS/ 및 Fonts/의 파일은 각각 부트 스트랩 CSS, JS 및 아이콘 글꼴의 소스 코드입니다.
Dist/ Folder에는 위의 사전 컴파일 된 다운로드 섹션에 나열된 파일 및 폴더가 포함되어 있습니다.
Docs-Assets/, 예제/및 모든 *.html 파일은 부트 스트랩 문서입니다.
3. HTML 템플릿
부트 스트랩을 사용하는 기본 HTML 템플릿은 다음과 같습니다.
<! docType html> <html> <head> <title> 부트 스트랩 템플릿 </title> <meta name = "viewport"content = "width = device-width, 초기-스케일 = 1.0"> <!-소개 bootstrap-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"rel = "stylesheet"> <! <!-html5 shim 및 respone.js는 ie8을 지원하는 데 사용됩니다. 파일은 효과가 없습니다-> <!-[LT IE 9]> <SCRIPT SRC = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respent.js/1.3.0/respond.min.js"> </script> <! src = "https://code.jquery.com/jquery.js"> </script> <!-모든 컴파일 된 플러그인 포함-> <script src = "js/bootstrap.min.js"> </body> </html>
여기에는 jquery.js, bootstrap.min.js 및 bootstrap.min.css 파일을 일반 HTML 파일을 부트 스트랩을 사용하는 템플릿을 만드는 데 사용되는 파일을 볼 수 있습니다.
IV. 예
이제 "안녕하세요, 세상!" 부트 스트랩 사용 :
<! doctype html> <html> <head> <head> <title> bootstrap 인스턴스 온라인 </title> <link href = "http://apps.bdimg.com/libs/bootstrap/3.0/css/bootstrap.min.css"rel = "script" src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.33.0/js/js/bootstrap.min.js"</hert> </head> </head> 세계! </h1> </body> </html>
<!-새로운 부트 스트랩 코어 CSS 파일-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"rel = "Stylesheet"> 옵션 부트 스트랩 테마 파일 (일반적으로 사용되지 않음)-> <스크립트 src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"> </script> <!-jQuery 파일. 소개하십시오-> <script src = "http://apps.bdimg.com/jquery/2.2.0/jquery.min.js"> <!-최신 부트 스트랩 코어 JavaScript 파일-> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script>
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되고 부트 스트랩 설치 환경을 올바르게 구축하기를 바랍니다.