Bootstrap CSS Helper Classes အကိုးအကား
စာသား
အောက်ပါအတန်းများနှင့်အတူ စာသားအရောင်များမှတဆင့် အဓိပ္ပါယ်ထည့်ပါ။ လင့်ခ်များသည် အပေါ်သို့ မှောင်သွားလိမ့်မည်-
Class | Description | Example |
---|---|---|
.text-muted | Text styled with class "text-muted" | |
.text-primary | Text styled with class "text-primary" | |
.text-success | Text styled with class "text-success" | |
.text-info | Text styled with class "text-info" | |
.text-warning | Text styled with class "text-warning" | |
.text-danger | Text styled with class "text-danger" |
နောက်ခံ
အောက်ဖော်ပြပါအတန်းများနှင့်အတူ နောက်ခံအရောင်များမှတဆင့် အဓိပ္ပါယ်ကို ထည့်ပါ။ စာသားအတန်းအစားများကဲ့သို့ အပေါ်သို့ လင့်ခ်များသည် မှောင်သွားလိမ့်မည်-
Class | Description | Example |
---|---|---|
.bg-primary | Table cell is styled with class "bg-primary" | |
.bg-success | Table cell is styled with class "bg-success" | |
.bg-info | Table cell is styled with class "bg-info" | |
.bg-warning | Table cell is styled with class "bg-warning" | |
.bg-danger | Table cell is styled with class "bg-danger" |
တခြား
Class | Description | Example |
---|---|---|
.pull-left | Floats an element to the left | |
.pull-right | Floats an element to the right | |
.center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | |
.clearfix | Clears floats | |
.show | Forces an element to be shown (display:block) | |
.hidden | Forces an element to be hidden (display:none) | |
.invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | |
.sr-only | Hides an element to all devices except screen readers | |
.sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | |
.text-hide | Helps replace an element's text content with a background image | |
.close | Indicates a close icon | |
.caret | Indicates dropdown functionality (will reverse automatically in dropup menus) |
တုံ့ပြန်မှုအသုံးအဆောင်များ
ဤအတန်းများကို မီဒီယာမေးမြန်းချက်များမှတစ်ဆင့် စက်ပစ္စည်းတစ်ခုမှ အကြောင်းအရာကို ပြသရန်နှင့်/သို့မဟုတ် ဝှက်ထားရန်အတွက် အသုံးပြုသည်။
ရှုခင်းမှတ်တိုင်များတစ်လျှောက် အကြောင်းအရာကို ပြောင်းပစ်ရန်အတွက် ရရှိနိုင်သော အတန်းတစ်ခု သို့မဟုတ် ပေါင်းစပ်တစ်ခုကို အသုံးပြုပါ-
သင်တန်းများ | အပိုပစ္စည်းအသေးစား ဖုန်းများ (<768px) | သေးငယ်သော စက်ပစ္စည်းများ တက်ဘလက်များ (≥768px) | အလတ်စား စက်များ ဒက်စ်တော့များ (≥992px) | ကြီးမားသော စက်ပစ္စည်းများ ဒက်စ်တော့များ (≥1200px) |
---|---|---|---|---|
.visible-xs-* | မြင်သာသည်။ | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ |
.visible-sm-* | ဝှက်ထားသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ |
.visible-md-* | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ |
.visible-lg-* | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ |
.hidden-xs | ဝှက်ထားသည်။ | မြင်သာသည်။ | မြင်သာသည်။ | မြင်သာသည်။ |
.hidden-sm | မြင်သာသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ | မြင်သာသည်။ |
.hidden-md | မြင်သာသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ |
.hidden-lg | မြင်သာသည်။ | မြင်သာသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ |
ဝှက်ထားသည်။
မျက်နှာပြင်အရွယ်အစားပေါ်မူတည်၍ အစိတ်အပိုင်းများကို ဝှက်ပါ-
ဥပမာ
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>
ရလဒ်:
Example
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.
v3.2.0 အရ၊ CSS
ပိုင်ဆိုင်မှုတန်ဖိုး .visible-*-*
တစ်ခုစီအတွက် တစ်မျိုးသည် ပုံစံသုံးမျိုး ဖြင့် ထွက်လာသည်-display
အတန်းအုပ်စု | CSS ပြသမှု |
---|---|
မြင်နိုင်သည်-*-ဘလောက် | display: ပိတ်ဆို့; |
.visible-*-inline | ပြသမှု- inline; |
.visible-*-inline-block | ပြသမှု- inline-block; |
ဥပမာ- သေးငယ်သော sm
ဖန်သားပြင်များအတွက်၊ ရရှိနိုင်သော .visible-*-*
အတန်းများမှာ- .visible-sm-block
, .visible-sm-inline
, နှင့် .visible-sm-inline-block
.
အတန်းများကို .visible-xs
, .visible-sm
, .visible-md
, နှင့် v3.2.0 တွင် ငြင်းပယ်.visible-lg
ထားသည် ။
ဥပမာ
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>
ရလဒ်:
Example
Resize this page to see how the text below changes: