활자체 스케일

전체 타이포그래피 그리드는 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.

강조 사용

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>태그 사용 방법에 대한 두 가지 예입니다.

예시 약어

약어는 대문자 텍스트와 밝은 점선 하단 테두리로 스타일이 지정됩니다. 또한 호버에 도움말 커서가 있으므로 사용자는 호버에 무언가가 표시될 추가 표시를 할 수 있습니다.

HTML 은 얇게 썬 빵 이후로 최고입니다.

속성이라는 단어의 약어는 attr 입니다.

인용구를 포함하려면 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>

• Lorem ipsum dolor sitmet
• Consectetur adipiscing 엘리트
• 정수 molestie lorem at massa
• Pretium nisl aliquet의 시설
• 눌라 볼룻팟 알리콰암 벨릿
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • 베스티불룸 라오렛 포티터 sem
  • Ac tristique libero volutpat
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

스타일이 없는

<ul class="unstyled">

• Lorem ipsum dolor sitmet
• Consectetur adipiscing 엘리트
• 정수 molestie lorem at massa
• Pretium nisl aliquet의 시설
• 눌라 볼룻팟 알리콰암 벨릿
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • 베스티불룸 라오렛 포티터 sem
  • Ac tristique libero volutpat
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

주문

<ol>

1. Lorem ipsum dolor sitmet
2. Consectetur adipiscing 엘리트
3. 정수 molestie lorem at massa
4. Pretium nisl aliquet의 시설
5. 눌라 볼룻팟 알리콰암 벨릿
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

설명

<dl>

설명 목록

설명 목록은 용어를 정의하는 데 적합합니다.

유이스모드

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

말레수아다 포르타

Etiam porta sem malesuada magna mollis euismod.

인라인

코드의 인라인 스니펫을 <code>.

예를 들어 , <code> 섹션 </ code > 은 인라인 으로 래핑되어야 합니다 .  

기본 블록

<pre>여러 줄의 코드에 사용 합니다. 적절한 렌더링을 위해 캐럿을 유니코드 문자로 변환해야 합니다.

<p>여기에 샘플 텍스트...</p>

<사전>
  <p>샘플 텍스트는 여기...</p>
</pre>

참고: 태그 내의 코드 <pre>를 가능한 한 왼쪽에 가깝게 유지해야 합니다. 모든 탭을 렌더링합니다.

구글 프리티파이

동일한 <pre>요소를 취하고 향상된 렌더링을 위해 두 개의 선택적 클래스를 추가합니다.

<p> 여기에 샘플 텍스트... </p>

<pre class = "prettyprint 
     라인넘" >
  <p>샘플 텍스트는 여기...</p>
</pre>

google-code-prettify 를 다운로드하고 사용 방법에 대한 추가 정보를 확인하세요.

<표>
  <머리>
    <tr>
      <일> … </th>
      <일> … </th>
    </tr>
  </thead>
  <바디>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </t바디>
</표>

표는 가독성을 보장하고 구조를 유지하기 위해 몇 개의 테두리만 사용하여 자동으로 스타일이 지정됩니다. 2.0에서는 .table클래스가 필요합니다.

<테이블 클래스 = "테이블" > 
  …
</표>

얼룩말 줄무늬를 추가하여 테이블을 멋지게 꾸며 보세요 .table-striped. 클래스를 추가하기만 하면 됩니다.

참고: Sprited 테이블은 :nth-childCSS 선택기를 사용하며 IE7-IE8에서는 사용할 수 없습니다.

<테이블 클래스 = "테이블 테이블 스트라이프" > 
  …
</표>

전체 테이블 주위에 테두리를 추가하고 미적 목적을 위해 둥근 모서리를 추가합니다.

<테이블 클래스 = "테이블 테이블 테두리" > 
  …
</표>

.table-condensed테이블 셀 패딩을 반으로 자르는 클래스를 추가하여 테이블을 더 컴팩트하게 만드십시오 (8px에서 4px로).

<테이블 클래스 = "테이블 테이블 압축" > 
  …
</표>

사용 가능한 클래스를 활용하여 다른 모양을 얻기 위해 테이블 ​​클래스를 자유롭게 결합하십시오.

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</표>

유연한 HTML 및 CSS

Bootstrap의 양식에 대한 가장 좋은 점은 모든 입력과 컨트롤이 마크업에서 구축하는 방법에 관계없이 멋지게 보인다는 것입니다. 불필요한 HTML은 필요하지 않지만 필요한 사람들을 위해 패턴을 제공합니다.

더 복잡한 레이아웃에는 손쉬운 스타일 지정 및 이벤트 바인딩을 위한 간결하고 확장 가능한 클래스가 제공되므로 모든 단계에서 다룰 수 있습니다.

4가지 레이아웃 포함

부트스트랩은 네 가지 유형의 양식 레이아웃을 지원합니다.

• 세로(기본값)
• 검색
• 인라인
• 수평의

다양한 유형의 양식 레이아웃은 마크업을 약간 변경해야 하지만 컨트롤 자체는 그대로 유지되고 동일하게 작동합니다.

제어 상태 등

