부트스트랩의 전역 기본 글꼴 크기는 14px이고, 줄 높이는 1.428입니다.
이것은 <body> 요소와 모든 단락 (<p>)에 적용됩니다.
또한 모든 <p> 요소에는 계산된 선 높이의 절반 (기본적으로 10px)에 해당하는 아래쪽 여백(bottom margin)이 있습니다.
Bootstrap이 브라우저 기본 값과 약간 다르게 스타일을 지정할 HTML 요소를 살펴 보겠습니다.
기본적으로 Bootstrap은 아래의 방식으로 HTML 제목 (<h1> ~ <h6>)의 스타일을 지정합니다.
Bootstrap에서, HTML <small> 요소는 모든 제목에 더 가벼운 보조 텍스트를 만드는데 사용됩니다.
The small element is used to create a lighter, secondary text in any heading:
Bootstrap은 HTML <mark> 요소를 하기 방식으로 스타일을 지정합니다.
Use the mark element to hightlight text.
Bootstrap은 HTML <abbr> 요소를 하기 방식으로 스타일을 지정합니다.
The abbr element is used to mark up an abbreviation or acronym:
The WHO was founded in 1948.
Bootstrap은 HTML <blockquote> 요소를 하기 방식으로 스타일을 지정합니다.
The blockquote element is used to present content from another source:
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.
오른쪽에 인용문(the quote)을 표시하려면, .blockquote-reverse 클래스를 사용하세요.
To show the quote on the right, use the class .blockquote-reverse:
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.
Bootstrap은 HTML <dl> 요소를 하기 방식으로 스타일을 지정합니다.
dl = description list
The dl element indicates a description list:
Bootstrap은 HTML <code> 요소를 하기 방식으로 스타일을 지정합니다.
Inline snippets of code should be embedded in the code element:
The following HTML elements: span, section, and div defines a section in a document.
Bootstrap은 HTML <kbd> 요소를 하기 방식으로 스타일을 지정합니다.
kbd = KeyBoarD
To indicate input that is typically entered via the keyboard, use the kbd element:
Use ctrl + p to open the Print dialog box.
Bootstrap은 HTML <pre> 요소를 하기 방식으로 스타일을 지정합니다.
<pre> 요소 내부는 텍스트와 코드가 고정 폭의 폰트로 표시되고, 화면 폭과 상관없이 공간과 줄바꿈을 유지합니다.
For multiple lines of code, use the pre element:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
부트스트랩에는 “색상을 통한 의미”를 제공하는 데 사용할 수 있는 컨텍스트 클래스(contextual classes)도 있습니다.
**contextual : (문장의) 전후 관계의, 문맥상의, 맥락[전후 사정]과 관련된
텍스트 색상의 클래스는 아래와 같습니다.
text-muted, text-primary, text-success, text-info, text-warning, 그리고 text-danger:
Use the Contextual classes to provide "meaning through colors"
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning
This text represents danger.
배경색을 위한 클래스는 아래와 같습니다:
.bg-primary, bg-success, bg-info, bg-warning, 그리고 bg-danger:
Use the contextual background classes to provide "meaning through colors":
This text is important.
This text indicates success.
This text represents some infomation.
This text represents a warning.
This text represents danger.
아래의 Bootstrap 클래스를 추가하여 HTML 요소의 스타일을 추가로 지정할 수 있습니다.
| Class | Description |
.lead | 단락을 돋보이게 만듭니다. |
|---|---|
.small | |
.text-left | 좌측 정렬 텍스트를 나타냅니다. |
.text-center | 중앙 정렬 텍스트를 나타냅니다. |
.text-right | 우측 정렬 텍스트를 나타냅니다. |
.text-justify | 양쪽 정렬 텍스트를 나타냅니다. |
.text-nowrap | 줄바꿈 없는 텍스트를 나타냅니다. |
.text-lowercase | 모든 철자를 소문자로 나타냅니다 |
.text-uppercase | 모든 철자를 대문자로 나타냅니다. |
.text-capitalize | 텍스트의 각각의 단어 첫글자를 대문자로 나타냅니다. |
.initialism | 약간 더 작은 글꼴 크기로 <abbr> 요소 내부의 텍스트를 표시합니다. |
.list-unstyled | 목록 항목의 기본 목록 스타일과 왼쪽 여백을 제거합니다 (<ul> 및 <ol> 모두에서 작동). 이 클래스는 자식 목록 항목에만 적용됩니다 (중첩된 목록에서 기본 목록 스타일을 제거하려면 이 클래스를 모든 중첩된 목록에도 적용) |
.list-inline | 모든 목록 항목을 한 줄에 배치합니다. |
.dl-horizontal | <dl> 요소의 용어 (<dt>)와 설명 (<dd>)을 나란히 정렬합니다. 기본 <dl>처럼 시작하지만 브라우저 창이 확장되면 나란히 정렬됩니다. |
.pre-scrollable | <pre> 요소를 스크롤 가능하게 만듭니다. y축 방향으로 스크롤 바 생성됩니다. |
Use the .lead class to make a paragraph "stand out":
This paragraph stands out.
This paragraph is regular.
=========================================================================
Use the .small class to make the text smaller:
This paragraph smaller.
This paragraph is regular.
=========================================================================
left-aligned text.
right-aligned text.
center-aligned text.
Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.
=========================================================================
No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text.
Tip:Try to resize the browser window to see the behavior of justify and nowrap.
=========================================================================
LoWercAsed text
Uppercased textcapitlized text
=========================================================================
The WHO was founded in 1948. (normal abbr)
The WHO was founded in 1948. (slightly smaller abbr)
=========================================================================
The .list-unstyled removes the default list-style and left wmargin on list items (immediate children only):
=========================================================================
The class .list-inline places all list items on a single line:
=========================================================================
Use the .dl-horizontal class line up the description list side-by-side when the browser window expands:
=========================================================================
For multiple lines of code, use the pre element:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.