부트스트랩

발판

부트스트랩은 반응형 12열 그리드를 기반으로 합니다. 또한 해당 시스템을 기반으로 하는 고정 너비 레이아웃과 유동 너비 레이아웃을 포함했습니다.

CSS 재설정, 타이포그래피 및 링크에 대한 전역 스타일

HTML5 문서 유형 필요

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

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

타이포그래피 및 링크

scaffolding.less 파일 내에서 기본 전역 표시, 타이포그래피 및 링크 스타일을 설정합니다. 구체적으로:

  • 본문의 여백 제거
  • background-color: white;에 설정body
  • @baseFontFamily, @baseFontSize및 @baseLineHeight속성을 타이포그래피 기반으로 사용
  • 를 통해 전체 링크 색상을 설정하고 @linkColor다음에만 링크 밑줄을 적용하십시오.:hover

정규화를 통한 재설정

Bootstrap 2부터 기존 CSS 재설정은 HTML5 Boilerplate 를 지원하는 Nicolas Gallagher 의 프로젝트인 Normalize.css 의 요소를 사용하도록 발전했습니다 .

새로운 재설정은 여전히 ​​reset.less 에서 찾을 수 있지만 간결함과 정확성을 위해 많은 요소가 제거되었습니다.

반응형 트위스트가 있는 기본 그리드 시스템 12개 열

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

Bootstrap에서 제공하는 기본 그리드 시스템 은 724px, 940px(반응형 CSS가 포함되지 않은 기본값) 및 1170px 너비로 렌더링되는 12개의 열 을 사용합니다. 767px 뷰포트 아래에서 기둥은 유동적이 되고 수직으로 쌓입니다.

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

여기에 표시된 것처럼 기본 레이아웃은 그리드 시스템의 일부로 정의한 12개의 기본 열에 걸쳐 있는 두 개의 "열"로 만들 수 있습니다.


열 오프셋

4
4 오프셋 4
3 오프셋 3
3 오프셋 3
8 오프셋 4 
  1. <div 클래스 = "행" > 
  2.   <div 클래스 = "span4" > ... </div> 
  3.   <div 클래스 = "span4 offset4" > ... </div> 
  4. </div>

중첩 열

Bootstrap의 정적(비유동) 그리드 시스템을 사용하면 중첩이 쉽습니다. 콘텐츠를 중첩하려면 기존 열 내에 새로운 열 .row집합을 추가하기만 하면 됩니다..span*.span*

예시

중첩된 행에는 부모의 열 수만큼 추가되는 열 집합이 포함되어야 합니다. 예를 들어 두 개의 중첩 .span3열은 .span6.

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

유체 그리드 시스템 12 반응형, 백분율 기반 열

유체 컬럼

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

픽셀이 아닌 퍼센트

유동 격자 시스템은 고정 픽셀 대신 열 너비에 백분율을 사용합니다. 또한 고정 그리드 시스템과 동일한 응답 변형을 가지므로 주요 화면 해상도와 장치에 적절한 비율을 보장합니다.

유체 행

.row로 변경 하여 임의의 행 유체를 만들 수 .row-fluid있습니다. 열은 정확히 동일하게 유지되므로 고정 레이아웃과 유동 레이아웃 사이를 매우 간단하게 전환할 수 있습니다.

마크업

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

유체 중첩

유동 격자를 사용한 중첩은 약간 다릅니다. 중첩 열의 수가 부모와 일치할 필요가 없습니다. 대신 각 행이 상위 열의 100%를 차지하기 때문에 열이 각 수준에서 재설정됩니다.

유체 12
유체 6
유체 6 
  1. <div 클래스 = "행 유동" > 
  2.   <div 클래스 = "span12" > 
  3.     열의 수준 1
  4.     <div 클래스 = "행 유동" > 
  5.       <div 클래스 = "span6" > 레벨 2 </div> 
  6.       <div 클래스 = "span6" > 레벨 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

그리드 사용자 정의

변하기 쉬운 기본값 설명
@gridColumns 12 열 수
@gridColumnWidth 60픽셀 각 열의 너비
@gridGutterWidth 20픽셀 열 사이의 음수 공간

LESS의 변수

