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

Bootstrap Pager 버튼 맞춤

· 7년 전 · 3200 · 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년 지나 다시 홈페이지 코딩을 해보려는데 이것저것 막히는 부분이 많네요 

게시글 목록

번호 제목
1418
부트스트랩 애니메이션 경고
1417
부트스트랩 경고 닫기
1416
부트스트랩 알림 링크
1414
1413
1412
1411
1410
부트스트랩 이미지 갤러리
1409
부트스트랩 반응 형 이미지
1408
1407
1406
1405
부트스트랩 반응 형 테이블
1404
부트스트랩 문맥 분류
1403
부트스트랩 요약 표
1402
부트스트랩 호버 행
1401
부트스트랩 테두리가있는 표
1400
1399
1398
1397
1396
1395
1394
부트스트랩 <blockquote>
1393
부트스트랩 <abbr>
1392
부트스트랩 <mark>
1391
부트스트랩 <small>
1390
1389
1388
부트스트랩 3 개의 동일한 열