스캐폴딩 위에 기본 HTML 요소의 스타일이 지정되고 확장 가능한 클래스로 향상되어 신선하고 일관된 모양과 느낌을 제공합니다.
전체 타이포그래피 그리드는 variables.less 파일에 있는 두 개의 Less 변수를 기반으로 @baseFontSize합니다 @baseLineHeight. 첫 번째는 전체에 걸쳐 사용되는 기본 글꼴 크기이고 두 번째는 기본 줄 높이입니다.
우리는 이러한 변수와 약간의 수학을 사용하여 모든 유형 등의 여백, 패딩 및 줄 높이를 만듭니다.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 도넥 sed odio dui.
| 요소 | 용법 | 선택 과목 |
|---|---|---|
<strong> |
중요한 텍스트 조각을 강조하기 위해 | 없음 |
<em> |
스트레스 가 있는 텍스트 조각을 강조하기 위해 | 없음 |
<abbr> |
마우스 오버 시 확장된 버전을 표시하기 위해 약어 및 두문자어를 줄바꿈합니다. | 확장 텍스트에 대한 선택적 .initialism대문자 약어에는 클래스를 사용하십시오 . |
<address> |
가장 가까운 조상 또는 전체 업무에 대한 연락처 정보 | 모든 줄을 다음으로 끝내서 서식을 유지하십시오.<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
참고: HTML5에서 자유롭게 사용하지만 사용법이 약간 변경 <b>되었습니다 . 추가적인 중요성을 전달하지 않고 단어나 구를 강조하기 위한 것이며 주로 음성, 기술 용어 등에 사용됩니다.<i><b><i>
다음은 <address>태그 사용 방법에 대한 두 가지 예입니다.
속성이 있는 약어 title에는 밝은 점선 아래쪽 테두리와 호버에 대한 도움말 커서가 있습니다. 이것은 사용자에게 호버에 무언가가 표시될 추가 표시를 제공합니다.
클래스를 약어에 추가하여 initialism약간 작은 텍스트 크기를 제공하여 타이포그래피의 조화를 높입니다.
HTML 은 얇게 썬 빵 이후로 최고입니다.
속성이라는 단어의 약어는 attr 입니다.
| 요소 | 용법 | 선택 과목 |
|---|---|---|
<blockquote> |
다른 소스의 콘텐츠를 인용하기 위한 블록 수준 요소 |
.pull-left및 .pull-right클래스 |
<small> |
사용자 대면 인용을 추가하기 위한 선택적 요소(일반적으로 작품 제목이 있는 저자) | 출처 의 <cite>제목이나 이름 주위에 배치 |
인용구를 포함하려면 HTML<blockquote> 을 인용문으로 감 쌉니다 . 직선 따옴표의 경우 .<p>
<small>소스를 인용 하는 선택적 요소를 포함하면 —스타일 지정을 위해 그 앞에 전각 대시가 표시됩니다.
- <블록 인용>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
- <small> 유명한 사람 </small>
- </blockquote>
기본 블록 인용은 다음과 같이 스타일이 지정됩니다.
Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante venenatis.
Body of work 에서 유명한 사람
인용구를 오른쪽으로 띄우려면 다음을 추가하십시오 class="pull-right".
Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante venenatis.
Body of work 에서 유명한 사람
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
머리! 수평 설명 목록은 너무 길어서 왼쪽 열 수정에 맞지 않는 용어를 자릅니다 text-overflow. 더 좁은 뷰포트에서는 기본 스택 레이아웃으로 변경됩니다.
코드의 인라인 스니펫을 <code>.
- 예를 들어 , <code> 섹션 </ code > 은 인라인 으로 래핑되어야 합니다 .
<pre>여러 줄의 코드에 사용 합니다. 적절한 렌더링을 위해 코드에서 꺾쇠 괄호를 이스케이프 처리해야 합니다.
<p>여기에 샘플 텍스트...</p>
- <사전>
- <p>샘플 텍스트는 여기...</p>
- </pre>
참고: 태그 내의 코드 <pre>를 가능한 한 왼쪽에 가깝게 유지해야 합니다. 모든 탭을 렌더링합니다.
.pre-scrollable선택적 으로 최대 높이를 350px로 설정하고 y축 스크롤바를 제공하는 클래스를 추가할 수 있습니다 .
동일한 <pre>요소를 취하고 향상된 렌더링을 위해 두 개의 선택적 클래스를 추가합니다.
- <p> 여기에 샘플 텍스트... </p>
- <pre class = "prettyprint
- 라인넘" >
- <p>샘플 텍스트는 여기...</p>
- </pre>
google-code-prettify 를 다운로드하고 사용 방법에 대한 추가 정보를 확인하세요.
| 꼬리표 | 설명 |
|---|---|
<table> |
데이터를 표 형식으로 표시하기 위한 래핑 요소 |
<thead> |
<tr>테이블 열에 레이블을 지정하기 위한 테이블 헤더 행( )의 컨테이너 요소 |
<tbody> |
<tr>테이블 본문의 테이블 행( )에 대한 컨테이너 요소 |
<tr> |
단일 행에 나타나는 테이블 셀 세트( <td>또는 )에 대한 컨테이너 요소<th> |
<td> |
기본 테이블 셀 |
<th> |
열(또는 범위 및 배치에 따라 행) 레이블에 대한 특수 테이블 셀 <thead> |
<caption> |
화면 판독기에 특히 유용한 테이블에 대한 설명 또는 요약 |
- <표>
- <머리>
- <tr>
- <일> … </th>
- <일> … </th>
- </tr>
- </thead>
- <바디>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </t바디>
- </표>
| 이름 | 수업 | 설명 |
|---|---|---|
| 기본 | 없음 | 스타일이 없고 열과 행만 있음 |
| 기초적인 | .table |
행 사이의 수평선만 |
| 경계 | .table-bordered |
모서리를 둥글게 만들고 외부 테두리를 추가합니다. |
| 얼룩말 줄무늬 | .table-striped |
홀수 행(1, 3, 5 등)에 밝은 회색 배경색 추가 |
| 응축 | .table-condensed |
td모든 요소 와 th요소 내에서 수직 패딩을 8px에서 4px로 반으로 자릅니다. |
표는 가독성을 보장하고 구조를 유지하기 위해 몇 개의 테두리만 사용하여 자동으로 스타일이 지정됩니다. 2.0에서는 .table클래스가 필요합니다.
- <테이블 클래스 = "테이블" >
- …
- </표>
| # | 이름 | 성 | 사용자 이름 |
|---|---|---|---|
| 1 | 표시 | 장미유 | @mdo |
| 2 | 야곱 | 손튼 | @지방 |
| 삼 | 래리 | 새 | @트위터 |
얼룩말 줄무늬를 추가하여 테이블을 멋지게 꾸며 보세요 .table-striped. 클래스를 추가하기만 하면 됩니다.
참고: 줄무늬 테이블은 :nth-childCSS 선택기를 사용하며 IE7-IE8에서는 사용할 수 없습니다.
- <테이블 클래스 = "테이블 테이블 스트라이프" >
- …
- </표>
| # | 이름 | 성 | 사용자 이름 |
|---|---|---|---|
| 1 | 표시 | 장미유 | @mdo |
| 2 | 야곱 | 손튼 | @지방 |
| 삼 | 래리 | 새 | @트위터 |
전체 테이블 주위에 테두리를 추가하고 미적 목적을 위해 둥근 모서리를 추가합니다.
- <테이블 클래스 = "테이블 테이블 테두리" >
- …
- </표>
| # | 이름 | 성 | 사용자 이름 |
|---|---|---|---|
| 1 | 표시 | 장미유 | @mdo |
| 표시 | 장미유 | @getbootstrap | |
| 2 | 야곱 | 손튼 | @지방 |
| 삼 | 래리 버드 | @트위터 | |
.table-condensed테이블 셀 패딩을 반으로 자르는 클래스를 추가하여 테이블을 더 컴팩트하게 만드십시오 (8px에서 4px로).
- <테이블 클래스 = "테이블 테이블 압축" >
- …
- </표>
| # | 이름 | 성 | 사용자 이름 |
|---|---|---|---|
| 1 | 표시 | 장미유 | @mdo |
| 2 | 야곱 | 손튼 | @지방 |
| 삼 | 래리 버드 | @트위터 | |
사용 가능한 클래스를 활용하여 다른 모양을 얻기 위해 테이블 클래스를 자유롭게 결합하십시오.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </표>
| 이름 | |||
|---|---|---|---|
| # | 이름 | 성 | 사용자 이름 |
| 1 | 표시 | 장미유 | @mdo |
| 2 | 야곱 | 손튼 | @지방 |
| 삼 | 래리 버드 | @트위터 | |
Bootstrap의 양식에 대한 가장 좋은 점은 모든 입력과 컨트롤이 마크업에서 구축하는 방법에 관계없이 멋지게 보인다는 것입니다. 불필요한 HTML은 필요하지 않지만 필요한 사람들을 위해 패턴을 제공합니다.
더 복잡한 레이아웃에는 손쉬운 스타일 지정 및 이벤트 바인딩을 위한 간결하고 확장 가능한 클래스가 제공되므로 모든 단계에서 다룰 수 있습니다.
부트스트랩은 네 가지 유형의 양식 레이아웃을 지원합니다.
다양한 유형의 양식 레이아웃은 마크업을 약간 변경해야 하지만 컨트롤 자체는 그대로 유지되고 동일하게 작동합니다.
부트스트랩의 양식에는 입력, 텍스트 영역 및 예상한 선택과 같은 모든 기본 양식 컨트롤에 대한 스타일이 포함되어 있습니다. 그러나 추가 및 추가 입력 및 확인란 목록 지원과 같은 다양한 사용자 지정 구성 요소도 함께 제공됩니다.
각 유형의 양식 컨트롤에 대해 오류, 경고 및 성공과 같은 상태가 포함됩니다. 비활성화된 컨트롤에 대한 스타일도 포함됩니다.
부트스트랩은 일반적인 웹 양식의 네 가지 스타일에 대한 간단한 마크업과 스타일을 제공합니다.
| 이름 | 수업 | 설명 |
|---|---|---|
| 세로(기본값) | .form-vertical (필수 아님) |
컨트롤 위에 쌓인 왼쪽 정렬 레이블 |
| 인라인 | .form-inline |
컴팩트 스타일을 위한 왼쪽 정렬 레이블 및 인라인 블록 컨트롤 |
| 검색 | .form-search |
일반적인 검색 미학을 위한 추가 둥근 텍스트 입력 |
| 수평의 | .form-horizontal |
컨트롤과 같은 줄에 왼쪽, 오른쪽 정렬 레이블 부동 |
추가 마크업이 없는 스마트하고 가벼운 기본값.
- <양식 클래스 = "잘" >
- <label> 레이블 이름 </label>
- <입력 유형 = "텍스트" 클래스 = "span3" 자리 표시자 = "입력..." >
- <span class = "help-block" > 블록 수준 도움말 텍스트의 예는 여기에 있습니다. </span>
- <레이블 클래스 = "체크박스" >
- <입력 유형 = "확인란" > 확인
- </레이블>
- <버튼 유형 = "제출" 클래스 = "btn" > 제출 </button>
- </form>
.form-search양식 및 에 추가 .search-query하십시오 input.
- <form class = "well form-search" >
- <입력 유형 = "텍스트" 클래스 = "입력 매체 검색 쿼리" >
- <버튼 유형 = "제출" 클래스 = "btn" > 검색 </button>
- </form>
.form-inline양식 컨트롤의 수직 정렬 및 간격을 정교하게 하기 위해 추가 합니다.
- <form class = "well form-inline" >
- <입력 유형 = "텍스트" 클래스 = "작은 입력" 자리 표시자 = "이메일" >
- <입력 유형 = "암호" 클래스 = "작은 입력" 자리 표시자 = "암호" >
- <레이블 클래스 = "체크박스" >
- <input type = "checkbox" > 기억하기
- </레이블>
- <button type = "submit" class = "btn" > 로그인 </button>
- </form>
오른쪽에는 우리가 지원하는 모든 기본 양식 컨트롤이 표시됩니다. 글머리 기호 목록은 다음과 같습니다.
위의 예제 양식 레이아웃이 주어지면 다음은 첫 번째 입력 및 제어 그룹과 연결된 마크업입니다. , .control-group, .control-label및 .controls클래스는 모두 스타일 지정에 필요합니다.
- <양식 클래스 = "양식-수평" >
- <필드셋>
- <범례> 범례 텍스트 </legend>
- <div 클래스 = "제어 그룹" >
- <label class = "control-label" for = "input01" > 텍스트 입력 </label>
- <div 클래스 = "컨트롤" >
- <입력 유형 = "텍스트" 클래스 = "입력 -xlarge" id = "input01" >
- <p class = "help-block" > 도움말 텍스트 지원 </p>
- </div>
- </div>
- </필드셋>
- </form>
disabled부트스트랩은 브라우저에서 지원하는 포커스 및 상태 에 대한 스타일을 제공합니다 . 기본 Webkit outline을 제거 box-shadow하고 대신 :focus.
또한 오류, 경고 및 성공에 대한 유효성 검사 스타일도 포함합니다. 사용하려면 주변에 오류 클래스를 추가하십시오 .control-group.
- <필드셋
- 클래스 = "제어 그룹 오류" >
- …
- </필드셋>
추가되거나 추가된 텍스트가 있는 입력 그룹은 입력에 대한 더 많은 컨텍스트를 제공하는 쉬운 방법을 제공합니다. 좋은 예로 Twitter 사용자 이름의 @ 기호나 재정의 $가 있습니다.
v1.4까지 부트스트랩은 체크박스와 라디오를 쌓기 위해 추가 마크업이 필요했습니다. 이제 . <label class="checkbox">_<input type="checkbox">
인라인 확인란과 라디오도 지원됩니다. .inline아무 .checkbox또는 또는 추가하기만 하면 .radio끝입니다.
인라인 형식에서 입력을 앞에 추가하거나 추가하려면 공백 없이 .add-onand 를 같은 줄에 배치해야 합니다.input
양식 입력에 대한 도움말 텍스트를 추가하려면 입력 요소 뒤에 인라인 도움말 텍스트 <span class="help-inline">또는 도움말 텍스트 블록을 포함하십시오.<p class="help-block">
모든 아이콘을 추가 요청으로 만드는 대신 CSS를 사용하여 이미지를 배치하는 하나의 파일에 있는 이미지 묶음인 스프라이트로 컴파일했습니다 background-position. 이것은 우리가 Twitter.com에서 사용하는 것과 동일한 방법이며 우리에게 효과적이었습니다.
모든 아이콘 클래스에는 .icon-다른 구성 요소와 마찬가지로 적절한 네임스페이스 및 범위 지정을 위해 접두사가 붙습니다. 이렇게 하면 다른 도구와의 충돌을 방지하는 데 도움이 됩니다.
문서에서 링크와 크레딧을 제공하는 한 Glyphicons 는 오픈 소스 툴킷에 설정된 Halflings의 사용을 허용했습니다. 귀하의 프로젝트에서 동일한 작업을 수행하는 것을 고려하십시오.
부트스트랩은 <i>모든 아이콘에 태그를 사용하지만 케이스 클래스가 없고 공유 접두사만 있습니다. 사용하려면 거의 모든 위치에 다음 코드를 배치하세요.
- <i 클래스 = "아이콘 검색" ></i>
하나의 추가 클래스로 준비된 반전(흰색) 아이콘에 사용할 수 있는 스타일도 있습니다.
- <i class = "icon-search icon-white" ></i>
아이콘에 대해 선택할 수 있는 120개의 클래스가 있습니다. <i>올바른 클래스가 포함된 태그를 추가하기만 하면 설정이 완료됩니다. 전체 목록은 sprites.less 또는 바로 여기 이 문서에서 찾을 수 있습니다.
머리! <i>버튼이나 탐색 링크와 같이 텍스트 문자열 옆에 사용할 때 적절한 간격을 위해 태그 뒤에 공백을 남겨 두십시오 .
아이콘은 훌륭하지만 어디에 사용할까요? 다음은 몇 가지 아이디어입니다.
기본적으로 <i>태그를 넣을 수 있는 곳이면 어디든 아이콘을 넣을 수 있습니다.
버튼, 도구 모음의 버튼 그룹, 탐색 또는 추가 양식 입력에서 사용하십시오.