Bootstrap 4 အသုံးအဆောင်များ

Bootstrap 4 အသုံးအဆောင်များ

Bootstrap 4 တွင် CSS ကုဒ်ကိုအသုံးမပြုဘဲ အစိတ်အပိုင်းများကို မြန်မြန်ဆန်ဆန်စတိုင်သတ်မှတ်ရန် အသုံးဝင်မှု/အကူအတန်းများစွာရှိသည်။

နယ်နိမိတ်များ

borderဒြပ်စင်တစ်ခုမှ ဘောင်များကို ထည့်ရန် သို့မဟုတ် ဖယ်ရှားရန် အတန်းများကို သုံး ပါ-

နယ်စပ်အရောင်

ဆက်စပ်ဘောင်အရောင် အတန်းအစား တစ်ခုခုဖြင့် ဘောင်သို့ အရောင်တစ်ခု ထည့်ပါ-

နယ်စပ်အချင်းဝက်

roundedအတန်းများ နှင့်အတူ ဒြပ်စင်တစ်ခုသို့ အဝိုင်းထောင့်များထည့်ပါ -

Float နှင့် Clearfix

.float-rightအတန်းနှင့် သို့မဟုတ် ဘယ်ဘက် တွင် ဒြပ်စင်တစ်ခုအား ညာဘက်သို့ မျှောပါ ၊ အတန်း .float-leftဖြင့် float များကို ရှင်းလင်းပါ .clearfix-

တုံ့ပြန်မှု Floats

.float-*-left|rightတုံ့ပြန်မှုရှိသော float အတန်းများ ( - where * is sm(>=576px), md(>=768px), lg(>=992px) သို့မဟုတ် xl(>=1200px)) ဖြင့် စခရင်အကျယ်ပေါ်မူတည်၍ ဒြပ်စင်တစ်ခုကို ဘယ်ဘက် သို့မဟုတ် ညာဘက်သို့ မျှော ပေးပါ။

အလယ်တည့်တည့်

ဒြပ်စင်တစ်ခုအား .mx-autoအတန်းအစားဖြင့် အလယ်ဗဟို (အနားသတ်-ဘယ်ဘက်နှင့် အနားသတ်-ညာကို ပေါင်းထည့်သည်- အလိုအလျောက်)-

အကျယ်

.w-25w-* classes ( , .w-50, .w-75, .w-100, .mw-100) ဖြင့် element တစ်ခု၏ width ကို သတ်မှတ်ပါ ။

အရပ်အမြင့်

h-* အတန်းများ ( .h-25, .h-50, .h-75, .h-100, .mh-100) ဖြင့် ဒြပ်စင်တစ်ခု၏ အမြင့်ကို သတ်မှတ်ပါ။

အကွာ

Bootstrap 4 တွင် တုံ့ပြန်မှုရှိသောအနားသတ်များနှင့် padding utility အတန်းများစွာရှိသည်။ ၎င်းတို့သည် breakpoints အားလုံးအတွက် အလုပ်လုပ်သည်- xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) သို့မဟုတ် xl(>=1200px)):

အတန်းများကို ဖော်မက်အတွက် အသုံးပြုသည်- {property}{sides}-{size}for xsand {property}{sides}-{breakpoint}-{size}for sm, md, lg, နှင့် xl.

ပစ္စည်းဥစ္စာ သည် အ ဘယ်မှာ ရှိသနည်း၊

• m- အစုံmargin
• p- အစုံpadding

နှစ်ဖက်စလုံး သည် မည်သည့်နေရာတွင် ရှိသည် -

• t- အစုံ margin-topသို့မဟုတ်padding-top
• b- အစုံ margin-bottomသို့မဟုတ်padding-bottom
• l- အစုံ margin-leftသို့မဟုတ်padding-left
• r- အစုံ margin-rightသို့မဟုတ်padding-right
• x- နှစ်ခုလုံး နှင့် padding-leftသို့မဟုတ် padding-rightအစုံmargin-leftmargin-right
• y- နှစ်ခုလုံး နှင့် padding-topသို့မဟုတ် padding-bottomအစုံmargin-topmargin-bottom
• blank - ဒြပ်စင်၏ 4 ဘက်စလုံးတွင် တစ်ခု marginသို့မဟုတ် အားလုံးကို သတ်မှတ်သည်။padding

အရွယ်အစား သည် မည်သည့်နေရာတွင် ရှိသည်

