화면너비 | 768px 미만 | 768px 이상 | 992px 이상 | 1200px 이상 |
그리드 배열 | 항상 가로배열 | 가로 배열에서 위 수치에 이르면 세로 배열로 전환 | ||
.container 너비 | 없음 (항상 화면 전체너비) | 750px | 970px | 1170px |
클래스 선택자 접두어 | .col-xs- (xs: extra small) | .col-sm- (sm: small) | .col-md- (md: medium) | .col-lg- (lg: large) |
거터(그리드 사이 여백) 크기 | 30px, 그리드 좌우측 15px 패딩 |
좌측 내용과 우측에 사이드바가 있는 전통적인 그리드인데요.
좌측 그리드는 8을 우측 그리드는 4로 2:1 비율로 만들었습니다.
<div class=”col-md-8 col-lg-8 col-sm-8“>…</div>
<div class=”col-md-4 col-lg-4 col-sm-4“>…</div>
<div class=”col-md-4 col-lg-4 col-sm-4“>…</div>
'프로그래밍 언어 > 부트스트랩(Bootstrap)' 카테고리의 다른 글
[bootstrap] 부트스트랩 그리드 – 컬럼 네스팅(Column Nesting) (0) | 2016.01.15 |
---|---|
[bootstrap] 부트스트랩 그리드 – 그리드를 밀고 당기는 선택자 사용하기 (0) | 2016.01.15 |
[bootstrap] 부트스트랩 그리드 – 동시에 여러개의 그리드 선택자 사용 (0) | 2016.01.15 |
[부트스트랩] Bootstrap을 예제 및 소스와 함께 잘 설명해 놓은 곳 (0) | 2015.12.29 |
[부트스트랩] Bootstrap 테마 장터 - wrapbootstrap.com (2) | 2015.10.27 |
댓글