1. 부트 스트랩 개발 환경을 구축하십시오
1. 다운로드 bootstrap, http://www.bootcss.com/
2. jQuery를 다운로드하고 http://code.jquery.com/jquery-2.0.3.min.js를 즉시 IE를 통해 직접 액세스하십시오
3. HTML 페이지에서 부트 스트랩 및 JQuery의 JS, CSS 파일 및 .viewport의 <Meta> 태그 가져 오기. 이 태그는 IE9의 호환성을 위해 LT IE 9 ...과 같은 대부분의 모바일 장치에 표시하도록 수정할 수 있습니다.
템플릿은 다음과 같습니다
<! docType html> <html> <head> <meta charset = "utf-8"> <meta content = "width = device-width, device-width, device-width, device-width, device-width, device-width, device-width, device-width, device-width, in insert </title> <link href ="css/bootstrap.min.css " IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respone.js/1.3.0/reest.1.mepen <! [endif]-> <script src = "js/jquery-2.3.3.3.min.js"> </script> <scrc = "js/bootstrap.min.js"> </script> </head> <body> <div> </div> </body> </html>
II. 그리드 시스템
1. 부스트랩은 데스크탑을 레이아웃을 위해 12 줄 * n 열이있는 테이블로 분리합니다.
2.. ROW는로드 레벨을 나누는 데 사용되며 .Container에 포함되어야합니다.
3. col-xx-* 아래 그림과 같이 열 수준 부서를 수행하십시오.
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> </div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> 8 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
4. Coll-XX-Offset-을 통해 구현 된 열 오프셋 -*
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div>
5. 열 분류는 .col-xx-push-* 및 .col-xx-pull-*에 의해 달성 될 수있다.
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div> </div> </div>
6. Col의 둥지 및 둥지 줄.
<div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> <div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.