Bootstrap 5 ပေါင်း

အခြေခံ ပြီးခဲ့သောစား

သင်္ဂြိုလ် အချို့တွင် ပြီးခဲ့သောစား အရွယ်များစွာ ရှိသော ဝတ္ထု ဖြစ်သည် အခါ၌ မည်သည့် ပြီးခဲ့သောစား အတွက် အခြေခံ ပြီးခဲ့သောစား ကို ထပ်ပေါင်းပါ

အခြေခံ ပြီးခဲ့သောစား ကို ဖန်တီးရန် ထပ်ပေါင်းပါ: .pagination အမျိုးအစား ထပ်ပေါင်းပါ <ul> အကိုးအခ� .page-item အကိုးအခံ <li> အကိုးအခံ .page-link အမျိုးအစား ထပ်ပေါင်းပါ <li> ရှိသော ပေါင်းစံအတွက်:

အကျိုးဆက်

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">ပြီးခဲ့သောစား</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>
  
  • 3
    • 
  
  • 下一页
    • 
</ul>

    ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

    လက်ရှိ

    .active “တိကျသော” ဖြစ်သော ပြီးခဲ့သောစား အတွက် အမျိုးအစား:

    အကျိုးဆက်

    <ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">ပြီးခဲ့သောစား</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>
  
  • 3
    • 
  
  • 下一页
    • 
</ul>

    ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

    အပိုက်အချုပ်

    .disabled အသုံးပြုသော လုပ်ဖို့မရတာ ဘဏ္ဍာရေး အမျိုးအစား:

    အကျိုးဆက်

    <ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">ပြီးခဲ့သောစား</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>
  
  • 3
    • 
  
  • 下一页
    • 
</ul>

    ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

    ပြီးခဲ့သောစား အရွယ်

    ပြီးခဲ့သောစား သို့မဟုတ် သေးမွန်းသောပိုင်းစံ ကို ကြီးသောသို့မဟုတ် သေးမွန်းသောပိုင်းစံ အထိ ပြောင်းလဲခြင်းပြုနိုင်သည်:

    ကြီးမွန်းသောပိုင်းစံအတွက် အမျိုးအစား ထပ်ပေါင်းပါ .pagination-lg သို့မဟုတ် သေးမွန်းသောပိုင်းစံတွင်ထပ်ပေါင်းပါ .pagination-sm အမျိုးအစား:

    အကျိုးဆက်

    <ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">ပြီးခဲ့သောစား</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>
  
  • 3
    • 
  
  • 下一页
    • 
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">ပြီးခဲ့သောစား</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>
  
  • 3
    • 
  
  • 下一页
    • 
</ul>

    ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

    分页对齐

    请使用 utility 类来更改分页的对齐方式：

    အကျိုးဆက်

    

      
  
    • ...
      • 
</ul>


        
  
      • ...
        • 
</ul>


          
  
        • ...
          • 
</ul>

    ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

    面包屑（Breadcrumbs）

    分页的另一种形式是面包屑：

    .breadcrumb 和 .breadcrumb-item 类规定当前页面在导航层次结构中的位置：

    အကျိုးဆက်

    <ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">ဓါတ်ပုံ</a></li>
  <li class="breadcrumb-item"><a href="#">2019 နွေရာသီ</a></li>
  <li class="breadcrumb-item"><a href="#">မြန်မာ</a></li>
  <li class="breadcrumb-item active">ပြည်ထဲ</li>
</ul>

    ကိုယ်တိုင် ကြိုးစားကြည့်ပါ