프로젝트 요구로 인해 부트 스트랩 프레임 워크를 잘 배울 계획입니다. 나는 조금 전에 배웠다. 프레임 워크는 전반적으로 어렵지 않지만 여전히 많은 것들이 있습니다. 능숙하게 마스터하려면 여전히 더 많은 연습을해야합니다.
1. 부트 스트랩이란 무엇입니까?
BS는 무엇입니까? 즉, 프론트 엔드 페이지로 구축 된 표준화 된 프레임 워크 도구는 CSS.JS 스타일로 작성되었으며 사용하면됩니다.
BS를 사용하는 방법? 다른 클래스를 사용하여 주로 효과가 증가하며 각 클래스마다 다른 해당 기능이 있습니다.
BS 혜택 : 개발 효율성을 높이고 페이지 디자인을 더 아름답게 만들고 반응 형 개발을 지원합니다. 다운로드 주소 : https://github.com/foreverjiangting/bootstrap
학습 문서 : http://v3.bootcss.com/getting-started/
2. CSS 스타일 디자인
1. HTML 문서를 기반으로합니다
Bootstrap은 일부 HTML 요소를 나타냅니다. 따라서 아래 표시된 샘플 열로 헤더를 작성해야합니다.
<! docType html> --- html5 문서 선언이 포함되어 있습니다. 모든 브라우저는 표준 모드 <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catible"컨텐츠 = "ie = edge"> <meta name = "viewport ="width = theity-width, weater-width, with-width, with-width, wother scale, 3 개의 메타 태그 *를 먼저 배치해야하며 다른 컨텐츠 *를 따라야합니다 *를 따라야합니다! 응답 레이아웃이 지원됩니다-> <title> bootstrap </title> [/code] [code] <!-새로운 bootstrap core css 파일-> <link rel = "stylesheet"href = "// cdn.bootcss.com/bootstrap/3.3.3.5/css/bootstrap.min.css"> 옵션이 필요하지 않음)-일반적으로 Bootstap이 필요하지 않습니다. -> <link rel = "Stylesheet"href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">< !-- jQuery 파일. 소개-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><! src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">/script></head>< body><<h1> hello, World! </h1> </body> </html>
2. 그리드 시스템 레이아웃
행과 열을 설정하여 레이아웃 콘텐츠. 부트 스트랩은 페이지를 12 열로 설정합니다. 세 개의 동일한 너비 열 설정과 같은 열 수를 변경하여 레이아웃 :
<! docType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie get"> <meta name = "viewport"contment = "width = device-width, mete-scale = 1"-위의 3 개의 태그 * 다른 컨텐츠 *를 따라야합니다! -> <title> </title> <link href = "css/bootstrap.css"rel = "Stylesheet"> <link href = "css/bootstrap.min.css"rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootsprap/3.33.3.3.4/js/jstrap.min.js"> </script> <!- Script> <! 레이아웃-> <div> <!-또는 컨테이너-플루이드-> <div>-col-xs-4 : 768px <div> 11 </div>-col-SM-4 : COL-SM-4를 참조하십시오. 1200px 미만 </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </body> </html>
CSS 네트워크 형식을 작성하는 4 가지 방법은 주로 다른 장치의 해상도에 사용됩니다.
2 : 열을 번역하십시오
팬에 오프셋을 사용하십시오. 즉, 번역 된 열의 수입니다
<div><!-- or container-fluid--> <div> <div>11</div> <div>22</div> <div>33</div>---refers to the right of 33 </div> <div>11</div> <div>22</div> <div>33</div>---refers to the right of 33 </div> <div>11</div> <div>22</div> <div> 33 </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <!-번역 열->
효과는 다음과 같습니다.
33 두 열이 번역되었으므로 4 개의 열을 점유 해야하는 요구 사항을 충족 할 수 없었기 때문에 다음 행에 압착되어 4 개의 열을 차지하기 시작했습니다. 간단히 말해서, 전체 div 블록을 오른쪽으로 이동하는 것과 같습니다.
3 : 중첩 된 열
즉, 그리드 열의 둥지 열입니다. 비교합시다.
<div><!-- or container-fluid--> <div> <div> <div>11</div> <div>22</div> <div>33</div> </div> </div> <div> <div>11</div> </div> <div>11</div> </div> <div>11</div> <div>22</div> <div>33</div> </div> </div> </div> </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div>
효과는 다음과 같습니다.
문제를 찾았습니까? 위의 8의 동일한 분포가없는 이유는 무엇입니까?
이유 : 디버그 콘솔을 살펴 보겠습니다
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {min-ehight-x-9 {height : 1 {x-xs-8, .col-xs-6. 왼쪽 패딩 : 15px; 패딩-오른쪽 : 15px; 위치 : 상대;}왼쪽 패딩 왼쪽과 패딩 오른쪽은 둘 다 15px 인 것으로 밝혀졌습니다. 이는 열 사이의 패딩이 영향을받을 가치가 있기 때문에 두 번째 div가 영향을 미치지 않기 때문입니까? 펜스 그리드의 원리를 살펴 보겠습니다.
1. "행"은 .container (고정 너비) 또는 .container-fluid (100% 너비)에 포함되어야합니다.
2. "열"의 padding 속성을 설정하여 열 사이의 거터를 만듭니다. .row 요소의 음수 margin 설정하여 .container 요소의 오프셋 padding 세트
간접적으로 "행"에 포함 된 "열"은 padding 오프셋합니다.
참고 : 현재 행은 열의 패딩을 오프셋하므로 패딩 값이 없습니다.
4 : 열 정렬
주로 col-xs-push-* col-xs-pull-*를 사용합니다 (*는 0-11의 다수를 나타냅니다)이 두 클래스를 이해하는 방법은 무엇입니까? 푸시는 푸시를 의미합니다.
<div> <div> 21 </div> <div> 24 </div> </div> <div> <div> 21 </div> <div> 24 </div> </div>
렌더링은 다음과 같습니다.
<div> 21 </div> --- Div1 <div> 24 </div>로 기록되어 Div2로 기록됩니다
둘 다의 위치를 교환하는 것이 이해 될 수 있습니다. Div1을 오른쪽 8 열로 푸시야하며 4 개의 열을 왼쪽으로 당겨야합니다.
3. 스트리밍 그리드 레이아웃
1. 열 너비는 픽셀이 아닌 백분율을 사용합니다
2. 행 클래스를 행 유체로 변경하십시오
3. 다른 기본 기능은 위의 고정 레이아웃 및 지원 응답 성과 동일합니다.
4. 이등분기에서 특정 열을 나누면 스트리밍 레이아웃이 백분율을 사용하기 때문에 6에 따라 계산해야합니다.
// 다음 상황에 유의하십시오. 8 개의 열을 양측으로 나누면 부트 스트랩에는 12 개의 래스터 분포가 있기 때문에 2 개의 4s가 아니라 2 개의 6로 설정됩니다. <div> <div> <div> 2 </div> <div> 2 </div> </div> </div> </div> </div>
스트리밍 레이아웃의 적용을 살펴보고 고정 레이아웃과 비교해 봅시다.
<!-스트리밍 레이아웃-> <div> <div> 333 </div> <div> 444 </div> </div> <div> --- 컨테이너-유체 클래스를 선언하고, 내용이 스트리밍 레이아웃, 기능을 포함한다는 것을 나타냅니다. 컨테이너 및 컨테이너 유체 클래스, 이것은 화면의 너비 <div> 333 </div> <div> 444 </div> </div>입니다.
화면이 768px 미만인 경우 효과는 다음과 같습니다.
화면이 992px보다 큰 경우 효과는 다음과 같습니다.이 시점에서 한 줄은 독점적입니다.
Row-Fluid 클래스 (매우 중요)는 유량 레이아웃인지 여부를 결정합니다. 그런 다음 컨텐츠 블록 코드는 그리드 시스템과 동일한 방식으로 작성되며 여전히 COL-MD-1에서 COL-MD-12로 시작하여 각각 다른 백분율에 해당합니다.
4. 반응 형 디자인
간단히 말해, 적응 형 응답을 위해 다른 장치 (휴대 전화, PC)의 해상도 (960px, 1366px, 978px 등)를 지원합니다.
<div> <div> 21 </div> <div> 24 </div> </div>
장치가 768px 미만인 경우 효과는 다음과 같습니다.
장치> = 992px. 효과는 다음과 같습니다.
위의 두 범주의 해상도는 다릅니다. Col-MD-12는 각 열에는 하나의 행, 즉 12 열이 있음을 의미합니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.