타이포그래피

전역 설정, 머리글, 본문, 목록 등을 포함한 부트스트랩 타이포그래피에 대한 문서 및 예제.

전역 설정

부트스트랩은 기본 전역 디스플레이, 타이포그래피 및 링크 스타일을 설정합니다. 더 많은 제어가 필요한 경우 텍스트 유틸리티 클래스 를 확인하십시오 .

각 OS 및 장치 에 가장 적합한 기본 글꼴 스택 을 사용합니다 .font-family
보다 포괄적이고 접근 가능한 유형 척도를 위해 브라우저의 기본 루트 font-size(일반적으로 16px)를 사용하므로 방문자가 필요에 따라 브라우저 기본값을 사용자 지정할 수 있습니다.
에 적용된 활자체 기반으로 , 및 속성 $font-family-base을 $font-size-base사용 합니다 .$line-height-base<body>
를 통해 전체 링크 색상을 설정하고 $link-color에서만 링크 밑줄을 적용합니다 :hover.
( 기본값) 을 $body-bg설정하는 데 사용 합니다.background-color<body>#fff

이러한 스타일은 에서 찾을 수 있으며 _reboot.scss전역 변수는 에 정의되어 _variables.scss있습니다. $font-size-base에 설정하십시오 rem.

제목

까지의 모든 HTML 제목 <h1>을 <h6>사용할 수 있습니다.

표제	예시
`<h1></h1>`	h1. 부트스트랩 제목
`<h2></h2>`	h2. 부트스트랩 제목
`<h3></h3>`	h3. 부트스트랩 제목
`<h4></h4>`	h4. 부트스트랩 제목
`<h5></h5>`	h5. 부트스트랩 제목
`<h6></h6>`	h6. 부트스트랩 제목

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1.h6제목의 글꼴 스타일을 일치시키고 싶지만 연결된 HTML 요소를 사용할 수 없는 경우를 위해 through 클래스도 사용할 수 있습니다.

h1. 부트스트랩 제목

h2. 부트스트랩 제목

h3. 부트스트랩 제목

h4. 부트스트랩 제목

h5. 부트스트랩 제목

h6. 부트스트랩 제목

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

제목 사용자 정의

포함된 유틸리티 클래스를 사용하여 Bootstrap 3에서 작은 보조 제목 텍스트를 다시 만듭니다.

멋진 디스플레이 제목 희미한 보조 텍스트 포함

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

제목 표시

전통적인 제목 요소는 페이지 콘텐츠의 핵심에서 가장 잘 작동하도록 설계되었습니다. 눈에 띄는 제목이 필요하면 표시 제목 을 사용하는 것을 고려하십시오 . 더 크고 약간 더 독단적인 제목 스타일입니다. 이러한 제목은 기본적으로 반응형이 아니지만 반응 형 글꼴 크기 를 활성화할 수 있습니다 .

디스플레이 1

디스플레이 2

디스플레이 3

디스플레이 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

선두

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

이것은 리드 단락입니다. 그것은 일반 단락에서 두드러집니다.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

인라인 텍스트 요소

일반적인 인라인 HTML5 요소에 대한 스타일 지정.

마크 태그를 사용하여가장 밝은 부분텍스트.

~~이 텍스트 줄은 삭제된 텍스트로 처리됩니다.~~

~~이 텍스트 줄은 더 이상 정확하지 않은 것으로 간주됩니다.~~

이 텍스트 줄은 문서에 추가된 것으로 간주됩니다.

이 텍스트 줄은 밑줄이 그어진 것으로 렌더링됩니다.

이 텍스트 줄은 작은 글씨로 취급되어야 합니다.

이 줄은 굵은 텍스트로 렌더링됩니다.

이 줄은 기울임꼴 텍스트로 렌더링됩니다.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.mark태그가 가져올 원치 않는 의미론적 의미를 피하면서 동일한 스타일 을 적용하는 데 .small클래스도 사용할 수 있습니다 .<mark><small>

위에 표시되지 않았지만 HTML5에서 <b>자유롭게 사용하십시오. 추가적인 중요성을 전달하지 않고 단어나 구를 강조하기 위한 것이며 주로 음성, 기술 용어 등에 사용됩니다.<i><b><i>

