Bootstrap 5 စက်တင်ချက် စာအုပ်

လိင်းတုန်းပေါင်း

Bootstrap 3 နှင့် Bootstrap 4 & 5 အကြား အခြား ကြောင်းများမှာ Bootstrap 5 သည် ဖွဲ့စည်းပုံ ကို လိင်းတုန်း flexbox အပေါ် အခြေခံပြီ

လိင်းတုန်း flexbox အစိတ်အပိုင်း သုံးပြီ ဖြစ်သည့် တူးပွားနှင့် တိုးလုပ်နိုင်သော အပေါ်လွှာ ဖွဲ့စည်းပုံ ကို လက်ခံနိုင်သည်။ အခြား အကျွမ်းကျွမ်းများ သုံးပြီ နှင့် အဆိုပါ ဖွဲ့စည်းပုံ ကို လက်ခံနိုင်သည်

သင့်ကြိုးစားသုံးပြီ flex ကို မသိသေးကြောင်း သင့်ကြိုးစားသုံးပြီ လိင်းတုန်း Flexbox ဖော်ပြ တွေ့ပြီ

注释：IE9 နှင့် အနည်းဆုံး သုံးပြီး လိင်းတုန်း flexbox ကို ထောက်ပံ့ခြင်း မရှိ

注释：IE8-9 ကို ထောက်ပံ့ရန် သင့်သည့်အတွက် သင့်ကြိုးစားသုံးပြီ Bootstrap 3 ကို သုံးပြီ။ သင့်ကြိုးစားသုံးပြီ Bootstrap 3 သည် အခြေခံ Bootstrap အမျိုးအစား ဖြစ်ပြီး အသင်းအဖွဲ့သည် အခြေခံ အကျွမ်းကျွမ်းသော အမှားကို ကာကွယ်ရန် နှင့် ပြည့်မျဉ်းများ ပြင်ဆင်ရန် ထောက်ပံ့ပေးသည်။ သို့သော် အခြေခံ အမျိုးအစား အတွင်းသို့ အခွင့်အရေး အသစ် ကို ထပ်ပေါင်းလိမ့်မည် မဟုတ်ပါ

အကျယ်အဝန်း

သုံးသပ်ပြီး လိင်းတုန်း flexbox ကိရိယာ ကို သုံးပြီ နှင့် နောက်ဆုံး အသီးသီး ကို flex အစိတ်အပိုင်း သုံးပြီ d-flex အမျိုးအမျိုးသော အက်ဥပဒေ ဖြစ်သည့်

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 bg-primary">ကားသတ်အုပ်စု 3</div>
</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

အကျယ်အဝန်း

သုံးသပ်ပြီး လိင်းတုန်း flexbox ကိရိယာ ကို သုံးပြီ d-inline-flex အမျိုးအမျိုးသော အက်ဥပဒေ ဖြစ်သည့်

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 bg-primary">ကားသတ်အုပ်စု 3</div>
</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

အဆင်းချိုး

အသုံးပြုပါ .flex-row အဆင်းချိုး ပြသပြီး အဆင်းချိုး အချက်အလက် ကို ပြတ်သက်စွာ ပြသပြီး အခြေခံ အတိုင်း ပြသပြီး

အကြောင်းအရာ:အကြိမ်ဖြူး .flex-row-reverse အရှေ့ဘက် အတူတူ ရိုက်နိုင်သည့် အချက်အလက်

အကျယ်အဝန်း

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 bg-primary">ကားသတ်အုပ်စု 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 bg-primary">ကားသတ်အုပ်စု 3</div>
</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

တည်ဆဲအခြေအား

အသုံးပြုပါ .flex-column flex အချက်အလက် ကို တည်ဆဲအခြေအားဖြင့် ပြသပြီး သို့မဟုတ် အသုံးပြု .flex-column-reverse အကြား ချိန်ချိုး ပြောင်းလဲစေရန်

အကျယ်အဝန်း

<div class="d-flex flex-column">
  <div class="p-2 bg-info">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 bg-primary">ကားသတ်အုပ်စု 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 bg-primary">ကားသတ်အုပ်စု 3</div>
</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

对齐内容

