Bootstrap 5 အသုံးပြု

Utilities / Helper အမျိုးမျိုး

Bootstrap 5 တွင် အသုံးပြုနိုင်သော utility/helper အမျိုးမျိုးရှိသည်၊ အမျိုးမျိုးသော အစိတ်အရာများ၏ အဆိုးအနှစ်ကို အသုံးပြုဘဲ အဆိုးအနှစ် အစိတ်အရာများ ကို အသုံးပြုနိုင်သည်。

ပတ်လမ်း

ပတ်လမ်းအသားကို အစိတ်အရာတွင် အသုံးပြု၍ ပြောင်းလဲခြင်း သို့မဟုတ် ဖျက်သိမ်းခြင်း

实例

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

亲自试一试

ခြောက်ဘက် အကျယ်အဝန်း

使用 .border-1 ထို့နောက် .border-5 ခြောက်ဘက် အကျယ်အဝန်း ပုံစံ ပြောင်းလဲကြောင်းများ ပေါ်ထည်သည်:

实例

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

亲自试一试

ခြောက်ဘက် အရောင်

ကိုယ်စားပြု နံပါတ်လက်တင် အရောင်ကို ခြောက်ဘက်အရောင် သို့ အသုံးပြုပါ:

实例

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

亲自试一试

ခြောက်ဘက်နံပါတ်လက်တင်

使用 rounded ပုံစံ အား နံပါတ်လက်တင်ကြောင်းများ ပေါ်ထည်သည်:

实例

<span class="rounded"></span>

亲自试一试

浮动和清除浮动

使用 .float-end 类向右浮动元素，或使用 .float-start 向左浮动，并使用 .clearfix 类清除浮动：

实例


  向左浮动
  向右浮动
</div>

亲自试一试

响应式浮动

မျက်နှာပြင်အထိပ် အကြီးမားစွာ အရှေ့ဘက်သို့ သို့မဟုတ် အရှေ့ဘက်သို့ ဝင်ရောက်သော အဖွဲ့အစိတ်များ ကို လက်ခံသည် (အစိတ်အဖွဲ့ အပေါ်မှ ပြုလုပ်ပါ):.float-*-left|right) တွင် * သည် :

  • sm (<= 576ပမာဏ)
  • md (> = 768ပမာဏ)
  • lg (> = 992ပမာဏ)
  • xl (> = 1200ပမာဏ)
  • xxl (> = 1400ပမာဏ)

实例

<div class="float-sm-end">အကြီးမားသော အနောက်ခြေရိုးရွား သို့မဟုတ် အကြီးမားသော အရွားပြားများ တွင် သို့မဟုတ် မျက်နှာပြင်ကို အရှေ့ဘက်သို့ ဝင်ရောက်</div><br>
<div class="float-md-end">အကြီးမားသော အနောက်ခြေရိုးရွား သို့မဟုတ် အကြီးမားသော အရွားပြားများ တွင် သို့မဟုတ် မျက်နှာပြင်ကို အရှေ့ဘက်သို့ ဝင်ရောက်</div><br>
<div class="float-lg-end">အကြီးမားသော အနောက်ခြေရိုးရွား သို့မဟုတ် အကြီးမားသော အရွားပြားများ တွင် သို့မဟုတ် မျက်နှာပြင်ကို အရှေ့ဘက်သို့ ဝင်ရောက်</div><br>
<div class="float-xl-end">အကြီးမားသော အနောက်ခြေရိုးရွား သို့မဟုတ် အကြီးမားသော အရွားပြားများ တွင် သို့မဟုတ် မျက်နှာပြင်ကို အရှေ့ဘက်သို့ ဝင်ရောက်</div><br>
<div class="float-xxl-end">အကြီးမားသော အနောက်ခြေရိုးရိုးရွား သို့မဟုတ် အကြီးမားသော အရွားပြားများ တွင် သို့မဟုတ် မျက်နှာပြင်ကို အရှေ့ဘက်သို့ ဝင်ရောက်</div><br>
<div class="float-none">ပေါင်းစပ်မှုမပြု</div>

亲自试一试

အလယ်တွင် ပါဝင်

使用 .mx-auto အဆိုခဲ့သော စက်တင်သတ္တိအဖွဲ့ (margin-left နှင့် margin-right: auto ထပ်ပေးပါ):

实例

居中

亲自试一试

<div class="mx-auto bg-warning" style="width:150px">အဆိုပါ</div>

