• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - List Group (BS리스트그룹) - 리스트생성

BS3

 

List Group 생성 

.list-group 클래스 가진 <ul> 안에 .list-group-item 클래스 가진 <li> 추가. 


 

<ul class="list-group">

  <li class="list-group-item">HTML</li>

  <li class="list-group-item">CSS</li>

  <li class="list-group-item">JS</li>

</ul>

 

예제보기

 

 

List Group Badge (배지) 

.badge 클래스 가진 <span> 요소를 .list-group-item 안에 추가. 


 

<ul class="list-group">

  <li class="list-group-item">HTML <span class="badge">New</span></li>

  <li class="list-group-item">CSS <span class="badge">New</span></li>

  <li class="list-group-item">JS <span class="badge">New</span></li>

</ul>

 

예제보기

 

List Group Link (링크) 

.list-group 클래스 가진 <div> 안에 .list-group-item 클래스 가진 <a> 추가. 


 

<div class="list-group">

  <a href="#" class="list-group-item">HTML</a>

  <a href="#" class="list-group-item">CSS</a>

  <a href="#" class="list-group-item">JS</a>

</div>

 

예제보기


List Group Active (링크 현재위치) 

.list-group-item 클래스 가진 <a> 에 .active 클래스 추가. 


 

<div class="list-group">

  <a href="#" class="list-group-item active">HTML</a>

  <a href="#" class="list-group-item">CSS</a>

  <a href="#" class="list-group-item">JS</a>

</div>

 

예제보기

 

List Group Disabled (링크 비활성화) 

.list-group-item 클래스 가진 <a> 에 .disabled 클래스 추가. 


 

<div class="list-group">

  <a href="#" class="list-group-item disabled">HTML</a>

  <a href="#" class="list-group-item">CSS</a>

  <a href="#" class="list-group-item">JS</a>

</div>

 

예제보기

 

List Group Contextual BackgroundColor 맥락 배경색

.list-group-item 클래스 가진 요소에 .list-group-item-(success/info/warning/danger) 클래스 추가.


 

<ul class="list-group">

  <li class="list-group-item list-group-item-success">녹색배경</li>

  <li class="list-group-item list-group-item-info">청녹색배경</li>

  <li class="list-group-item list-group-item-warning">주황배경</li>

  <li class="list-group-item list-group-item-danger">빨간배경</li>

</ul>

 

<div class="list-group">

    <a href="#" class="list-group-item list-group-item-success">First item</a>

    <a href="#" class="list-group-item list-group-item-info">Second item</a>

    <a href="#" class="list-group-item list-group-item-warning">Third item</a>

    <a href="#" class="list-group-item list-group-item-danger">Fourth item</a>

</div>

 

예제보기

 

List Group Custom Content 제목・내용

.list-group-item 클래스 안에 거의 모든 HTML 요소 추가 가능.

BS는 .list-group-item-(heading/text) 클래스 기본 제공.


 

<div class="list-group">

    <a href="#" class="list-group-item active">

        <h4 class="list-group-item-heading">HTML</h4>

        <p class="list-group-item-text">뼈대</p>

    </a>

    <a href="#" class="list-group-item">

        <h4 class="list-group-item-heading">CSS</h4>

        <p class="list-group-item-text">디자인</p>

    </a>

    <a href="#" class="list-group-item">

        <h4 class="list-group-item-heading">JS</h4>

        <p class="list-group-item-text">동작</p>

    </a>

</div>

 

예제보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012