기본 CSS

스캐폴딩 위에 기본 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.

리드 본문 카피

를 추가하여 단락을 돋보이게 만드십시오 .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commododo luctus.

h1. 제목 1

h2. 제목 2

h3. 제목 3

h4. 제목 4

h5. 제목 5
h6. 제목 6

강조, 주소 및 약어

요소 용법 선택 과목
<strong> 중요한 텍스트 조각을 강조하기 위해 없음
<em> 스트레스 가 있는 텍스트 조각을 강조하기 위해 없음
<abbr> 마우스 오버 시 확장된 버전을 표시하기 위해 약어 및 두문자어를 줄바꿈합니다.

확장 텍스트에 대한 선택적 title속성 포함

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 전화
: (123) 456-7890
성명
[email protected]

예시 약어

속성이 있는 약어 title에는 밝은 점선 아래쪽 테두리와 호버에 대한 도움말 커서가 있습니다. 이것은 사용자에게 호버에 무언가가 표시될 추가 표시를 제공합니다.

클래스를 약어에 추가하여 initialism약간 작은 텍스트 크기를 제공하여 타이포그래피의 조화를 높입니다.

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

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

인용구

요소 용법 선택 과목
<blockquote> 다른 소스의 콘텐츠를 인용하기 위한 블록 수준 요소

cite소스 URL에 대한 속성 추가

부동 옵션의 사용 .pull-left.pull-right클래스
<small> 사용자 대면 인용을 추가하기 위한 선택적 요소(일반적으로 작품 제목이 있는 저자) 출처 의 <cite>제목이나 이름 주위에 배치

인용구를 포함하려면 HTML<blockquote> 을 인용문으로 감 쌉니다 . 직선 따옴표의 경우 .<p>

<small>소스를 인용 하는 선택적 요소를 포함하면 &mdash;스타일 지정을 위해 그 앞에 전각 대시가 표시됩니다.

  1. <블록 인용>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
  3. <small> 유명한 사람 </small>
  4. </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.

가로 설명

<dl class="dl-horizontal">

설명 목록
설명 목록은 용어를 정의하는 데 적합합니다.
유이스모드
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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

머리! 수평 설명 목록은 너무 길어서 왼쪽 열 수정에 맞지 않는 용어를 자릅니다 text-overflow. 더 좁은 뷰포트에서는 기본 스택 레이아웃으로 변경됩니다.

인라인

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

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

기본 블록

<pre>여러 줄의 코드에 사용 합니다. 적절한 렌더링을 위해 코드에서 꺾쇠 괄호를 이스케이프 처리해야 합니다.

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

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

.pre-scrollable선택적 으로 최대 높이를 350px로 설정하고 y축 스크롤바를 제공하는 클래스를 추가할 수 있습니다 .

구글 프리티파이

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

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

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

테이블 마크업

꼬리표 설명
<table> 데이터를 표 형식으로 표시하기 위한 래핑 요소
<thead> <tr>테이블 열에 레이블을 지정하기 위한 테이블 헤더 행( )의 컨테이너 요소
<tbody> <tr>테이블 본문의 테이블 행( )에 대한 컨테이너 요소
<tr> 단일 행에 나타나는 테이블 셀 세트( <td>또는 )에 대한 컨테이너 요소<th>
<td> 기본 테이블 셀
<th> 열(또는 범위 및 배치에 따라 행) 레이블에 대한 특수 테이블
<thead>
<caption> 화면 판독기에 특히 유용한 테이블에 대한 설명 또는 요약
  1. <표>
  2. <머리>
  3. <tr>
  4. <일> </th>
  5. <일> </th>
  6. </tr>
  7. </thead>
  8. <바디>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </t바디>
  14. </표>

테이블 옵션

이름 수업 설명
기본 없음 스타일이 없고 열과 행만 있음
기초적인 .table 행 사이의 수평선만
경계 .table-bordered 모서리를 둥글게 만들고 외부 테두리를 추가합니다.
얼룩말 줄무늬 .table-striped 홀수 행(1, 3, 5 등)에 밝은 회색 배경색 추가
응축 .table-condensed td모든 요소 와 th요소 내에서 수직 패딩을 8px에서 4px로 반으로 자릅니다.

예제 테이블

1. 기본 테이블 스타일

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

  1. <테이블 클래스 = "테이블" >
  2. </표>
# 이름 사용자 이름
1 표시 장미유 @mdo
2 야곱 손튼 @지방
래리 @트위터

2. 스트라이프 테이블

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

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

  1. <테이블 클래스 = "테이블 테이블 스트라이프" >
  2. </표>
# 이름 사용자 이름
1 표시 장미유 @mdo
2 야곱 손튼 @지방
래리 @트위터

