1. 소개
Bootstrap에는 반응 형 모바일 우선 스트리밍 그리드 시스템이 내장되어 있습니다. 화면 장치 또는 뷰포트 크기가 증가함에 따라 시스템은 자동으로 최대 12 개의 열로 나뉩니다 . 사전 정의 된 클래스와 더 많은 의미 론적 레이아웃을 생성하기위한 강력한 Mixins가 포함되어 있습니다.
2. 래스터 옵션
bootstrap3.x는 4 가지 그리드 옵션을 사용하여 그리드 시스템을 형성합니다. 공식 웹 사이트 에이 네 가지 옵션을 소개하는 것은 다음과 같습니다. 많은 사람들이 그것을 이해하지 못합니다. 여기서는 네 가지 그리드 옵션의 차이점을 자세히 설명하겠습니다. 실제로, 차이점 중 하나만이 크기가 다른 화면 장치에 적합하다는 것입니다 . 클래스 접두사 항목을 살펴 보겠습니다. 접두사에 대한이 4 가지 그리드 옵션을 지정하겠습니다. 그들은 col-x, col-SM, col-MD 및 col-LG입니다. 영어를 이해하는 사람들은 LG가 큰 약어, MD는 MID의 약어이며 SM은 소규모의 약어이며 XS는 ***의 약어입니다. 이 이름은이 클래스가 적응하는 다양한 화면 너비를 반영합니다. 아래에서 우리는이 클래스의 특성을 소개합니다.
다음 표를 통해 Bootstrap의 래스터 시스템이 여러 화면 장치에서 어떻게 작동하는지 자세히 볼 수 있습니다.
3. 열 오프셋
.col-md-offset-*를 사용하여 열을 오른쪽으로 오프셋하십시오. 이 클래스는 * 선택기를 사용하여 모든 열을 열의 왼쪽 마진에 추가합니다. 예를 들어, .col-md-offetset-4는 너비의 4 열으로 .col-md-4를 오른쪽으로 이동시켰다.
4. 중첩 된 열
내장형 래스터를 사용하여 콘텐츠를 중첩하려면 이미 기존 .col-md-* 열에 새 .ROW와 일련의 .col-md-* 열을 추가하여 수행 할 수 있습니다. 중첩 행에 포함 된 열은 최대 12 개를 추가해야합니다 .
5. 열 정렬
.col-md-push-* 및 .col-md-pull-*를 사용하여 열 순서를 쉽게 변경할 수 있습니다.
사례
<%@ page language = "java"pageencoding = "utf-8"%> <%string path = request.getContextPath ();%> <! docType html> <html lang = "zh-cn"> <head> <title> raster> <meta content = "ie = edge"http- equiv = "x-ua-compative"> http-equiv = "content-type"content = "text /html; charset = utf-8" /> <meta http-equiv = "content-language"content = "zh-cn" /> <meta name = "author"content = "[email protected]" />> <meta name = "cophyright" "cupyright" Ltd. " /> <meta http-equiv = "pragma"content = "no-cache"> <meta http-equiv = "cache-control"content = "no-cache"> <meta http-equiv = "content ="0 "> <meta http-equiv ="keywords = "keyword2, keyword2, keyword3 http-equiv = "description"content = "내 페이지입니다"> <jsp : include page = "/demo/base/js_bootstrap.jsp"/> <style type = "text/css">. show-grid [class ^= "col-"] {padding-top : 10px; 패딩-바닥 : 10px; RGBA (86, 61, 124, .15); 경계 : 1px Solid rgba (86, 61, 124, .2);} </style> <script type = "text/javaScript"> $ (function () {}); </script> </head> <bod> <b> col-lg-*<br/> <div> <div> .col-lg-8 </div> <div> .col-lg-4 </div> </div> <br/> <b> col-md-*usage </b> <div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div- .col-md- 1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <br/> <b> col-md-8 </div> <div> .col-md-4 </div> </div> <br/ <br/> <b> col-sm-*usage </b> <div> <div> .col-sm-8 </div> <div> .col-sm-4 </div> </div> <br/> <b> col-xs-*usage </b> <div> <div> .col-xs-8 </div> <div> .col-xs-4 </div> </div> <br/> <b> 열 오프셋 : col-md- 오프셋-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <di v> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-m d-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> .col-md-4 </di v> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div> <br/> <b> 열 오프셋 : col-md- 오프셋-*</b> <div> <div> .col-md-4 <col-md-4 </div> <div> .col-md-4 </div> <div> .col-md .col-md-portset-4 </div> <div> <div> <col-md-3 <col-md-3 .col-md-3 .col-md-offepset-3 </div> </div> <div> <div> .col-md-6 .col-md-6 .col-md-offset-3 </div> </div> <br/<br/> 중첩 된 열 : 중첩 행에 포함 된 열은 12 </b> <div> <div> 레벨 1 : .col-md-9 <div> <col-md-6 <div> <col-md-6 <div> <col-md-6 <div> 2 : .col-md-6 </div> </div> </div> <br/ <br/ <br/> <b> 열 분류 : .col-md-push-* 및 .col-md-pull-* </b> <div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-</div> </div> </body> </html>
데모 효과
위는 편집자가 귀하에게 소개 한 부트 스트랩 그리드 시스템에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다!