အကြိမ်ဖြူး .justify-content-* အမျိုးအမျိုးသော အသားပေးခြင်း အတိုင်း အချက်အလက် ကို ပြောင်းလဲစေရန် အမျိုးအမျိုးသော အက်ဥပဒေ ရှိသည့် အချက်အလက် ဖြစ်သည့်

  • start（ပုံမှာ）
  • end
  • center
  • between
  • around

အကျယ်အဝန်း

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

အတူတူ

ကားသတ်အုပ်စုပေါ်တွင် .flex-fill သတ်မှတ်၍ အတူတူ ရိုက်နိုင်သည့်အပြင်

အကျယ်အဝန်း

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">တိုးလျား အချက်အလက် ၁</div>
  <div class="p-2 bg-warning flex-fill">တိုးလျား အချက်အလက် ၂</div>
  <div class="p-2 bg-primary flex-fill">တိုးလျား အချက်အလက် ၃</div>
</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

ဖြန့်တက်ကြောင်း

ကားသတ်အုပ်စုပေါ်တွင် .flex-grow-1 ကျော်ကြီးသော အချက်အလက် ကို သုံးနိုင်သည်။ အမှတ် ၂ ခုမှ အောက်ဆုံး အချက်အလက် က အခြေခံ အရွယ်အစား ကို သုံးကြသည် တွင် အပိုသော အချက်အလက် က အသုံးပြုနိုင်သော အချက်အလက် ကို သုံးသည်：

အကျယ်အဝန်း

<div class="d-flex">
  <div class="p-2 bg-info">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 bg-primary flex-grow-1">ကားသတ်အုပ်စု 3</div>
</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

အကြောင်းအရာ:ကားသတ်အုပ်စုပေါ်တွင် .flex-shrink-1 လိုအပ်ခဲ့သောအခါ ပြင်းထန်စွာ ကြီးထွားလာစေရန်

顺序

အကြိမ်ဖြူး .order အမှတ်အသားအုပ်စုကို ကားသတ်အုပ်စုတစ်ခု၏ ပုံစံအခြေအနေ ပြောင်းလဲသည်။ အရေးပါသော အမှတ်အသားများ 0 မှ 5 အထိ ရှိ၍၊ အမှတ်အသားအနည်းဆုံးသည် အမြင့်မြင်သော အခြေအနေကို ဖော်ပြသည်（order-1 သည် order-2 ထက် အရေးပါသည်။）:

အကျယ်အဝန်း

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning order-2">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 bg-primary order-1">ကားသတ်အုပ်စု 3</div>
</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

အတုမြှုပ်လျက် အပြင်ဘက် အကျယ်အဝန်း

အကြိမ်ဖြူး .ms-auto（အုပ်စုကို ဆုံးဖြတ်သွားသောအပ်နှင့်ပေးသည်）သို့မဟုတ် .me-auto（အုပ်စုကို ဆုံးဖြတ်သွားသောအပ်နှင့်ပေးသည်）ကားသတ်အုပ်စုများသို့ အတုမြှုပ်လျက် အကြိမ်ဖြူးသည့် အကျယ်အဝန်း အသုံးပြုလျက်

အကျယ်အဝန်း

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 bg-primary">ကားသတ်အုပ်စု 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">ကားသတ်အုပ်စု 1</div>
  <div class="p-2 bg-warning">ကားသတ်အုပ်စု 2</div>
  <div class="p-2 me-auto bg-primary">ကားသတ်အုပ်စု 3</div>
</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

换行

အသုံးပြုလျက် .flex-nowrap（မူကြိုး）.flex-wrap သို့မဟုတ် .flex-wrap-reverseကားသတ်ပုံအုပ်စုကို ကားသတ်အုပ်စုအတွင်းတွင် ဘယ်လိုကူညီပေးသလဲကို အုပ်ချုပ်သည်။

အကျယ်အဝန်း

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

对齐内容

အသုံးပြုပါ .align-content-* ကားသတ်ပုံအုပ်စုကို အရှိန်ထိပ်တန်းပြောင်းလဲသည်။ အရေးပါသော အမှတ်အသားများမှာ:

  • .align-content-start（ပုံမှာ）
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch

