부트스트랩 그리드의 이해
2017. 4. 6. 11:06ㆍ웹자료
1.부트 스트랩은 화면을 총 12개컬럼을 나눠서 그리드 클래스로 구성
스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 |
2.그리드를 구성할때 기기에 따라 클래스 바꿔쓴다
xs (전화 용)
sm (태블릿 용)
md (데스크톱 용)
lg (대형 데스크탑의 경우)
3. 예시
row로 분리한후 칼럼을 - > [ col-기기에따른 클래스-그리드갯수 ]
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
그리드 옵션
매우 작은 기기 모바일폰 (<768px) | 작은 기기 태블릿 (≥768px) | 중간 기기 데스크탑 (≥992px) | 큰 기기 데스크탑 (≥1200px) | |
---|---|---|---|---|
그리드 적용 | 항상 | 분기점보다 크면 적용 | ||
콘테이너 너비 | 없음 (auto) | 750px | 970px | 1170px |
클래스 접두사 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
컬럼 수 | 12 | |||
컬럼 너비 | Auto | ~62px | ~81px | ~97px |
사이 너비 | 30px (컬럼의 양쪽에 15px 씩) | |||
중첩 | 예 | |||
오프셋 | 예 | |||
컬럼 순서정하기 | 예 |
'웹자료' 카테고리의 다른 글
부트스트랩 레이아웃 자동 코딩 사이트 (1) | 2017.04.08 |
---|---|
부트스트랩 설명서 (0) | 2017.04.06 |
부트스트랩 테이블 (0) | 2017.04.06 |
jquery 플러그인정리~bootstrap이랑 쓰면...좋음... (0) | 2017.04.05 |
부트스트랩 코드플레이주소~ (0) | 2017.04.03 |