| 名称城市TanmayBangaloreSachinMumbai테스트해보세요 ‹/› 결과는 다음과 같습니다: 선택 가능한 테이블 클래스기본 테이블 표시기와 .table 클래스 외에도 표시기 스타일을 정의할 수 있는 클래스가 몇 가지 있습니다. 이러한 클래스를 소개할 것입니다. 줄무늬 테이블추가하여 포함된-striped class, <tbody> 내의 행에 줄무늬가 보입니다. 다음 예시와 같이 사용됩니다： px 넓이의 대형 장치에서 볼 때, 어떤 차이도 보이지 않습니다.예제
!DOCTYPE html>
<html>
<head>-8<meta charset="utf
"> - 줄무늬 테이블</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
名称城市邮编TanmayBangaloreSachinMumbaiUmaPune테스트해보세요 ‹/› 결과는 다음과 같습니다: 辺框 테이블추가하여 포함된-bordered class, 각 요소 주위에辺框이 있으며, 테이블 전체가 둥글게 끝나는 것을 볼 수 있습니다. 다음 예시와 같이 사용됩니다： px 넓이의 대형 장치에서 볼 때, 어떤 차이도 보이지 않습니다.예제
!DOCTYPE html>
<html>
<head>-8<meta charset="utf
"> - 辺框 테이블</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
名称城市邮编TanmayBangaloreSachinMumbaiUmaPune테스트해보세요 ‹/› 결과는 다음과 같습니다: 호버 테이블추가하여 포함된-hover class, 마우스 포인터가 행에��러 올 때 약간의 회색 배경이 나타납니다. 다음 예시와 같이 사용됩니다： px 넓이의 대형 장치에서 볼 때, 어떤 차이도 보이지 않습니다.예제
!DOCTYPE html>
<html>
<head>-8<meta charset="utf
"> - 호버 테이블</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
名称城市邮编TanmayBangaloreSachinMumbaiUmaPune테스트해보세요 ‹/› 결과는 다음과 같습니다: 테이블을 간추린 것추가하여 포함된-condensed class, 행간 여백(padding)이 두 부분으로 나누어져 테이블이 더 깔끔하게 보이도록 합니다. 다음 예시와 같이 사용됩니다. 이는 정보를 더 깔끔하게 보이고 싶을 때 매우 유용합니다. px 넓이의 대형 장치에서 볼 때, 어떤 차이도 보이지 않습니다.예제
!DOCTYPE html>
<html>
<head>-8<meta charset="utf
"> - 精简表格
精简表格布局名称城市邮编TanmayBangaloreSachinMumbaiUmaPune테스트해보세요 ‹/› 결과는 다음과 같습니다: 콘덴시드 테이블<<table class="table table | condensed"> | <caption>콘덴시드 테이블 레이아웃< |
|---|
| 콘덴시드 테이블< | <table class="table table | | condensed"> | <caption>컨텍스트 테이블 레이아웃< | | <tr class="active"> | <tr class="success"> | | <tr class="warning"> | <tr class="danger"> |
또는 응답형 테이블 px 넓이의 대형 장치에서 볼 때, 어떤 차이도 보이지 않습니다.예제
!DOCTYPE html>
<html>
<head>-8<meta charset="utf
"> - 이 클래스는 <tr>、<td> 또는 <th>에 적용될 수 있습니다./title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
컨텍스트 클래스</caption>
<thead>
<tr>
<th>제품</<th>
<th>지불 날짜</<th>
<th>상태</<th>
</tr>
</<thead>
<tbody>
<caption>컨텍스트 테이블 레이아웃<
<td>제품1</td>
<td>23/11/2013</td>
<td>배송 대기</td>
</tr>
<tr class="active">
<td>제품2</td>
<td>10/11/2013</td>
<td>배송 중</td>
</tr>
<tr class="success">
<td>제품3</td>
<td>20/10/2013</td>
<td>확인 대기</td>
</tr>
<tr class="warning">
<td>제품4</td>
<td>20/10/2013</td>
<td>반품 완료</td>
</tr>
</tbody>
</table>
</body>
</html> 테스트해보세요 ‹/›결과는 다음과 같습니다: <tr class="danger">응답형 테이블 포함된 통합된 포함된-.table responsive 768class 내에서, 테이블을 수직 스크롤하여 소형 장치(소형 장치) 768px）。그리고 크기가 px 넓이의 대형 장치에서 볼 때, 어떤 차이도 보이지 않습니다.예제
!DOCTYPE html>
<html>
<head>-8<meta charset="utf
"> - <title>Bootstrap 예제/title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
<table class="table">
<caption>반응형 테이블 레이아웃</caption>
<thead>
<tr>
<th>제품</<th>
<th>지불 날짜</<th>
<th>상태</<th>
</tr>
</<thead>
<tbody>
<tr>
<td>제품1</td>
<td>23/11/2013</td>
<td>배송 대기</td>
</tr>
<tr>
<td>제품2</td>
<td>10/11/2013</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>
</div>
</body>
</html> 테스트해보세요 ‹/›결과는 다음과 같습니다:
|