အကျယ်အကျယ် အမျိုးအစားများ အသုံးပြုခြင်း (、.w-25、.w-50、.w-75、.w-100、.mw-auto.mw-100

实例

）အရွယ်အစား အကွက် အသုံးပြုခြင်း:
<div class="w-25 bg-warning">အကျယ် 25%</div>
<div class="w-50 bg-warning">အကျယ် 50%</div>
<div class="w-75 bg-warning">အကျယ် 75%</div>
<div class="w-100 bg-warning">အကျယ် 100%</div>
<div class="w-auto bg-warning">အကျယ် အတုတ်</div>

亲自试一试

<div class="mw-100 bg-warning">အကျယ် 100%</div>

အမြင့်အမြင့် အမျိုးအစားများ အသုံးပြုခြင်း (、.h-25、.h-50、.h-75、.h-100、.mh-auto.mh-100

实例

）အရွယ်အစား အကွက် အသုံးပြုခြင်း:
  <div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">အမြင့် 25%</div>
  <div class="h-50 bg-warning">အမြင့် 50%</div>
  <div class="h-75 bg-warning">အမြင့် 75%</div>
  <div class="h-100 bg-warning">အမြင့် 100%</div>
  <div class="h-auto bg-warning">အမြင့် အတုတ်</div>
</div>

亲自试一试

<div class="mh-100 bg-warning" style="height:500px">အမြင့် 100%</div>

အကွက်

  • xs Bootstrap 5 တွင် အပြန်အလှန် အကွက် နှင့် အကျယ်ဝန်း အသုံးပြုခြင်း အကျယ်အဝန်း အမျိုးအစားများ ရှိပါသည်။ အားလုံး အချိန်မှာ အသုံးပြုနိုင်ပါသည်:
  • sm (<= 576ပမာဏ)
  • md (> = 768ပမာဏ)
  • lg (> = 992ပမာဏ)
  • xl (> = 1200ပမာဏ)
  • xxl (> = 1400ပမာဏ)

ဤအမျိုးအစားများ၏ အသုံးပြုခြင်း ပုံစံမှာ:{property}{sides}-{size} အသုံးပြု xs，နှင့် {property}{sides}-{breakpoint}-{size} အသုံးပြု sm、md、lg、xl နှင့် xxl。

property အောက်ပါ တစ်ခုခု

  • m - ပြုပြင် margin
  • p - ပြုပြင် padding

sides အောက်ပါ တစ်ခုခု

  • t - ပြုပြင် margin-top 或 padding-top
  • b - ပြုပြင် margin-bottom 或 padding-bottom
  • s - ပြုပြင် margin-left 或 padding-left
  • e - ပြုပြင် margin-right 或 padding-right
  • x - တူညီအဆင်းချဲ padding-left နှင့် padding-right 或 margin-left နှင့် margin-right
  • y - တူညီအဆင်းချဲ padding-top နှင့် padding-bottom 或 margin-top နှင့် margin-bottom
  • blank - အစိတ်အစုအစည်း အရောင် နှင့် ပတ်သတ်၍ အဆင်းချဲ margin 或 padding

size အောက်ပါ တစ်ခုခု

  • 0 - ပြုပြင် margin 或 padding အဆင်းချဲ 0
  • 1 - ပြုပြင် margin 或 padding အဆင်းချဲ .25rem
  • 2 - ပြုပြင် margin 或 padding အဆင်းချဲ .5rem
  • 3 - ပြုပြင် margin 或 padding အဆင်းချဲ 1rem
  • 4 - ပြုပြင် margin 或 padding အဆင်းချဲ 1.5rem
  • 5 - ပြုပြင် margin 或 padding အဆင်းချဲ 3rem
  • auto - ပြုပြင် margin auto ဖြင့် အဆင်းချဲ

实例

<div class="pt-4 bg-warning">ကျွန်ုပ် ထိပ် အဆင်းချဲ (1.5rem) တွင် ရှိသာပါ</div>
<div class="p-5 bg-success">ကျွန်ုပ် အကျယ်အဝန်း နှင့် ထိပ် အဆင်းချဲ (3rem) တွင် ရှိပါသည်</div>
<div class="m-5 pb-5 bg-info">ကျွန်ုပ် အကျယ်အဝန်း နှင့် အောက် အဆင်းချဲ (3rem) နှင့် ထိပ် အဆင်းချဲ (3rem) တွင် ရှိပါသည်</div>

亲自试一试

အခြား အဆင်းချဲ အစား

.m-# / m-*-# အကျယ်အဝန်း နှင့် အခ�ား အဆင်းချဲ ကျင့်သုံးရန်
.mt-# / mt-*-# ထိပ် အခ�ား အဆင်းချဲ ကျင့်သုံးရန်
.mb-# / mb-*-# အောက် အခ�ား အဆင်းချဲ ကျင့်သုံးရန်
.ms-# / ms-*-# ဘယ်ဘက် အခြား အဆင်းချဲ ကျင့်သုံးရန်
.me-# / me-*-# ညာဘက် အခြား အဆင်းချဲ ကျင့်သုံးရန်
.mx-# / mx-*-# ဘယ်ဘက် နှင့် ညာဘက် အဆင်းချဲ ကျင့်သုံးရန်
.my-# / my-*-# ထိပ် နှင့် အောက် အခြား အဆင်းချဲ ကျင့်သုံးရန်
.p-# / p-*-# အကျယ်အဝန်း နှင့် အဆင်းချဲ (ပန်းခွဲ) ကျင့်သုံးရန်
.pt-# / pt-*-# ထိပ် အဆင်းချဲ ကျင့်သုံးရန်
.pb-# / pb-*-# အောက် အဆင်းချဲ ကျင့်သုံးရန်
.ps-# / ps-*-# ဘယ်ဘက် အဆင်းချဲ ကျင့်သုံးရန်
.pe-# / pe-*-# ညာဘက် အဆင်းချဲ ကျင့်သုံးရန်
.py-# / py-*-# ထိပ် နှင့် အောက် အဆင်းချဲ ကျင့်သုံးရန်
.px-# / px-*-# ဘယ်ဘက် နှင့် ညာဘက် အဆင်းချဲ ကျင့်သုံးရန်

ကျွန်ုပ်၏ CSS ဖော်ပြချက် စာအုပ် rem နှင့် အရွယ်အစား အသုံးပြုသည့် အသုံးပြုခြင်း နှင့် ပတ်သတ်၍ နောက်ထပ် ဖတ်ရှုရန်。

အရောင်

အသုံးပြုပါ shadow- အစိတ်အစုအစည်း ကို အရောင်တပ်ဆင်သည်:

实例

<div class="shadow-none p-4 mb-4 bg-light">မတွေ့သောအရောင်</div>
<div class="shadow-sm p-4 mb-4 bg-white">သန်းချိန်အရိုးဖျက်</div>
<div class="shadow p-4 mb-4 bg-white">မူကြမ်း အရိုးဖျက်</div>
<div class="shadow-lg p-4 mb-4 bg-white">ကြီးမားသော အရိုးဖျက်</div>

亲自试一试

အမြင့် အတူတူတည်ရှိအနေ

အသုံးပြုပါ align- အားကွက်များ အရာဝတ္တု၏ တည်ရှိအနေ ကို ပြုပြင်ပါ (အဆိုပါ အားကွက်များ သည် inline, inline-block, inline-table နှင့် အချက်အလက် အစီအစဉ် အရ သာ ဖြစ်သည်):

实例

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

亲自试一试

နေရာအောက်ပါ

အဖွဲ့အစည်း၏ အကျယ်အဝန်း အခြေခံ၍ အပြန်အလှန် အောင်ပွဲခံ ဗီဒီယိုသို့ သို့မဟုတ် ပြသမှုများ ကို ဖန်တီးပါ

ထပ်ထည့်ပါ .ratio အားကွက်များ သည် သင်ကြည်းသော နေရာအောက်ပါ အစိတ်အကျယ် နှင့် ကိုက်ညီသည်: .aspect-ratio-* အဖွဲ့အစည်းအဖြစ် ထပ်ထည့်ပြီး ထဲမှ အသုံးပြုကြသော အသားဝင်ရိုက်သမားသို့ ထပ်ထည့်ပါ:

实例

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

亲自试一试

မြင်ကွင်းအခြေအနေ

使用 .visible 或 .invisible အားကွက်များ အရာဝတ္တု၏ မြင်ကွင်းအခြေအနေ ကို တွယ်ကြွမ်းနိုင်သည်:

ထင်မြင်းပုံအားကွက်များသည် CSS display အတိုင်းအတာကို ပြုပြင်လိမ့်မည် မဟုတ်ပါ။ သူတို့သည် သာ ထပ်ထည့်သည်။ visibility:visible 或 visibility:hidden。

实例

我是可见的。

亲自试一试

关闭图标

使用 .btn-close 类可设置关闭图标的样式。通常用于警告框和模态。

实例

亲自试一试

屏幕阅读器

使用 .visually-hidden 类可在所有设备上隐藏元素，屏幕阅读器除外：

实例

亲自试一试

颜色

如“颜色”一章所述，下面列出了所有文本和背景颜色类的列表：

针对文本颜色的类是：

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（默认 body 颜色/通常为黑色）
  • .text-light

实例

亲自试一试

上下文文本类也可用于链接：

实例

亲自试一试

您还可以使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 50% 的不透明度：

实例

亲自试一试

背景色

针对背景颜色的类是：

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

请注意，背景颜色不会设置文本颜色，因此在某些情况下，您需要将它们与 .text-* 类一起使用。

实例

亲自试一试