부트스트랩 CSS 타이포그래피 참조
부트스트랩의 기본 설정
부트스트랩의 전역 기본 글꼴 크기는 14px이며 줄 높이는 1.428입니다.
이는 <body> 및 모든 단락에 적용됩니다.
또한 모든 <p> 요소에는 계산된 줄 높이의 절반(기본적으로 10px)과 같은 아래쪽 여백이 있습니다.
타이포그래피
아래 요소는 브라우저 기본값과 부트스트랩에 의해 약간 다르게 스타일이 지정되는 HTML 요소입니다. 결과/차이점을 보려면 "사용해 보기" 예제를 살펴보십시오.
아래 클래스는 요소의 스타일을 추가로 지정하는 데 사용됩니다.
| Element/Class | Description | Example |
|---|---|---|
| <h1> - <h6> or .h1 - .h6 |
h1 - h6 headings | |
| <small> | Creates a lighter, secondary text in any heading
Heading (secondary text) |
|
| .small | Indicates smaller text (set to 85% of the size of the parent): Smaller text | |
| .lead | Makes a text stand out: Stand out text | |
| <mark> or .mark |
Highlights text: Highlighted text | |
| <del> | Indicates deleted text: |
|
| <s> | Indicates no longer relevant text: |
|
| <ins> | Indicates inserted text: Inserted text | |
| <u> | Indicates underlined text: Underlined text | |
| <strong> | Indicates bold text: Bold text | |
| <em> | Indicates italic text: Italic text | |
| .text-left | Indicates left-aligned text | |
| .text-center | Indicates center-aligned text | |
| .text-right | Indicates right-aligned text | |
| .text-justify | Indicates justified text | |
| .text-nowrap | Indicates no wrap text | |
| .text-lowercase | Indicates lowercased text: LOWERCASED TEXT | |
| .text-uppercase | Indicates uppercased text: uppercased text | |
| .text-capitalize | Indicates capitalized text: capitalized text | |
| <abbr> | The <abbr> element indicates an abbreviation or acronym. Abbreviations with a title attribute have a dotted bottom border and a help cursor on hover, providing additional context on hover. | |
| .initialism | Displays the text inside the <abbr> element in a slightly smaller font size | |
| <address> | Presents contact information | |
| <blockquote> | Indicates blocks of content from another source | |
| .blockquote-reverse | Indicates a blockquote with right-aligned content | |
| <ul> | Indicates an unordered list | |
| <ol> | Indicates an ordered list | |
| .list-unstyled | Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) | |
| .list-inline | Places all list items on a single line | |
| <dl> | Indicates a description list | |
| .dl-horizontal | Lines up the terms and descriptions in the <dl> element side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side |
암호
| Element/Class | Description | Example |
|---|---|---|
| <var> | Indicates variables: x = ab + y | |
| <kbd> | Indicates input that is typically entered via the keyboard: CTRL + P | |
| <pre> | Indicates multiple lines of code | |
| <pre class="pre-scrollable"> | Indicates multiple lines of code with scrollbar | |
| <samp> | Indicates sample output from a computer program: Sample output | |
| <code> | Indicates inline snippets of code: span, div |