• 회원가입
  • 로그인
  • 구글아이디로 로그인

[grid] BS3 - Grid (그리드) - 반응형 레이아웃 ★★★

BS3 그리드 구조 (전체 너비 12등분해 배분)

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12



BS3 그리드 옵션

  Extra  Small
< 768px
Small
>= 768px
Medium
>= 992px
Large
>= 1200px
Class 접두어 .col-xs- .col-sm- .col-md- .col-lg-
최적화 기기 모바일 태블릿 소형노트북 노트북/PC
Grid 작동 항상 수평 분기점 미만 수직
분기점 이상 수평
분기점 미만 수직
분기점 이상 수평
분기점 미만 수직
분기점 이상 수평
Container width None (auto) 750px 970px 1170px
Column 개수 12 12 12 12
Column 너비 Auto ~ 62px ~ 81px ~ 97px
Gutter 너비 30px
(양쪽 15px)
30px
(양쪽 15px)
30px
(양쪽 15px)
30px
(양쪽 15px)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column 순서지정 Yes Yes Yes Yes

※ Gutter width : Column간 간격

※ Nestable : 중첩구조 가능 여부

※ Offset : .row 클래스에 음수 margin 줘서 양쪽 끝 column padding 상쇄 여부

※ Column 순서지정 : 순서 변경 가능 여부

 

BS3 그리드 클래스 

 

xs  : 휴대전화:  < 768 px 화면

sm  : 태블릿:  >= 768 px 화면

md : 소형 노트북: >= 992 px 화면

lg  : 노트북・데스크톱: >= 1200 px 화면

 


PS.

1. 위 클래스 결합해 보다 역동적이고 유연한 레이아웃 제작 가능.
2. 
클래스는 확장 적용되므로, xs・sm 동일 너비 설정하려면 xs만 지정.


 

BS3 그리드 시스템 규칙

※ 일부 BS 그리드 시스템 규칙

 

1.

row (행)은 적절한 정렬 및 padding을 위해 .
.container(고정 너비) 또는 .container-fluid(전체 너비) 클래스 선택자 내에 있어야 함.

2.

.row (행) 사용해 column (열)의 수평 그룹 만듦.

3.

콘텐츠 내용은 column (열) 내에 배치되어야하며,
column (열)만이 row (행)의 바로 하위 항목이 될 수 있음.

4.

미리 정의 된 .row 와 .col-sm-4 같은 클래스는 그리드 레이아웃을 쉽게 만드는데 적합.

5.

column (열)은 padding을 통해 gutter (컬럼간 간격)을 만듦.
이 때, 처음과 마지막 열의 행에서 음수 margin (= 역마진)을 통해 좌우 양끝의 padding 여백을 제거.

6.

그리드 column (열)은 12개 열을 분할 지정해 만듦.
예를 들어, 태블릿 화면에서 3개의 동일한 너비 열은 .col-sm-4 클래스를 이용.

7.

열 너비는 백분율로 표시되므로 항상 부모 너비에 의해 상대적 유동적으로 변함.

 

 

BS3 그리드 기본 구조

 

<div class="container">

  <div class="row">

    <div class="col-*-*">...</div>

    <div class="col-*-*">...</div>

  </div>

  <div class="row">

    <div class="col-*-*">...</div>

    <div class="col-*-*">...</div>

    <div class="col-*-*">...</div>

  </div>

  <div class="row">

    ...

  </div>

</div>

 

 

PS.

BS4 그리드 : https://homzzang.com/b/bs4?sca=grid

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
basic BS3 - List Group (BS리스트그룹) - 리스트생성
basic BS3 - Panel (BS글상자 = BS패널)
basic BS3 - Dropdown (BS드롭다운메뉴) ★ + Dropup (BS드롭업메뉴)
basic BS3 - Collapse (BS접기 = BS컬랩스 = BS토글=BS접는패널) + BS아코디언
basic BS3 - Tabs/Pills - (BS탭메뉴) - 일반탭메뉴/알약탭메뉴
basic BS3 - Navbar (BS메뉴바 = BS네브바) ★ - 네비게이션 메뉴바
basic BS3 - Form (BS폼양식) ★★★
basic BS3 - Input (BS입력창 = BS인풋) + Textarea (텍스트영역) + Checkbox(체크박…
basic BS3 - Input2 (BS입력창2 = BS인풋2) 일반텍스트 + Input Group(BS인풋그룹) + …
basic BS3 - Input Sizing (BS입력창크기 = BS인풋크기)
basic BS3 - Media Object (BS미디어객체) - 썸네일위치
basic BS3 - Carousel (BS캐러셀 = BS슬라이드)
basic BS3 - Modal (BS모달) ★ - 새창팝업
basic BS3 - Tooltip (BS툴팁) - 허버형말풍선 (= 도움말풍선)
basic BS3 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS3 - Scrollspy (스크롤스파이) - 원페이지메뉴링크 (= 내부링크) ※매뉴얼제작
basic BS3 - Affix (BS어픽스) - 스크롤고정 (= 스크롤상단고정 + 스크롤사이드고정) + Scrolls…
grid BS3 - Grid (그리드) - 반응형 레이아웃 ★★★
grid BS3 - Grid (.container / .container-fluid) - 그리드 (박스형/와이드형)
grid BS3 - Grid - Small (BS그리드 소형기기 이상) - col-sm-숫자
grid BS3 - Grid - Medium (BS그리드 중형기기 이상) - col-md-숫자
grid BS3 - Grid - Large (BS그리드 대형기기 이상) - col-lg-숫자
grid BS3 - Grid Examples (그리드 예제) ★★★★★
theme BS3 - Templates (BS템플릿종류 = BS테마종류) - BS레이아웃종류 ★★★
theme BS3 - Theme "Simply Me" (BS테마 - 심플미테마 = 프로필테마 = 자기소개테마 = 원페이…
theme BS3 - Theme "Company" (BS테마 - 회사테마 = 컴퍼니테마) - 회사소개테마 (슝슝) + …
theme BS3 - Theme "The Band" (BS테마 - 밴드테마) - 스크롤스파이 원페이지 테마
quiz BS3 - Quiz (BS퀴즈 = BS테스트 = BS시험)
basic BS3 - Background CSS (= BS배경색CSS)
basic BS3 - Float CSS (= BS정렬CSS = BS배치CSS)
basic BS3 - Display CSS (= BS노출CSS = BS표시CSS = BS보임 + BS숨김 = BS보이기…
grid BS3 - grid CSS (BS그리드CSS = BS반응형CSS = BS노출CSS) + BS프린트클래스 ★★…
basic BS3 - Filter (BS필터 - 테이블검색필터/리스트검색필터/드롭다운검색필터/텍스트검색필터)
basic BS3 - Spinner (BS스피너 = BS회전 = BS로더) - BS3 지원X (대신, Glyphicon…
basic BS3 - Toast (토스트) - 순간말풍선 (=짧은경고창 = 스낵바) ※ BS3 지원X
basic BS3 - Card (BS카드) - 지원 X
basic BS3 - Utilities (BS유틸클래스) - BS글자색, BS배경색, BS닫기, BS카렛, BS정렬, …
basic BS3 - flex (BS플렉스) - 지원 X
basic BS3 - Badge/Label (BS배지/BS레이블=BS라벨) ※ BS속도저하해결
basic BS3 - Transition (BS트랜지션 = BS전환효과)
basic BS3 - 요소 높이 균등 설정 (BootStrap3 / 부트스트랩3 경우) ※ 각 그리드 높이 (동일하게/…
목록
찾아주셔서 감사합니다. Since 2012