Bootstrap Pagination
အခြေခံ Pagination
အကယ်၍ သင့်တွင် စာမျက်နှာများစွာရှိသော ဝဘ်ဆိုက်တစ်ခုရှိပါက၊ စာမျက်နှာတစ်ခုစီတွင် pagination အမျိုးအစားအချို့ကို သင်ထည့်သွင်းလိုပေမည်။
Bootstrap တွင် အခြေခံ pagination သည် ဤကဲ့သို့ ဖြစ်သည်-
အခြေခံ pagination ဖန်တီးရန်၊ .pagination
အတန်းကို <ul>
ဒြပ်စင်တစ်ခုသို့ ထည့်ပါ-
ဥပမာ
<ul class="pagination">
<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>
</ul>
တက်ကြွသောပြည်နယ်
တက်ကြွသောအခြေအနေသည် လက်ရှိစာမျက်နှာကိုပြသသည်-
.active
အသုံးပြုသူအား မည်သည့်စာမျက်နှာတွင် ရှိနေသည်ကို သိစေရန် အတန်းကို ထည့်ပါ -
ဥပမာ
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
မသန်စွမ်းပြည်နယ်
ပိတ်ထားသောလင့်ခ်ကို နှိပ်၍မရပါ
.disabled
အကြောင်းတစ်ခုခုကြောင့် လင့်ခ်တစ်ခုကို ပိတ်ထား ပါက အတန်းကို ထည့်ပါ -
ဥပမာ
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Pagination အရွယ်အစား
Pagination blocks များကို ပိုကြီးသော အရွယ်အစား သို့မဟုတ် ပိုသေးငယ်သော အရွယ်အစားအထိ အရွယ်အစား ပေးနိုင်ပါသည်။
.pagination-lg
ပိုကြီးသောလုပ်ကွက်များအတွက် သို့မဟုတ် သေးငယ်သောလုပ်ကွက်များအတွက် အတန်းကိုထည့်ပါ .pagination-sm
-
ဥပမာ
<ul class="pagination pagination-lg">
<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>
</ul>
<ul class="pagination pagination-sm">
<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>
</ul>
Breadcrumbs
pagination အတွက် နောက်ထပ်ပုံစံတစ်ခုကတော့ breadcrumbs ပါ။
.breadcrumb
အတန်းသည် လမ်းညွှန်မှုဆိုင်ရာ အထက်တန်းအဆင့်အတွင်း လက်ရှိစာမျက်နှာ၏တည်နေရာကို ညွှန်ပြသည် -
ဥပမာ
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
Bootstrap Navigation Reference ကို အပြီးသတ်ပါ။
လမ်းညွှန်မှုအတန်းအားလုံး၏ အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ ပြီးပြည့်စုံသော Bootstrap Navigation Reference သို့ သွားပါ ။