1. 상단에 네비게이션 바를 만든다.
2. 왼쪽에 패널이 들어가고
3. 오른쪽에 게시판 들어가고
4. 아래쪽에 페이지네이션 들어가고
5. 가장 아랫쪽에 작성하기 버튼을 만들어보자.
페이지네이션추가방법
콤포넌트 · 부트스트랩
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
컴포넌트 부트스트랩에 들어가서 페이지네이션을 찾아서 그 소스코드를 긁어온다.
<nav class="text-center">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>테이블태그 밑에 작성하고, "text-center"로 해서 중앙정렬로 만들어준다.
<!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">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top: 100px">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!-- 오른쪽 메뉴바 -->
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
bootstrap 강의
</a>
</div>
<div class="collapse navbar-collapse" id="nav_menu">
<ul class="nav navbar-nav">
<li class="active">
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">PYTHON</a>
</li>
<li>
<a href="">Javascript</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="panel-heading">
게시판
</div>
<div class="panel-body">
<a href="">자유게시판</a><br>
<a href="">포럼</a><br>
<a href="">News</a><br>
</div>
</div>
</div>
<div class="col-sm-10">
<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>
<tr>
<td>안녕하세요</td>
<td>2019-03-24</td>
<td>
<a href="#" class="btn btn-danger">삭제</a>
</td>
</tr>
</table>
<nav class="text-center">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<a href="" class="btn btn-default">작성하기</a>
</div>
</div>
</body>
</html>전체 소스코드이다. 나머지 내용은 이전 개념에서 다루었기 때문에 참고하면서 보면 될것같다.
'부트스트랩 > 실습' 카테고리의 다른 글
| 실습 - 로그인, font-awesome (0) | 2021.01.19 |
|---|