텍스트 유틸리티

텍스트 유틸리티 및 색상 유틸리티 를 사용하여 텍스트 정렬, 변형, 스타일, 두께 및 색상을 변경하십시오 .

약어

<abbr>마우스 오버 시 확장된 버전을 표시하는 약어 및 두문자어에 대한 HTML 요소의 스타일화된 구현입니다 . 약어에는 기본 밑줄이 있으며 호버 및 보조 기술 사용자에게 추가 컨텍스트를 제공하는 도움말 커서가 있습니다.

.initialism약간 더 작은 글꼴 크기에 대한 약어에 추가 합니다.

속성

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

인용구

문서 내에서 다른 소스의 콘텐츠 블록을 인용하는 경우. <blockquote class="blockquote">모든 HTML 을 인용문으로 감 쌉니다 .

blockquote 요소에 포함된 잘 알려진 인용문.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

소스 이름 지정

<footer class="blockquote-footer">소스 식별을 위해 추가합니다 . 소스 작업의 이름을 <cite>.

blockquote 요소에 포함된 잘 알려진 인용문.

Source Title 에서 유명한 사람

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

조정

인용구의 정렬을 변경하려면 필요에 따라 텍스트 유틸리티를 사용하십시오.

blockquote 요소에 포함된 잘 알려진 인용문.

Source Title 에서 유명한 사람

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

blockquote 요소에 포함된 잘 알려진 인용문.

Source Title 에서 유명한 사람

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

기울기

스타일이 없는

목록 항목 에서 기본 list-style및 왼쪽 여백을 제거합니다(직계 자식만 해당). 이것은 직계 자식 목록 항목에만 적용됩니다 . 즉, 모든 중첩 목록에도 클래스를 추가해야 합니다.

이것은 목록입니다.
완전히 스타일이 지정되지 않은 것처럼 보입니다.
구조적으로는 여전히 목록입니다.
그러나 이 스타일은 직계 자식 요소에만 적용됩니다.
중첩 목록:
- 이 스타일의 영향을 받지 않습니다
- 여전히 총알을 보여줄 것입니다
- 적절한 왼쪽 여백이 있어야 합니다.
이것은 어떤 상황에서는 여전히 유용할 수 있습니다.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

인라인

목록의 글머리 기호를 제거하고 margin두 클래스 .list-inline및 의 조합으로 약간의 조명을 적용 .list-inline-item합니다.

이것은 목록 항목입니다.
그리고 또 하나.
그러나 인라인으로 표시됩니다.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

설명 목록 정렬

그리드 시스템의 사전 정의된 클래스(또는 시맨틱 믹스인)를 사용하여 용어와 설명을 수평으로 정렬합니다. 더 긴 용어의 경우 선택적 .text-truncate으로 줄임표로 텍스트를 자르는 클래스를 추가할 수 있습니다.

설명 목록

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

용어

용어에 대한 정의입니다.

그리고 더 많은 자리 표시자 정의 텍스트.

다른 용어

이 정의는 짧기 때문에 추가 단락이나 기타 사항이 없습니다.

잘린 용어는 잘립니다.

공간이 협소할 때 유용할 수 있습니다. 끝에 줄임표를 추가합니다.

중첩

중첩 정의 목록: 정의 목록을 좋아한다고 들었습니다. 정의 목록 안에 정의 목록을 넣겠습니다.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

반응형 글꼴 크기

v4.3.0부터 부트스트랩은 반응형 글꼴 크기를 활성화하는 옵션과 함께 제공되므로 텍스트가 장치 및 뷰포트 크기에 걸쳐 더 자연스럽게 확장될 수 있습니다. RFS$enable-responsive-font-sizes 는 Sass 변수를 trueBootstrap으로 변경하고 다시 컴파일 하여 활성화할 수 있습니다 .

RFS 를 지원하기 위해 Sass mixin을 사용하여 일반 font-size속성을 대체합니다. 반응형 글꼴 크기는 반응형 크기 조정 동작을 활성화하기 위해 및 뷰포트 단위가 calc()혼합된 함수 로 컴파일됩니다. RFS 및 해당 구성 rem에 대한 자세한 내용 은 GitHub 리포지토리 에서 찾을 수 있습니다 .