부트 스트랩 목록 그룹
이 장에서 우리는 그룹의 목록을 설명합니다. 복잡하고 사용자 콘텐츠의 형태로 제공 목록에 사용되는 구성 요소의 목록. 다음과 같이 그룹의 기본 목록을 생성합니다 :
- 요소 <UL>클래스 .list-그룹을 추가합니다.
- 의 <리>에클래스 .list 그룹 항목을 추가합니다.
다음의 예는이 점을 보여
예
<UL 클래스 = "목록 그룹">
<리 클래스 = "목록 그룹 항목 "> 무료 도메인 이름 등록 </ 리>
<리 클래스 = "목록 그룹 항목 "> 무료 호스팅 공간 창 </ 리>
<리 클래스 = "목록 그룹 항목 "> 이미지의 수 </ 리>
<리 클래스 = "목록 그룹 항목 "> 24 * 7 지원 </ 리>
<리 클래스 = "목록 그룹 항목 "> 연간 비용을 업데이트 </ 리>
</ UL>
»시도
결과는 다음과 같다 :
그룹 목록에 배지를 추가
우리는 자동으로 오른쪽에 위치되어있는리스트 항목에 배지 성분을 추가 할 수있다. 오직 당신은 <리> 요소에<스팬 클래스 = "배지"> 추가해야합니다.다음의 예는이 점을 보여
예
<UL 클래스 = "목록 그룹">
<리 클래스 = "목록 그룹 항목 "> 무료 도메인 이름 등록 </ 리>
<리 클래스 = "목록 그룹 항목 "> 무료 호스팅 공간 창 </ 리>
<리 클래스 = "목록 그룹 항목 "> 이미지의 수 </ 리>
<리 클래스 = "목록 그룹 항목 ">
<스팬 클래스 = "배지"> 새로운 </ SPAN> 24 * 7 지원 </ 리>
<리 클래스 = "목록 그룹 항목 "> 연간 비용을 업데이트 </ 리>
<리 클래스 = "목록 그룹 항목 ">
<스팬 클래스 = "배지"> 새로운 </ SPAN> 할인 </ 리>
</ UL>
»시도
결과는 다음과 같다 :
그룹 목록에 링크 추가
앵커 태그 대신 아이템들의 목록을 사용하여, 우리는 그룹 목록에의 링크를 추가 할 수있다. 우리는 <div> 대신에 <UL> 요소의 사용해야합니다. 다음의 예는이 점을 보여
예
<A HREF = "#" 클래스 = "목록 그룹 항목 > 활성" 무료 도메인 이름 등록 </ A>
<A HREF = "#" 클래스 = "목록 그룹 항목 "> 24 * 7 지원 </ A>
<A HREF = "#" 클래스 = "목록 그룹 항목 "> 무료 호스팅 공간 창 </ A>
<A HREF = "#" 클래스 = "목록 그룹 항목 "> 이미지의 수 </ A>
<A HREF = "#" 클래스 = "목록 그룹 항목 "> 업데이트 연간 비용 </ A>
»시도
결과는 다음과 같다 :
그룹 목록에 사용자 정의 컨텐츠 추가
우리는 임의의 HTML 콘텐츠를 추가 할 그룹 목록의 상단에 링크를 추가했습니다. 다음의 예는이 점을 보여
예
<사업부 클래스 = "목록 그룹">
<A HREF = "#" 클래스 = "목록 그룹 항목 > 활성"
<H4 클래스 = "목록 그룹 항목이 -heading"> 포털 패키지 </ H4>
</ A>
<A HREF = "#" 클래스 = "목록 그룹 항목 ">
<H4 클래스 = "목록 그룹 항목 -heading"> 무료 도메인 이름 등록 </ H4>
<P 클래스 = "목록 그룹 항목의 -text는"> 당신은 웹 사이트를 통해 무료 도메인 이름 등록 될 것입니다. </ P>
</ A>
<A HREF = "#" 클래스 = "목록 그룹 항목 ">
<H4 클래스 = "목록 그룹 항목이 -heading"> 24 * 7 지원 </ H4>
<P 클래스 = "목록 그룹 항목의 -text는"> 우리는 24 * 7 지원을 제공합니다. </ P>
</ A>
</ DIV>
<사업부 클래스 = "목록 그룹">
<A HREF = "#" 클래스 = "목록 그룹 항목 > 활성"
<H4 클래스 = "목록 그룹 항목이 -heading"> 비즈니스 웹 사이트 패키지 </ H4>
</ A>
<A HREF = "#" 클래스 = "목록 그룹 항목 ">
<H4 클래스 = "목록 그룹 항목 -heading"> 무료 도메인 이름 등록 </ H4>
<P 클래스 = "목록 그룹 항목의 -text는"> 당신은 웹 사이트를 통해 무료 도메인 이름 등록 될 것입니다. </ P>
</ A>
<A HREF = "#" 클래스 = "목록 그룹 항목 ">
<H4 클래스 = "목록 그룹 항목이 -heading"> 24 * 7 지원 </ H4>
<P 클래스 = "목록 그룹 항목의 -text는"> 우리는 24 * 7 지원을 제공합니다. </ P>
</ A>
</ DIV>
»시도
결과는 다음과 같다 :
