Bootstrap 3

[basic] BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)

목차
  1. Grid 원리 (= 전체 너비를 12등분해서 배분)
  2. Grid 정의
  3. Grid 화면너비 구분 코드

 

Grid 원리 (= 전체 너비를 12등분해서 배분)

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


Grid 정의


화면 너비를 12개로 분할해 레이아웃 구성.

 


 

1. 그리드 기본 구문


<div class="row">

  <div class="col-화면너비-열개수"></div> 

   .....

</div>

PS. 코드 의미

  • row : 행
  • col : 열 (※ Column 약어)
  • 화면너비 : sm, md, lg 중 하나.
  • 열개수 : 1~12 중 하나. 


2. 화면너비 표시 클래스 구문은 BS4와 BS3가 다름.


 

Grid 화면너비 구분 코드

※ 화면너비 구분: 4개

 

  • .col-xs-열개수 : 768px 미만 화면너비  - 초소형기기 (Extra Small Device : 스마트폰)
  • .col-sm-열개수  :  768px 이상 화면너비 - 소형기기 (Small Device : 태블릿)
  • .col-md-열개수 :   992px 이상 화면너비 - 중형기기 (Middle Device : 소형노트북)
  • .col-lg-열개수 :  1200px 이상 화면너비 - 대형기기 (Large Device : 노트북 및 데스크톱)

 


[예제] - 768px 이상 화면너비 경우 가로 3등분. (768px 미만 경우 세로 나열)

 

<div class="row">

  <div class="col-sm-4">홈짱닷컴 Homzzang.com</div>

  <div class="col-sm-4">홈짱닷컴 Homzzang.com</div>

  <div class="col-sm-4">홈짱닷컴 Homzzang.com</div>

</div>


결과보기 

더 자세히 보기 https://homzzang.com/b/bs?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페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
1/4
목록
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 1
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인