타이포그래피
전역 설정, 머리글, 본문, 목록 등을 포함한 부트스트랩 타이포그래피에 대한 문서 및 예제.
전역 설정
부트스트랩은 기본 전역 디스플레이, 타이포그래피 및 링크 스타일을 설정합니다. 더 많은 제어가 필요한 경우 텍스트 유틸리티 클래스 를 확인하십시오 .
- 각 OS 및 장치 에 가장 적합한 기본 글꼴 스택 을 사용합니다 .
font-family
- 보다 포괄적이고 접근 가능한 유형 척도를 위해 브라우저의 기본 루트
font-size
(일반적으로 16px)를 사용하므로 방문자가 필요에 따라 브라우저 기본값을 사용자 지정할 수 있습니다. - 에 적용된 활자체 기반으로 , 및 속성
$font-family-base
을$font-size-base
사용 합니다 .$line-height-base
<body>
- 를 통해 전역 링크 색상을 설정합니다
$link-color
. - ( 기본값) 을
$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>
제목 표시
전통적인 제목 요소는 페이지 콘텐츠의 핵심에서 가장 잘 작동하도록 설계되었습니다. 눈에 띄는 제목이 필요하면 표시 제목 을 사용하는 것을 고려하십시오 . 더 크고 약간 더 독단적인 제목 스타일입니다.
<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
$display-font-sizes
표시 제목은 Sass 맵과 두 개의 변수 및 $display-font-weight
를 통해 구성됩니다 $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
선두
를 추가하여 단락을 돋보이게 만드십시오 .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>
저작권 및 법률 텍스트와 같은 보조 설명 및 작은 글씨를 나타냅니다.<s>
더 이상 관련이 없거나 더 이상 정확하지 않은 요소를 나타냅니다.<u>
텍스트가 아닌 주석이 있음을 나타내는 방식으로 렌더링되어야 하는 인라인 텍스트의 범위를 나타냅니다.
텍스트의 스타일을 지정하려면 대신 다음 클래스를 사용해야 합니다.
.mark
와 같은 스타일을 적용합니다<mark>
..small
와 같은 스타일을 적용합니다<small>
..text-decoration-underline
와 같은 스타일을 적용합니다<u>
..text-decoration-line-through
와 같은 스타일을 적용합니다<s>
.
위에 표시되지 않았지만 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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
소스 이름 지정
HTML 사양에서는 blockquote 속성을 <blockquote>
. <blockquote>
저작자 표시를 제공할 때 a <figure>
를 래핑 하고 클래스와 함께 <figcaption>
또는 블록 수준 요소(예: <p>
)를 사용합니다 .blockquote-footer
. 소스 작업의 이름도 래핑하십시오 <cite>
.
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
조정
인용구의 정렬을 변경하려면 필요에 따라 텍스트 유틸리티를 사용하십시오.
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
기울기
스타일이 없는
목록 항목 에서 기본 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>
반응형 글꼴 크기
Bootstrap 5에서는 기본적으로 반응형 글꼴 크기를 활성화하여 장치 및 뷰포트 크기에 걸쳐 텍스트가 더 자연스럽게 확장되도록 했습니다. 이것이 어떻게 작동하는지 알아보려면 RFS 페이지 를 살펴보십시오 .
사스
변수
제목에는 크기 조정 및 간격에 대한 전용 변수가 있습니다.
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
여기와 Reboot 에서 다루는 기타 타이포그래피 요소 에도 전용 변수가 있습니다.
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
믹신
타이포그래피를 위한 전용 믹스인은 없지만 부트스트랩은 RFS(Responsive Font Sizing) 를 사용 합니다.