W3.CSS Pagination
အခြေခံ Pagination
စာမျက်နှာများစွာပါရှိသော ဝဘ်ဆိုက်တစ်ခုရှိပါက၊ သင်သည် pagination အမျိုးအစားကို အသုံးပြုလိုပေမည်။
အခြေခံ pagination ဖန်တီးရန် ဘားတစ်ခု ( w3-bar ) ရှိ ခလုတ်များ ( w3-button ) ကို အသုံးပြုပါ ။
ဥပမာ
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#"
class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
ခလုတ်များကြားရှိ နေရာလွတ်များကို ဖယ်ရှားရန် w3-bar-item အတန်းကို ထည့်ပါ။
ဥပမာ
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Pagination Arrows
ရောင်စုံမြှားများထည့်ရန် အိုင်ကွန်ဒစ်ဂျစ်တိုက်မှ HTML အကြောင်းအရာများ သို့မဟုတ် အိုင်ကွန်များကို အသုံးပြုပါ-
ဥပမာ
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
အသုံးပြုနေသော/လက်ရှိလင့်ခ်
အသုံးပြုသူ သည် မည်သည့်စာမျက်နှာကိုဖွင့ ် ထားသည်ကို ဖော်ပြရန် w3- အရောင် အတန်း များထဲမှ တစ်ခုကို အသုံးပြုပါ-
ဥပမာ
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
Hover Color
ပုံသေအားဖြင့်၊ သင်သည် pagination လင့်ခ်များပေါ်တွင် mouse ကိုရွှေ့သောအခါ၊ ၎င်းတို့သည် မီးခိုးရောင်နောက်ခံအရောင်ကို ရရှိမည်ဖြစ်သည်။ hover အရောင်ပြောင်းရန် w3-hover- အရောင် အတန်းများကို သုံး ပါ -
ဥပမာ
<div class="w3-bar">
<a href="#"
class="w3-button w3-hover-purple">«</a>
<a
href="#" class="w3-button w3-hover-green">1</a>
<a href="#"
class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button
w3-hover-blue">3</a>
<a href="#"
class="w3-button w3-hover-black">4</a>
<a href="#"
class="w3-button w3-hover-orange">»</a>
</div>
Pagination အရွယ်အစား
pagination အရွယ်အစားအတွက် w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge သို့မဟုတ် w3-xxxlarge ကိုသုံးပါ-
ဥပမာ
<div class="w3-bar
w3-xlarge">
ဗဟိုပြု Pagination
pagination ကို ဗဟိုပြုရန် "w3-bar" ဒြပ်စင်ကို "w3-center" ဒြပ်စင်အတွင်း ထည့်ပါ-
ဥပမာ
<div class="w3-center">
<div class="w3-bar">
<a href="#"
class="w3-bar-item w3-button">«</a>
<a href="#"
class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#"
class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
နယ်နိမိတ်မျဉ်း
နယ်နိမိတ်များရှိသော pagination ဖန်တီးရန် w3-border အတန်းကို ထည့်ပါ -
ဥပမာ
<div class="w3-bar
w3-border">
လုံးဝန်းသော နယ်နိမိတ်များ
အဝိုင်းပတ်ထားသော နယ်နိမိတ်များအတွက် w3-ဘောင်ဘေးရှိ w3- အဝိုင်း အတန်း ကို ထည့်ပါ ။
ဥပမာ
<div class="w3-bar
w3-border w3-round">
အခြား Pagination ဥပမာများ
နောက်/ယခင် ခလုတ်များကို ဖန်တီးရန် w3-bar အတန်းကိုလည်း အသုံးပြုနိုင်သည်။
နောက်/ယခင် ဥပမာ
<div class="w3-bar w3-border w3-round">
<a href="#"
class="w3-button">❮ Previous</a>
<a href="#" class="w3-button
w3-right">Next ❯</a>
</div>
Inline Menu နမူနာ
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>