정보실

웹학교

정보실

bootstrap 깔끔한 목록을 만들고 싶으세요?

본문

TJ빌더는 부트스트랩 기반입니다...

그러므로 부트스트랩에서 제공하는 모든 컴포넌트들을 이용할 수 있습니다..

 

깔끔한 목록을 원하면 아래 태그를 참조하면 됩니다.

관련 부트스트랩 사이트 : http://getbootstrap.com/components/#list-group 

 

 

 <ul class="list-group">

  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li> 

</ul>

 

위에서 목록 태그 대신 <div>와 <a>태그를 이용해도 됩니다.

눈여겨 볼 것은 CSS 클래스명입니다.

 

부트스트랩의 핵심은 CSS클래스입니다...

 

이 사이트의 메인에 쓰인 코드는 아래를 참조한 것입니다.


<ul class="list-group">

  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>

</ul> 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 1,756회 ]  작성일14-10-22 08:07

웹학교