Bootstrap 테이블 사용 방법에 대한 설명

다음 테이블은 Bootstrap가 지원하는 몇 가지 테이블 요소를 나열합니다:

테이블 클래스:

.table: 어떤 <table>에도 기본 스타일을 추가합니다 (단지 수평 구분선만)
.table-striped: <tbody> 내에 점선 형태의 짐승 문양 추가 (IE8 지원하지 않습니다)
.table-bordered: 모든 테이블 셀에 경계선을 추가합니다
.table-hover: <tbody> 내의 어떤 행에서도 마우스 오버 상태를 활성화합니다
.table-condensed: 테이블을 더 긴밀하게 만듭니다

tr, th 및 td 클래스:

.active: 행이나 셀에��러지면 색상을 적용합니다
.success: 성공 작업을 나타냅니다
.info: 정보 변경 작업을 나타냅니다
.warning: 경고 작업을 나타냅니다
.danger: 위험한 작업을 나타냅니다

<table class="table"> 
 <caption>컨텍스트 테이블 레이아웃</caption> 
 <thead> 
  <tr> 
   <th>제품</th> 
   <th>지불일자</th> 
   <th>상태</th></tr> 
 </thead> 
 tbody> 
  <tr class="active"> 
   <td>제품1</td> 
   <td>23/11/2013</td> 
   <td>배송대기</td></tr> 
  <tr class="success"> 
   <td>제품2</td> 
   <td>10/11/2013</td> 
   <td>배송중</td></tr> 
  <tr class="warning"> 
   <td>제품3</td> 
   <td>20/10/2013</td> 
   <td>확인대기</td></tr> 
  <tr class="danger"> 
   <td>제품4</td> 
   <td>20/10/2013</td> 
   <td>반품됨</td></tr> 
 </tbody> 
</table> 

반응형 테이블

어떤 .table을 .table-responsive class 내에서, 작은 장치(최소 너비가 768px) 이상의 크기에서 확인할 때, 768px 넓이의 대형 장치에서 확인할 때, 어떤 차이도 볼 수 없을 것입니다.

이것이 본 문서의 전체 내용입니다. 여러분의 학습에 도움이 되길 바라며, 다른 사람들도 나대호 튜토리얼을 많이 지지해 주시길 바랍니다.

선언: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원작자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 본 사이트는 소유권을 가지지 않으며, 인공적으로 편집한 것이 아니며, 관련 법적 책임을 부담하지 않습니다. 저작권 문제가 있는 내용을 발견하시면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 (이메일 보내기 시, #을 @으로 변경하십시오) 신고하시고 관련 증거를 제공하시면, 해당 내용이 사실이 확인되면 즉시 해당 내용을 삭제할 것입니다.