Bootstrap 기본 표
기본 Bootstrap 테이블은 가벼운 패딩 만 수평 분할이 있습니다.
.table 클래스는 테이블에 기본 스타일을 추가합니다 :
예
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
스트라이프 행
.table-striped 클래스는 테이블에 얼룩말 줄무늬를 추가합니다 :
예
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
경계 표
.table-bordered 클래스는 테이블 셀의 모든면에 테두리를 추가합니다 :
예
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
호버 행
.table-hover 클래스는 테이블 행에 마우스 오버 상태를 수 있습니다 :
예
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
응축 표
.table-condensed 클래스는 테이블보다 컴팩트 한 반에 셀 패딩을 절단하여 수 :
예
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
문맥 클래스
문맥 클래스는 컬러 테이블 행에 (사용할 수있는 <tr> ) 또는 테이블 셀 ( <td> )를 :
예
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
사용할 수있는 콘텐츠 클래스는 다음과 같습니다
| 수업 | 기술 |
|---|---|
.active | 테이블 행 또는 테이블 셀에 마우스 오버 색상을 적용합니다 |
.success | 성공 또는 긍정적 인 조치를 나타냅니다 |
.info | 중성 정보를 변경 또는 조치를 나타냅니다 |
.warning | 주의를해야 할 수도 있습니다 경고를 나타냅니다 |
.danger | 위험 또는 잠재적으로 부정적인 행동을 나타냅니다 |
응답 테이블
.table-responsive 클래스는 응답 테이블을 작성합니다. 표는 작은 장치 (768px에서) 수평으로 스크롤됩니다. 넓은 768px보다 큰 아무것도 볼 때 차이가 없습니다 :
연습으로 자신을 테스트!
연습 1» 운동 2» 운동 3» 운동 4» 운동 5» 운동 6»
전체 Bootstrap Table Reference Bootstrap Table Reference
모든 테이블 클래스의 완전한 참고로, 우리의 완전한 이동 Bootstrap 표 참조 .