注释：这些类对单行弹性项没有影响。

请单击下面的按钮，通过更改实例框中弹性项的垂直对齐方式来查看五个类的区别：

အကျယ်အဝန်း

..


..


..


..


..

သင့်ကိုယ်တိုင် ကျင်းပပါ။

对齐项目

အသုံးပြုပါ .align-items-* အစိတ်အစိတ် အတွက် အမှတ်အသား အတွက် အမှုဆောင်单行弹性项目的垂直对齐方式。有效的类是：

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch（ပုံမှာ）

请单击下面的按钮查看五个类之间的区别：

အကျယ်အဝန်း

<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

ကိုယ်ပိုင် အတန်းထိုး

အသုံးပြုပါ .align-self-* အစိတ်အစိတ် အတွက် အမှတ်အသား အတွက် အမှုဆောင်ပြည့်စုံသော အရာဝတ္တု ကို ချမှတ်သည်အကျယ်ရှားစွာ အတန်းထိုးစဉ်းအရာ

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch（ပုံမှာ）

အောက်ပါ ဘေ့စ်ဘက် တစ်ခုခု သွင်းပါလျှင် အခြား အမျိုးအမိန်း အကြား ကွဲပြားမှု ကြည့်ပါ။

အကျယ်အဝန်း

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-start">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

သင့်ကိုယ်တိုင် ကျင်းပပါ။

အတူတူ flex အမျိုးအမိန်း

အခြား flex အမျိုးအမိန်း အားလုံး အတူတူ အတူတူ ဖောက်လုပ်ပါ။ အရေးပါသော မျက်နှာပြင်များ အကြား အတူတူ ဖြင့် flex အမျိုးအမိန်း ဖွဲ့စည်းပေးပါ။

* အမှတ်အသား ကို sm、md、lg、xl သို့မဟုတ် xxl ဖြင့် ပြောင်းလဲပါ။ အရေးပါသော မျက်နှာပြင်များ အကြား အတူအတူ ဖောက်လုပ်ပါ။

အခြား flex အမျိုးအမိန်း ရှာဖွေပါ ..

