콤포넌트 · 부트스트랩
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
bootstrapk.com
이것도 또한 부트스트랩 컴포넌트에 들어가서 확인하면된다.
table부분을 찾아서 사용법을 참고하면 될것같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>테이블</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding-top:50px;">
<table class="table table-bordered table-hover">
<tr>
<th>제목</th>
<th>작성일</th>
<th>삭제</th>
</tr>
<tr>
<td>안녕하세요</td>
<td>2019-03-24</td>
<td>
<a href="#" class="btn btn-danger">삭제</a>
</td>
</tr>
<tr>
<td>안녕하세요</td>
<td>2019-03-24</td>
<td>
<a href="#" class="btn btn-danger">삭제</a>
</td>
</tr>
</table>
<a href="" class="btn btn-default">작성하기</a>
</div>
</body>
</html>바디태그부분 소스코드 일부 해석:
container라는 클래스 속성을 가졌고 style은 padding-top: 50px(이 스타일을 넣지않으면 너무 위에 딱 붙어서 나오기 때문에 padding으로 띄어서 써보았다.)로된 div태그를 만든다.
table은 table만 하면 가로줄만 생기기 때문에 table-bordered를 써서 세줄도 완성되게 만들어준다. table-hover기능을 넣어서 마우스가 hover될때 스타일이 적용이 되게 만들어준다.
나머지는 이전 설명 컴포넌트-버튼 부분이랑 중복되기 때문에 생략하겠다.