부트스트랩

발판

부트스트랩은 반응형 12열 그리드, 레이아웃 및 구성 요소를 기반으로 합니다.

전역 설정

HTML5 문서 유형 필요

부트스트랩은 HTML5 doctype을 사용해야 하는 특정 HTML 요소와 CSS 속성을 사용합니다. 모든 프로젝트의 시작 부분에 포함하십시오.

  1. <!DOCTYPE HTML>
  2. <html 언어 = "ko" > 
  3.   ...
  4. </html>

타이포그래피 및 링크

부트스트랩은 기본 전역 디스플레이, 타이포그래피 및 링크 스타일을 설정합니다. 구체적으로:

  • margin몸에 제거
  • background-color: white;에 설정body
  • @baseFontFamily, @baseFontSize및 @baseLineHeight속성을 활자체 기반으로 사용
  • 를 통해 전체 링크 색상을 설정하고 @linkColor다음에만 링크 밑줄을 적용하십시오.:hover

이러한 스타일은 scaffolding.less 내에서 찾을 수 있습니다 .

정규화를 통한 재설정

Bootstrap 2 에서는 HTML5 Boilerplate 를 지원하는 Nicolas Gallagher 와 Jonathan Neal 의 프로젝트 인 Normalize.css 를 위해 이전 재설정 블록이 삭제되었습니다 . reset.less 내에서 Normalize의 대부분을 사용하는 동안 Bootstrap을 위해 특별히 몇 가지 요소를 제거했습니다.

기본 그리드 시스템

라이브 그리드 예시

기본 부트스트랩 그리드 시스템은 12개의 열 을 사용하여 반응형 기능이 활성화 되지 않은 940px 너비의 컨테이너를 만듭니다. 반응형 CSS 파일이 추가되면 그리드가 뷰포트에 따라 724px 및 1170px 너비로 조정됩니다. 767px 뷰포트 아래에서 기둥은 유동적이 되고 수직으로 쌓입니다.

1
1
1
1
1
1
1
1
1
2
삼
4
4
5
9

기본 그리드 HTML

간단한 2열 레이아웃 .row의 경우 적절한 수의 .span*열을 만들고 추가합니다. 이것은 12열 그리드이므로 각각은 12개의 열에 .span*걸쳐 있으며 각 행(또는 상위의 열 수)에 대해 항상 최대 12개를 추가해야 합니다.

  1. <div 클래스 = "행" > 
  2.   <div 클래스 = "span4" > ... </div> 
  3.   <div 클래스 = "span8" > ... </div> 
  4. </div>

이 예에서 .span4및 가 있고 .span8총 12개의 열과 완전한 행이 있습니다.

열 오프셋

.offset*클래스 를 사용하여 열을 오른쪽으로 이동합니다 . 각 클래스는 열의 왼쪽 여백을 전체 열만큼 늘립니다. 예를 들어, 4개의 열 위로 .offset4이동 합니다..span4

4
3 오프셋 2
3 오프셋 1
3 오프셋 2
6 오프셋 3 
  1. <div 클래스 = "행" > 
  2.   <div 클래스 = "span4" > ... </div> 
  3.   <div 클래스 = "span3 offset2" > ... </div> 
  4. </div>

중첩 열

기본 그리드를 사용하여 콘텐츠를 중첩하려면 기존 열 내에 새로운 열 .row집합을 추가합니다 . 중첩된 행에는 상위 열의 수만큼 추가되는 열 집합이 포함되어야 합니다..span*.span*

레벨 1 열
레벨 2
레벨 2 
  1. <div 클래스 = "행" > 
  2.   <div 클래스 = "span9" > 
  3.     레벨 1 열
  4.     <div 클래스 = "행" > 
  5.       <div 클래스 = "span6" > 레벨 2 </div> 
  6.       <div 클래스 = "span3" > 레벨 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

유체 그리드 시스템

라이브 유체 그리드 예

유동 격자 시스템은 열 너비에 픽셀 대신 백분율을 사용합니다. 고정 그리드 시스템과 동일한 응답 기능을 제공하여 주요 화면 해상도 및 장치에 적절한 비율을 보장합니다.

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

기본 유동 격자 HTML

.row로 변경 하여 모든 행을 "유동"하게 만듭니다 .row-fluid. 열 클래스는 정확히 동일하게 유지되므로 고정 그리드와 유동 그리드 간에 쉽게 전환할 수 있습니다.

  1. <div 클래스 = "행 유동" > 
  2.   <div 클래스 = "span4" > ... </div> 
  3.   <div 클래스 = "span8" > ... </div> 
  4. </div>

유체 오프셋

고정 그리드 시스템 오프셋과 동일한 방식으로 작동합니다 .offset*. 많은 열만큼 오프셋하려면 임의의 열에 추가합니다.

4
4 오프셋 4
3 오프셋 3
3 오프셋 3
6 오프셋 6 
  1. <div 클래스 = "행 유동" > 
  2.   <div 클래스 = "span4" > ... </div> 
  3.   <div 클래스 = "span4 offset2" > ... </div> 
  4. </div>

유체 중첩

유동 격자는 중첩을 다르게 활용합니다. 각 중첩 수준의 열은 최대 12개의 열을 추가해야 합니다. 이는 유동 격자가 너비를 설정하는 데 픽셀이 아닌 백분율을 사용하기 때문입니다.

