부트 스트랩 레이아웃
기본 스택으로 헬 베티 뉴, 돋움, 굴림와 산세 리프 글꼴을 사용하여 부트 스트랩.
페이지 레이아웃 기능을 사용하여 부트 스트랩, 당신은 제목, 단락, 목록 및 기타 인라인 요소를 만들 수 있습니다.
표제
부트 스트랩은 HTML 제목의 모든 스타일을 (H1이 h6 사용하는)를 정의합니다. 다음 예를 고려하십시오
예
<H1> 내가 향하고 있었던 1 (H1) </ H1>
<H2> 내가 향하고 있었던 2 H2 </ H2>
<H3> 내가 향하고 있었다 3 H3 </ H3>
<H4> 내가 향하고 있었다 4 H4 </ H4>
<H5> 내가 향하고 있었다 5 H5 </ H5>
<H6> 내가 향하고 있었다 6 H6 </ H6>
결과는 다음과 같다 :
인라인 자막
어떤 타이틀을 인라인 자막을 추가해야하는 경우, 단순히 다음의 예와같이, 당신은 작은 크기 밝은 텍스트 색상을 얻을 수있는이 방법을 요소의 양측 <작은>에 추가하거나 .small 클래스를추가 다음과 같은 :
예
<H1은> I 1 (H1)을 향하고 있었다. <작은> I 자막 1 (H1) </ 작은> </ H1>
<H2는> 내가 2 H2를 향하고 있었다. <작은> 내가 자막이 H2 </ 작은> </ H2>
<H3는> 내가 3 H3을 향하고 있었다. <작은> 내가 자막 3 H3 </ 작은> </ H3>
<H4는> 내가 4 H4를 향하고 있었다. <작은> 내가 자막 4 H4 </ 작은> </ H4>
<H5이> 내가 5 H5를 향하고 있었다. <작은> 내가 자막 5 H5 </ 작은> </ H5>
<H6는> 내가 6 H6을 향하고 있었다. <작은> I 자막 6 H6 </ 작은> </ H6>
결과는 다음과 같다 :
상기 가이드 몸체의 사본
다음의 예와 같이 텍스트를 강조하기 위해 단락을 추가하려면, 당신은 더 크고 더 대담 될 것이다 클래스 = "리드", 더 많은 텍스트 행 높이를 추가 할 수 있습니다 :
예
<H2> 가이드 체 복사 </ H2>
<P 클래스 = "리드">이 가이드 체의 사용 데모 복사의 예이다. 이 가이드 체 사용량 데모 복사의 예이다. 이 가이드 체 사용량 데모 복사의 예이다. 이 가이드 체 사용량 데모 복사의 예이다. 이 가이드 체 사용량 데모 복사의 예이다. 이 가이드 체 사용량 데모 복사의 예이다. 이 가이드 체 사용량 데모 복사의 예이다. 이 가이드 체 사용량 데모 복사의 예이다. </ P>
결과는 다음과 같다 :
강조
기본 HTML 태그는 <작은> (부모의 85 %가 텍스트의 텍스트 크기를 설정), <강한> (텍스트를 과감 텍스트를 설정), <안에> (이탤릭체로 설정된 텍스트)을 강조합니다.
하기 실시 예에 나타낸 바와 같이 부트 스트랩은 텍스트를 강조하기 위해 사용되는 클래스를 제공한다 :
예
<작은> 은행은 콘텐츠 태그에 </ 작은>는로 <br>
<STRONG> 은행은 콘텐츠 태그 </ STRONG>로 <br>에
<엠> 은행은 태그 내용이며, 이탤릭체 </ EM>로 <br>로 렌더링
<P 클래스 = "텍스트 왼쪽"> 왼쪽 정렬 텍스트 </ P>
<P 클래스 = "텍스트 중심"> 텍스트 정렬 </ P>
<P 클래스 = "텍스트 오른쪽"> 오른쪽 맞춤 텍스트 </ P>
<P 클래스 = "텍스트 음소거"> 은행 함량이 감쇠 </ P>
<P 클래스 = "텍스트 차"> 기본 클래스와 은행의 콘텐츠 </ P>
<P 클래스 = "텍스트 성공"> 성공 클래스와 은행의 콘텐츠 </ P>
<P 클래스 = "텍스트 정보"> 은행 정보 클래스에 만족 </ P>
<P 클래스 = "텍스트 경고"> 경고 클래스와 은행의 콘텐츠 </ P>
<P 클래스 = "텍스트 위험"> 위험 클래스와 은행의 콘텐츠 </ P>
결과는 다음과 같다 :
약어
HTML 엘리먼트 태그는 이러한 WWW 또는 HTTP와 같은 약어를 위해 제공된다. 이 전체 텍스트를 표시 위에 마우스가있을 때 프레임의 하단에 텍스트에 점선을 표시하는 스타일의 <약식> 요소의 부트 스트랩 정의 (만큼 추가로 <약식> 제목 텍스트 속성). 작은 폰트 텍스트를 얻기 위해, .initialism <약식>에 추가.
예
<약어 기능 제목 = "월드 와이드 웹"> WWW </ 약식>로 <br>
<약어 기능 제목 = "진짜 간단한 신디케이트 조직" 클래스 = "두문자"> RSS < / 약식>
결과는 다음과 같다 :
주소 (주소)
<주소> 태그를 사용하면 페이지에 나와있는 연락처 정보를 표시 할 수 있습니다. <주소> 기본 표시 가입일 : 블록을, 당신은 폐쇄 주소 랩 텍스트를 추가 할 레이블을 사용해야합니다.
예
<주소>
<STRONG> 일부 회사, 주식 회사 < 일부 도시로 <br> / strong>을로 <br> 007 거리, 상태 XXXXX의로 <br>
<약어 기능 제목 = "전화"> P : </ 약식> (123) 456-7890 </ 주소>
<주소>
<STRONG> 전체 이름 </ STRONG >로 <br>
<A HREF = "흔한 : #"> [email protected] </ A>
</ 주소> 결과는 다음과 같다 :
참조 (인용구)
기본값을 사용할 수 있습니다 <인용구> 모든 HTML 텍스트 옆에. 다른 옵션은클래스.pull 오른쪽 오른쪽 정렬 기준을 사용하여 인용의 소스를 식별하는 <작은> 태그를 추가 포함한다. 다음의 예는 이러한 기능을 보여줍니다
예
<인용구>
<P>이 기본 인스턴스에 대한 참조입니다. 이 기본 인스턴스에 대한 참조입니다. 이 기본 인스턴스에 대한 참조입니다. 이 기본 인스턴스에 대한 참조입니다. 이 기본 인스턴스에 대한 참조입니다. 이 기본 인스턴스에 대한 참조입니다. 이 기본 인스턴스에 대한 참조입니다. 이 기본 인스턴스에 대한 참조입니다. </ P>
</ 인용구>
<인용구>이 참조의 소스와의 제목입니다. <작은> 인용 <유명한 사람 제목 = "자료 제목"> 자료 제목 </> </ 작은 인용>
</ 인용구>
<인용구 클래스 = "오른쪽으로 당겨">이에 대한 참조 인 오른쪽 정렬됩니다. <작은> 인용 <유명한 사람 제목 = "자료 제목"> 자료 제목 </> </ 작은 인용>
</ 인용구>
결과는 다음과 같다 :
명부
부트 스트랩 지원 목록 정렬되지 않은 목록 및 정의 목록을 주문했다.
- 정렬 된 목록 : 질서 문자리스트의 시작 부분에 숫자 또는 다른 수단의 정렬 된 목록입니다.
- 정렬되지 않은 목록 : 정렬되지 않은 목록은 특정 순서없이 목록을 참조 전통적인 스타일에 대한 강조로 시작하는 번호의 목록입니다.이 강조 표시하지 않으려면, 당신은클래스.list-스타일이 적용되지 않은 스타일을 제거 할 수 있습니다. 또한, 동일한 행에있는 모든 항목클래스.list 인라인 목록을 사용할 수있다.
- 정의 목록 : 목록 이러한 유형의 각 목록 항목은 <DT>와 <DD> 요소를 포함 할 수 있습니다.<DT> (문구 나)의 일부 사전 같은용어의 정의대신에 정의됩니다. 그런 다음 <DD>는 <DT> 설명입니다. 당신은클래스DL-수평 <DL> 행이 설명을 나란히 표시 속하는를 사용할 수 있습니다.
다음의 예는리스트의 이러한 유형을 보여줍니다
예
<H4는> 목록 </ H4>를 정렬
<안녕>
<리> 상품 1 </ 리 >
<리> 상품 2 </ 리 >
<리> 항목 3 </ 리 >
<리> 항목 4 </ 리 >
</ 올>
<H4> 정렬되지 않은 목록 </ H4>
<UL>
<리> 상품 1 </ 리 >
<리> 상품 2 </ 리 >
<리> 항목 3 </ 리 >
<리> 항목 4 </ 리 >
</ UL>
<H4> 정의되지 않은 스타일리스트 </ H4>
<UL > 클래스 = "목록-스타일이 적용되지 않은"
<리> 상품 1 </ 리 >
<리> 상품 2 </ 리 >
<리> 항목 3 </ 리 >
<리> 항목 4 </ 리 >
</ UL>
<H4> 인라인 목록 </ H4>
<UL 클래스 = "목록 인라인">
<리> 상품 1 </ 리 >
<리> 상품 2 </ 리 >
<리> 항목 3 </ 리 >
<리> 항목 4 </ 리 >
</ UL>
<H4> 정의 목록 </ H4>
<DL>
<DT> 설명 (1) </ DT >
<DD> 항목 1 </ DD >
<DT> 설명 2 </ DT >
<DD> 항목 2 </ DD >
</ DL>
정의 목록 <H4> 수준 </ H4>
<DL > 클래스 = "DL-수평"
<DT> 설명 (1) </ DT >
<DD> 항목 1 </ DD >
<DT> 설명 2 </ DT >
<DD> 항목 2 </ DD >
</ DL>
결과는 다음과 같다 :
더 조판 클래스
다음 표는 추가 예제를 부트 스트랩 입력 체계 클래스를 제공한다 :
| 범주 | 기술 | 예 |
|---|
| .lead | 확인하기 위해 단락을 강조 | 시험 |
| .small | 작은 텍스트 설정 (85 % 부모 텍스트의 크기를 설정) | 시험 |
| 는 .text 왼쪽 | 설정 왼쪽 정렬 텍스트 | 시험 |
| 는 .text 센터 | 설정 텍스트 정렬 | 시험 |
| 는 .text 오른쪽 | 설정 텍스트 오른쪽 정렬 | 시험 |
| 는 .text-정당화 | 화면 텍스트 감싸기를 넘어 텍스트 정렬, 문단 설정 | 시험 |
| 는 .text - 파라미터 nowrap | 화면 이외의 단락은 부분적으로 포장 | 시험 |
| 는 .text 소문자 | 설정 텍스트 소문자 | 시험 |
| 는 .text - 대문자 | 설정 텍스트 대문자 | 시험 |
| 는 .text - 투자 | 단어의 이니셜을 설정 | 시험 |
| .initialism | 그것은 작은 글꼴을 표시 할 텍스트의 <약식> 요소에 표시됩니다 | 시험 |
| .blockquote 역 | (A)에 대한 참조 설정 마우스 오른쪽 단추로 정렬 | 시험 |
| .list-스타일이 적용되지 않은 | 기본 목록 스타일을 제거, 목록 항목 (<UL>와 <OL>에서) - 왼쪽 정렬. 이 범주는 (중첩 된 목록 항목을 제거해야하는 경우, 당신은 중첩 된 목록에 스타일을 사용해야합니다) 항목의 자식 목록을 직접 적용 | 시험 |
| .list - 인라인 | 모든 목록 항목과 동일한 행에 배치 될 | 시험 |
| .dl 수평 | 이 클래스는 플로트 및 오프셋 적용 <DL> 요소와 <DT> 요소를 설정, 당신은 특정 구현 예를 볼 수 있습니다 | 시험 |
| .PRE-스크롤 | 스크롤 그래서 <전> 요소 스크롤 | 시험 |
