트위터의 부트 스트랩은 현재 가장 인기있는 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다. 단순하고 유연하여 웹 개발을 더 빨리 만듭니다.
목록 그룹은 간단한 요소 세트를 표시하는 데 사용될뿐만 아니라 복잡한 맞춤형 컨텐츠에도 유연하고 강력한 구성 요소입니다. 목록 그룹은 목록 목록, 세로 탐색 및 기타 효과를 만들 때 사용될 수 있으며 다른 구성 요소와 함께 더 아름다운 구성 요소를 만들 수도 있습니다. List Group은 또한 부트 스트랩 프레임 워크의 독립적 인 구성 요소이므로 자체 독립적 인 소스 코드도 있습니다.
덜 : List-Group.less
Sass : _list-group.scss
목록 그룹은 목록 기호의 목록 항목이 제거되어 특정 스타일이 장착되어 있습니다. 부트 스트랩 프레임 워크의 기본 목록 그룹에는 주로 두 부분이 포함됩니다.
List-Group : List Group 컨테이너는 일반적으로 사용되는 UL 요소 또는 OL 또는 DIV 요소 일 수 있습니다.
List-Group-Item : LIST 항목, 일반적으로 사용되는 LI 요소 또는 DIV 요소 일 수 있습니다.
기본 목록 그룹에는 너무 많은 스타일 설정이 없으며 간격, 경계 및 둥근 모서리가 주로 설정됩니다.
.list-group {Padding-Left : 0; Margin-Bottom : 20px;}. List-Group-item {position : relative; display : block; padding : 10px 15px; margin-bottom : -1px; 배경-콜로 : #fff; 경계 : 1px solid #ddd;}. List-group-item : 1 차-levent-levle-radius : 1px-lever-radius : 4px; 경계선-오른쪽 라디우스 : 4px;}. List-Group-Item : Last-Child {마진-바닥 : 0; 국경-바닥-오른쪽 라디우스 : 4px; 국경 바닥-왼쪽-라디우스 : 4px;}예를 살펴 보겠습니다.
<h1> 기본 목록 그룹 </h1> <ul> <li> 찐 감자 쌀 </li> <li> 매운 프라이드 치킨 국수 </li> <li> 네덜란드 콩의 튀긴 말굽 </li> <li> hawthorn ribs </li> <li> 프라이드 리버 새우 </ul>
배지가있는 그룹
배지가있는 목록 그룹은 실제로 부트 스트랩 프레임 워크에서 배지 구성 요소와 기본 목록 구성 요소를 결합하는 효과입니다. 특정 방법은 매우 간단합니다. 배지 구성 요소 "배지"를 .list-group-item에 추가하십시오.
구현 원칙 :
물론 배지에 대한 오른쪽 플로트를 설정하십시오. 물론 두 개의 배지가 목록 항목에 동시에 나타나면 그 사이의 거리도 설정됩니다.
.list-group-item> .Badge {float : right;}. list-group-item> .Badge + .Badge {마진-오른쪽 : 5px;}예:
<h1> 배지가있는 </h1> <ul> <li> <li> <li> <li> <li> <li> <li> <li> </span> 베이컨과 감자를 곁들인 쌀 </li> <li> <li> 20 </li> 20 </li> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> 5 </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </li> <li> 콩 </li> <li> <span> 8 </span> Hawthorn Ribs </li> <li> <span> 15 </span> 부추의 강 새우 튀김 </li> </ul>
링크가있는 그룹
연결이있는 목록 그룹은 실제로 각 목록 항목에 링크 효과가 있음을 의미합니다. 사람들이 일반적으로 생각하는 것은 기본 목록 그룹을 기반으로 목록 항목의 텍스트에 링크를 추가하는 것입니다.
<ul> <li> <a href = "#"> Bao Pork Braised Rice </a> </li> <li> <a href = "#"> 매운 프라이드 치킨 너겟 </a> </li> <li> <a href = "#"> Corilla Peeled Egg Tofu </a> <li> 콩 </a> </li> <li> <a href = "#"> Hawthorn ribs </a> </li> <li> <a href = "#"> 부추의 튀긴 강 새우 </a> </li> </ul>
효과는 다음과 같습니다.
이에 대한 단점이 있습니다. 즉, 링크의 클릭 영역은 텍스트에서만 유효합니다. 그러나 종종 목록 항목의 모든 영역을 클릭 할 수 있기를 바랍니다. 링크 레이블에 추가 스타일을 추가해야합니다. display : block; 그러나 부트 스트랩 프레임 워크에서는 UL.List-Group을 Div.list-Group 및 Li.list-Group-item을 A.list-group-item으로 대체하여 원하는 효과를 달성 할 수있는 또 다른 구현 방법이 여전히 채택되어 있습니다.
구현 원칙 :
A.List-Group 항목을 사용하는 경우 다음과 같은 스타일을 처리해야합니다. 텍스트 밑줄 제거, 서스펜션 효과 증가 등; 다음은 CSS 소스 코드입니다.
A.list-group-item {color : #555;} a.list-group-item .list-group-item-heading {color : #333;} a.list-group-item : hover, a.list-group-item : focus {색상 : #555; text-decoration : 없음; 배경색 : #f5f5;}.링크 목록 그룹 사용 :
</h1> <ul> <a href = "#"> 베이컨과 감자 쌀 </a> <a href = "#"#"> 매운 프라이드 치킨 너겟 </a> <a href ="#"> 코릴라 껍질 달걀 두부 </a> <a href ="#"#"#"#"#"#"#"#"#"#"#"#"#""#"<#" href = "#"> Hawthorn Ribs </a> <a href = "#"> 부추가있는 튀긴 강 새우 </a> </ul>
효과는 다음과 같습니다.
사용자 정의 목록 그룹
부트 스트랩 프레임 워크는 링크 목록 그룹에 두 가지 스타일을 추가합니다.
.List-Group-Item-Heading : 목록 항목 헤더의 스타일을 정의하는 데 사용됩니다.
.List-Group-Item-Text : 목록 항목의 주요 내용을 정의하는 데 사용됩니다.
이 두 스타일의 가장 큰 기능은 개발자가 목록 항목의 콘텐츠를 사용자 정의하도록 돕는 것입니다.
구현 원칙 :
이 두 스타일은 주로 호환되지 않는 상태에서 텍스트 색상을 제어합니다. 다음은 CSS 소스 코드입니다.
A.list-group-item.list-group-item-heading {컬러 : #333;}. List-Group-item.Disabled .list-Group-item-heading, .list-group-item.disabled : hover .list-group-item-heading, .list-group-item.disabled : .list-group-item-heading {list-group-item-headeed {. 상속;}. list-group-item.disabled .list-group-item-text, .list-group-item.disabled : focus .list-group-item-text {color : #777;}. list-group-item.Active .list-Group-item-Heading, .list-Group-item.Active : HEPORE .list-group-item-heading, .list-group-item.active : focus .list-group-item-heading, .list-group-item.Active .list-group-item-heading> small, .list-group-item.Active : hover .list-Group-item-Heading> .List-Group-item.Active :. 작은, .list-group-item.active .list-group-item-heading> .small, .list-group-item.active : hover .list-group-item-heading> .small, .list-group-item.active : focus .list-group-item-heading> .small {inherit;}. .list-group-item-text, .list-group-item.Active : hover .list-group-item-text, .list-group-item.Active : focus .list-group-item-text {color : #e1edf7;}. List-Group-item-heading {margin-top : 0; List-Group-itteT {마진-바닥 : 0; 라인 높이 : 1.3;}사용자 정의 목록 그룹 사용
<h1>Custom list group</h1><ul><a><h4>List 1 title</h4><p>List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 내용 목록 6 컨텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록
목록 항목에 대한 상태 설정
부트 스트랩 프레임 워크는 목록 항목, 특히 링크 목록 그룹을 결합하는 상태 효과도 제공합니다. 구현 방법은 위에서 소개 된 구성 요소와 유사합니다. 목록 그룹에서 해당 목록 항목에 클래스 이름을 추가하면됩니다.
구현 원칙 :
스타일 측면에서 목록 항목의 배경색과 텍스트는 주로 스타일입니다. 다음은 CSS 소스 코드입니다.
.list-group-item.Disabled, .List-Group-item.DisableADBER : 호버, .list-group-item.Disabled : Focus {컬러 : #777; 배경색 : #eee;}. List-Group-item.Active, .List-Group-item.Active : hover, .list-group-item.active : foccus {z-index : 2; #fff; 배경색 : #428BCA; Border-Color : #428BCA;}예:
<h1>List group status settings</h1><ul><a><h4>List 1 title</h4><p>List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 내용 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 내용 목록 6 컨텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 콘텐츠 목록 6 내용
효과는 다음과 같습니다 (세 번째 목록 항목은 비활성화되어 있습니다. 마우스가 움직일 때 아이콘이 비활성화되어 있습니다. 다음은 직접 스크린 샷이 있으며이 효과는 볼 수 없습니다).
다채로운 목록 그룹
목록 그룹 구성 요소는 경고 구성 요소와 동일합니다. 부트 스트랩은 다른 상태에 대해 다른 배경색과 텍스트 색상을 제공합니다. 이 클래스 이름을 사용하여 배경색이 다른 목록 항목을 정의 할 수 있습니다.
.list-group-item-success : Success Green (배경색) .list-group-item-info : 정보 파란색 (배경색) .list-group-item-warning : 경고 노란색 (배경색) .list-group-item danger : 오류 빨간색 (배경색).
구현 원칙 :
이 클래스 이름은 배경색과 텍스트 색상 만 수정하고 해당 소스 코드는 다음과 같습니다.
.list-Group-Item-Success {컬러 : #3C763d; 배경색 : #dff0d8;} a.list-group-item-success {color : #3c763d;} a.list-group-item-success .list-group-item-heading {color : 상속;} a.list-group-item-success : hover, a.list-group-item-success : focus {color : #3c763d; 배경색 : #d0e9c6;} a.list-group-item-success.active, a.list-group-item-success.active : a. #fff; 배경색 : #3C763d; 국경 색 : #3C763d;}다른 상태 스타일 코드는 소스 코드 파일을 확인하십시오. 목록 항목에 배경색을 추가하려면 해당 클래스 이름을 class.lis-group-item에 추가하십시오.
다채로운 목록 그룹 사용 :
<h1>Colorful List Group</h1><ul><a href="#">List Item1<span>10</span></a><a href="#">List Item1<span>10</span></a><a href="#">List Item1<span>10</span></a><a href="#">List Item1<span>10</span></a><a href = "#"> List item1 <Span> 10 </span> </a> </ul>
효과는 다음과 같습니다.