부트 스트랩 양식
부트 스트랩은 명확한 레이아웃 생성 된 테이블을 제공합니다. 다음 표는 몇 표 요소를 부트 스트랩 지원을 나열합니다 :
| 상표 | 기술 |
|---|
| <표> | 스타일의 기초를 형성하기 위해 추가. |
| <THEAD> | 표 컨테이너 엘리먼트 헤더 행 (<TR>), 테이블 열을 식별하는 데 사용된다. |
| <TBODY> | 테이블 행의 몸에있는 테이블 컨테이너 요소 (<TR>). |
| <TR> | 그룹은 (<TD> 또는 <일>) 테이블 셀의 컨테이너 요소에 한 줄에 나타납니다. |
| <TD> | 기본 테이블 셀. |
| <목> | 열을 식별하거나 (범위와 위치에 따라) 행하기 위해 사용 특수 테이블 셀. 당신은 <THEAD> 안에 사용해야합니다. |
| <캡션> | 테이블의 저장 내용 설명이나 요약 소개. |
Form 클래스
다음 표 스타일 테이블을 사용할 수 있습니다 :
| 범주 | 기술 | 예 |
|---|
| .table | 임의의 <표> 추가 기본 스타일 (만 수평 분리) | 시험 |
| .table 줄무늬 | 에서 <TBODY> 얼룩말 줄무늬 (IE8에서 지원하지 않는) 추가 할 수있는 형태 내에서 | 시험 |
| - .table 경계 | 모든 표 셀의 테두리를 추가 | 시험 |
| .table-호버 | 의 <TBODY> 임의의 행 내에서 사용 호버 상태에서 | 시험 |
| - .table 응축 | 컴팩트 양식을 확인 | 시험 |
| 모든 형태의 클래스의 공동 사용 | 시험 |
<TR>, <일>과 <TD> 클래스
클래스는 다음 표 행 또는 셀을 형성하는데 사용될 수있다 :
| 범주 | 기술 | 예 |
|---|
| .active는 | 행 또는 셀에 마우스 오버 컬러 응용 프로그램 | 시험 |
| 일단 .success | 그것은 성공적으로 작업을 나타냅니다 | 시험 |
| .INFO | 다양한 동작을 나타내는 정보 | 시험 |
| .warning | 이 경고 동작을 나타낸다 | 시험 |
| 연구 해봐 | 그것은 위험한 동작을 나타낸다 | 시험 |
당신은 단지 패딩 (패딩) 및 기본 테이블 수준의 분할, 다음의 예와 같이,클래스.table 추가로합니다 :
예
<표 클래스 = "테이블">
<캡션> 기본 테이블 레이아웃 </ 캡션>
<THEAD>
<TR>
<목> 이름 </ 일>
<목> 도시 </ 일>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> Tanmay </ TD>
<TD> 방갈로르 </ TD>
</ TR>
<TR>
<TD> Sachin </ TD>
<TD> 뭄바이 </ TD>
</ TR>
</ TBODY>
</ 테이블>
결과는 다음과 같다 :
기본 테이블 태그와 .table 클래스 이외에, 일부 스타일 클래스를 정의하기위한 마커로 사용할 수있다. 다음은 이러한 클래스를 소개합니다.
스트라이프 테이블
.table 줄무늬 클래스를 추가하면라인에 줄무늬를 볼 것이다 <TBODY> 내에서, 다음의 예와 같이 :
예
<표 클래스 = "테이블 테이블 스트라이프" >
<캡션> 줄무늬 테이블 레이아웃 </ 캡션>
<THEAD>
<TR>
<목> 이름 </ 일>
<목> 도시 </ 일>
<목> 비밀번호 </ 일>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> Tanmay </ TD>
<TD> 방갈로르 </ TD>
<TD> 560,001 </ TD>
</ TR>
<TR>
<TD> Sachin </ TD>
<TD> 뭄바이 </ TD>
<TD> 400,003 </ TD>
</ TR>
<TR>
<TD> 우마 </ TD>
<TD> 푸네 </ TD>
<TD> 411,027 </ TD>
</ TR>
</ TBODY>
</ 테이블>
결과는 다음과 같다 :
표 테두리
.table-경계 클래스를 추가하면각 요소 주위에 테두리를 가지고 있으며, 다음 예에서와 같이 총, 양식을 반올림 것을 볼 수 있습니다 :
예
<표 클래스 = "테이블 테이블 경계" >
<캡션> 테이블 레이아웃 프레임 </ 캡션>
<THEAD>
<TR>
<목> 이름 </ 일>
<목> 도시 </ 일> 암호> 일 </> 일
</ TR>
</ THEAD> TBODY> <TR >
<TD> Tanmay </ TD>
<TD> 방갈로르 </ TD>
<TD> 560,001 </ TD>
</ TR>
<TR>
<TD> Sachin </ TD>
<TD> 뭄바이 </ TD>
<TD> 400,003 </ TD>
</ TR>
<TR>
<TD> 우마 </ TD>
<TD> 푸네 </ TD>
<TD> 411,027 </ TD>
</ TR>
</ TBODY>
</ 테이블>
결과는 다음과 같다 :
호버 테이블
포인터가 행 위에있을 때 다음의 예와 같이.table-호버 클래스를 추가하여,언제, 밝은 회색 배경이있을 것이다 :
예
<표 클래스 = "테이블 테이블 호버" >
<캡션> 호버 테이블 레이아웃 </ 캡션>
<THEAD>
<TR>
<목> 이름 </ 일>
<목> 도시 </ 일>
<목> 비밀번호 </ 일>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> Tanmay </ TD>
<TD> 방갈로르 </ TD>
<TD> 560,001 </ TD>
</ TR>
<TR>
<TD> Sachin </ TD>
<TD> 뭄바이 </ TD>
<TD> 400,003 </ TD>
</ TR>
<TR>
<TD> 우마 </ TD>
<TD> 푸네 </ TD>
<TD> 411,027 </ TD>
</ TR>
</ TBODY>
</ 테이블>
결과는 다음과 같다 :
소형 폼
테이블이 더 컴팩트 보이도록 다음 예와 같이.table 응축 클래스를 추가하여,인라인 패딩 (패딩), 반으로 잘라된다. 좀 더 컴팩트보고 할 때이 정보가 유용합니다.
예
<표 클래스 = "테이블 테이블 응축" >
<캡션> 유선형 형태의 레이아웃 </ 캡션>
<THEAD>
<TR>
<목> 이름 </ 일>
<목> 도시 </ 일>
<목> 비밀번호 </ 일> </ TR>
</ THEAD>
<TBODY>
<TR>
<TD> Tanmay </ TD>
<TD> 방갈로르 </ TD>
<TD> 560,001 </ TD> </ TR>
<TR>
<TD> Sachin </ TD>
<TD> 뭄바이 </ TD>
<TD> 400,003 </ TD> </ TR>
<TR>
<TD> 우마 </ TD>
<TD> 푸네 </ TD>
<TD> 411,027 </ TD> </ TR>
</ TBODY>
</ 테이블>
결과는 다음과 같다 :
다음 표에 나열된 컨텍스트 클래스를 사용하여 테이블 행 또는 개별 셀의 배경 색상을 변경할 수 있습니다.
| 类 | 描述 |
|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
이러한 클래스는 <TR> <TD> 또는 <제>에 적용될 수있다.
예
<표 클래스 = "테이블">
<캡션> 컨텍스트 테이블 레이아웃 </ 캡션>
<THEAD>
<TR>
<목> 제품 </ 일>
<목> 결제 날짜 </ 일>을
<목> 상태 </ 일> </ TR>
</ THEAD>
<TBODY>
<TR 클래스 = "활성">
<TD> 제품 1 </ TD>
<TD> 23/11/2013 </ TD>
<TD> 배송에 </ TD> </ TR>
<TR 클래스 = "성공">
<TD> 제품 2 </ TD>
<TD> 2013년 10월 11일 </ TD>
<TD> 배송 </ TD> </ TR>
<TR 클래스 = "경고">
<TD> 제품 3 </ TD>
<TD> 20/10/2013 </ TD>
<TD> 확인하기 위해 </ TD> </ TR>
<TR 클래스 = "위험">
<TD> 제품 4 </ TD>
<TD> 20/10/2013 </ TD>
<TD가> 돌아왔다 </ TD> </ TR>
</ TBODY>
</ 테이블>
결과는 다음과 같다 :
.table 응답 클래스에싸여있는.table하여소형 기기 (이하 768px)을 수용하기 위해 가로로 스크롤 테이블을 가질 수 있습니다. 대규모 장비에서 볼 때 어떤 차이를 볼 수 없습니다,보다 큰 768px 넓다.
예
<사업부 > 클래스 = "테이블 응답"
<표 클래스 = "테이블">
<캡션> 응답 테이블 레이아웃 </ 캡션>
<THEAD>
<TR>
<목> 제품 </ 일>
<목> 결제 날짜 </ 일>을
<목> 상태 </ 일> </ TR>
</ THEAD>
<TBODY>
<TR>
<TD> 제품 1 </ TD>
<TD> 23/11/2013 </ TD>
<TD> 배송에 </ TD> </ TR>
<TR>
<TD> 제품 2 </ TD>
<TD> 2013년 10월 11일 </ TD>
<TD> 배송 </ TD> </ TR>
<TR>
<TD> 제품 3 </ TD>
<TD> 20/10/2013 </ TD>
<TD> 확인하기 위해 </ TD> </ TR>
<TR>
<TD> 제품 4 </ TD>
<TD> 20/10/2013 </ TD>
<TD가> 돌아왔다 </ TD> </ TR>
</ TBODY>
</ 테이블>
</ DIV>
결과는 다음과 같다 :