3. 테두리가 있는 테이블

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

  1. <테이블 클래스 = "테이블 테이블 테두리" >
  2. </표>
# 이름 사용자 이름
1 표시 장미유 @mdo
표시 장미유 @getbootstrap
2 야곱 손튼 @지방
래리 버드 @트위터

4. 요약표

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

  1. <테이블 클래스 = "테이블 테이블 압축" >
  2. </표>
# 이름 사용자 이름
1 표시 장미유 @mdo
2 야곱 손튼 @지방
래리 버드 @트위터

5. 모두 합치세요!

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

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </표>
이름
# 이름 사용자 이름
1 표시 장미유 @mdo
2 야곱 손튼 @지방
래리 버드 @트위터

유연한 HTML 및 CSS

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

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

4가지 레이아웃 포함

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

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

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

제어 상태 등

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

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

네 가지 유형의 양식

부트스트랩은 일반적인 웹 양식의 네 가지 스타일에 대한 간단한 마크업과 스타일을 제공합니다.

이름 수업 설명
세로(기본값) .form-vertical (필수 아님) 컨트롤 위에 쌓인 왼쪽 정렬 레이블
인라인 .form-inline 컴팩트 스타일을 위한 왼쪽 정렬 레이블 및 인라인 블록 컨트롤
검색 .form-search 일반적인 검색 미학을 위한 추가 둥근 텍스트 입력
수평의 .form-horizontal 컨트롤과 같은 줄에 왼쪽, 오른쪽 정렬 레이블 부동

추가 마크업 없이 폼 컨트롤만 사용하는 예제 폼

기본 형태

추가 마크업이 없는 스마트하고 가벼운 기본값.

여기에 블록 수준 도움말 텍스트의 예가 있습니다.

  1. <양식 클래스 = "잘" >
  2. <label> 레이블 이름 </label>
  3. <입력 유형 = "텍스트" 클래스 = "span3" 자리 표시자 = "입력..." >
  4. <span class = "help-block" > 블록 수준 도움말 텍스트의 예는 여기에 있습니다. </span>
  5. <레이블 클래스 = "체크박스" >
  6. <입력 유형 = "확인란" > 확인
  7. </레이블>
  8. <버튼 유형 = "제출" 클래스 = "btn" > 제출 </button>
  9. </form>

검색 양식

.form-search양식 및 에 추가 .search-query하십시오 input.

  1. <form class = "well form-search" >
  2. <입력 유형 = "텍스트" 클래스 = "입력 매체 검색 쿼리" >
  3. <버튼 유형 = "제출" 클래스 = "btn" > 검색 </button>
  4. </form>

인라인 양식

.form-inline양식 컨트롤의 수직 정렬 및 간격을 정교하게 하기 위해 추가 합니다.

  1. <form class = "well form-inline" >
  2. <입력 유형 = "텍스트" 클래스 = "작은 입력" 자리 표시자 = "이메일" >
  3. <입력 유형 = "암호" 클래스 = "작은 입력" 자리 표시자 = "암호" >
  4. <레이블 클래스 = "체크박스" >
  5. <input type = "checkbox" > 기억하기
  6. </레이블>
  7. <button type = "submit" class = "btn" > 로그인 </button>
  8. </form>

가로 형태

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

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

자유 형식 텍스트 외에도 모든 HTML5 텍스트 기반 입력이 이와 같이 나타납니다.

마크업 예시

위의 예제 양식 레이아웃이 주어지면 다음은 첫 번째 입력 및 제어 그룹과 연결된 마크업입니다. , .control-group, .control-label.controls클래스는 모두 스타일 지정에 필요합니다.

  1. <양식 클래스 = "양식-수평" >
  2. <필드셋>
  3. <범례> 범례 텍스트 </legend>
  4. <div 클래스 = "제어 그룹" >
  5. <label class = "control-label" for = "input01" > 텍스트 입력 </label>
  6. <div 클래스 = "컨트롤" >
  7. <입력 유형 = "텍스트" 클래스 = "입력 -xlarge" id = "input01" >
  8. <p class = "help-block" > 도움말 텍스트 지원 </p>
  9. </div>
  10. </div>
  11. </필드셋>
  12. </form>

양식 제어 상태

disabled부트스트랩은 브라우저에서 지원하는 포커스 및 상태 에 대한 스타일을 제공합니다 . 기본 Webkit outline을 제거 box-shadow하고 대신 :focus.


양식 유효성 검사

또한 오류, 경고 및 성공에 대한 유효성 검사 스타일도 포함합니다. 사용하려면 주변에 오류 클래스를 추가하십시오 .control-group.

  1. <필드셋
  2. 클래스 = "제어 그룹 오류" >
  3. </필드셋>
