%%'')에 적용됩니다.\\ \\ 또한 모든 ''%%
%%'' 요소에는 계산된 선 높이의 절반 (기본적으로 10px)에 해당하는 아래쪽 여백(bottom margin)이 있습니다.\\ \\ =====Bootstrap vs. Browser Defaults===== Bootstrap이 브라우저 기본 값과 약간 다르게 스타일을 지정할 HTML 요소를 살펴 보겠습니다.\\ \\ ====
The small element is used to create a lighter, secondary text in any heading:
Use the mark element to hightlight text.
The abbr element is used to mark up an abbreviation or acronym:
The WHO was founded in 1948.
==== Bootstrap은 %%HTML%% '''' 요소를 하기 방식으로 스타일을 지정합니다.\\\\ 오른쪽에 인용문(the quote)을 표시하려면, ''%%.blockquote-reverse%%'' 클래스를 사용하세요.\\Blockquotes
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.
\\ ====Blockquotes
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 = description list\\
\\ ====Description Lists
The dl element indicates a description list:
- Coffee
- - black hot drink
- Milk
- - white cold drink
==== Bootstrap은 %%HTML%% '''' 요소를 하기 방식으로 스타일을 지정합니다.\\\\ ======== Bootstrap은 %%HTML%% '''' 요소를 하기 방식으로 스타일을 지정합니다.\\ kbd = KeyBoarD\\Code Snippets
Inline snippets of code should be embedded in the code element:
The following HTML elements:
span,section, anddivdefines a section in a document.\\ ====Keyboard Inputs
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%% '''' 요소를 하기 방식으로 스타일을 지정합니다.\\ ''%%%%'' 요소 내부는 텍스트와 코드가 고정 폭의 폰트로 표시되고, 화면 폭과 상관없이 공간과 줄바꿈을 유지합니다.\\\\ ====contextual Colors and Backgrounds===== 부트스트랩에는 "색상을 통한 의미"를 제공하는 데 사용할 수 있는 컨텍스트 클래스(contextual classes)도 있습니다.\\ **contextual : (문장의) 전후 관계의, 문맥상의, 맥락[전후 사정]과 관련된\\ \\ 텍스트 색상의 클래스는 아래와 같습니다.\\ ''text-muted'', ''text-primary'', ''text-success'', ''text-info'', ''text-warning'', 그리고 ''text-danger'':\\ ====예제====Multiple Code Lines
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.\\ 배경색을 위한 클래스는 아래와 같습니다:\\ ''.bg-primary'', ''bg-success'', ''bg-info'', ''bg-warning'', 그리고 ''bg-danger'':\\ ====예제====Contextual Colors
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.
\\ ====More Typography Classes==== 아래의 Bootstrap 클래스를 추가하여 %%HTML%% 요소의 스타일을 추가로 지정할 수 있습니다.\\ | Class | Description | ^ ''.lead'' ^ 단락을 돋보이게 만듭니다. ^ | ''.small'' | 더 작은 텍스트를 나타냅니다 (부모 요소 크기의 85 %로 설정됨). ^ ''.text-left'' ^ 좌측 정렬 텍스트를 나타냅니다. ^ | ''.text-center'' | 중앙 정렬 텍스트를 나타냅니다. | ^ ''.text-right'' ^ 우측 정렬 텍스트를 나타냅니다. ^ | ''.text-justify'' | 양쪽 정렬 텍스트를 나타냅니다. | ^ ''.text-nowrap'' ^ 줄바꿈 없는 텍스트를 나타냅니다. ^ | ''.text-lowercase'' | 모든 철자를 소문자로 나타냅니다 | ^ ''.text-uppercase'' ^ 모든 철자를 대문자로 나타냅니다. ^ | ''.text-capitalize'' | 텍스트의 각각의 단어 첫글자를 대문자로 나타냅니다. | ^ ''.initialism'' ^ 약간 더 작은 글꼴 크기로 요소 내부의 텍스트를 표시합니다. ^ | ''.list-unstyled'' | 목록 항목의 기본 목록 스타일과 왼쪽 여백을 제거합니다 (''Contextual Background Colors
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.
'' 및 ''
'' 모두에서 작동). 이 클래스는 자식 목록 항목에만 적용됩니다 (중첩된 목록에서 기본 목록 스타일을 제거하려면 이 클래스를 모든 중첩된 목록에도 적용) | ^ ''.list-inline'' ^ 모든 목록 항목을 한 줄에 배치합니다. ^ | ''.dl-horizontal'' |
요소의 용어 (''
- '')와 설명 (''
- '')을 나란히 정렬합니다. 기본 ''
''처럼 시작하지만 브라우저 창이 확장되면 나란히 정렬됩니다. | ^ ''.pre-scrollable'' ^
요소를 스크롤 가능하게 만듭니다. y축 방향으로 스크롤 바 생성됩니다. ^ \\ ====예제===={{tag>오션 Bootstrap Text/Typography}}Typography
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):
- Coffee
- Tea
- Black tea
- Green tea
- Milk
=========================================================================
The class .list-inline places all list items on a single line:
- Espresso
- Dolce Latte
- Cold Brew
=========================================================================
Use the .dl-horizontal class line up the description list side-by-side when the browser window expands:
- Coffee
- black hot drink
- Milk
- White Cold Drink
=========================================================================
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.