테스트 사이트 - 개발 중인 베타 버전입니다

Bootstrap Pager 버튼 맞춤

· 7년 전 · 3196 · 1
스크린샷 2017-11-21 오후 9.49.02.png
Bootstrap Pager 버튼 맞춤

.previousand를 사용하여 .next각 버튼을 페이지의 측면에 정렬합니다.


<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>


[전체소스]
<!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.1/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>Pager</h2>
<p>The .previous and .next classes align each link to the sides of the page:</p>
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>

</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

1년 전

와 이렇게 정리해주시니 좋네요 ㅎㅎ 한 10년 지나 다시 홈페이지 코딩을 해보려는데 이것저것 막히는 부분이 많네요 

게시글 목록

번호 제목
1451
부트스트랩 Disabled Item
1450
부트스트랩 활성 상태
1449
1448
1447
1446
1445
부트스트랩 Bootstrap Pager
1444
부트스트랩 Breadcrumbs
1443
부트스트랩 Pagination Sizing
1442
1441
1440
1438
1437
1436
1435
부트스트랩 컬러 진행 바
1434
1433
1432
부트스트랩 레이블
1431
1430
1429
1428
1427
1426
부트스트랩 세로 단추 그룹
1425
부트스트랩 버튼 그룹
1424
1421
부트스트랩 블록 레벨 버튼
1420
부트스트랩 단추 크기 1
1419