부트 스트랩 미리보기
이 장에서는 부트 스트랩 축소판을 설명합니다. 대부분의 사이트는 그리드 등 레이아웃 이미지, 비디오, 텍스트가 필요합니다. 이것에 대한 부트 스트랩 미리보기는 쉬운 방법을 제공합니다. 다음과 같이 부트 스트랩은 미리보기 이미지를 만들 사용하려면 :
- 클래스 .thumbnail와 이미지 태그 주위에 <a>를 추가합니다.
- 이 패딩 (패딩) 4 화소과 회색 테두리를 추가합니다.
- 마우스 화상 가리키면, 애니메이션 영상의 윤곽을 표시 할 것이다.
다음 예는 기본 축소판을 보여줍니다
예
<사업부 클래스 = "행">
<사업부 클래스 = "COL-SM-6 COL-MD-3">
<A HREF = "#" 클래스 = "썸네일">
<IMG SRC는 = "/wp-content/uploads/2014/06/kittens.jpg"
ALT = "일반적인 자리 축소판">
</ A>
</ DIV>
<사업부 클래스 = "COL-SM-6 COL-MD-3">
<A HREF = "#" 클래스 = "썸네일">
<IMG SRC는 = "/wp-content/uploads/2014/06/kittens.jpg"
ALT = "일반적인 자리 축소판">
</ A>
</ DIV>
<사업부 클래스 = "COL-SM-6 COL-MD-3">
<A HREF = "#" 클래스 = "썸네일">
<IMG SRC는 = "/wp-content/uploads/2014/06/kittens.jpg"
ALT = "일반적인 자리 축소판">
</ A>
</ DIV>
<사업부 클래스 = "COL-SM-6 COL-MD-3">
<A HREF = "#" 클래스 = "썸네일">
<IMG SRC는 = "/wp-content/uploads/2014/06/kittens.jpg"
ALT = "일반적인 자리 축소판">
</ A>
</ DIV>
</ DIV>
»시도
결과는 다음과 같다 :
사용자 정의 컨텐츠 추가
이제 우리는 기본 썸네일을 가지고, 우리는 제목, 단락 또는 버튼과 같은 HTML 미리보기 이미지에 다양한 컨텐츠를 추가 할 수 있습니다. 다음과 같이 구체적인 단계는 다음과 같습니다
- 클래스 .thumbnail와 <A> 레이블 <DIV> 변경되었습니다.
- 의 <div> 내부, 추가 할 수있는 아무것도에서는 추가 할. 이 때문에 A는 <DIV> 우리는 크기를 조정하는 범위에 따라 규칙을 기본 명명을 사용할 수 있습니다.
- 당신이 그룹에 여러 이미지를 원하는 경우, 정렬되지 않은 목록에 넣어, 각 목록 항목은 부동 상태로하십시오.
다음의 예는이 점을 보여
예
<사업부 클래스 = "행">
<사업부 클래스 = "COL-SM-6 COL-MD-3">
<사업부 클래스 = "썸네일">
<IMG SRC는 = "/wp-content/uploads/2014/06/kittens.jpg"
ALT = "일반적인 자리 축소판">
<사업부 클래스 = "캡션">
<H3> 축소판 탭 </ H3>
<P> 일부 샘플 텍스트입니다. 일부 샘플 텍스트입니다. </ P>
<P>
<A HREF = "#" 클래스 = "BTN의 BTN-차" = "버튼"역할> 버튼 </ A>
<A HREF = "#" 클래스 = "btn을 BTN-기본" = "버튼"역할> 버튼 </ A>
</ P>
</ DIV>
</ DIV>
</ DIV>
<사업부 클래스 = "COL-SM-6 COL-MD-3">
<사업부 클래스 = "썸네일">
<IMG SRC는 = "/wp-content/uploads/2014/06/kittens.jpg"
ALT = "일반적인 자리 축소판">
<사업부 클래스 = "캡션">
<H3> 축소판 탭 </ H3>
<P> 일부 샘플 텍스트입니다. 일부 샘플 텍스트입니다. </ P>
<P>
<A HREF = "#" 클래스 = "BTN의 BTN-차" = "버튼"역할> 버튼 </ A>
<A HREF = "#" 클래스 = "btn을 BTN-기본" = "버튼"역할> 버튼 </ A>
</ P>
</ DIV>
</ DIV>
</ DIV>
<사업부 클래스 = "COL-SM-6 COL-MD-3">
<사업부 클래스 = "썸네일">
<IMG SRC는 = "/wp-content/uploads/2014/06/kittens.jpg"
ALT = "일반적인 자리 축소판">
<사업부 클래스 = "캡션">
<H3> 축소판 탭 </ H3>
<P> 일부 샘플 텍스트입니다. 일부 샘플 텍스트입니다. </ P>
<P>
<A HREF = "#" 클래스 = "BTN의 BTN-차" = "버튼"역할> 버튼 </ A>
<A HREF = "#" 클래스 = "btn을 BTN-기본" = "버튼"역할> 버튼 </ A>
</ P>
</ DIV>
</ DIV>
</ DIV>
<사업부 클래스 = "COL-SM-6 COL-MD-3">
<사업부 클래스 = "썸네일">
<IMG SRC는 = "/wp-content/uploads/2014/06/kittens.jpg"
ALT = "일반적인 자리 축소판">
<사업부 클래스 = "캡션">
<H3> 축소판 탭 </ H3>
<P> 일부 샘플 텍스트입니다. 일부 샘플 텍스트입니다. </ P>
<P>
<A HREF = "#" 클래스 = "BTN의 BTN-차" = "버튼"역할> 버튼 </ A>
<A HREF = "#" 클래스 = "btn을 BTN-기본" = "버튼"역할> 버튼 </ A>
</ P>
</ DIV>
</ DIV>
</ DIV>
</ DIV>
»시도
결과는 다음과 같다 :