부트스트랩의 양식에는 입력, 텍스트 영역 및 예상한 선택과 같은 모든 기본 양식 컨트롤에 대한 스타일이 포함되어 있습니다. 그러나 추가 및 추가 입력 및 확인란 목록 지원과 같은 다양한 사용자 지정 구성 요소도 함께 제공됩니다.

각 유형의 양식 컨트롤에 대해 오류, 경고 및 성공과 같은 상태가 포함됩니다. 비활성화된 컨트롤에 대한 스타일도 포함됩니다.

v2.0에서는 양식 스타일에 대한 더 가볍고 스마트한 기본값이 있습니다. 추가 마크업이 없고 폼 컨트롤만 있으면 됩니다.

기본 WebKit 스타일을 반영 .form-search하여 둥근 검색 필드를 추가하기만 하면 됩니다.

입력은 시작할 블록 수준입니다. .form-inline및 의 경우 .form-horizontal인라인 블록을 사용합니다.

포함된 항목

왼쪽에는 우리가 지원하는 모든 기본 양식 컨트롤이 표시됩니다. 글머리 기호 목록은 다음과 같습니다.

• 텍스트 입력(텍스트, 비밀번호, 이메일 등)
• 체크박스
• 라디오
• 고르다
• 다중 선택
• 파일 입력
• 텍스트 영역

v2.0의 새로운 기본값

v1.4까지는 Bootstrap의 기본 양식 스타일이 가로 레이아웃을 사용했습니다. Bootstrap 2에서는 모든 형식에 대해 더 스마트하고 확장 가능한 기본값을 갖도록 해당 제약 조건을 제거했습니다.

재설계된 브라우저 상태

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">

작업 버튼

규칙에 따라 버튼은 작업에만 사용해야 하고 하이퍼링크는 개체에 사용해야 합니다. 예를 들어 "다운로드"는 버튼이어야 하고 "최근 활동"은 링크여야 합니다.

앵커 및 양식용

버튼 스타일은 적용된 모든 것에 적용할 수 있습니다 .btn. <a>그러나 일반적으로 이러한 항목을 및 <button>요소 에만 적용하려고 합니다 .

참고: 모든 버튼에는 .btn클래스가 포함되어야 합니다. 일관성 을 위해 <button>및 요소에 버튼 스타일을 적용해야 합니다 .<a>

다양한 크기

더 크거나 작은 버튼이 마음에 드시나요? 그것을 가지고!

기본 작업 동작

기본 작업 동작

비활성화 상태

비활성화된 버튼의 경우 .btn-disabled링크 및 요소 :disabled에 사용합니다.<button>

기본 작업 동작

기본 작업 동작

브라우저 간 호환성

IE9에서는 배경 그라디언트를 모서리로 자르지 않기 때문에 IE9에서는 둥근 모서리를 위해 모든 버튼의 그라디언트를 삭제합니다.

이와 관련하여 IE9는 비활성화된 요소를 jankify button하여 텍스트를 지저분한 텍스트 그림자로 회색으로 렌더링합니다. 불행히도 이 문제를 해결할 수 없습니다.

스프라이트로 빌드

모든 아이콘을 추가 요청으로 만드는 대신 CSS를 사용하여 이미지를 배치하는 하나의 파일에 있는 이미지 묶음인 스프라이트로 컴파일했습니다 background-position. 이것은 우리가 Twitter.com에서 사용하는 것과 동일한 방법이며 우리에게 효과적이었습니다.

모든 아이콘 클래스에는 .icon-다른 구성 요소와 마찬가지로 적절한 네임스페이스 및 범위 지정을 위해 접두사가 붙습니다. 이렇게 하면 다른 도구와의 충돌을 방지하는 데 도움이 됩니다.

문서에서 링크와 크레딧을 제공하는 한 Glyphicons 는 오픈 소스 툴킷에 설정된 Halflings의 사용을 허용했습니다. 귀하의 프로젝트에서 동일한 작업을 수행하는 것을 고려하십시오.

사용하는 방법

v2.0.0에서는 <i>모든 아이콘에 태그를 사용하기로 선택했지만 케이스 클래스가 없고 공유 접두사만 있습니다. 사용하려면 거의 모든 위치에 다음 코드를 배치하세요.

<i 클래스 = "아이콘 검색" ></i> 

하나의 추가 클래스로 준비된 반전(흰색) 아이콘에 사용할 수 있는 스타일도 있습니다.

<i class = "icon-search icon-white" ></i> 

아이콘에 대해 선택할 수 있는 120개의 클래스가 있습니다. <i>올바른 클래스가 포함된 태그를 추가하기만 하면 설정이 완료됩니다. 전체 목록은 sprites.less 또는 바로 여기 이 문서에서 찾을 수 있습니다.

사용 사례

아이콘은 훌륭하지만 어디에 사용할까요? 다음은 몇 가지 아이디어입니다.

• 사이드바 탐색을 위한 시각적 개체로
• 순전히 아이콘 기반 탐색의 경우
• 동작의 의미를 전달하는 데 도움이 되는 버튼
• 사용자 대상에 대한 컨텍스트를 공유하는 링크 포함

기본적으로 <i>태그를 넣을 수 있는 곳이면 어디든 아이콘을 넣을 수 있습니다.

새로 고치다 점검 삭제

논평 설정 더 많은 정보