microGRID
1.0.0
Microgrid NR은 세계에서 가장 작고 사분의 자유 그리드 시스템 인 독립형 입니다.
Gzipped 버전의 크기는 184 바이트 입니다.
예를 들어 GZIPPER bootstrap-grid.min.css (Bootstrap 4.1.3)는 3195 바이트 입니다.
Microgrid NR ( 184 바이트 )의 GZIPES 크기를 다른 그리드 시스템과 비교해 봅시다.
마이크로 그리드 NR 은 크로스 브라우저입니다.
<헤드> <link href = "microgrid-nr.min.css"rel = "Stylesheet"> </head>
또한 모든 HTML 요소에 대한 박스 크기의 CSS 속성을 설정하는 것이 좋습니다 (박스 크기 속성에 대해 자세히 알아보십시오).
<헤드>
<style>*{box-sizing : border-box} </style>
<link href = "microgrid-nr.min.css"rel = "Stylesheet">
</head>
요소 이름 지정 및 구조는 부트 스트랩 3에서와 동일하거나 유사합니다.
컨테이너에는 row 요소 만 포함되어야합니다.
페이지 당 단일 container 또는 container-fluid 만 허용됩니다.
<div class = "컨테이너"> </div>
기본적으로 container 너비는 100%입니다.
사용자 정의 값으로 변경할 수 있습니다.
<div class = "Container-Fluid"> </div>
행은 container 또는 container-fluid 요소 내부에 배치해야합니다.
행에는 col 요소 만 포함됩니다.
<div class = "row"> </div>
열은 항상 row 요소 내부에 배치해야합니다.
<div class = "col [viewport] -6"> </div>
예:
<div class = "col xs-6"> </div>
현재 열 오프셋에 대한 내장 클래스가 없습니다.
열 오프셋을 만들어야하는 경우 다음 예제에서와 같이 빈 열을 의사 오프 세트로 사용하십시오.
<!-의사 오프셋 시작-> <div class = "col xs-6"> </div> <!-의사 오프 세트 엔드> <!-열 시작-> <div class = "col xs-6">이 열에는 의사-오프셋 </div>가 있습니다 <!- 열 끝>
<html>
<헤드>
<style>*{box-sizing : border-box} </style>
<link href = "microgrid-nr.min.css"rel = "Stylesheet">
</head>
<body>
<div class = "Container-Fluid">
<div class = "row">
<div class = "col xs-4"> a </div>
<div class = "col xs-8"> b </div>
</div>
<div class = "row">
<div class = "col xs-12">
<div class = "col xs-4"> c </div>
<div class = "col xs-4"> d </div>
<div class = "col xs-4"> e </div>
</div>
</div>
<div class = "row">
<div class = "col xs-8"> f </div>
<div class = "col xs-4"> g </div>
</div>
</div>
</body>
</html>
Microgrid (NR)는 단일 뷰포트 (XS) 만 지원합니다.
여러 Viewports 응용 프로그램을 개발하려면 Microgrid (곧)의 표준 (완전 응답 형) 버전을 사용할 수 있습니다.
