Bootstrap 4 Pagination
အခြေခံ Pagination
အကယ်၍ သင့်တွင် စာမျက်နှာများစွာရှိသော ဝဘ်ဆိုက်တစ်ခုရှိပါက၊ စာမျက်နှာတစ်ခုစီတွင် pagination အမျိုးအစားအချို့ကို သင်ထည့်သွင်းလိုပေမည်။
အခြေခံ pagination ဖန်တီးရန်၊ .pagination
အတန်းကို <ul>
ဒြပ်စင်တစ်ခုသို့ ထည့်ပါ။ ထို့နောက် အတွင်းရှိ လင့်တစ်ခုစီသို့ ဒြပ်စင် .page-item
တစ်ခုစီ နှင့် အတန်းတစ်ခုကို ပေါင်းထည့်ပါ ။<li>
.page-link
<li>
ဥပမာ
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
တက်ကြွသောပြည်နယ်
လက်ရှိ .active
စာမျက်နှာကို "မီးမောင်းထိုးပြရန်" အတန်းကို အသုံးပြုသည်-
ဥပမာ
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item
active"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
မသန်စွမ်းပြည်နယ်
.disabled
အတန်းကို ကလစ်မရနိုင်သော လင့်ခ်များအတွက် အသုံးပြုသည် -
ဥပမာ
<ul class="pagination">
<li class="page-item
disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
Pagination အရွယ်အစား
Pagination blocks များကို ပိုကြီးသော သို့မဟုတ် သေးငယ်သော အရွယ်အစားအထိ အရွယ်အစားလည်း ပေးနိုင်ပါသည်။
.pagination-lg
ပိုကြီးသောလုပ်ကွက်များအတွက် သို့မဟုတ် သေးငယ်သောလုပ်ကွက်များအတွက် အတန်းကိုထည့်ပါ .pagination-sm
-
ဥပမာ
<ul class="pagination
pagination-lg">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
Pagination Alignment
pagination ၏ ချိန်ညှိမှုကို ပြောင်းလဲရန် အသုံးဝင်သောအတန်းများကို သုံးပါ-
ဥပမာ
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px
0">
<li class="page-item">...</li>
</ul>
<!--
Center-aligned -->
<ul class="pagination justify-content-center"
style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul
class="pagination justify-content-end" style="margin:20px 0">
<li
class="page-item">...</li>
</ul>
အကြံပြုချက်- ကျွန်ုပ်တို့၏ BS4 Utilities အခန်း တွင် Bootstrap 4 Utility/Helper အတန်းများအကြောင်း ပိုမိုဖတ်ရှုပါ ။
Breadcrumbs
pagination အတွက် နောက်ထပ်ပုံစံတစ်ခုကတော့ breadcrumbs ပါ။
.breadcrumb
နှင့် အတန်း များသည် .breadcrumb-item
လမ်းကြောင်းရှာဖွေမှုဆိုင်ရာ အထက်တန်းအဆင့်အတွင်း လက်ရှိစာမျက်နှာ၏တည်နေရာကို ညွှန်ပြသည်-
ဥပမာ
<ul class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Photos</a></li>
<li
class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li
class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item
active">Rome</li>
</ul>