iT邦幫忙

0

26.Bootstrap(中文教程)元件:Pagination:分頁器

ㄧ.導欄列位置固定

<div id="demo" class="component container">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled"><a href="#" class="page-link">前進</a></li>
    <li class="page-item active"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">後退</a></li>
  </ul>
</div>

.demo.component{
  padding: 50px;
}

重點:

1.ul.pagination為分頁器最外層的結構
2.li.page-item為分頁器類別
3.a.page-link為分頁氣的a連結
4. .disabled為禁用按鈕
5. .active為目前的頁數

codepen
參考:bootstrap4


尚未有邦友留言

立即登入留言