အမျိုးအမိန်း ဖော်ပြ အကျယ်အဝန်း
flex အကွက်
.d-*-flex မျက်နှာပြင်များအကြား flexbox အကွက် ဖွဲ့စည်းပါ။ ကျင့်သုံးပါ
.d-*-inline-flex မျက်နှာပြင်များအကြား အင်တာနက် flexbox အကွက် ဖွဲ့စည်းပါ။ ကျင့်သုံးပါ
စရိုက်
.flex-*-row မျက်နှာပြင်များအကြား ချိန်အတူ ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
.flex-*-row-reverse မျက်နှာပြင်များအကြား ချိန်အတူ ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
.flex-*-column မျက်နှာပြင်များအကြား အရောင်ချိန်အတူ ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
.flex-*-column-reverse မျက်နှာပြင်များအကြား ကန့်ကွက်သည့် အမှတ်အသား ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
အကြင်းသတ်ခြင်း
.justify-content-*-start မျက်နှာပြင်များအကြား စတင်ချိန်မှ (အရှေ့ဘက်တွင်) ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
.justify-content-*-end မျက်နှာပြင်များအကြား နောက်ပိုင်းမှ (အရှေ့ဘက်တွင်) ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
.justify-content-*-center မျက်နှာပြင်များအကြား အဆင်းချိန်တစ်ခု ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
.justify-content-*-between မျက်နှာပြင်များအကြား အတူအတူ ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
.justify-content-*-around မျက်နှာပြင်များအကြား “ဝိုက်” ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
ဖောက်လုပ် / အကျယ်အဝန်းအတူ
.flex-*-fill မျက်နှာပြင်များအကြား အကျယ်အဝန်း အတူအတူ ဖောက်လုပ်ပါ။ ကျင့်သုံးပါ
ဖောက်လုပ်
.flex-*-grow-0 မျက်နှာပြင်များအကြား အကျယ်အဝန်း ဖောက်လုပ်ခြင်း မပြုပါ။
.flex-*-grow-1 မျက်နှာပြင်များအကြား အကျယ်အဝန်း ဖောက်လုပ်ပါ။
ကားချင်း
.flex-*-shrink-0 不要让项目在不同屏幕上收缩。
.flex-*-shrink-1 使项目在不同屏幕上收缩。
顺序
.order-*-0-12 在小屏幕从 0 到 12 更改顺序。 ကျင့်သုံးပါ
换行
.flex-*-nowrap 不要在不同的屏幕上对项目换行。 ကျင့်သုံးပါ
.flex-*-wrap 在不同的屏幕上对项目换行。 ကျင့်သုံးပါ
.flex-*-wrap-reverse 反转不同屏幕上对项目的换行。 ကျင့်သုံးပါ
对齐内容
.align-content-*-start 在不同屏幕上从开头对齐项目。 ကျင့်သုံးပါ
.align-content-*-end 在不同屏幕的末尾对齐项目。 ကျင့်သုံးပါ
.align-content-*-center 在不同屏幕的中心对齐项目。 ကျင့်သုံးပါ
.align-content-*-around 在不同屏幕的周围对齐项目。 ကျင့်သုံးပါ
.align-content-*-stretch 在不同的屏幕上拉伸项目。 ကျင့်သုံးပါ
对齐项目
.align-items-*-start 在不同屏幕上从开头对齐单行项目。 ကျင့်သုံးပါ
.align-items-*-end 在不同屏幕的末尾对齐单行项目。 ကျင့်သုံးပါ
.align-items-*-center မျက်နှာပြင် မျိုးမျိုး အပေါ်တွင် တစ်ကြိမ်တည်း အက်သုံးနည်း အစိတ်အပိုင်းများ ကို အခြေခံအခြေချ လျင်မြန်စွာ လက်ခံပါ ကျင့်သုံးပါ
.align-items-*-baseline မျက်နှာပြင် မျိုးမျိုး အပေါ်တွင် တစ်ကြိမ်တည်း အက်သုံးနည်း အစိတ်အပိုင်းများ ကို အခြေခံအခြေချ လျင်မြန်စွာ လက်ခံပါ ကျင့်သုံးပါ
.align-items-*-stretch မျက်နှာပြင် မျိုးမျိုး အပေါ်တွင် တစ်ကြိမ်တည်း အက်သုံးနည်း အစိတ်အပိုင်းများ ကို လျင်မြန်စွာ ဖြတ်သန်းပါ ကျင့်သုံးပါ
ကိုယ်ပိုင် လျင်မြန်စွာ လက်ခံပါ
.align-self-*-start မျက်နှာပြင် မျိုးမျိုး အပေါ်တွင် အာကာသ အဆိုပါ အက်သုံးနည်း အစိတ်အပိုင်းများ ကို အခြေခံအခြေချ လျင်မြန်စွာ လက်ခံပါ ကျင့်သုံးပါ
.align-self-*-end မျက်နှာပြင် မျိုးမျိုး အပေါ်တွင် အာကာသ အဆိုပါ အက်သုံးနည်း အစိတ်အပိုင်းများ ကို အခြေခံအခြေချ လျင်မြန်စွာ လက်ခံပါ ကျင့်သုံးပါ
.align-self-*-center မျက်နှာပြင် မျိုးမျိုး အပေါ်တွင် အာကာသ အဆိုပါ အက်သုံးနည်း အစိတ်အပိုင်းများ ကို အခြေခံအခြေချ လျင်မြန်စွာ လက်ခံပါ ကျင့်သုံးပါ
.align-self-*-baseline မျက်နှာပြင် မျိုးမျိုး အပေါ်တွင် အာကာသ အဆိုပါ အက်သုံးနည်း အစိတ်အပိုင်းများ ကို အခြေခံအခြေချ လျင်မြန်စွာ လက်ခံပါ ကျင့်သုံးပါ
.align-self-*-stretch မျက်နှာပြင် မျိုးမျိုး အပေါ်တွင် အာကာသ အဆိုပါ အက်သုံးနည်း အစိတ်အပိုင်းများ ကို လျင်မြန်စွာ ဖြတ်သန်းပါ ကျင့်သုံးပါ