Bootstrap's 기본 설정
Bootstrap's 전역 기본 글꼴 크기는 1.428의 라인 - 높이, 14px입니다.
이것은에 적용되는 <body> 모든 단락.
또한, 모든 <p> 요소 (기본적으로 10px)의 절반 계산 된 라인 높이를 동일 바닥 마진이있다.
Bootstrap 대 브라우저의 기본값
이 장에서 우리는 다르게 조금 스타일이 될 것입니다 일부 HTML 요소를 살펴 보겠습니다 Bootstrap 브라우저의 기본값보다.
<h1> - <h6>
기본적으로 부트 스트랩합니다 (HTML 제목 스타일을 것이다 <h1> 에을 <h6> ) 다음과 같은 방법으로 :
예
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
»그것을 자신을 시도 <small>
부트 스트랩에서 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
»그것을 자신을 시도 <mark>
Bootstrap 되는 HTML 스타일 것이다 <mark> 다음과 같은 방법으로 소자 :
<abbr>
Bootstrap 되는 HTML 스타일 것 <abbr> 다음과 같은 방법으로 소자 :
<blockquote>
Bootstrap 되는 HTML 스타일 것 <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.
»그것을 자신을 시도 오른쪽에있는 견적을 표시하려면 사용 .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.
»그것을 자신을 시도 <dl>
Bootstrap 되는 HTML 스타일 것 <dl> 다음과 같은 방법으로 소자 :
<code>
Bootstrap 되는 HTML 스타일을 것이다 <code> 다음과 같은 방법으로 요소를 :
예
The following HTML elements: span , section , and div defines a section in a document.
»그것을 자신을 시도 <kbd>
Bootstrap 되는 HTML 스타일 것 <kbd> 다음과 같은 방법으로 소자 :
<pre>
Bootstrap 되는 HTML 스타일 것 <pre> 다음과 같은 방법으로 소자 :
예
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
»그것을 자신을 시도 상황에 맞는 색상과 배경
Bootstrap 또한 "색상을 통해 의미"를 제공하는 데 사용할 수있는 몇 가지 상황에 맞는 클래스를 가지고있다.
텍스트 색상의 클래스는 다음과 같습니다 .text-muted , .text-primary , .text-success , .text-info , .text-warning 하고 .text-danger :
예
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 :
예
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
»그것을 자신을 시도 더 많은 입력 체계 클래스
아래의 부트 스트랩 클래스는 상기 스타일 HTML 요소에 첨가 될 수있다 :
| 수업 | 기술 | 예 |
|---|---|---|
.lead | 단락은 눈에 띄는하게 | 시도 해봐 |
.small | 작은 텍스트 (상위의 크기의 85 %로 설정)를 나타낸다 | 시도 해봐 |
.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 | 조건 (최대 선 <dt> ) 및 설명 ( <dd> 에서) <dl> 요소 나란히. 기본처럼 시작은 <dl> S하지만 브라우저 윈도우가 확장되면, 나란히 줄 것 | 시도 해봐 |
.pre-scrollable | 만든다 <pre> 요소는 스크롤 | 시도 해봐 |
완료 Bootstrap 입력 체계 참조
모든 타이포그래피 요소 / 클래스의 완전한 참고로, 우리의 완전한 이동 Bootstrap 입력 체계 참조 .
또한 우리를 보면 Bootstrap 도우미 클래스 참조 상황에 맞는 클래스에 대한 자세한 내용은.