부트 스트랩은 테이블을 만들기위한 명확한 레이아웃을 제공합니다. 다음 표에는 부트 스트랩이 지원하는 일부 테이블 요소가 나와 있습니다.
테이블 카테고리
다음 테이블 스타일은 테이블에서 사용할 수 있습니다.
<tr>, <th> 및 <td> 클래스
다음 테이블 클래스는 표의 행이나 셀에 사용될 수 있습니다.
기본 테이블
패딩 및 수평 분할 만있는 기본 테이블을 원한다면 다음 예에서 볼 수 있듯이 클래스 .Table을 추가하십시오.
<div> <table> <caption> 기본 테이블 레이아웃 </caption> <thead> <tr> <th> 번호 </th> <th> city </th> </tr> </thead> <tbody> <td> <td> no.1 </td> <td> Beijing </td> </tr> <td> no.2 </td> <td> <td> </tbody> </table> </div>
디스플레이 효과 :
선택 테이블 클래스
기본 테이블 태그 및 .table 클래스 외에도 태그 스타일을 정의하는 데 사용할 수있는 클래스가 있습니다. 이 수업은 아래에서 소개됩니다.
스트라이프 테이블
.table 스트라이프 클래스를 추가하면 다음 예에서 볼 수 있듯이 <tbody> 내부의 줄무늬가 표시됩니다.
<div> <table> <caption> 스트라이프 테이블 레이아웃 </caption> <thead> <tr> <th> 번호 </th> <th> City </th> </tr> </thead> <tbody> <td> <td> No.1 </td> <td> Beijing </td> </tr> <td> No.2 </td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <td> <td> No.4 </td> <td> nanjing </td> </tbo> </tbody> </div> </div
디스플레이 효과 :
국경 테이블
.table-bordered 클래스를 추가하면 각 요소가 주위에 테두리가 있고 다음 예에서 볼 수 있듯이 전체 테이블이 둥글게됩니다.
<div> <table> <caption> 국경 테이블 레이아웃 </caption> <thead> <tr> <th> 번호 </th> <th> city </th> </tr> </thead> <tbody> <td> <td> no.1 </td> <td> Beijing </td> </tr> <td> no.2 </td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <td> <td> No.4 </td> <td> nanjing </td> </tbo> </tbody> </div> </div
디스플레이 효과 :
호버 테이블
.table-hover 클래스를 추가하면 다음 예제와 같이 포인터가 선 위로 가로 잡힐 때 밝은 회색 배경이 나타납니다.
<div> <table> <caption> hoom 탁자 레이아웃 </caption> <thead> <tr> <th> 번호 </th> <th> city </th> </tr> </thead> <tbody> <td> <td> no.1 </td> <td> Beijing </td> </tr> <td> No.2 <td> <td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <td> <td> No.4 </td> <td> nanjing </td> </tbo> </tbody> </div> </div
디스플레이 효과 :
단순화 된 형태
.table-condensed 클래스를 추가함으로써 패딩은 아래의 예와 같이 테이블을보다 컴팩트하게 보이게하기 위해 반으로 절단됩니다. 이것은 정보를보다 컴팩트하게 보이게하려고 할 때 매우 유용합니다.
<div> <table> <caption> 단순화 된 테이블 레이아웃 </caption> <thead> <tr> <th> 번호 </th> <th> City </th> </tr> </thead> <tbody> <td> <td> No.1 </td> <td> Beijing </td> </td> <td> No.2 <td> <td> <td> <td> “
디스플레이 효과 :
컨텍스트 클래스
다음 표에 나열된 컨텍스트 클래스를 사용하면 테이블 행 또는 단일 셀의 배경색을 변경할 수 있습니다.
이 클래스는 다음 예에서 볼 수 있듯이 <tr>, <td> 및 <th>에서 사용할 수 있습니다.
<div> <table> <caption> 컨텍스트 테이블 레이아웃 </caption> <thead> <tr> <th> 번호 </th> <th> city </th> </tr> </thead> <tbody> <td> <td> no.1 </td> <td> Beijing </td> </tr> <td> No.2 </td> <td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <td> <td> No.4 </td> <td> nanjing </td> </tbo> </tbody> </div> </div
디스플레이 효과 :
반응 형 테이블
.table-responsive 클래스에서 .table을 래핑하면 작은 장치 (768px 미만)에 맞게 테이블 스크롤을 가로로 만들 수 있습니다. 폭이 768px보다 큰 대형 장치에서 볼 때 아무런 차이가 없습니다.
<div> <table> <caption> 반응 형 테이블 레이아웃 </caption> <thead> <tr> <th> 번호 </th> <th> City </th> </tr> </thead> <tbody> <td> <td> No.1 </td> <td> Beijing </td> </tr> <td> No.2 <td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </tr> <td> <td> No.4 </td> <td> nanjing </td> </tbo> </tbody> </div> </div
디스플레이 효과 :
학습을 계속하려면 여기를 클릭하여 공부 한 다음 훌륭한 주제를 첨부 할 수 있습니다 : Bootstrap Learning Tutorial
위는이 기사에 관한 것입니다. JS 테이블 구성 요소 아티팩트 부트 스트랩 테이블을 더 잘 배우는 데 도움이되기를 바랍니다.