• 0- အစုံ marginဖြစ်ဖြစ် padding၊0
• 1- သတ်မှတ်သည် marginသို့မဟုတ် (ဖော paddingင့ .25rem်အရွယ်အစား 16px ဖြစ်ပါက 4px)
• 2- သတ်မှတ်သည် marginသို့မဟုတ် (ဖော paddingင့ .5rem်အရွယ်အစား 16px ဖြစ်ပါက 8px)
• 3- ဖောင့်အရွယ်အစား သည် 16px ဖြစ်လျှင် 16px marginသို့မဟုတ် သတ်မှတ်သည်)padding1rem
• 4- ဖောင့်အရွယ်အစား 16px ဖြစ်လျှင် 24px marginသို့မဟုတ် paddingသတ်မှတ်သည် )1.5rem
• 5- ဖောင့်အရွယ်အစားသည် 16px ဖြစ်လျှင် 48px marginသို့မဟုတ် paddingသတ်မှတ်သည် )3rem
• automargin- အလိုအလျောက် သတ်မှတ်သည် ။

မှတ်ချက်- အရွယ်အစား ၏ ရှေ့တွင် "n" ကို ထည့်ခြင်းဖြင့် အနားသတ်များသည်လည်း အနုတ်လက္ခဏာဖြစ်နိုင်သည် ။

• n1- ဖောင့ margin် -.25remအရွယ်အစား 16px ဖြစ်ပါက (-4px)
• n2- ဖောင့ margin် -.5remအရွယ်အစား 16px ဖြစ်ပါက (-8px)
• n3- ဖောင့ margin် -1remအရွယ်အစား 16px ဖြစ်ပါက (-16px)
• n4- ဖောင့ margin် -1.5remအရွယ်အစား 16px ဖြစ်ပါက (-24px)၊
• n5- ဖောင့ margin် -3remအရွယ်အစား 16px ဖြစ်ပါက (-48px)

နောက်ထပ်အကွာအဝေးဥပမာများ

အရိပ်များ

shadow-ဒြပ်စင်တစ်ခုသို့ အရိပ်များထည့်ရန် အတန်းများကို သုံး ပါ-

ဒေါင်လိုက် ညှိပါ။

ဒြပ်စင်များ၏ ချိန်ညှိမှုကို ပြောင်းလဲရန် အတန်းများကို အသုံးပြု align-ပါ (အင်လိုင်း၊ လိုင်း-ဘလောက်၊ လိုင်း-ဇယားနှင့် ဇယားဆဲလ်ဒြပ်စင်များပေါ်တွင်သာ အလုပ်လုပ်သည်)။

တုံ့ပြန်မှု မြှုပ်နှံမှုများ

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

ပင်မဒြပ်စင် တစ်ခုတွင် နှင့် သင့်ရွေးချယ်မှု၏ ရှုထောင့်အချိုးအစား .embed-responsive-item( <iframe> သို့မဟုတ် <video> ကဲ့သို့) မြှုပ်နှံထားသော မည်သည့်ဒြပ်စင်များသို့မဆို ထည့်ပါ -.embed-responsive

မြင်နိုင်စွမ်း

ဒြပ်စင်များ၏ မြင်နိုင်စွမ်းကို ထိန်းချုပ်ရန် .visibleသို့မဟုတ် အတန်းများကို အသုံးပြု ပါ။ မှတ်ချက်- ဤအတန်းများသည် CSS ပြသမှုတန်ဖိုးကို မပြောင်းလဲပါ။ သူတို့ကသာထည့် သည် သို့မဟုတ်.invisiblevisibility:visiblevisibility:hidden

ရာထူး

စာမျက်နှာ၏ ထိပ်.fixed-top တွင် မည်သည့်ဒြပ်စင်ကိုမဆို ပြုပြင်ရန်/နေရန် အတန်းကို အသုံးပြု ပါ-

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Close icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking "x"). Also note that it floats right by default:

Screenreaders

Use the .sr-only class to hide an element on all devices, except screen readers:

Colors

As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Contextual text classes can also be used on links, which will add a darker hover color:

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Typography/Text Classes

As described in the Typography chapter, here is a list of all typography/text classes:

Block Elements

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

Other Display Classes

Other display classes are also available:

Flex

Use .flex-* classes to control the layout with flexbox.

Read more about Bootstrap 4 Flex, in our next chapter.