6. 부트스트랩 목록

부트스트랩 목록

부트스트랩을 이용하면 목록 요소를 간편하게 디자인할 수 있습니다.

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

 

목록 활성화 디자인

active 클래스를 적용하여 활성화된 디자인을 표현할 수 있습니다.

 <li class="list-group-item active">Active item</li>

 

목록 테두리제거

list-group-flush 클래스를 활용하여 테두리를 제거할 수 있습니다.

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

 

수평 목록

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

 

목록 색상

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
 </ul>
 <!--색상 설명 페이지를 참고하여 다른 색상도 적용해보세요-->

 

목록이란 의미만 일치한다면 다른 요소에도 적용할 수 있습니다.

▼ ul-li 목록을 div-a 관계로 변경해봅시다.

<div class="list-group">
    <a href="#" class="list-group-item">First item</a>
    <a href="#" class="list-group-item">Second item</a>
    <a href="#" class="list-group-item">Third item</a>
  </div>

▼ 마우스 올렸을 때 활성화된 디자인을 목록 그룹으로 묶어 표현할 수 있습니다.

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">First item</a>
    <a href="#" class="list-group-item list-group-item-action">Second item</a>
    <a href="#" class="list-group-item list-group-item-action">Third item</a>
  </div>