유체 12
유체 6
유체 6
유체 6
유체 6 
  1. <div 클래스 = "행 유동" > 
  2.   <div 클래스 = "span12" > 
  3.     유체 12
  4.     <div 클래스 = "행 유동" > 
  5.       <div 클래스 = "span6" > 
  6.         유체 6
  7.         <div 클래스 = "행 유동" > 
  8.           <div 클래스 = "span6" > 유체 6 </div> 
  9.           <div 클래스 = "span6" > 유체 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div 클래스 = "span6" > 유체 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

레이아웃

고정 레이아웃

필요한 경우에만 공통 고정 너비(및 선택적으로 반응형) 레이아웃을 제공 <div class="container">합니다.

  1. <본체>
  2.   <div 클래스 = "컨테이너" > 
  3.     ...
  4.   </div>
  5. </바디>

유체 레이아웃

<div class="container-fluid">—응용 프로그램 및 문서에 적합합니다 .

  1. <div 클래스 = "컨테이너 유체" > 
  2.   <div 클래스 = "행 유동" > 
  3.     <div 클래스 = "스팬2" > 
  4.       <!--사이드바 내용-->
  5.     </div>
  6.     <div 클래스 = "span10" > 
  7.       <!--본문 내용-->
  8.     </div>
  9.   </div>
  10. </div>

반응형 디자인

반응형 기능 활성화

<head>문서 내에 적절한 메타 태그와 추가 스타일시트를 포함하여 프로젝트에서 반응형 CSS를 켭니다 . 사용자 정의 페이지에서 부트스트랩을 컴파일한 경우 메타 태그만 포함하면 됩니다.

  1. <메타 이름 = "뷰포트" 콘텐츠 = "너비=장치 너비, 초기 크기=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "스타일시트" >

머리!모든 것이 반응할 필요가 없기 때문에 현재 부트스트랩에는 반응형 기능이 기본적으로 포함되어 있지 않습니다. 개발자에게 이 기능을 제거하도록 권장하는 대신 필요에 따라 활성화하는 것이 가장 좋습니다.

반응형 부트스트랩 정보

반응형 기기

미디어 쿼리는 비율, 너비, 표시 유형 등 다양한 조건을 기반으로 맞춤 CSS를 허용하지만 일반적으로 min-width및 에 초점을 맞춥니다 max-width.

  • 그리드의 열 너비 수정
  • 필요할 때마다 float 대신 요소를 쌓습니다.
  • 장치에 더 적합하도록 제목 및 텍스트 크기 조정

미디어 쿼리를 책임감 있게 사용하고 모바일 청중을 위한 시작으로만 사용하십시오. 대규모 프로젝트의 경우 미디어 쿼리 계층이 아닌 전용 코드 기반을 고려하십시오.

지원 기기

부트스트랩은 단일 파일에서 소수의 미디어 쿼리를 지원하여 다양한 장치와 화면 해상도에서 프로젝트를 보다 적절하게 만들 수 있습니다. 포함된 내용은 다음과 같습니다.

상표 레이아웃 너비 열 너비 거터 폭
대형 디스플레이 1200픽셀 이상 70픽셀 30픽셀
기본 980px 이상 60픽셀 20픽셀
세로 태블릿 768px 이상 42픽셀 20픽셀
휴대폰에서 태블릿으로 767px 이하 유동 기둥, 고정 너비 없음
전화 480px 이하 유동 기둥, 고정 너비 없음 
  1. /* 큰 데스크탑 */
  2. @미디어 ( 최소 너비 : 1200 픽셀 ) { ... }     
  3.  
  4. /* 세로 타블렛을 가로 및 데스크탑으로 */
  5. @media ( 최소 너비 : 768px ) 및 ( 최대 너비 : 979px ) { ... } _ _        
  6.  
  7. /* 가로 폰에서 세로 태블릿으로 */
  8. @미디어 ( 최대 너비 : 767 픽셀 ) { ... }     
  9.  
  10. /* 가로 전화 및 다운 */
  11. @ 미디어 ( 최대 너비 : 480px ) { ... }

반응형 유틸리티 클래스

더 빠른 모바일 친화적인 개발을 위해 이러한 유틸리티 클래스를 사용하여 장치별로 콘텐츠를 표시하고 숨깁니다. 다음은 사용 가능한 클래스와 주어진 미디어 쿼리 레이아웃에 미치는 영향에 대한 표입니다(장치별로 레이블 지정). 에서 찾을 수 있습니다 responsive.less.

수업 전화767px 이하 정제979px ~ 768px 데스크탑기본
.visible-phone 보이는
.visible-tablet 보이는
.visible-desktop 보이는
.hidden-phone 보이는 보이는
.hidden-tablet 보이는 보이는
.hidden-desktop 보이는 보이는

사용 시기

제한된 기준으로 사용하고 동일한 사이트의 완전히 다른 버전을 생성하지 마십시오. 대신 각 장치의 프레젠테이션을 보완하는 데 사용하십시오. 응답 유틸리티는 테이블과 함께 사용하면 안 되므로 지원되지 않습니다.

반응형 유틸리티 테스트 케이스

위의 클래스를 테스트하려면 브라우저 크기를 조정하거나 다른 기기에서 로드하세요.

에 보이는...

녹색 체크 표시는 클래스가 현재 뷰포트에 표시됨을 나타냅니다.

  • 핸드폰✔ 전화
  • 태블릿✔ 태블릿
  • 데스크탑✔ 데스크탑

숨겨진...

여기에서 녹색 체크 표시는 클래스가 현재 뷰포트에 숨겨져 있음을 나타냅니다.

  • 핸드폰✔ 전화
  • 태블릿✔ 태블릿
  • 데스크탑✔ 데스크탑