bootstrap table

북마크 추가

 

 

class명에 table을 넣게 되면 기본적인 CSS가 적용된다. 

 

<table class="table">

....

</table>

 

<tbody class="table-striped">을 하게 되면 스트라이프 css가 적용된다.


 

<table class="table">

....

<tbody class="table-striped">

...

</tbody>

.....

</table>

 

 

table-bordered를 사용 하면 셀에 윤곽선을 나타 낼 수 있다.

 

<table class="table table-bordered">

....

 

</table>

 

 

 

 

table-hover를 사용하면 마우스가 올라간 행에 효과 생김

 

<table class="table table-hover">
  ...
</table>

 

 

table-condensed를 사용하면 컴팩트한 테이블 css가 적용(간격줄어듬)



 

 

row에 특정 상황을 표시할 수 있는 클래스도 제공 된다.

tr, td, th등에 적용 할 수 있다.
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

 

 

 


table-responsive를 주게 되면 가로 크기에 따른 크기가 변하는 반응형 테이블을 만들 수 있다.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
 

AD
관리자
2014-08-11 07:50
SHARE