[Bootstrap Table] 부트스트랩 테이블 (bootstrapTable) 생성하기
1. 필요한 라이브러리
-JavaScript
<!-- Jquery 가져오기 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- bootstrap 가져오기 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- bootstrap table 가져오기 -->
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script> - CSS
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- 부트스트랩 테이블 -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
2. 테이블 생성하기
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>부트스트랩 테이블 만들기</title>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- 부트스트랩 테이블 -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
</head>
<body>
<!-- bootstrap container -->
<div class="container">
<!-- bootstrap 테이블 생성 -->
<table data-toggle="table">
<thead>
<tr>
<th>학과</th>
<th>이름</th>
<th>학번</th>
</tr>
</thead>
<tbody>
<tr>
<td>경영학과</td>
<td>가나다</td>
<td>20191234</td>
</tr>
<tr>
<td>체육학과</td>
<td>알란</td>
<td>20194567</td>
</tr>
<tr>
<td>심리학과</td>
<td>구론</td>
<td>20171227</td>
</tr>
<tr>
<td>심리학과</td>
<td>구론</td>
<td>20171227</td>
</tr>
</tbody>
</table>
</div>
<!-- Jquery 가져오기 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- bootstrap 가져오기 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- bootstrap table 가져오기 -->
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
</body>
</html>
3. 결과화면
'[Bootstrap]' 카테고리의 다른 글
| [bootstrapTable] 부트스트랩 테이블 특정 클래스 적용하기 (0) | 2019.12.13 |
|---|---|
| [bootstrapTable] 부트스트랩 테이블 JSON 값으로 만들기 (0) | 2019.12.13 |
| [BOOTSTRAP] nav 왼쪽, 가운데, 끝 정렬 하기(justify-content-* 사용하기: start, end, center, between, around) (0) | 2019.10.20 |
| [Bootstrap] nav 사용법 알아보기 (0) | 2019.10.20 |
| [Bootstrap] 점보트론(jumbotron) 사용하기 (jumbotron, jumbotron-fluid, container, container-fluid) (0) | 2019.10.20 |
미나미나미