2017. 4. 6. 11:01ㆍ웹자료
1.부트스트랩 테이블
테이블
.table 기본
.table-striped 줄
.table-border 보더
.table-hover 반응형 회색줄
.table-condensed 컨팩트한 테이블셀
테이블의 <tr> <td> 색상시정 클래스
.active, .success, .info, .warning, and .danger.
/************** [ 예시코딩 ] ***************/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</p>
<table class="table">
<thead>
<tr>
<th>회원사명</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Refs</td>
<td>bo@example.com</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Activeson</td>
<td>act@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
'웹자료' 카테고리의 다른 글
| 부트스트랩 설명서 (0) | 2017.04.06 |
|---|---|
| 부트스트랩 그리드의 이해 (0) | 2017.04.06 |
| jquery 플러그인정리~bootstrap이랑 쓰면...좋음... (0) | 2017.04.05 |
| 부트스트랩 코드플레이주소~ (0) | 2017.04.03 |
| 부트스트랩4 버젼 가이드 사이트 (0) | 2017.03.31 |