부트스트랩 4 텍스트/타이포그래피
부트스트랩 4 기본 설정
font-size부트스트랩 4는 16px
의 기본값
을 사용하며 line-height1.5입니다.
기본값 font-family은 "Helvetica Neue", Helvetica, Arial, sans-serif입니다.
또한 모든 <p>요소에는
margin-top: 0및 margin-bottom: 1rem(기본적으로 16픽셀)가 있습니다.
<h1> - <h6>
Bootstrap 4 는 더 굵은 글꼴 두께와 증가된 글꼴 크기로 HTML 제목( <h1>to
) 스타일을 지정합니다.<h6>
예시
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
제목 표시
표시 제목은 일반 제목(더 큰 글꼴 크기 및 더 가벼운 글꼴 두께)보다 더 눈에 띄기 위해 사용되며 선택할 수 있는 4가지 클래스가 있습니다. .display-1, .display-2, .display-3,.display-4
예시
Display 1
Display 2
Display 3
Display 4
<작은>
Bootstrap 4에서 HTML <small>요소는 모든 제목에서 더 가벼운 보조 텍스트를 만드는 데 사용됩니다.
예시
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<마크>
Bootstrap 4는 <mark>노란색 배경색과 약간의 패딩으로 HTML 요소의 스타일을 지정합니다.
예시
Use the mark element to highlight text.
<abbr>
<abbr>Bootstrap 4는 점선 테두리 하단으로 HTML 요소의 스타일 을 지정합니다.
예시
The WHO was founded in 1948.
<블록 인용>
다른 소스에서 콘텐츠 블록을 인용할 때 .blockquote클래스를 추가합니다 .<blockquote>
예시
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
<dl>
Bootstrap 4는 <dl>다음과 같은 방식으로 HTML 요소의 스타일을 지정합니다.
예시
- Coffee
- - black hot drink
- Milk
- - white cold drink
<코드>
Bootstrap 4는 <code>다음과 같은 방식으로 HTML 요소의 스타일을 지정합니다.
예시
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
Bootstrap 4는 <kbd>다음과 같은 방식으로 HTML 요소의 스타일을 지정합니다.
예시
Use ctrl + p to open the Print dialog box.
<사전>
Bootstrap 4는 <pre>다음과 같은 방식으로 HTML 요소의 스타일을 지정합니다.
예시
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
더 많은 타이포그래피 수업
아래의 Bootstrap 4 클래스를 추가하여 HTML 요소의 스타일을 추가로 지정할 수 있습니다.
| Class | Description | Example |
|---|---|---|
.font-weight-bold |
Bold text | |
.font-weight-bolder |
Bolder text | |
.font-italic |
Italic text | |
.font-weight-light |
Light weight text | |
.font-weight-lighter |
Lighter weight text | |
.font-weight-normal |
Normal text | |
.lead |
Makes a paragraph stand out | |
.small |
Indicates smaller text (set to 80% of the size of the parent) | |
.text-left |
Indicates left-aligned text | |
.text-*-left |
Indicates left-aligned text on small, medium, large or xlarge screens | |
.text-break |
Prevents long text from breaking layout | |
.text-center |
Indicates center-aligned text | |
.text-*-center |
Indicates center-aligned text on small, medium, large or xlarge screens | |
.text-decoration-none |
Removes the underline from a link | |
.text-right |
Indicates right-aligned text | |
.text-*-right |
Indicates right-aligned text on small, medium, large or xlarge screens | |
.text-justify |
Indicates justified text | |
.text-monospace |
Monospaced text | |
.text-nowrap |
Indicates no wrap text | |
.text-lowercase |
Indicates lowercased text | |
.text-reset |
Resets the color of a text or a link (inherits the color from its parent) | |
.text-uppercase |
Indicates uppercased text | |
.text-capitalize |
Indicates capitalized text | |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
|
.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 (used together with
.list-inline-item on each <li> elements) |
|
.pre-scrollable |
Makes a <pre> element scrollable |
완전한 부트스트랩 4 CSS 참조
Bootstrap 4에서 사용 가능한 모든 CSS 클래스에 대한 완전한 참조는 Bootstrap 4 All Classes Reference 를 방문하십시오 .