여기에 약간의 가치
뭔가 잘못되었을 수 있습니다
오류를 수정하십시오
우후!
우후!

폼 컨트롤 확장

추가 및 추가 입력

추가되거나 추가된 텍스트가 있는 입력 그룹은 입력에 대한 더 많은 컨텍스트를 제공하는 쉬운 방법을 제공합니다. 좋은 예로 Twitter 사용자 이름의 @ 기호나 재정의 $가 있습니다.


체크박스와 라디오

v1.4까지 부트스트랩은 체크박스와 라디오를 쌓기 위해 추가 마크업이 필요했습니다. 이제 . <label class="checkbox">_<input type="checkbox">

인라인 확인란과 라디오도 지원됩니다. .inline아무 .checkbox또는 또는 추가하기만 하면 .radio끝입니다.


인라인 양식 및 추가/앞에 추가

인라인 형식에서 입력을 앞에 추가하거나 추가하려면 공백 없이 .add-onand 를 같은 줄에 배치해야 합니다.input


양식 도움말 텍스트

양식 입력에 대한 도움말 텍스트를 추가하려면 입력 요소 뒤에 인라인 도움말 텍스트 <span class="help-inline">또는 도움말 텍스트 블록을 포함하십시오.<p class="help-block">

.span*입력 크기에 대해 그리드 시스템 의 동일한 클래스를 사용합니다 .

그리드에 매핑되지 않거나 반응형 CSS 스타일에 적응하거나 다양한 유형의 컨트롤(예: inputvs. select)을 고려하지 않는 정적 클래스를 사용할 수도 있습니다.

@

다음은 도움말 텍스트입니다.

.00
여기에 더 많은 도움말 텍스트가 있습니다.
$ .00

참고: 레이블은 훨씬 더 큰 클릭 영역과 더 유용한 양식에 대한 모든 옵션을 둘러쌉니다.

단추 클래스="" 설명
btn 그라디언트가 있는 표준 회색 버튼
btn btn-primary 추가 시각적 가중치를 제공하고 버튼 세트에서 기본 작업을 식별합니다.
btn btn-info 기본 스타일의 대안으로 사용
btn btn-success 성공 또는 긍정적인 작업을 나타냅니다.
btn btn-warning 이 작업에 주의를 기울여야 함을 나타냅니다.
btn btn-danger 위험하거나 잠재적으로 부정적인 행동을 나타냅니다.
btn btn-inverse 의미론적 동작이나 사용에 연결되지 않은 대체 짙은 회색 버튼

작업 버튼

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

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

브라우저 간 호환성

IE9는 둥근 모서리에서 배경 그라디언트를 자르지 않으므로 제거합니다. 이와 관련하여 IE9는 비활성화된 요소를 jankify button하여 수정할 수 없는 불쾌한 텍스트 그림자로 텍스트를 회색으로 렌더링합니다.

다양한 크기

더 크거나 작은 버튼이 마음에 드시나요? 두 개의 추가 크기에 대해 .btn-large, .btn-small또는 를 추가합니다..btn-mini


비활성화 상태

비활성화된 버튼의 경우 .disabled링크에 클래스를 추가하고 요소 에 대한 disabled속성을 추가합니다.<button>

기본 링크 링크

머리! .disabled여기서는 일반 클래스와 유사한 유틸리티 클래스로 사용 .active하므로 접두사가 필요하지 않습니다.

하나의 클래스, 여러 태그

, , 또는 요소 에서 .btn클래스를 사용합니다 .<a><button><input>

링크
  1. <a class = "btn" href = "" > 링크 </a>
  2. <버튼 클래스 = "btn" 유형 = "제출" >
  3. 단추
  4. </버튼>
  5. <입력 클래스 = "btn" 유형 = "버튼"
  6. = "입력" >
  7. <입력 클래스 = "btn" 유형 = "제출"
  8. = "제출" >

