부트 스트랩 목록
부트 스트랩 라벨 소개
원래 효과
레벨 표시
부트 스트랩 목록
목록 콤보 상자
조합 상자를 더한 후 비고
하이라이트
레이블 목록
<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<메타 캐릭터 = "UTF-8">
<TITLE> 스트랩布局</ TITLE>
<! -网页源数据跨平台兼容做一些说明- >
<메타 HTTP-당량 = "X-UA 호환"내용 = "IE = 가장자리">
<! -跨屏自适应说明->
<메타 이름 = "뷰포트"내용 = "폭 = 기기 폭 초기 규모 = 1 ">
<링크 HREF ="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css "확인해 ="스타일 시트 ">
<스크립트 SRC ="HTTPS : //cdn.bootcss.com/jquery/2.2.4/jquery.min.js "> </ script>
<스크립트 SRC ="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js /bootstrap.min.js "> </ 스크립트>
</ head>
<body>
<H1> 부트 스트랩 목록 </ H1>
<! - 원래 효과 ->
<UL>
<LI> 홈 </ 리>
<LI>
제품
<UL>
<LI> 전화 </ 리>
<LI> PC </ 리>
</ UL>
</ 리>
에 대해 <LI> </ 리>
<LI> 연락처 </ 리>
</ UL>
<! - 레벨 디스플레이 ->
<UL 클래스 = "목록 인라인">
<LI> 홈 </ 리>
<LI> 제품 </ 리>
</ 리>에 대해 <LI>
< 리> 연락처 </ 리>
</ UL>
<! - 부트 스트랩 ->
<! - 목록 콤보 상자 ->
<div 클래스 = "컨테이너">
<DIV 클래스 = "줄">
<DIV 클래스 = "MD -. COL 3">
<UL 클래스 = "그룹리스트 ">
<LI 클래스 ="목록 기 항목 ">手机</ 리>
<LI 클래스 ="목록 기 항목 ">电脑</ 리>
<리 클래스 = "목록 기 항목">冰箱</ 리>
<LI 클래스 = "목록 기 항목">电视机</ 리>
</ UL>
</ div>
</ div>
</ DIV >
<! -列表组合框加内容->
<div 클래스 = "용기">
<DIV 클래스 = "행">
<DIV 클래스 = "COL-MD-3">
<UL 클래스 = "목록 그룹" >
<LI 클래스 = "목록 기 항목">手机<스팬 클래스 = "배지"> 12 </ SPAN> </ 리>
<LI 클래스 = "목록 기 항목">电脑<스팬 클래스 = "배지 "> 23 </ SPAN> </ 리>
<LI 클래스 ="목록 기 항목 ">冰箱<스팬 클래스 ="배지 "> 134 </ SPAN> </ 리>
<LI 클래스 ="목록 기 항목 ">电视机<스팬 클래스 ="배지 "> 34 </ SPAN> </ 리>
</ UL>
</ div>
</ div>
</ div>
<! -突出显示->
<div 클래스 = "컨테이너">
<div 클래스 = "로우">
<div 클래스 = "COL-MD-3">
<UL 등급 = " 리스트 그룹 ">
<LI 클래스 ="목록 기 항목 ">手机<스팬 클래스 ="배지 "> 12 </ SPAN> </ 리>
<LI 클래스 ="목록 기 항목 활성 ">电脑< 스팬 클래스 = "배지"> 23 </ SPAN> </ 리>
<LI 클래스 = "목록 기 항목">冰箱<스팬 클래스 = "배지"> 134 </ SPAN> </ 리>
<LI 클래스 = "리스트 기 항목">电视机<스팬 클래스 = "배지"> 34 </ SPAN> </ 리>
</ UL>
</ DIV>
</ DIV>
</ DIV>
<! -标签列表->
<div 클래스 = "용기">
<DIV 클래스 = "행">
<DIV 클래스 = "COL-MD > "-6
<UL 등급 = "리스트 그룹">
<a href="#" class="list-group-item">
标签</ H4>에서一个第<H4 클래스 = "목록 기 제목">
<p 클래스 = "목록 그룹 텍스트">가 lorem ipsum의 당근, 강화 된 리베이트. 더 열린 마음은 거부
와 본체 현은 필요의 발견하지 누가 그랜드 옛 지명되었다
즐거움 치료를 받고 서비스를 </ P>.
</a>에
<! -语义标签->
<A HREF = "#"클래스 = "목록 항목 그룹 목록 항목 그룹의 성공">
<
<p 클래스 = "목록 기 텍스트">가 lorem ipsum의 당근, 향상된 리베이트. 더 열린 마음이 거부
하고 본체 현은 필요에 발견되지 누가 그랜드 옛 지명되었다
즐거움 치료를 받고 서비스를 </ P>.
</a>에
<! -突出强调->
<A HREF = "#"클래스 = "목록 항목 그룹은 활성">
<H4 클래스 = "목록 기 제목">第一个标签</ H4>에서
<p 클래스 = "목록 기 텍스트">가 lorem ipsum의 당근, 향상된 리베이트 개발자. 더 열린 마음은 거부
와 본체의 현상 유지가 필요의 발견하지 누가 그랜드 옛 지명되었다
즐거움 치료를 받고 서비스를. </ P>
</a>를
</ UL>
</ DIV>
</ DIV>
</ DIV>
</ BODY>
</ HTML >