부트 스트랩 그리드 시스템
부트 스트랩의 그리드 시스템은 페이지 전체에 최대 12 개의 컬럼을 허용합니다.
12 개의 열을 모두 개별적으로 사용하지 않으려면 열을 그룹화하여 더 넓은 열을 만들 수 있습니다.
| 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 |
| 기간 4 | 기간 4 | 기간 4 | |||||||||
| 기간 4 | 스팬 8 | ||||||||||
| 기간 6 | 기간 6 | ||||||||||
| 스팬 12 | |||||||||||
부트 스트랩의 그리드 시스템이 반응하며 화면 크기에 따라 열이 자동으로 재 배열됩니다.
그리드 클래스
부트 스트랩 그리드 시스템에는 네 가지 클래스가 있습니다.
- xs (전화 용)
- sm (태블릿 용)
- md (데스크톱 용)
- lg (대형 데스크탑의 경우)
위의 클래스를 결합하여보다 동적이고 유연한 레이아웃을 만들 수 있습니다.
부트 스트랩 그리드의 기본 구조
다음은 부트 스트랩 그리드의 기본 구조입니다.
<div class="row">
<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 class="row">)을 만듭니다 . 그런 다음 원하는 수의 열 (적절한 .col-*-*클래스가있는 태그)을 추가하십시오 . 에있는 숫자는 .col-*-*각 행에 대해 항상 최대 12 개가되어야합니다.
아래에서는 기본적인 부트 스트랩 그리드 레이아웃 예제를 수집했습니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 2952 |
HTML
zencoding
|
| 2951 | |
| 2950 |
HTML
html table 2
|
| 2949 |
HTML
HTML Table 1
|
| 2948 |
HTML
HTML 파일 경로
|
| 2947 |
HTML
HTML <script> 태그
|
| 2946 |
HTML
Iframe 구문
|
| 2945 |
HTML
html 하이퍼링크2
|
| 2944 |
HTML
html 하이퍼링크 1
|
| 2943 |
HTML
HTML comment 태그
|
| 2942 | |
| 2941 | |
| 2940 | |
| 2939 |
HTML
짧은 인용문을위한 HTML
|
| 2938 |
HTML
HTML 서식 예제
|
| 2937 |
HTML
HTML 서식 요소
|
| 2936 | |
| 2935 |
HTML
HTML 줄 바꿈
|
| 2934 | |
| 2933 |
HTML
Headings 에 중요성
|
| 2932 |
HTML
HTML 스타일 속성
|
| 2931 |
HTML
HTML <pre> 요소
|
| 2930 |
HTML
HTML 줄 바꿈
|
| 2929 | |
| 2928 |
CSS
CSS 코멘트 삽입
|
| 2927 |
CSS
CSS 기본 문법
|
| 2926 |
HTML
HTML addr
|
| 2925 |
HTML
HTML 서식 요소
|
| 2924 |
기타
디바이스별 해상도
|
| 2923 |
HTML
HTML 이미지 img 태그
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기