부트스트랩에 내장된 변수는 위에 설명된 기본 940px 그리드 시스템을 사용자 정의하기 위한 몇 가지 변수입니다. 그리드의 모든 변수는 variables.less에 저장됩니다.

사용자 정의 방법

그리드를 수정한다는 것은 3개의 @grid*변수를 변경하고 부트스트랩을 다시 컴파일하는 것을 의미합니다. variables.less에서 그리드 변수를 변경하고 문서화된 네 가지 방법 중 하나를 사용하여 재컴파일 하십시오. 더 많은 열을 추가하는 경우 grid.less에 해당 열에 대한 CSS를 추가해야 합니다.

응답성 유지

그리드 사용자 정의는 기본 수준인 940px 그리드에서만 작동합니다. Bootstrap의 반응형 측면을 유지하려면 responsive.less에서 그리드를 사용자 지정해야 합니다.

Layouts 웹 페이지를 만드는 기본 템플릿

고정 레이아웃

기본 940px 너비의 단순한 중앙 레이아웃은 단일 <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>

반응형 디자인 다양한 디바이스와 해상도에 대한 미디어 쿼리

반응형 기기

그들이 무엇을 할

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

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

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

지원 기기

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

상표 레이아웃 너비 열 너비 거터 폭
스마트폰 480px 이하 유동 기둥, 고정 너비 없음
스마트폰에서 태블릿으로 767px 이하 유동 기둥, 고정 너비 없음
세로 태블릿 768px 이상 42픽셀 20픽셀
기본 980px 이상 60픽셀 20픽셀
대형 디스플레이 1200픽셀 이상 70픽셀 30픽셀

메타 태그 필요

장치가 반응형 페이지를 제대로 표시하도록 하려면 표시 영역 메타 태그를 포함합니다.

  1. <메타 이름 = "뷰포트" 콘텐츠 = "너비=장치 너비, 초기 크기=1.0" >

미디어 쿼리 사용

부트스트랩은 이러한 미디어 쿼리를 자동으로 포함하지 않지만 이러한 미디어 쿼리를 이해하고 추가하는 것은 매우 쉽고 최소한의 설정만 필요합니다. Bootstrap의 반응형 기능을 포함하는 몇 가지 옵션이 있습니다.

  1. 컴파일된 반응형 버전인 bootstrap-responsive.css를 사용합니다.
  2. @import "responsive.less"를 추가하고 부트스트랩을 다시 컴파일합니다.
  3. Response.less를 별도의 파일로 수정 및 재컴파일

그냥 포함하지 않는 이유는 무엇입니까? 사실, 모든 것이 반응할 필요는 없습니다. 개발자에게 이 기능을 제거하도록 권장하는 대신 활성화하는 것이 가장 좋습니다.

  1.   /* 가로 전화 및 다운 */
  2.   @ 미디어 ( 최대 너비 : 480px ) { ... }     
  3.  
  4.   /* 가로 폰에서 세로 태블릿으로 */
  5.   @미디어 ( 최대 너비 : 767 픽셀 ) { ... }     
  6.  
  7.   /* 세로 타블렛을 가로 및 데스크탑으로 */
  8.   @media ( 최소 너비 : 768px ) 및 ( 최대 너비 : 979px ) { ... } _ _        
  9.  
  10.   /* 큰 데스크탑 */
  11.   @미디어 ( 최소 너비 : 1200 픽셀 ) { ... }

반응형 유틸리티 클래스

그들은 무엇인가

더 빠른 모바일 친화적인 개발을 위해 이러한 기본 유틸리티 클래스를 사용하여 장치별로 콘텐츠를 표시하고 숨깁니다.

사용 시기

제한된 기준으로 사용하고 동일한 사이트의 완전히 다른 버전을 생성하지 마십시오. 대신 각 장치의 프레젠테이션을 보완하는 데 사용하십시오.

예를 들어 <select>모바일 레이아웃에서는 탐색 요소를 표시할 수 있지만 태블릿이나 데스크톱에서는 표시하지 않을 수 있습니다.

지원 수업

다음은 우리가 지원하는 클래스와 주어진 미디어 쿼리 레이아웃에 미치는 영향에 대한 표입니다(장치별로 레이블 지정). 에서 찾을 수 있습니다 responsive.less.

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

테스트 케이스

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

에 보이는...

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

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

숨겨진...

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

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