가장 좋은 방법은 브라우저 간 렌더링이 일치하는지 확인하기 위해 컨텍스트에 대한 요소를 일치시키는 것입니다. 가 있는 경우 버튼에 를 input사용 <input type="submit">하십시오.

  • 아이콘 유리
  • 아이콘 음악
  • 아이콘 검색
  • 아이콘 봉투
  • 아이콘 하트
  • 아이콘 스타
  • icon-star-empty
  • 아이콘 사용자
  • 아이콘 필름
  • 아이콘 크기
  • 아이콘-번째
  • 아이콘 목록
  • 아이콘 확인
  • 아이콘 제거
  • 아이콘 확대
  • 아이콘 축소
  • 아이콘 오프
  • 아이콘 신호
  • 아이콘 톱니
  • 아이콘 휴지통
  • 아이콘 홈
  • 아이콘 파일
  • 아이콘 시간
  • 아이콘로드
  • 아이콘 다운로드 대체
  • 아이콘 다운로드
  • 아이콘 업로드
  • 아이콘 받은 편지함
  • 아이콘 플레이 서클
  • 아이콘 반복
  • 아이콘 새로고침
  • 아이콘 목록 대체
  • 아이콘 잠금
  • 아이콘 플래그
  • 아이콘 헤드폰
  • 아이콘 볼륨 끄기
  • 아이콘 볼륨 다운
  • 아이콘 볼륨 업
  • 아이콘-qrcode
  • 아이콘 바코드
  • 아이콘 태그
  • 아이콘 태그
  • 아이콘 책
  • 아이콘 북마크
  • 아이콘 인쇄
  • 아이콘 카메라
  • 아이콘 글꼴
  • 아이콘 굵게
  • 아이콘 기울임꼴
  • 아이콘 텍스트 높이
  • 아이콘 텍스트 너비
  • 아이콘 정렬 왼쪽
  • 아이콘 정렬 센터
  • 아이콘 정렬 오른쪽
  • 아이콘 정렬
  • 아이콘 목록
  • 아이콘 들여쓰기 왼쪽
  • 아이콘 들여쓰기 오른쪽
  • icon-facetime-비디오
  • 아이콘 그림
  • 아이콘 연필
  • 아이콘 맵 마커
  • 아이콘 조정
  • 아이콘 색조
  • 아이콘 편집
  • 아이콘 공유
  • 아이콘 체크
  • 아이콘 이동
  • 아이콘 단계 뒤로
  • 아이콘 빨리 뒤로
  • 아이콘 뒤로
  • 아이콘 플레이
  • 아이콘 일시 중지
  • 아이콘 정지
  • 아이콘 앞으로
  • 아이콘 빨리 감기
  • 아이콘 한 단계 앞으로
  • 아이콘 꺼내기
  • 아이콘-갈매기-왼쪽
  • 아이콘 갈매기 오른쪽
  • 아이콘 더하기 기호
  • 아이콘 빼기 기호
  • 아이콘 제거 기호
  • 아이콘 확인 표시
  • 아이콘 물음표
  • 아이콘 정보 기호
  • 아이콘 스크린샷
  • 아이콘 제거 원
  • 아이콘 확인 원
  • 아이콘 금지 원
  • 아이콘-화살표-왼쪽
  • 아이콘-화살표-오른쪽
  • 아이콘-화살표
  • 아이콘 아래쪽 화살표
  • 아이콘 공유 대체
  • 아이콘 크기 전체
  • 아이콘 크기 조정 작게
  • 아이콘 플러스
  • 아이콘 마이너스
  • 아이콘 별표
  • 아이콘 느낌표 기호
  • 아이콘 선물
  • 아이콘 잎
  • 아이콘 불
  • 아이콘 눈 뜨다
  • 아이콘 눈을 감다
  • 아이콘 경고 표시
  • 아이콘 평면
  • 아이콘 캘린더
  • 아이콘 랜덤
  • 아이콘 설명
  • 아이콘 자석
  • 아이콘 갈매기
  • 아이콘 갈매기 모양
  • 아이콘 리트윗
  • 아이콘-장바구니
  • 아이콘 폴더 닫기
  • 아이콘 폴더 열기
  • 아이콘 크기 조정 수직
  • 아이콘 크기 조정 가로
  • 아이콘-HDD
  • 아이콘 물러나
  • 아이콘 벨
  • 아이콘 인증서
  • 아이콘 좋아요
  • 아이콘 싫어요
  • 아이콘-손-오른쪽
  • 아이콘-손-왼쪽
  • 아이콘 건네기
  • 아이콘 전달
  • 아이콘-원-화살표-오른쪽
  • 아이콘-원-화살표-왼쪽
  • 아이콘-원-화살표-위쪽
  • 아이콘-원-화살표-아래쪽
  • 아이콘 글로브
  • 아이콘 렌치
  • 아이콘 작업
  • 아이콘 필터
  • 아이콘-서류가방
  • 아이콘 전체 화면

스프라이트로 빌드

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

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

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

사용하는 방법

부트스트랩은 <i>모든 아이콘에 태그를 사용하지만 케이스 클래스가 없고 공유 접두사만 있습니다. 사용하려면 거의 모든 위치에 다음 코드를 배치하세요.

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

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

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

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

머리! <i>버튼이나 탐색 링크와 같이 텍스트 문자열 옆에 사용할 때 적절한 간격을 위해 태그 뒤에 공백을 남겨 두십시오 .

사용 사례

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

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

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

버튼, 도구 모음의 버튼 그룹, 탐색 또는 추가 양식 입력에서 사용하십시오.