CSS
ကမ္ဘာလုံးဆိုင်ရာ CSS ဆက်တင်များ၊ အခြေခံ HTML ဒြပ်စင်များကို ပုံစံထုတ်ပြီး တိုးချဲ့နိုင်သော အတန်းများနှင့် အဆင့်မြှင့်တင်ထားသော ဇယားကွက်များ။
ကမ္ဘာလုံးဆိုင်ရာ CSS ဆက်တင်များ၊ အခြေခံ HTML ဒြပ်စင်များကို ပုံစံထုတ်ပြီး တိုးချဲ့နိုင်သော အတန်းများနှင့် အဆင့်မြှင့်တင်ထားသော ဇယားကွက်များ။
ပိုကောင်း၊ ပိုမြန်၊ ပိုအားကောင်းတဲ့ ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုအတွက် ကျွန်ုပ်တို့၏ချဉ်းကပ်မှုအပါအဝင် Bootstrap ၏ အဓိကကျသော အစိတ်အပိုင်းများကို လျှော့ချလိုက်ပါ။
Bootstrap သည် HTML5 doctype ကိုအသုံးပြုရန်လိုအပ်သော အချို့သော HTML ဒြပ်စင်များနှင့် CSS ဂုဏ်သတ္တိများကို အသုံးပြုသည်။ သင့်ပရောဂျက်အားလုံး၏အစတွင် ၎င်းကို ထည့်သွင်းပါ။
<!DOCTYPE html>
<html lang="en">
...
</html>
Bootstrap 2 ဖြင့်၊ ကျွန်ုပ်တို့သည် မူဘောင်၏ အဓိကရှုထောင့်များအတွက် ရွေးချယ်နိုင်သော မိုဘိုင်းဖော်ရွေသောစတိုင်များကို ထည့်သွင်းထားပါသည်။ Bootstrap 3 ဖြင့်၊ ကျွန်ုပ်တို့သည် အစကတည်းက မိုဘိုင်းနှင့် အဆင်ပြေစေရန် ပရောဂျက်ကို ပြန်လည်ရေးသားထားပါသည်။ ရွေးချယ်နိုင်သော မိုဘိုင်းစတိုင်များကို ထည့်သွင်းမည့်အစား ၎င်းတို့ကို အူတိုင်တွင် ချက်ခြင်းဖုတ်ထားသည်။ တကယ်တော့ Bootstrap သည် မိုဘိုင်းလ်၏ ပထမဆုံး ဖြစ်သည်။ သီးခြားဖိုင်များအစား မိုဘိုင်းလ်ပထမပုံစံများကို စာကြည့်တိုက်တစ်ခုလုံးတွင် တွေ့နိုင်သည်။
သင့်လျော်သော rendering နှင့် touch zoom ကို သေချာစေရန်၊ viewport meta tag ကို သင်၏ <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
user-scalable=no
viewport မက်တာတက်ဂ်သို့ ထည့်သွင်းခြင်းဖြင့် မိုဘိုင်းစက်ပစ္စည်းများတွင် ဇမ်ချဲ့ခြင်းစွမ်းရည်ကို သင်ပိတ်နိုင်သည် ။ ၎င်းသည် ဇူးမ်ဆွဲခြင်းကို ပိတ်သည်၊ ဆိုလိုသည်မှာ အသုံးပြုသူများသည် လှိမ့်နိုင်ရုံသာ ရှိပြီး သင့်ဆိုဒ်သည် မူရင်းအက်ပ်နှင့် အနည်းငယ် ပိုတူသည်ဟု ခံစားရစေသည်။ ယေဘုယျအားဖြင့်၊ ကျွန်ုပ်တို့သည် ၎င်းကို ဝဘ်ဆိုက်တိုင်းတွင် မအကြံပြုထားသောကြောင့် သတိထားပါ။
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap သည် အခြေခံ ကမ္ဘာလုံးဆိုင်ရာ ပြသမှု၊ စာစီစာရိုက်နှင့် လင့်ခ်ပုံစံများကို သတ်မှတ်ပေးသည်။ အတိအကျအားဖြင့်၊ ကျွန်ုပ်တို့:
background-color: #fff;
ပေါ်တွင် သတ်မှတ်body
@font-family-base
, @font-size-base
, နှင့် အရည်အချင်းများ ကို အသုံးပြုပါ။@line-height-base
@link-color
လင့်ခ်မျဉ်းကြောင်းများကိုသာ ဖွင့်ပါ။:hover
ဤပုံစံများကို အထဲမှာ တွေ့နိုင်သည် scaffolding.less
။
ပိုမိုကောင်းမွန်သော ဘရောက်ဆာဖြတ်ကျော်တင်ဆက်မှုအတွက်၊ Nicolas Gallagher နှင့် Jonathan Neal တို့၏ ပရောဂျက်ဖြစ်သော Normalize.css ကို အသုံးပြု ပါသည်။
ဆိုက်အကြောင်းအရာများကို ခြုံငုံပြီး ကျွန်ုပ်တို့၏ဇယားကွက်စနစ်ကို တည်ဆောက်ရန်အတွက် Bootstrap ပါဝင်သော ဒြပ်စင်တစ်ခု လိုအပ်သည်။ သင့်ပရောဂျက်များတွင် အသုံးပြုရန် ကွန်တိန်နာ နှစ်ခုထဲမှ တစ်ခုကို သင်ရွေးချယ်နိုင်ပါသည်။ padding
ကွန်တိန်နာနှစ်ခုလုံးသည် အသိုက်အမြုံမဟုတ်ကြောင်း သတိပြုပါ ။
.container
တုံ့ပြန်မှုပုံသေ အကျယ်ကွန်တိန်နာအတွက် အသုံးပြု ပါ။
<div class="container">
...
</div>
.container-fluid
သင့်မြင်ကွင်းပို့တ်၏ အကျယ်အဝန်းတစ်ခုလုံးကို အကျယ်ချဲ့သည့် ကွန်တိန်နာတစ်ခုအတွက် အသုံးပြု ပါ။
<div class="container-fluid">
...
</div>
Bootstrap တွင် စက် သို့မဟုတ် မြင်ကွင်းပို့ အရွယ်အစား တိုးလာသည်နှင့်အမျှ ကော်လံ 12 ခုအထိ သင့်လျော်စွာ ချိန်ညှိပေးသည့် တုံ့ပြန်မှုရှိသော၊ မိုဘိုင်းပထမအရည်ဇယားစနစ် ပါဝင်သည်။ ၎င်းတွင် လွယ်ကူသော အပြင်အဆင်ရွေးချယ်မှုများအတွက် ကြိုတင်သတ်မှတ်ထားသော အတန်းများ အပြင် ပိုမို semantic layout များကို ဖန်တီးရန်အတွက် အစွမ်းထက်သော mixins များ ပါဝင်သည်။
ဇယားကွက်စနစ်များကို သင့်အကြောင်းအရာကို စုစည်းထားသော အတန်းများနှင့် ကော်လံများမှတစ်ဆင့် စာမျက်နှာအပြင်အဆင်များ ဖန်တီးရန်အတွက် အသုံးပြုပါသည်။ ဤသည်မှာ Bootstrap grid စနစ် အလုပ်လုပ်ပုံဖြစ်သည် ။
.container
(ပုံသေ-အကျယ်) သို့မဟုတ် (အပြည့်-အကျယ်) အတွင်း အတန်းများကို ထားရှိရမည် ။.container-fluid
.row
များကို ရရှိနိုင်ပါသည်။ .col-xs-4
ပိုနည်းသော အဓိပ္ပါယ်ဖွင့်ဆိုချက်များအတွက် ရောစပ်နည်းကိုလည်း သုံးနိုင်သည်။padding
။ .row
ထို padding ကို s ပေါ်ရှိ negative margin မှတစ်ဆင့် ပထမနှင့် နောက်ဆုံးကော်လံအတွက် အတန်းများတွင် offset လုပ်ထားသည် ။.col-xs-4
။.col-md-*
အတန်းတစ်တန်းမရှိပါက ဒြပ်စင်တစ်ခုသို့ အသုံးချခြင်းသည် အလတ်စားစက်ပစ္စည်းများတွင် ၎င်း၏ပုံစံကိုသာမက ကြီးမားသောစက်ပစ္စည်းများတွင်ပါ သက်ရောက်မှု .col-lg-*
ရှိမည်ဖြစ်သည်။သင့်ကုဒ်တွင် ဤအခြေခံမူများကို အသုံးချခြင်းအတွက် နမူနာများကိုကြည့်ပါ။
ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ဇယားကွက်စနစ်ရှိ သော့ခတ်ဖြတ်တောက်မှုများကို ဖန်တီးရန် ကျွန်ုပ်တို့၏နည်းဖိုင်များတွင် အောက်ဖော်ပြပါမီဒီယာမေးမြန်းချက်များကို အသုံးပြုပါသည်။
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
max-width
CSS ကို ပိုမိုကျဉ်းမြောင်းသော စက်ကိရိယာအစုံတွင် ကန့်သတ်ရန် CSS ကို ထည့်သွင်းရန် ဤမီဒီယာမေးမြန်းချက်များကို အခါအားလျော်စွာ ချဲ့ထွင် ပါသည်။
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Bootstrap grid စနစ်၏ ရှုထောင့်များသည် အဆင်ပြေသောဇယားဖြင့် စက်များစွာတွင် မည်သို့အလုပ်လုပ်သည်ကို ကြည့်ပါ။
အပိုပစ္စည်းအသေးစား ဖုန်းများ (<768px) | သေးငယ်သော စက်ပစ္စည်းများ တက်ဘလက်များ (≥768px) | အလတ်စား စက်များ ဒက်စ်တော့များ (≥992px) | ကြီးမားသော စက် ဒက်စ်တော့များ (≥1200px) | |
---|---|---|---|---|
ဇယားကွက် အပြုအမူ | အချိန်တိုင်း အလျားလိုက် | စတင်ရန်၊ ခွဲမှတ်များအထက် ရေပြင်ညီကို ခေါက်ထားသည်။ | ||
ကွန်တိန်နာအကျယ် | မရှိ (အလိုအလျောက်) | 750px | 970px | 1170px |
အတန်းရှေ့ဆက် | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
ကော်လံ # ခု | ၁၂ | |||
ကော်လံအကျယ် | အော်တို | ~62px | ~81px | ~97px |
ရေမြောင်းအကျယ် | 30px (ကော်လံတစ်ခု၏တစ်ဖက်စီတွင် 15px) | |||
အသိုက်အမြုံ | ဟုတ်ကဲ့ | |||
အော့ | ဟုတ်ကဲ့ | |||
ကော်လံအော်ဒါမှာတယ်။ | ဟုတ်ကဲ့ |
ဂရစ်အမျိုးအစား အစုံလိုက်များကို အသုံးပြုခြင်းဖြင့် .col-md-*
၊ သင်သည် desktop (အလယ်အလတ်) စက်ပစ္စည်းများပေါ်တွင် အလျားလိုက်မဖြစ်မီ မိုဘိုင်းစက်ပစ္စည်းများနှင့် တက်ဘလက်ကိရိယာများ (အပိုအသေးမှအသေးအကွာအဝေး) တွင် စတန့်တင်ထားသော အခြေခံဂရစ်စနစ်တစ်ခုကို ဖန်တီးနိုင်သည်။ ဇယားကွက်ကော်လံများကို မည်သည့်နေရာတွင်မဆိုထားပါ .row
။
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
.container
သင်၏ အပြင်ဘက်စွန်း မှ အနံကို ပြောင်းခြင်းဖြင့် ပုံသေဂရစ်ကွက်အပြင်အဆင်ကို အကျယ်အဝန်းအဖြစ်သို့ ပြောင်းပါ .container-fluid
။
<div class="container-fluid">
<div class="row">
...
</div>
</div>
သင့်ကော်လံများကို သေးငယ်သော စက်များတွင် တွဲမတင်စေချင်ဘူးလား။ .col-xs-*
.col-md-*
သင့်ကော်လံများသို့ ထည့်ခြင်းဖြင့် အပိုအသေးနှင့် အလတ်စား စက်ဂရစ်အတန်းများကို အသုံးပြုပါ ။ အားလုံးဘယ်လိုအလုပ်လုပ်လဲဆိုတာကို ပိုကောင်းတဲ့စိတ်ကူးအတွက် အောက်က ဥပမာကို ကြည့်ပါ။
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
.col-sm-*
တက်ဘလက် အတန်းအစား များနှင့်အတူ ပိုမိုတက်ကြွပြီး အားကောင်းသည့် အပြင်အဆင်များကို ဖန်တီးခြင်းဖြင့် ယခင်နမူနာကို တည်ဆောက်ပါ ။
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
အတန်းတစ်ခုတွင် ကော်လံ 12 ခုထက်ပိုထားပါက၊ အပိုကော်လံအုပ်စုတစ်ခုစီသည် ယူနစ်တစ်ခုအနေဖြင့် လိုင်းအသစ်တစ်ခုသို့ ထုပ်ပိုးမည်ဖြစ်သည်။
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
ရရှိနိုင်သည့် ဂရစ်လေးဆင့်ဖြင့်၊ အချို့သော breakpoints များတွင် သင့်ကော်လံများသည် အခြားတစ်ခုထက် ပိုမြင့်သောကြောင့် ပြဿနာများကို ရှင်းမပြနိုင်တော့ပါ။ .clearfix
၎င်းကိုဖြေရှင်းရန် a နှင့် ကျွန်ုပ်တို့၏တုံ့ပြန်မှုဆိုင်ရာအသုံးဝင်သောအတန်းများကို ပေါင်းစပ်အသုံးပြုပါ ။
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
တုံ့ပြန်မှုခွဲထွက်နေရာများတွင် ကော်လံရှင်းလင်းခြင်းအပြင်၊ သင်သည် အော့ဖ်ဆက်များ၊ တွန်းပို့မှုများ သို့မဟုတ် ဆွဲယူမှုများကို ပြန်လည်သတ်မှတ်ရန် လိုအပ်နိုင်သည် ။ ဇယားကွက်နမူနာ တွင် ဤလုပ်ဆောင်ချက်ကို ကြည့်ပါ ။
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
.col-md-offset-*
အတန်း များကို အသုံးပြု၍ ကော်လံများကို ညာဘက်သို့ ရွှေ့ပါ ။ ဤအတန်းများသည် ကော်လံတစ်ခု၏ ဘယ်ဘက်အနားသတ်ကို *
ကော်လံများအလိုက် တိုးစေသည်။ ဥပမာ၊ ကော်လံလေးခုကို .col-md-offset-4
ရွှေ့ ပါ။.col-md-4
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
.col-*-offset-0
အတန်းများ နှင့်အတူ အောက်ဆုံးဇယားကွက်အဆင့်များမှ အော့ဖ်ဆက်များကို ထပ်ရေးနိုင်သည် ။
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>
သင့်အကြောင်းအရာကို မူရင်းဇယားကွက်ဖြင့် စုစည်းရန်၊ ရှိပြီးသား ကော်လံတစ်ခုအတွင်း ကော်လံ အသစ် .row
နှင့် ကော်လံအစုံကို ပေါင်းထည့်ပါ ။ Nested အတန်းများတွင် 12 သို့မဟုတ် ထို့ထက်နည်းသော ကော်လံများ ပေါင်းထည့်သင့်သည် (သင်ရရှိနိုင်သည့် ကော်လံ 12 ခုလုံးကို အသုံးပြုရန် မလိုအပ်ပါ)။.col-sm-*
.col-sm-*
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
ကျွန်ုပ်တို့၏ Built-in ဇယားကွက်ကော်လံများ၏ အစီစဥ်ကို ပြုပြင်မွမ်းမံသည့်အတန်းများဖြင့် အလွယ်တကူ ပြောင်းလဲ .col-md-push-*
ပါ .col-md-pull-*
။
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
လျင်မြန်သော အပြင်အဆင်များအတွက် ကြိုတင် တည်ဆောက်ထားသော ဂရစ်အတန်း များ အပြင် ၊ Bootstrap တွင် သင့်ကိုယ်ပိုင်ရိုးရှင်းပြီး အဓိပ္ပါယ်ရှိသော အပြင်အဆင်များကို လျင်မြန်စွာထုတ်ပေးနိုင်စေရန်အတွက် ကိန်းရှင်များနည်းပါးခြင်းနှင့် ရောနှောပါဝင်ပါသည်။
ကိန်းရှင်များသည် ကော်လံအရေအတွက်၊ ရေမြောင်းအကျယ်နှင့် ပေါ်နေသောကော်လံများကို စတင်မည့် မီဒီယာမေးမြန်းမှုအမှတ်ကို ဆုံးဖြတ်သည်။ အထက်တွင်ဖော်ပြထားသော ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများအပြင် အောက်တွင်ဖော်ပြထားသော စိတ်ကြိုက် mixins အတွက် ၎င်းတို့ကို ကျွန်ုပ်တို့အသုံးပြုပါသည်။
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
Mixin ကို ဂရစ်ကော်လံတစ်ခုစီအတွက် semantic CSS ကိုထုတ်လုပ်ရန်အတွက် grid variable များနှင့် တွဲဖက်အသုံးပြုပါသည်။
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
သင်သည် ကိန်းရှင်များကို သင့်စိတ်ကြိုက်တန်ဖိုးများသို့ မွမ်းမံပြင်ဆင်နိုင်သည်၊ သို့မဟုတ် ၎င်းတို့၏မူလတန်ဖိုးများဖြင့် ရောစပ်ထားသော မင်များကိုသာ အသုံးပြုနိုင်သည်။ ဤသည်မှာ ကော်လံနှစ်ခုကြားရှိ ကွက်လပ်တစ်ခု ဖန်တီးရန် ပုံသေဆက်တင်များကို အသုံးပြုခြင်း၏ ဥပမာတစ်ခုဖြစ်သည်။
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
HTML ခေါင်းစဉ်များအားလုံး၊ <h1>
မှတဆင့် <h6>
ရနိုင်ပါသည်။ .h1
ခေါင်းစဉ်တစ်ခု၏ ဖောင့်ပုံစံနှင့် ကိုက်ညီလိုသော်လည်း သင်၏စာသားကို လိုင်းတွင်ပြသနေလိုသည့်အခါ အတန်းများ မှတစ်ဆင့် .h6
လည်း ရရှိနိုင်ပါသည်။
h1။ Bootstrap ခေါင်းစဉ် |
ပုံတူ 36px |
h2။ Bootstrap ခေါင်းစဉ် |
ပုံတူ 30px |
h3။ Bootstrap ခေါင်းစဉ် |
ပုံတူ 24px |
h4။ Bootstrap ခေါင်းစဉ် |
ပုံတူ 18px |
h5။ Bootstrap ခေါင်းစဉ် |
ပုံတူ 14px |
h6။ Bootstrap ခေါင်းစဉ် |
ပုံတူ 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<small>
ယေဘူယျ တက်ဂ် သို့မဟုတ် .small
အတန်းအစား ခေါင်းစဉ်တစ်ခုခုတွင် ပေါ့ပါးသော ဒုတိယစာသားကို ဖန်တီးပါ ။
h1။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား |
h2။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား |
h3။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား |
h4။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား |
h5။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား |
h6။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
Bootstrap ၏ global default font-size
သည် 14px ဖြစ်ပြီး 1.428line-height
ဖြစ်သည် ။ ၎င်းသည် စာပိုဒ်အားလုံးနှင့် သက်ဆိုင်သည်။ ထို့အပြင်၊ (စာပိုဒ်များ) သည် ၎င်းတို့၏ တွက်ချက်ထားသော မျဉ်းကြောင်း-အမြင့် (ပုံမှန်အားဖြင့် 10px) ထက်ဝက်၏ အောက်ခြေအနားသတ်ကို ရရှိသည်။<body>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula။
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla Duis mollis၊ est non commodo luctus၊ nisi erat porttitor ligula၊ eget lacinia odio sem nec elit။ Donec ullamcorper nulla non metus auctor fringilla
Maecenas sed diam eget risus varius blandit ထိုင်နေတဲ့ မမက်မနာ။ Donec id elit non mi porta gravida at eget metus Duis mollis၊ est non commodo luctus၊ nisi erat porttitor ligula၊ eget lacinia odio sem nec elit။
<p>...</p>
ပေါင်းထည့်ခြင်းဖြင့် စာပိုဒ်ကို ထင်ရှားအောင်ပြုလုပ်ပါ .lead
။
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor ။ Duis mollis, est non commodo luctus။
<p class="lead">...</p>
စာစီစာရိုက်စကေးသည် variables.less ရှိ Less variable နှစ်ခု @font-size-base
အပေါ် အခြေခံထားသည် @line-height-base
။ ပထမတစ်ခုသည် တစ်လျှောက်လုံးအသုံးပြုသည့် အခြေခံဖောင့်အရွယ်အစားဖြစ်ပြီး ဒုတိယမှာ အခြေခံမျဉ်းအမြင့်ဖြစ်သည်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့အမျိုးအစားအားလုံးနှင့် အခြားအရာအားလုံး၏အနားသတ်များ၊ အကွက်များနှင့် မျဉ်းကြောင်းအမြင့်များကို ဖန်တီးရန်အတွက် အဆိုပါကိန်းရှင်များနှင့် ရိုးရှင်းသောသင်္ချာအချို့ကို ကျွန်ုပ်တို့အသုံးပြုပါသည်။ ၎င်းတို့ကို စိတ်ကြိုက်ပြင်ဆင်ပြီး Bootstrap ကို လိုက်လျောညီထွေဖြစ်အောင် ပြုလုပ်ပါ။
အခြားအကြောင်းအရာတစ်ခုတွင် ၎င်း၏ဆက်စပ်မှုကြောင့် စာသားတစ်ခုအား မီးမောင်းထိုးပြရန်အတွက် <mark>
tag ကို အသုံးပြုပါ။
mark tag ကိုသုံးလို့ရပါတယ်။မီးမောင်းထိုးပြစာသား
You can use the mark tag to <mark>highlight</mark> text.
ဖျက်လိုက်သော စာသားတုံးများကို ညွှန်ပြရန်အတွက် <del>
tag ကို အသုံးပြုပါ။
ဤစာကြောင်းကို ဖျက်ထားသော စာသားအဖြစ် သတ်မှတ်ရန် ရည်ရွယ်သည်။
<del>This line of text is meant to be treated as deleted text.</del>
မသက်ဆိုင်တော့သော စာသားတုံးများကို ညွှန်ပြရန်အတွက် <s>
tag ကို အသုံးပြုပါ။
ဤစာကြောင်းကို မတိကျတော့ဟု ယူဆရန် ရည်ရွယ်သည်။
<s>This line of text is meant to be treated as no longer accurate.</s>
စာရွက်စာတမ်းတွင် ဖြည့်စွက်ချက်များကို ညွှန်ပြရန်အတွက် <ins>
tag ကို အသုံးပြုပါ။
ဤစာကြောင်းကို စာရွက်စာတမ်း၏ ထပ်လောင်းတစ်ခုအဖြစ် မှတ်ယူရန် ရည်ရွယ်သည်။
<ins>This line of text is meant to be treated as an addition to the document.</ins>
စာသားကိုမျဉ်းသားရန် <u>
tag ကိုသုံးပါ။
ဤစာသားမျဉ်းသည် မျဉ်းသားထားသည့်အတိုင်း ပြန်ဆိုပါမည်။
<u>This line of text will render as underlined</u>
ပေါ့ပါးသောစတိုင်များဖြင့် HTML ၏ မူရင်းအလေးပေးတဂ်များကို အသုံးပြုပါ။
အတွင်းလိုင်း သို့မဟုတ် စာသားများကို အလေးပေးမှု <small>
လျှော့ချရန်အတွက်၊ မိဘအရွယ်အစား 85% တွင် စာသားကို သတ်မှတ်ရန် တဂ်ကို အသုံးပြုပါ။ font-size
ခေါင်းစီးဒြပ်စင်များသည် nested ဒြပ်စင်များအတွက် ၎င်းတို့ကိုယ်တိုင် ရရှိသည် <small>
။
. _ .small
_<small>
ဤစာကြောင်းကို အကောင်းမွန်ဆုံး ပုံနှိပ်စာအဖြစ် သတ်မှတ်ရန် ရည်ရွယ်သည်။
<small>This line of text is meant to be treated as fine print.</small>
ပိုလေးသော ဖောင့်အလေးချိန်ဖြင့် စာသားအတိုအထွာကို အလေးထားရန်။
အောက်ပါစာသားအတိုအထွာ ကို ရဲရင့်သောစာသားအဖြစ် ပြန်ဆိုထားသည် ။
<strong>rendered as bold text</strong>
စာလုံးစောင်းဖြင့် စာသားအတိုအထွာကို အလေးထားရန်။
အောက်ပါ စာသား အတိုအထွာကို စာလုံးစောင်းဖြင့် စာသားအဖြစ် ပြန်ဆိုထားသည် ။
<em>rendered as italicized text</em>
HTML5 တွင် <b>
လွတ်လပ်စွာ အသုံးပြုနိုင် သည်။ အများအားဖြင့် အသံ၊ နည်းပညာဆိုင်ရာ အသုံးအနှုန်းများ စသည်ဖြင့် အ ပိုအရေးပါမှုကို မဖော်ပြဘဲ စကားလုံးများ သို့မဟုတ် စကားစုများကို မီးမောင်းထိုးပြရန် ရည်ရွယ်သည် ။<i>
<b>
<i>
စာသား ချိန်ညှိမှု အတန်းများ ဖြင့် စာသားကို အစိတ်အပိုင်းများသို့ အလွယ်တကူ ပြန်ညှိပါ။
ဘယ်သို့ ညှိထားသော စာသား။
အလယ်ညှိထားသော စာသား။
ညာဘက်ညှိထားသော စာသား။
ကုသိုလ်စာသား။
စာသားကို ခြုံထားခြင်းမရှိပါ။
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
စာသားအရင်းအနှီးအတန်းများဖြင့် အစိတ်အပိုင်းများတွင် စာသားကို ပြောင်းပါ။
စာလုံးအသေး။
စာလုံးအကြီး။
စာလုံးအကြီး
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<abbr>
အတိုကောက်များနှင့် အတိုကောက်များ အတွက် တိုးချဲ့ထားသော ဗားရှင်းကို အပေါ်မှချပြရန် HTML ၏ အစိတ်အပိုင်းကို ပုံစံကျကျ အကောင်အထည်ဖော်ခြင်း ။ ရည်ညွှန်းချက်ပါ သော အတိုကောက် title
များသည် အောက်ခြေအစက်အပြောက်ရှိသော အလင်းတန်းနှင့် အပေါ်သို့တက်ခြင်းတွင် အကူအညီကာဆာတစ်ခု ပါရှိပြီး၊ hover တွင် ထပ်လောင်းအကြောင်းအရာနှင့် အကူအညီနည်းပညာအသုံးပြုသူများကို ပံ့ပိုးပေးပါသည်။
စကားလုံး attribute ၏ အတိုကောက်သည် attr ဖြစ်သည်။
<abbr title="attribute">attr</abbr>
.initialism
အနည်းငယ်သေးငယ်သော ဖောင့်အရွယ်အစားအတွက် အတိုကောက်တစ်ခုသို့ ထည့်ပါ ။
HTML သည် ပေါင်မုန့်လှီးပြီးကတည်းက အကောင်းဆုံးဖြစ်သည်။
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
အနီးဆုံးဘိုးဘေး သို့မဟုတ် လုပ်ငန်းတစ်ခုလုံးအတွက် ဆက်သွယ်ရန်အချက်အလက်ကို တင်ပြပါ။ စာကြောင်းအားလုံးကို အဆုံးသတ်ခြင်းဖြင့် ဖော်မတ်ချခြင်းကို ထိန်းသိမ်းပါ <br>
။
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
သင့်စာရွက်စာတမ်းအတွင်းရှိ အခြားရင်းမြစ်များမှ အကြောင်းအရာတုံးများကို ကိုးကားခြင်း။
ကိုးကားချက်အဖြစ် မည်သည့် HTML ကိုမဆို <blockquote>
ဝိုင်း ဖွဲ့ပါ။ ဖြောင့်စင်းသောကိုးကားချက်များအတွက်၊ ကျွန်ုပ်တို့သည် အကြံပြုထားသည် ။<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ Integer posuere သည် ante တစ်ခုဖြစ်သည်။
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
စံတစ်ခုပေါ်ရှိ ရိုးရှင်းသော ပြောင်းလဲမှုများအတွက် စတိုင်နှင့် အကြောင်းအရာ အပြောင်းအလဲများ <blockquote>
။
<footer>
အရင်းအမြစ်ကို ဖော်ထုတ်ရန်အတွက် a ထည့်ပါ ။ အရင်းအမြစ်အလုပ်၏အမည်ကို ထုပ်ပိုးပါ <cite>
။
Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ Integer posuere သည် ante တစ်ခုဖြစ်သည်။
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
.blockquote-reverse
ညာဖက်ညှိထားသော အကြောင်းအရာဖြင့် blockquote တစ်ခုအတွက် ထည့် ပါ။
<blockquote class="blockquote-reverse">
...
</blockquote>
အမှာစာ သည် အထူးတလည် အရေးမပါသော ပစ္စည်းစာရင်း ။
<ul>
<li>...</li>
</ul>
အမှာ စာသည် အတိအလင်း အရေးပါ သည့် အရာများစာရင်း ။
<ol>
<li>...</li>
</ol>
list-style
စာရင်းအကြောင်းအရာများပေါ်ရှိ ပုံသေနှင့် ဘယ်ဘက်အနားသတ်ကို ဖယ်ရှား ပါ (ချက်ချင်းကလေးများသာ)။ ၎င်းသည် လက်ငင်းကလေးများစာရင်းဝင်သည့်အရာများနှင့်သာ သက်ဆိုင်သည် ၊ ဆိုလိုသည်မှာ သင်သည် မည်သည့် nested lists အတွက်မဆို အတန်းကို ထည့်ရန်လိုအပ်ပါသည်။
<ul class="list-unstyled">
<li>...</li>
</ul>
စာရင်းအရာအားလုံးကို မျဉ်းတစ်ကြောင်းတည်း display: inline-block;
နှင့် အလင်းအဖုံးအချို့ဖြင့် ထားလိုက်ပါ။
<ul class="list-inline">
<li>...</li>
</ul>
၎င်းတို့၏ ဆက်စပ်ဖော်ပြချက်များနှင့် ဝေါဟာရများစာရင်း။
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
စည်းကမ်းချက်များနှင့် ဖော်ပြချက်များကို <dl>
ဘေးချင်းကပ်လျက် တန်းစီပါ။ default s ကဲ့သို့ stacked မှစတင်သည် <dl>
, သို့သော် navbar ကိုချဲ့ထွင်သောအခါ, ထိုသို့လုပ်ပါ။
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
အလျားလိုက်ဖော်ပြချက်စာရင်းများသည် ဘယ်ဘက်ကော်လံတွင် လိုက်ဖက်ရန် ရှည်လွန်းသော ဝေါဟာရများကို ဖြတ်တောက်ပေးပါမည် text-overflow
။ ပိုကျဉ်းသော viewports များတွင်၊ ၎င်းတို့သည် ပုံသေ stacked layout သို့ ပြောင်းလဲသွားပါမည်။
ကုဒ်အတိုအထွာများကို အတွင်းလိုင်းအတိုအထွာများဖြင့် ခြုံပါ <code>
။
<section>
inline အဖြစ်ထုပ်ပိုးသင့်သည်။
For example, <code><section></code> should be wrapped as inline.
<kbd>
ပုံမှန်အားဖြင့် ကီးဘုတ်မှတစ်ဆင့် ထည့်သွင်းသည့် ထည့်သွင်းမှုကို ညွှန်ပြရန်အတွက် အသုံးပြုပါ ။
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<pre>
ကုဒ်လိုင်းများစွာအတွက် အသုံးပြု ပါ။ မှန်ကန်သော rendering အတွက် ကုဒ်ရှိ မည်သည့်ထောင့်ကွင်းစကွက်မှ လွတ်မြောက်ရန် သေချာပါစေ။
<p>ဤနေရာတွင် နမူနာစာသား...</p>
<pre><p>Sample text here...</p></pre>
စိတ်ကြိုက်ထည့်နိုင်သည်။.pre-scrollable
အမြင့်ဆုံး-အမြင့် 350px သတ်မှတ်ပြီး y-ဝင်ရိုး scrollbar ကို ပံ့ပိုးပေးမည့် အတန်း
ကိန်းရှင်များကိုညွှန်ပြရန်အတွက် <var>
tag ကိုသုံးပါ။
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ပရိုဂရမ်တစ်ခုမှ ဘလောက်နမူနာအထွက်ကို ညွှန်ပြရန်အတွက် <samp>
tag ကို အသုံးပြုပါ။
ဤစာသားကို ကွန်ပြူတာပရိုဂရမ်တစ်ခုမှ နမူနာထွက်ရှိမှုအဖြစ် သတ်မှတ်ရန် ရည်ရွယ်သည်။
<samp>This text is meant to be treated as sample output from a computer program.</samp>
အခြေခံပုံစံပုံစံအတွက်—အပေါ့စားအကွက်များနှင့် အလျားလိုက်ပိုင်းခြားမှုများကိုသာ—အခြေခံအတန်းအစား .table
ကို မည်သည့်အတွက်မဆို ထည့်ပါ <table>
။ ၎င်းသည် အလွန်မလိုအပ်ဟုထင်ရသော်လည်း ပြက္ခဒိန်များနှင့် ရက်စွဲရွေးချယ်သူများကဲ့သို့သော အခြားပလပ်အင်များအတွက် ဇယားများကို ကျယ်ကျယ်ပြန့်ပြန့်အသုံးပြုခြင်းကြောင့် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏စိတ်ကြိုက်ဇယားပုံစံများကို သီးခြားခွဲထုတ်ရန် ရွေးချယ်ထားပါသည်။
# | နာမည် | မျိုးနွယ်အမည် | အသုံးပြုသူအမည် |
---|---|---|---|
၁ | မှတ်သားပါ။ | အော့တို | @mdo |
၂ | ယာကုပ် | Thornton | @ဖြိုး |
၃ | လာရီ | ငှက် |
<table class="table">
...
</table>
. . .table-striped
_<tbody>
အစင်းကြောင်းဇယားများကို :nth-child
Internet Explorer 8 တွင်မရရှိနိုင်သော CSS ရွေးချယ်မှုမှတစ်ဆင့် ပုံစံပြုလုပ်ထားသည်။
# | နာမည် | မျိုးနွယ်အမည် | အသုံးပြုသူအမည် |
---|---|---|---|
၁ | မှတ်သားပါ။ | အော့တို | @mdo |
၂ | ယာကုပ် | Thornton | @ဖြိုး |
၃ | လာရီ | ငှက် |
<table class="table table-striped">
...
</table>
.table-bordered
ဇယားနှင့် ဆဲလ်များ၏ အစွန်းနှစ်ဖက်ရှိ ဘောင်များအတွက် ထည့်ပါ ။
# | နာမည် | မျိုးနွယ်အမည် | အသုံးပြုသူအမည် |
---|---|---|---|
၁ | မှတ်သားပါ။ | အော့တို | @mdo |
၂ | ယာကုပ် | Thornton | @ဖြိုး |
၃ | လာရီ | ငှက် |
<table class="table table-bordered">
...
</table>
.table-hover
စားပွဲအတန်းများအတွင်း ပျံဝဲနေသော အခြေအနေတစ်ခုကို ဖွင့်ရန် ထည့်ပါ <tbody>
။
# | နာမည် | မျိုးနွယ်အမည် | အသုံးပြုသူအမည် |
---|---|---|---|
၁ | မှတ်သားပါ။ | အော့တို | @mdo |
၂ | ယာကုပ် | Thornton | @ဖြိုး |
၃ | လာရီ | ငှက် |
<table class="table table-hover">
...
</table>
.table-condensed
ဆဲလ်အကွက်များကို တစ်ဝက်ခန့်ဖြတ်ခြင်းဖြင့် ဇယားများကို ပိုမိုကျစ်လစ်စေရန် ပေါင်းထည့်ပါ ။
# | နာမည် | မျိုးနွယ်အမည် | အသုံးပြုသူအမည် |
---|---|---|---|
၁ | မှတ်သားပါ။ | အော့တို | @mdo |
၂ | ယာကုပ် | Thornton | @ဖြိုး |
၃ | လာရီငှက် |
<table class="table table-condensed">
...
</table>
ဇယားအတန်းများ သို့မဟုတ် ဆဲလ်တစ်ခုချင်းစီကို အရောင်ခြယ်ရန် ဆက်စပ်အတန်းများကို အသုံးပြုပါ။
အတန်း | ဖော်ပြချက် |
---|---|
.active |
ဟိုးမားအရောင်ကို သီးခြားအတန်း သို့မဟုတ် ဆဲလ်တစ်ခုသို့ သက်ရောက်သည်။ |
.success |
အောင်မြင်သော သို့မဟုတ် အပြုသဘောဆောင်သော လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။ |
.info |
ကြားနေ သတင်းအချက်အလက် ပြောင်းလဲမှု သို့မဟုတ် လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။ |
.warning |
သတိထားရန် လိုအပ်နိုင်သည့် သတိပေးချက်ကို ညွှန်ပြသည်။ |
.danger |
အန္တရာယ်ရှိသော သို့မဟုတ် အပျက်သဘောဆောင်သော လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။ |
# | ကော်လံခေါင်းစီး | ကော်လံခေါင်းစီး | ကော်လံခေါင်းစီး |
---|---|---|---|
၁ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ |
၂ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ |
၃ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ |
၄ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ |
၅ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ |
၆ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ |
၇ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ |
၈ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ |
၉ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ | ကော်လံ အကြောင်းအရာ |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
ဇယားအတန်းတစ်ခု သို့မဟုတ် ဆဲလ်တစ်ခုစီသို့ အဓိပ္ပာယ်ထည့်ရန် အရောင်ကိုအသုံးပြုခြင်းသည် မျက်နှာပြင်ဖတ်စက်များကဲ့သို့သော အထောက်အကူနည်းပညာများကို အသုံးပြုသူများထံ ပေးပို့မည်မဟုတ်သည့် အမြင်အာရုံညွှန်ပြမှုကိုသာ ပံ့ပိုးပေးပါသည်။ .sr-only
အရောင်ဖြင့် ဖော်ပြထားသော အချက်အလက်များသည် အကြောင်းအရာကိုယ်တိုင်မှ သိသာထင်ရှားသည် (သက်ဆိုင်ရာဇယား အတန်း/ဆဲလ်အတွင်း မြင်နိုင်သော စာသား) သို့မဟုတ် အတန်းထဲတွင် ဝှက်ထားသော ထပ်ဆောင်းစာသားကဲ့သို့သော အခြားနည်းလမ်းများဖြင့် ထည့်သွင်းထားကြောင်း သေချာပါစေ ။
.table
စက်ပစ္စည်းငယ်များ (768px အောက်) ပေါ်တွင် ၎င်းတို့ကို အလျားလိုက် လှိမ့ ် .table-responsive
သွားစေရန် တုံ့ပြန်မှုရှိသောဇယားများကို ဖန်တီး ပါ။ အနံ 768px ထက်ကြီးသော အရာများကို ကြည့်ရှုသောအခါ၊ ဤဇယားများတွင် ခြားနားမှု တစ်စုံတစ်ရာ မတွေ့ရ။
Responsive Tables သည် ဇယား overflow-y: hidden
၏အောက်ခြေ သို့မဟုတ် အပေါ်ဘက်အစွန်းများထက်ကျော်လွန်သွားသည့် မည်သည့်အကြောင်းအရာကိုမဆို ကလစ်ဖြတ်ထားသည့်အရာကို အသုံးပြုသည်။ အထူးသဖြင့်၊ ၎င်းသည် dropdown menus နှင့် အခြားသော third-party widget များကို ဖြတ်တောက်နိုင်သည်။
width
Firefox တွင် တုံ့ပြန်မှုဇယားကို အနှောင့်အယှက်ဖြစ်စေသော အဆင်မပြေသည့်ကွက်လပ်ပုံစံပုံစံအချို့ ရှိသည်။ Bootstrap တွင် ကျွန်ုပ်တို့ မ ပေးထားသော Firefox သီးသန့်ဟက်ကင်းမပါဘဲ ၎င်းကို လွှမ်းမိုးနိုင်မည်မဟုတ်ပါ -
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
ပိုမိုသိရှိလိုပါက၊ ဤ Stack Overflow အဖြေ ကို ဖတ်ရှုပါ ။
# | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် |
---|---|---|---|---|---|---|
၁ | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် |
၂ | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် |
၃ | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် |
# | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် | ဇယားခေါင်းစဉ် |
---|---|---|---|---|---|---|
၁ | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် |
၂ | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် |
၃ | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် | ဇယားဆဲလ် |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
တစ်ဦးချင်း ဖောင်ထိန်းချုပ်မှုများသည် ကမ္ဘာလုံးဆိုင်ရာ ပုံစံအချို့ကို အလိုအလျောက် ရရှိသည်။ စာသား <input>
၊ <textarea>
နှင့် <select>
ဒြပ်စင် .form-control
များအားလုံးကို width: 100%;
မူရင်းအတိုင်း သတ်မှတ်ထားသည်။ .form-group
အသင့်တော်ဆုံးအကွာအဝေးအတွက် အညွှန်းများနှင့် ထိန်းချုပ်မှုများကို ချုပ်ပါ။
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
ဖောင်ပုံစံအုပ်စုများကို ထည့်သွင်းအုပ်စုများ နှင့် တိုက်ရိုက်မရောနှောပါနှင့် ။ ယင်းအစား၊ ဖောင်အဖွဲ့၏ အတွင်းတွင် ထည့်သွင်းသည့်အဖွဲ့ကို အသိုက်ဖွဲ့ပါ။
ဘယ်ဘက်ညှိပြီး လိုင်း-ပိတ်ဆို့ထိန်းချုပ်မှုများအတွက် .form-inline
(တစ်ခုဖြစ်ရန်မလိုပါ) သင့်ဖောင်တွင် ထည့်ပါ ။ ၎င်းသည် အနည်းဆုံး 768px ကျယ်သော viewports အတွင်းရှိ ပုံစံများနှင့်သာ သက်ဆိုင်ပါသည်။<form>
ထည့်သွင်းမှုများနှင့် ရွေးချယ်မှုများကို width: 100%;
Bootstrap တွင် မူရင်းအတိုင်း အသုံးပြုထားသည်။ inline ဖောင် width: auto;
များအတွင်း၊ ထိန်းချုပ်မှုများစွာသည် တူညီသောလိုင်းပေါ်တွင် ရှိနေနိုင်စေရန် ၎င်းကို ပြန်လည်သတ်မှတ်သည်။ သင့်အပြင်အဆင်အပေါ်မူတည်၍ စိတ်ကြိုက်အကျယ်များ ထပ်မံလိုအပ်နိုင်ပါသည်။
ထည့်သွင်းမှုတိုင်းအတွက် အညွှန်းမပါဝင်ပါက စခရင်ဖတ်သူများသည် သင့်ဖောင်များတွင် ပြဿနာရှိလိမ့်မည်။ ဤ inline ပုံစံများအတွက်၊ သင်သည် .sr-only
အတန်းကို အသုံးပြု၍ အညွှန်းများကို ဝှက်ထားနိုင်သည်။ aria-label
, aria-labelledby
သို့မဟုတ် title
attribute ကဲ့သို့သော အထောက်အကူနည်းပညာများအတွက် အညွှန်းကို ပေးဆောင်သည့် နောက်ထပ် အခြားနည်းလမ်းများ ရှိသေးသည် ။ ယင်းတို့အနက်မှတစ်ခုမျှမရှိပါက၊ စခရင်ဖတ်သူများသည် ရည်ညွှန်းချက်ကိုအသုံးပြုရန် အားကိုးအား ထားပြုနိုင်သော်လည်း အခြားတံဆိပ်ကပ်ခြင်းနည်းလမ်းများအတွက် အစားထိုး placeholder
အသုံးပြုခြင်းကို အကြံပြုမည်မဟုတ်ကြောင်း သတိပြုပါ ။placeholder
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
.form-horizontal
ဖောင်ထဲသို့ထည့်ခြင်း ဖြင့် (ပုံစံတစ်ခုဖြစ်ရန်မလိုပါ ) အလျားလိုက်ပုံစံတစ်ခုတွင် အညွှန်းများနှင့် ပုံစံထိန်းချုပ်မှုအုပ်စုများကို ချိန်ညှိရန် Bootstrap ၏ကြိုတင်သတ်မှတ်ထားသောဂရစ်အတန်းများကိုသုံး ပါ <form>
။ ထိုသို့ပြုလုပ်ခြင်း .form-group
ဖြင့် ဇယားကွက်အတန်းများအဖြစ် ပြုမူနေထိုင်ရန် ပြောင်းလဲသွားသောကြောင့် မလိုအပ်ပါ .row
။
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
နမူနာပုံစံ အပြင်အဆင်တွင် ပံ့ပိုးထားသော စံပုံစံထိန်းချုပ်မှု နမူနာများ။
အသုံးအများဆုံးပုံစံထိန်းချုပ်မှု၊ စာသားအခြေခံထည့်သွင်းမှုအကွက်များ။ HTML5 အမျိုးအစားအားလုံးအတွက် ပံ့ပိုးမှုပါဝင်သည်- text
, password
, datetime
, , datetime-local
, date
, month
, , time
, week
, number
, email
, url
, search
, tel
, နှင့် color
.
type
ထည့်သွင်းမှုများကို မှန်ကန်စွာကြေညာ ထားမှ သာ ထည့်သွင်းမှုများကို အပြည့်အဝပုံစံပြုလုပ်မည် ဖြစ်သည်။
<input type="text" class="form-control" placeholder="Text input">
ပေါင်းစပ်ထားသော စာသား သို့မဟုတ် ခလုတ်များ ပေါင်းထည့်ရန် နှင့်/သို့မဟုတ် စာသားအခြေခံတစ်ခုခုပြီးနောက် <input>
၊ ထည့်သွင်းမှုအုပ်စု အစိတ်အပိုင်းကို စစ်ဆေးပါ ။
စာသားမျဉ်းများစွာကို ပံ့ပိုးပေးသည့် ထိန်းချုပ်မှုပုံစံ။ rows
အရည်အချင်းကို လိုအပ်သလို ပြောင်းပါ ။
<textarea class="form-control" rows="3"></textarea>
အမှတ်ခြစ်ကွက်များသည် စာရင်းတစ်ခုအတွင်းရှိ ရွေးချယ်စရာတစ်ခု သို့မဟုတ် အများအပြားကို ရွေးချယ်ရန်အတွက်ဖြစ်ပြီး ရေဒီယိုများသည် ရွေးချယ်စရာများစွာထဲမှ တစ်ခုကို ရွေးချယ်ရန်အတွက်ဖြစ်သည်။
ပိတ်ထားသော အမှန်ခြစ်ပုံးများနှင့် ရေဒီယိုများကို ပံ့ပိုးထားသော်လည်း မိဘ၏အပေါ်သို့ ရွှေ့ထားသော "ခွင့်မပြုသော" ကာဆာကို ပံ့ပိုး ပေးရန်၊ အတန်းအစားကို မိဘ ထံသို့ ပေါင်း ထည့် <label>
ရန် လိုအပ်ပါသည် ။.disabled
.radio
.radio-inline
.checkbox
.checkbox-inline
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
တူညီသောလိုင်းပေါ်ရှိ ထိန်းချုပ်မှုများအတွက် အမှတ်ခြစ်ကွက်များ သို့မဟုတ် ရေဒီယိုများပေါ်တွင် .checkbox-inline
သို့မဟုတ် အတန်းများကို အသုံးပြု ပါ။.radio-inline
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
သင့်တွင် စာသားမရှိပါက <label>
၊ ထည့်သွင်းမှုသည် သင်မျှော်လင့်ထားသည့်အတိုင်း နေရာယူထားသည်။ လောလောဆယ် inline မဟုတ်သော checkbox များနှင့် ရေဒီယိုများတွင်သာ အလုပ်လုပ်ပါသည်။ အထောက်အကူပြုနည်းပညာများအတွက် အညွှန်းပုံစံအချို့ကို ပေးဆောင်ရန် မမေ့ပါနှင့် (ဥပမာ၊ အသုံးပြုခြင်း aria-label
)။
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>
ဇာတိရွေးချယ်မီနူးများစွာ— Safari နှင့် Chrome တွင် ရှိသော— border-radius
ဂုဏ်သတ္တိများမှတစ်ဆင့် ပြုပြင်မွမ်းမံနိုင်သော အဝိုင်းထောင့်များရှိသည်ကို သတိပြုပါ။
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select>
ရည်ညွှန်းချက် ဖြင့် ထိန်းချုပ်မှု များအတွက် multiple
၊ ရွေးချယ်စရာများစွာကို ပုံသေဖြင့် ပြသထားသည်။
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
ဖောင်တစ်ခုအတွင်း ဖောင်အညွှန်းတစ်ခု၏ဘေးတွင် ရိုးရိုးစာသားကိုထည့်ရန် လိုအပ်သောအခါ၊ .form-control-static
အတန်းကို အသုံးပြုပါ <p>
။
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>
outline
ကျွန်ုပ်တို့သည် ပုံစံထိန်းချုပ်မှုအချို့ ရှိ ပုံသေစတိုင်များကို ဖယ်ရှားပြီး box-shadow
၎င်း၏နေရာ၌ ပုံစံတစ်ခုကို အသုံးပြုသည် :focus
။
:focus
ပြည်နယ်အထက်ဖော်ပြပါ ဥပမာထည့်သွင်းမှုသည် :focus
ပြည်နယ်တစ်ခုပေါ်တွင် သရုပ်ပြရန် ကျွန်ုပ်တို့၏စာရွက်စာတမ်းများတွင် စိတ်ကြိုက်စတိုင်များကို အသုံးပြုသည် .form-control
။
disabled
အသုံးပြုသူ အပြန်အလှန်တုံ့ပြန်မှုများကို တားဆီးရန် input တစ်ခုတွင် boolean attribute ကို ထည့်ပါ ။ ပိတ်ထားသော ထည့်သွင်းမှုများသည် ပိုမိုပေါ့ပါးလာပြီး ကာဆာထည့်ပါ not-allowed
။
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
တစ်ပြိုင်နက် အတွင်း ထိန်းချုပ်မှုအားလုံးကို ပိတ်ရန် disabled
attribute ကို a တွင် ထည့်ပါ ။<fieldset>
<fieldset>
<a>
မူရင်းအားဖြင့်၊ ဘရောက်ဆာများသည် မူလပုံစံထိန်းချုပ်မှုများ ( <input>
, <select>
နှင့် <button>
ဒြပ်စင်များ) အားလုံးကို <fieldset disabled>
disabled အဖြစ် လုပ်ဆောင်မည်ဖြစ်ပြီး ၎င်းတို့တွင် ကီးဘုတ်နှင့် မောက်စ် အပြန်အလှန်တုံ့ပြန်မှုများကို တားဆီးပေးမည်ဖြစ်သည်။ သို့သော် သင့်ပုံစံတွင် <a ... class="btn btn-*">
ဒြပ်စင်များပါ၀င်ပါက၊ ၎င်းတို့ကို စတိုင်လ်တစ်ခုသာ ပေးပါမည် pointer-events: none
။ ခလုတ်များအတွက် ပိတ်ထားရသည့် အခြေအနေ အကြောင်း ကဏ္ဍတွင် မှတ်သားထားသည့်အတိုင်း (အထူးသဖြင့် ကျောက်ဆူးဒြပ်စင်များအတွက် အပိုင်းခွဲပိုင်း) တွင် ဤ CSS ပိုင်ဆိုင်မှုသည် စံသတ်မှတ်ထားခြင်းမရှိသေးဘဲ Opera 18 နှင့်အောက်ရှိ သို့မဟုတ် Internet Explorer 11 တွင် အပြည့်အဝ မပံ့ပိုးနိုင်သေးပါ၊ ကီးဘုတ်အသုံးပြုသူများသည် ဤလင့်ခ်များကို အာရုံစိုက်ခြင်း သို့မဟုတ် အသက်သွင်းနိုင်ခြင်းကို တားဆီးခြင်းမပြုပါ။ ထို့ကြောင့် ဘေးကင်းစေရန်၊ ထိုလင့်ခ်များကို ပိတ်ရန် စိတ်ကြိုက် JavaScript ကို အသုံးပြုပါ။
Bootstrap သည် ဘရောက်ဆာအားလုံးတွင် ဤစတိုင်များကို အသုံးပြုမည်ဖြစ်သော်လည်း Internet Explorer 11 နှင့် အောက်ဖော်ပြပါတို့သည် disabled
ရည်ညွှန်းချက်ကို အပြည့်အဝ မပံ့ပိုးနိုင်ပါ <fieldset>
။ ဤဘရောက်ဆာများတွင် အကွက်အစုံကို ပိတ်ရန် စိတ်ကြိုက် JavaScript ကို အသုံးပြုပါ။
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
readonly
input ၏တန်ဖိုးကိုမွမ်းမံခြင်းမှကာကွယ်ရန် input တစ်ခုတွင် boolean attribute ကို ထည့်ပါ ။ ဖတ်ရန်သီးသန့်ထည့်သွင်းမှုများသည် ပိုမိုပေါ့ပါးသည် (ပိတ်ထားသောထည့်သွင်းမှုများကဲ့သို့) ပေါ်လွင်သော်လည်း စံညွှန်းကို ဆက်လက်ထိန်းသိမ်းထားပါ။
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
ဖောင်ထိန်းချုပ်မှုအတွက် အဆင့်အကူအညီစာသားကို ပိတ်ပါ။
အကူအညီစာသားသည် ရည်ညွှန်းချက်အသုံးပြုခြင်းနှင့်သက်ဆိုင်သည့် ပုံစံထိန်းချုပ်မှုဖြင့် ပြတ်သားစွာ ဆက်စပ်နေသင့်သည် aria-describedby
။ အသုံးပြုသူက အာရုံစူးစိုက်မှု သို့မဟုတ် ထိန်းချုပ်မှုထဲသို့ ဝင်ရောက်သည့်အခါ မျက်နှာပြင်ဖတ်သူများကဲ့သို့သော အထောက်အကူပြုနည်းပညာများဖြစ်သည့် ဤအကူအညီစာသားကို ကြေညာမည်ဖြစ်ကြောင်း သေချာစေမည်ဖြစ်သည်။
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
Bootstrap တွင် ဖောင်ထိန်းချုပ်မှုများတွင် အမှားအယွင်း၊ သတိပေးချက်နှင့် အောင်မြင်မှုအခြေအနေများအတွက် တရားဝင်အတည်ပြုခြင်းစတိုင်များ ပါဝင်သည်။ အသုံးပြုရန်၊ .has-warning
, .has-error
, သို့မဟုတ် .has-success
ပင်မဒြပ်စင်သို့ ထည့်ရန်။ မည်သည့် .control-label
, .form-control
, နှင့် .help-block
ထိုဒြပ်စင်အတွင်းမှ အတည်ပြုခြင်းစတိုင်များကို ရရှိပါမည်။
ဖောင်ထိန်းချုပ်မှုအခြေအနေအား ညွှန်ပြရန် ဤတရားဝင်မှုပုံစံများကို အသုံးပြုခြင်းသည် မျက်နှာပြင်ဖတ်သူများ သို့မဟုတ် အရောင်ကန်းသောအသုံးပြုသူများကဲ့သို့ အထောက်အကူနည်းပညာအသုံးပြုသူများထံ ပေးပို့မည်မဟုတ်သည့် အမြင်၊ အရောင်အခြေခံညွှန်ပြချက်တစ်ခုသာ ပေးစွမ်းမည်ဖြစ်သည်။
ပြည်နယ်၏ အခြားညွှန်ပြချက်တစ်ခုကိုလည်း ပေးထားကြောင်း သေချာပါစေ။ ဥပမာအားဖြင့်၊ သင်သည် ပုံစံထိန်းချုပ်မှု၏ <label>
စာသားတွင် အခြေအနေအကြောင်း အရိပ်အမြွက်ထည့်သွင်းနိုင်သည် (အောက်ပါကုဒ်နမူနာတွင်ပါရှိသည့်အတိုင်း)၊ Glyphicon.sr-only
( အတန်း ကိုအသုံးပြု၍ သင့်လျော်သောအခြားစာသားဖြင့် - Glyphicon နမူနာ များကိုကြည့်ပါ ) သို့မဟုတ် ပံ့ပိုးပေးခြင်းဖြင့်၊ အပိုဆောင်း အကူအညီစာသား ပိတ်ဆို့။ အထူးသဖြင့် အကူအညီပေးသောနည်းပညာများအတွက် မမှန်ကန်သောပုံစံထိန်းချုပ်မှုများကို ရည်ညွှန်းချက်တစ်ခုအဖြစ် aria-invalid="true"
သတ်မှတ်ပေးနိုင်ပါသည်။
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
.has-feedback
ဖြည့်စွက်ခြင်း နှင့် မှန်ကန်သောအိုင်ကွန် များဖြင့် ရွေးချယ်နိုင်သော တုံ့ပြန်ချက်အိုင်ကွန်များကိုလည်း ထည့်သွင်းနိုင်သည် ။
<input class="form-control">
တုံ့ပြန်ချက်အိုင်ကွန်များသည် စာသား အစိတ်အပိုင်းများ နှင့်သာ အလုပ်လုပ် ပါသည်။
အညွှန်းမပါဘဲ သွင်းအားစုများအတွက် နှင့် ညာဘက်ရှိ အပို ပရိုဂရမ်ပါရှိသော ထည့်သွင်းမှုအဖွဲ့ များအတွက် တုံ့ပြန်ချက်အိုင်ကွန်များကို ကိုယ်တိုင်နေရာချထားရန် လိုအပ်ပါသည်။ ဝင်ရောက်နိုင်မှုဆိုင်ရာ အကြောင်းပြချက်များအတွက် သွင်းအားစုအားလုံးအတွက် အညွှန်းများ ပေးဆောင်ရန် သင့်အား အလေးအနက် တိုက်တွန်းအပ်ပါသည်။ အညွှန်းများမပေါ်စေရန် တားဆီးလိုပါက ၎င်းတို့ကို .sr-only
အတန်းနှင့် ဝှက်ထားပါ။ အညွှန်းများမပါဘဲ လုပ်ဆောင်ရမည်ဆိုပါက top
တုံ့ပြန်ချက်အိုင်ကွန်၏ တန်ဖိုးကို ချိန်ညှိပါ။ ထည့်သွင်းသည့်အဖွဲ့များအတွက်၊ right
သင့် addon ၏အကျယ်ပေါ်မူတည်၍ သင့်လျော်သော pixel တန်ဖိုးတစ်ခုသို့ ချိန်ညှိပါ။
မျက်နှာပြင်ဖတ်သူများကဲ့သို့သော အထောက်အကူပြုနည်းပညာများသည် အိုင်ကွန်တစ်ခု၏အဓိပ္ပာယ်ကို မှန်ကန်စွာဖော်ပြရန် သေချာစေရန်၊ ထပ်လောင်းဝှက်ထားသောစာသားများကို .sr-only
အတန်းထဲတွင် ထည့်သွင်းသင့်ပြီး ၎င်းနှင့်သက်ဆိုင်သည့်ပုံစံထိန်းချုပ်မှုတွင် ပြတ်သားစွာ ဆက်စပ်မှုရှိသင့်သည် aria-describedby
။ တနည်းအားဖြင့်၊ အဓိပ္ပာယ် (ဥပမာ၊ စာသားထည့်သွင်းမှုအကွက်တစ်ခုအတွက် သတိပေးချက်တစ်ခုရှိသည်) ကို <label>
ဖောင်ထိန်းချုပ်မှုနှင့် အမှန်တကယ်ဆက်စပ်နေသည့် စာသားကို ပြောင်းလဲခြင်းကဲ့သို့သော အခြားပုံစံတစ်မျိုးဖြင့် ဖော်ပြကြောင်း သေချာပါစေ။
အောက်ပါနမူနာများတွင် စာသားကိုယ်တိုင်က သက်ဆိုင်ရာ ပုံစံထိန်းချုပ်မှုများ၏ တရားဝင်မှုအခြေအနေကို ဖော်ပြထားပြီးဖြစ်သော်လည်း <label>
၊ အထက်ဖော်ပြပါနည်းပညာ ( .sr-only
စာသားနှင့် အသုံးပြုခြင်း aria-describedby
) ကို သရုပ်ဖော်ရည်ရွယ်ချက်များအတွက် ထည့်သွင်းထားသည်။
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>
.sr-only
ဝှက်ထားသော အညွှန်းများပါ သည့် ရွေးချယ်နိုင်သော အိုင်ကွန်များအကယ်၍ သင်သည် .sr-only
ပုံစံထိန်းချုပ်မှုတစ်ခုအား ဖုံးကွယ်ရန် class ကိုအသုံးပြုပါက <label>
( attribute ကဲ့သို့သော အခြားတံဆိပ်ကပ်ခြင်းရွေးချယ်စရာများကို အသုံးပြုခြင်းထက် aria-label
) Bootstrap သည် ၎င်းကိုထည့်သွင်းပြီးသည်နှင့် အိုင်ကွန်၏အနေအထားကို အလိုအလျောက်ချိန်ညှိမည်ဖြစ်သည်။
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
ကဲ့သို့သော အတန်းများကို အသုံးပြု၍ အမြင့်များကို သတ်မှတ်ပြီး ကဲ့သို့သော .input-lg
ဇယားကွက်ကော်လံအတန်းများကို အသုံးပြု၍ အကျယ်များကို သတ်မှတ်ပါ .col-lg-*
။
ခလုတ်အရွယ်အစားများနှင့် ကိုက်ညီသော ပိုမြင့်သော သို့မဟုတ် ပိုတိုသော ပုံစံထိန်းချုပ်မှုများကို ဖန်တီးပါ။
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
သို့မဟုတ် .form-horizontal
ပေါင်းထည့်ခြင်းဖြင့် အတွင်း အညွှန်းများနှင့် ပုံစံထိန်းချုပ်မှုများကို လျင်မြန်စွာ အရွယ်အစား ပေးပါ။.form-group-lg
.form-group-sm
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
အလိုရှိသော အကျယ်များကို လွယ်ကူစွာ ပြဋ္ဌာန်းနိုင်ရန် ဂရစ်ကော်လံများ သို့မဟုတ် စိတ်ကြိုက် ပင်မဒြပ်စင် တစ်ခုခုတွင် ထည့်သွင်းမှုများကို ခြုံပါ။
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
<a>
တစ်ခု ၊ <button>
သို့မဟုတ် <input>
ဒြပ်စင် ပေါ်တွင် ခလုတ်အတန်းများကို သုံးပါ ။
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
ခလုတ်အတန်းများကို ဒြပ်စင်များပေါ်တွင် အသုံးပြုနိုင်သော်လည်း ၊ ကျွန်ုပ်တို့၏ nav <a>
နှင့် navbar အစိတ်အပိုင်းများအတွင်း ဒြပ်စင်များကိုသာ ပံ့ပိုးထားပါသည်။<button>
<button>
<a>
ဒြပ်စင်များကို ခလုတ်များအဖြစ် အသုံးပြုပါက - စာမျက်နှာအတွင်း လုပ်ဆောင်နိုင်စွမ်းကို အစပျိုးပေးခြင်း၊ လက်ရှိစာမျက်နှာရှိ အခြားစာရွက်စာတမ်း သို့မဟုတ် ကဏ္ဍများသို့ သွားလာခြင်းထက် - ၎င်းတို့ကိုလည်း သင့်လျော်သော ပေးဆောင်သင့် ပါသည် role="button"
။
အကောင်းဆုံး အလေ့အကျင့်တစ်ခုအနေဖြင့်၊ ကျွန်ုပ်တို့သည် ဘရောက်ဆာဖြတ်ကျော် တင်ဆက်ခြင်း ကိုက်ညီမှုရှိမရှိကို ဖြစ်နိုင်သည့်အခါတိုင်း အစိတ်အပိုင်း ကို အသုံးပြုရန် အကြံပြုအပ်ပါသည် ။<button>
အခြားအရာများထဲတွင်၊ Firefox <30line-height
တွင် -based ခလုတ်များကို သတ်မှတ်ခြင်းမှ ကျွန်ုပ်တို့အား တားဆီးပေး သည့် ချို့ယွင်းချက်တစ်ခုရှိနေပြီး <input>
၎င်းတို့သည် Firefox ရှိ အခြားခလုတ်များ၏ အမြင့်နှင့် အတိအကျ မယှဉ်နိုင်စေတော့ပါ။
ပုံစံလုပ်ထားသော ခလုတ်တစ်ခုကို အမြန်ဖန်တီးရန် ရနိုင်သော ခလုတ်အတန်းများကို သုံးပါ။
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
ခလုတ်တစ်ခုသို့ အဓိပ္ပါယ်ထည့်ရန် အရောင်ကိုအသုံးပြုခြင်းဖြင့် စခရင်ဖတ်စက်များကဲ့သို့သော အထောက်အကူနည်းပညာများကို အသုံးပြုသူများထံ ပေးပို့မည်မဟုတ်သည့် အမြင်အာရုံညွှန်ပြမှုကိုသာ ပံ့ပိုးပေးပါသည်။ အရောင်ဖြင့် ဖော်ပြထားသော အချက်အလက်သည် အကြောင်းအရာ ကိုယ်တိုင် (ခလုတ်၏ မြင်နိုင်သော စာသား) သို့မဟုတ် .sr-only
အတန်းအစား ဝှက်ထားသော အပိုစာသားများကဲ့သို့ အခြားနည်းလမ်းများဖြင့် ပါဝင်ကြောင်း သေချာပါစေ။
ပိုကြီးသော သို့မဟုတ် သေးငယ်သော ခလုတ်များကို နှစ်သက်ပါသလား။ .btn-lg
, .btn-sm
, သို့မဟုတ် .btn-xs
အပိုအရွယ်အစားများအတွက် ထည့်ပါ ။
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
ပေါင်းထည့်ခြင်းဖြင့် မိဘတစ်ခု၏ အကျယ်အဝန်းကို ကျယ်ဝန်းသော ဘလောက်အဆင့်ခလုတ်များကို ဖန်တီးပါ .btn-block
။
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
ခလုတ်များ (နက်မှောင်သောနောက်ခံ၊ ပိုမှောင်သောဘောင်နှင့် ထည့်သွင်းထားသောအရိပ်) ကို နှိပ်လိုက်သောအခါတွင် ခလုတ်များပေါ်လာပါမည်။ <button>
ဒြပ်စင် များအတွက် ၊ ဤအရာမှတဆင့်လုပ်ဆောင်သည် :active
။ <a>
ဒြပ်စင် များအတွက် ၊ ၎င်းကိုပြုလုပ်ထားသည် .active
။ သို့သော်၊ သင်သည် တက်ကြွသောအခြေအနေအား ပရိုဂရမ်ဖြင့် ပုံတူပွားရန် လိုအပ်ပါက s (နှင့် attribute တွင်ပါ၀င်သည် ) ကို အသုံးပြုနိုင် .active
သည် ။<button>
aria-pressed="true"
pseudo-class ဖြစ်သောကြောင့် ထပ်ထည့်ရန် မလိုအပ် :active
သော်လည်း တူညီသော အသွင်အပြင်ကို တွန်းအားပေးရန် လိုအပ်ပါက ဆက်လက်၍ ထည့်ပါ .active
။
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
.active
အတန်းကို <a>
ခလုတ်များ ထဲသို့ ထည့်ပါ ။
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
ခလုတ်များကို ပြန်ဖျော့ခြင်းဖြင့် နှိပ်၍မရသောပုံပေါ်အောင်လုပ်ပါ opacity
။
ခလုတ် များတွင် disabled
အရည်အချင်းကို ထည့်ပါ ။<button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
အကယ်၍ သင်သည် disabled
ရည်ညွှန်းချက်တစ်ခုသို့ ထည့်ပါက <button>
၊ Internet Explorer 9 နှင့် အောက်ဖော်ပြပါသည် ကျွန်ုပ်တို့ မပြင်နိုင်သော ဆိုးရွားသော စာသားအရိပ်တစ်ခုဖြင့် စာသားကို မီးခိုးရောင် ပြန်ပေးလိမ့်မည်။
.disabled
အတန်းကို <a>
ခလုတ်များ ထဲသို့ ထည့်ပါ ။
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
.disabled
ဤနေရာတွင် ကျွန်ုပ်တို့သည် ဘုံအတန်းအစားနှင့် ဆင်တူသောကြောင့် ဤနေရာတွင် utility class တစ်ခုအဖြစ် သုံးသည် .active
၊ ထို့ကြောင့် ရှေ့ဆက်ရန် မလိုအပ်ပါ။
ဤအတန်းသည် s pointer-events: none
၏ လင့်ခ်လုပ်ဆောင်နိုင်စွမ်းကို ပိတ်ရန် ကြိုးစား <a>
သော်လည်း ၎င်း CSS ပိုင်ဆိုင်မှုသည် စံသတ်မှတ်ထားခြင်းမရှိသေးဘဲ Opera 18 နှင့် အောက်ဖော်ပြပါ သို့မဟုတ် Internet Explorer 11 တွင် အပြည့်အဝ မပံ့ပိုးနိုင်သေးပါ။ ထို့အပြင် ပံ့ပိုးပေးသည့် ဘရောက်ဆာများတွင်ပင် pointer-events: none
၊ ကီးဘုတ်၊ လမ်းညွှန်မှုမှာ သက်ရောက်မှုမရှိပါ၊ ဆိုလိုသည်မှာ မျက်စိမြင်သောကီးဘုတ်အသုံးပြုသူများနှင့် အထောက်အကူပြုနည်းပညာအသုံးပြုသူများသည် ဤလင့်ခ်များကို အသက်သွင်းနိုင်ဆဲဖြစ်မည်ဟု ဆိုလိုသည်။ ထို့ကြောင့် ဘေးကင်းစေရန်၊ ထိုလင့်ခ်များကို ပိတ်ရန် စိတ်ကြိုက် JavaScript ကို အသုံးပြုပါ။
.img-responsive
Bootstrap 3 ရှိ ရုပ်ပုံများကို အတန်း ၏ ထပ်တိုးခြင်းဖြင့် တုံ့ပြန်မှု အဆင်ပြေစေနိုင်သည် ။ ၎င်းသည် ပင်မဒြပ်စင်သို့ ကောင်းမွန်စွာ ချိန်ညှိနိုင်စေရန်၊ ၎င်းသည် ပုံ max-width: 100%;
နှင့် height: auto;
သက်ဆိုင် သည် ။display: block;
.img-responsive
အတန်းကို အသုံးပြုသည့် ပုံများကို ဗဟိုပြုရန် ၊ .center-block
အစား သုံးပါ .text-center
။ အသုံးပြုမှု နှင့်ပတ်သက်ပြီး အသေးစိတ်အချက်အလက်များအတွက် helper classes ကဏ္ဍကို ကြည့်ပါ ။.center-block
Internet Explorer 8-10 တွင်၊ SVG ရုပ်ပုံများ .img-responsive
သည် အချိုးမပြေစွာ အရွယ်အစားရှိသည်။ ဒါကိုပြင်ဖို့ width: 100% \9;
လိုအပ်တဲ့နေရာမှာ ထည့်ပါ။ Bootstrap သည် အခြားပုံဖော်မတ်များအတွက် ရှုပ်ထွေးမှုများ ဖြစ်စေသောကြောင့် ၎င်းကို အလိုအလျောက် အသုံးချမည်မဟုတ်ပါ။
<img src="..." class="img-responsive" alt="Responsive image">
<img>
မည်သည့်ပရောဂျက်တွင်မဆို ပုံများကို အလွယ်တကူစတိုင်လ်ကျစေရန် အတန်းများကို အစိတ်အပိုင်းတစ်ခုသို့ ပေါင်းထည့်ပါ ။
Internet Explorer 8 သည် လုံးဝန်းသောထောင့်များအတွက် ပံ့ပိုးမှု ကင်းမဲ့ကြောင်း မှတ်သားထားပါ။
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
လက်တစ်ဆုပ်စာ အလေးပေးထားသော အသုံးဝင်သော အတန်းများဖြင့် အရောင်ဖြင့် အဓိပ္ပါယ်ကို ပို့ပါ။ ၎င်းတို့ကို လင့်ခ်များပေါ်တွင်လည်း အသုံးချနိုင်ပြီး ကျွန်ုပ်တို့၏ မူရင်းလင့်ခ်ပုံစံများကဲ့သို့ မောက်စ်ပေါ်တွင် မှောင်သွားမည်ဖြစ်သည်။
Fusce dapibus၊ tellus ac cursus commodo၊ tortor mauris nibh။
Nullam id dolor id nibh ultricies vehicula ut id elit ။
Duis mollis၊ est non commodo luctus၊ nisi erat porttitor ligula။
Maecenas sed diam eget risus varius blandit ထိုင်နေတဲ့ မမက်မနာ။
Etiam porta sem malesuada magna mollis euismod။
Donec ullamcorper nulla non metus auctor fringilla
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
တခါတရံတွင် အခြားသောရွေးချယ်မှုစနစ်၏ တိကျမှုကြောင့် အလေးပေးအတန်းများကို အသုံးချ၍မရပါ။ ကိစ္စအများစုတွင်၊ လုံလောက်သောဖြေရှင်းချက်မှာ သင့်စာသားကို <span>
အတန်းနှင့် တွဲရန်ဖြစ်သည်။
အဓိပ္ပါယ်ထည့်ရန် အရောင်ကိုအသုံးပြုခြင်းသည် မျက်နှာပြင်ဖတ်စက်များကဲ့သို့သော အထောက်အကူနည်းပညာများကို အသုံးပြုသူများထံ ပေးပို့မည်မဟုတ်သည့် အမြင်အာရုံညွှန်ပြမှုတစ်ခုသာဖြစ်သည်။ အရောင်ဖြင့် ဖော်ပြထားသော အချက်အလက်များသည် အကြောင်းအရာကိုယ်တိုင်မှ သိသာထင်ရှားကြောင်း သေချာစေပါ (စာသား/အမှတ်အသားတွင် ပါရှိပြီးသား အဓိပ္ပာယ်ကို အားဖြည့်ရန်အတွက်သာ အသုံးပြုသည်) သို့မဟုတ် .sr-only
အတန်းထဲတွင် ဝှက်ထားသော အပိုစာသားများကဲ့သို့သော အခြားနည်းလမ်းများဖြင့် ထည့်သွင်းထားကြောင်း သေချာပါစေ။ .
အကြောင်းအရာဆိုင်ရာ စာသားအရောင်အတန်းများနှင့် အလားတူ၊ ဒြပ်စင်တစ်ခု၏ နောက်ခံကို ဆက်စပ်မှုဆိုင်ရာ အတန်းအစား တစ်ခုခုတွင် အလွယ်တကူ သတ်မှတ်ပါ။ Anchor အစိတ်အပိုင်းများသည် စာသားအတန်းများကဲ့သို့ hover တွင် မှောင်သွားပါမည်။
Nullam id dolor id nibh ultricies vehicula ut id elit ။
Duis mollis၊ est non commodo luctus၊ nisi erat porttitor ligula။
Maecenas sed diam eget risus varius blandit ထိုင်နေတဲ့ မမက်မနာ။
Etiam porta sem malesuada magna mollis euismod။
Donec ullamcorper nulla non metus auctor fringilla
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
တခါတရံတွင် အခြားရွေးချယ်မှုစနစ်၏ တိကျမှုကြောင့် ဆက်စပ်နောက်ခံအတန်းများကို အသုံးချ၍မရပါ။ အချို့ကိစ္စများတွင်၊ လုံလောက်သောဖြေရှင်းနည်းသည် သင့်ဒြပ်စင်၏အကြောင်းအရာကို <div>
အတန်းနှင့် ပေါင်းစပ်ရန်ဖြစ်သည်။
ဆက်စပ်အရောင်များ ကဲ့သို့ပင်၊ အရောင် ဖြင့် ဖော်ပြသော မည်သည့်အဓိပ္ပာယ်ကိုမဆို တင်ဆက်မှုသက်သက်မဟုတ်သည့် ပုံစံဖြင့်လည်း ဖော်ညွှန်းကြောင်း သေချာပါစေ။
မော်ဒယ်များနှင့် သတိပေးချက်များကဲ့သို့သော အကြောင်းအရာများကို ဖယ်ရှားရန်အတွက် ယေဘူယျအပိတ်သင်္ကေတကို အသုံးပြုပါ။
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
dropdown functionality နှင့် direction ကိုညွှန်ပြရန် carets ကိုသုံးပါ။ ပုံသေ cart သည် dropup menus တွင် အလိုအလျောက်ပြောင်းသွားမည်ဖြစ်ကြောင်း သတိပြုပါ ။
<span class="caret"></span>
အတန်းတစ်ခုဖြင့် ဒြပ်စင်တစ်ခုကို ဘယ် သို့မဟုတ် ညာသို့ မျှောပါ။ !important
သီးခြားပြဿနာများကိုရှောင်ရှားရန်ပါဝင်သည်။ အတန်းများကို mixins အဖြစ်လည်းသုံးနိုင်သည်။
<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
display: block
မှတဆင့် အလယ်သို့ အစိတ်အပိုင်းတစ်ခုကို သတ်မှတ်ပါ margin
။ mixin နှင့် class အဖြစ်ရနိုင်သည်။
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
ပင်မဒြပ်စင်သို့float
ထည့်ခြင်းဖြင့် s ကို အလွယ်တကူရှင်းလင်း ပါ။ Nicolas Gallagher ကျော်ကြားသည့် micro clearfix ကို အသုံးပြုသည်။ Mixin အဖြစ်လည်း သုံးနိုင်ပါတယ်။.clearfix
<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
ဒြပ်စင်တစ်ခုအား ပြသရန် သို့မဟုတ် ဝှက်ထားရန် ( စခရင်ဖတ်သူများအတွက် အပါအဝင် ) .show
နှင့် .hidden
အတန်းများကို အသုံးပြုခြင်း။ ဤအတန်းများသည် လျင်မြန်သော floats များ!important
ကဲ့သို့ သီးခြား ပဋိပက္ခများကို ရှောင်ရှားရန် အသုံးပြုသည် ။ ၎င်းတို့သည် ဘလောက်အဆင့်ပြောင်းခြင်းအတွက်သာ ရနိုင်ပါသည်။ ၎င်းတို့ကို mixins အဖြစ်လည်းသုံးနိုင်သည်။
.hide
ရနိုင်သော်လည်း ၎င်းသည် ဖန်သားပြင်ဖတ်သူများကို အမြဲမထိခိုက်စေဘဲ v3.0.1 တွင် ငြင်းပယ်ထားသည်။ .hidden
သို့မဟုတ် အ စားသုံး .sr-only
ပါ။
ထို့အပြင်၊ .invisible
ဆိုသည်မှာ ဒြပ်စင်တစ်ခု၏ မြင်နိုင်စွမ်းကိုသာ ခလုတ်ဖွင့်ရန် အသုံးပြုနိုင်ပြီး၊ ၎င်းသည် display
ပြုပြင်မွမ်းမံထားခြင်းဖြစ်ပြီး ဒြပ်စင်သည် စာရွက်စာတမ်း၏စီးဆင်းမှုကို အကျိုးသက်ရောက်ဆဲဖြစ်သည်။
<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
စခရင်ဖတ်သူများမှလွဲ၍ စက်ပစ္စည်းအားလုံးတွင် အစိတ်အပိုင်းတစ်ခုကို ဝှက် ထားပါ .sr-only
။ ၎င်းကို အာရုံစိုက်သည့်အခါတွင် အစိတ်အပိုင်းကို ထပ်မံပြသရန် (ဥပမာ- ကီးဘုတ်သီးသန့်အသုံးပြုသူ) .sr-only
နှင့် ပေါင်းစပ် ပါ။ လိုက်နာ နိုင်မှု အကောင်းဆုံး အလေ့အကျင့်.sr-only-focusable
များအတွက် လိုအပ်ပါသည် ။ Mixin အဖြစ်လည်း သုံးနိုင်ပါတယ်။
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}
.text-hide
ဒြပ်စင်တစ်ခု၏ စာသားအကြောင်းအရာကို နောက်ခံပုံဖြင့် အစားထိုးရာတွင် ကူညီရန် အတန်း သို့မဟုတ် ရောနှောခြင်းကို အသုံးပြုပါ ။
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
ပိုမိုမြန်ဆန်သော မိုဘိုင်းလ်-ဖော်ရွေသော ဖွံ့ဖြိုးတိုးတက်မှုအတွက်၊ မီဒီယာမေးမြန်းမှုမှတစ်ဆင့် စက်ပစ္စည်းအလိုက် အကြောင်းအရာများကို ပြသခြင်းနှင့် ဖုံးကွယ်ရန်အတွက် ဤအသုံးအဆောင်အတန်းများကို အသုံးပြုပါ။ ပုံနှိပ်ထုတ်ဝေသည့်အခါ အကြောင်းအရာကို ပြောင်းပစ်ရန် အသုံးဝင်သော အတန်းများလည်း ပါဝင်ပါသည်။
၎င်းတို့ကို အကန့်အသတ်ဖြင့် အသုံးပြုရန် ကြိုးစားပြီး တူညီသောဆိုဒ်၏ ကွဲပြားသောဗားရှင်းများ ဖန်တီးခြင်းကို ရှောင်ကြဉ်ပါ။ ယင်းအစား၊ စက်တစ်ခုစီ၏ တင်ပြမှုကို ဖြည့်စွက်ရန် ၎င်းတို့ကို အသုံးပြုပါ။
viewport breakpoints များတစ်လျှောက် အကြောင်းအရာကို ပြောင်းပစ်ရန်အတွက် တစ်ခုတည်း သို့မဟုတ် ပေါင်းစပ်ထားသော အတန်းများကို အသုံးပြုပါ။
အပိုပစ္စည်းလေးတွေဖုန်းများ (<768px) | သေးငယ်သောပစ္စည်းများတက်ဘလက်များ (≥768px) | အလတ်စား ကိရိယာများဒက်စ်တော့ (≥992px) | ကြီးမားသောပစ္စည်းများဒက်စ်တော့ (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
မြင်သာသည်။ | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ |
.visible-sm-* |
ဝှက်ထားသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ |
.visible-md-* |
ဝှက်ထားသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ |
.visible-lg-* |
ဝှက်ထားသည်။ | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ |
.hidden-xs |
ဝှက်ထားသည်။ | မြင်သာသည်။ | မြင်သာသည်။ | မြင်သာသည်။ |
.hidden-sm |
မြင်သာသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ | မြင်သာသည်။ |
.hidden-md |
မြင်သာသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ |
.hidden-lg |
မြင်သာသည်။ | မြင်သာသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ |
v3.2.0 အရ၊ .visible-*-*
breakpoint တစ်ခုစီအတွက် အတန်းများသည် ကွဲလွဲမှု သုံးခုရှိပြီး၊ တစ်ခုသည် display
အောက်တွင်ဖော်ပြထားသော CSS ပိုင်ဆိုင်မှုတန်ဖိုးတစ်ခုစီအတွက် တစ်ခုဖြစ်သည်။
အတန်းအုပ်စု | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
xs
ထို့ကြောင့်၊ ဥပမာအားဖြင့် သေးငယ်သော ဖန်သားပြင်များအတွက် ရရှိနိုင်သော .visible-*-*
အတန်းများမှာ- .visible-xs-block
, .visible-xs-inline
, နှင့် .visible-xs-inline-block
.
အတန်းများ .visible-xs
, .visible-sm
, .visible-md
, .visible-lg
တို့ကိုလည်း တည်ရှိနေသော်လည်း v3.2.0 တွင် ငြင်းပယ်ထားသည် ။ ၎င်းတို့သည် ဆက်စပ် ဒြပ်စင်များကို ခလုတ်နှိပ် .visible-*-block
ခြင်းအတွက် ထပ်လောင်း အထူးကိစ္စများမှလွဲ၍ ခန့်မှန်းခြေအားဖြင့် ညီမျှပါသည်။<table>
ပုံမှန်တုံ့ပြန်မှုအတန်းများနှင့်ဆင်တူသည်၊ ပုံနှိပ်ရန်အတွက် အကြောင်းအရာကို ပြောင်းရန် ၎င်းတို့ကို အသုံးပြုပါ။
သင်တန်းများ | ဘရောက်ဆာ | ညောင်ပင် |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
ဝှက်ထားသည်။ | မြင်သာသည်။ |
.hidden-print |
မြင်သာသည်။ | ဝှက်ထားသည်။ |
အတန်း .visible-print
လည်းရှိသော်လည်း v3.2.0 တွင် ငြင်းပယ်ထားသည်။ .visible-print-block
၎င်းသည် အပိုထပ်ဆောင်း အထူးကိစ္စရပ်များမှလွဲ၍ ခန့်မှန်းခြေနှင့် ညီမျှသည် ။<table>
၎င်းသည် ဆက်စပ် ဒြပ်စင်
သင့်ဘရောက်ဆာကို အရွယ်အစားပြောင်းပါ သို့မဟုတ် တုံ့ပြန်နိုင်သော အသုံးဝင်မှုအတန်းများကို စမ်းသပ်ရန် မတူညီသောစက်ပစ္စည်းများတွင် တင်ပါ။
အစိမ်းရောင် checkmarks များသည် သင့်လက်ရှိ viewport တွင် ဒြပ်စင် ကို မြင်နိုင်သည် ကို ညွှန်ပြသည်။
ဤတွင်၊ အစိမ်းရောင် checkmarks များသည် သင့်လက်ရှိ viewport တွင် ဒြပ်စင် ကို ဝှက် ထားသည်ကို ဖော်ပြသည်။
Bootstrap ၏ CSS ကို Less ပေါ်တွင် တည်ဆောက်ထားပြီး CSS ပြုစုရန်အတွက် variables၊ mixins နှင့် functions များကဲ့သို့ ထပ်လောင်းလုပ်ဆောင်နိုင်စွမ်းရှိသော preprocessor တစ်ခုဖြစ်သည်။ ကျွန်ုပ်တို့စုစည်းထားသော CSS ဖိုင်များအစား ဖိုင်နည်းပါးသော အရင်းအမြစ်ကို အသုံးပြုလိုသူများသည် မူဘောင်တစ်လျှောက်တွင် ကျွန်ုပ်တို့အသုံးပြုသော ကိန်းရှင်များစွာနှင့် ရောစပ်ထားသော ကိန်းရှင်များကို အသုံးပြုနိုင်ပါသည်။
Grid variable များနှင့် mixin များကို Grid system အပိုင်းအတွင်းတွင် အကျုံးဝင် ပါသည်။
Bootstrap ကို အနည်းဆုံး နည်းလမ်းနှစ်မျိုးဖြင့် အသုံးပြုနိုင်သည်။ ဖိုင်နည်းပါးသောဖိုင်များကို စုစည်းရန်၊ လိုအပ်သော ညွှန်ကြားချက်များကို လုပ်ဆောင်ရန် သင်၏ ဖွံ့ဖြိုးတိုးတက်မှုပတ်ဝန်းကျင်ကို ထည့်သွင်းနည်းအတွက် စတင်ခြင်းကဏ္ဍကို တိုင်ပင်ပါ ။
Third-party compilation tools သည် Bootstrap နှင့် အလုပ်လုပ်နိုင်သော်လည်း ၎င်းတို့ကို ကျွန်ုပ်တို့၏ အဓိကအဖွဲ့မှ ပံ့ပိုးမထားပါ။
အရောင်များ၊ အကွာအဝေး သို့မဟုတ် ဖောင့်အတွဲများကဲ့သို့ အသုံးများသော တန်ဖိုးများကို ဗဟိုချုပ်ကိုင်ပြီး မျှဝေရန် နည်းလမ်းတစ်ခုအနေဖြင့် ကိန်းရှင်များကို ပရောဂျက်တစ်ခုလုံးတွင် အသုံးပြုပါသည်။ ပြီးပြည့်စုံသောခွဲခြမ်းစိတ်ဖြာမှုအတွက်၊ ကျေးဇူးပြု၍ Customizer ကိုကြည့်ပါ ။
မီးခိုးရောင်စကေးနှင့် အခေါ်အဝေါ်ဆိုင်ရာ အရောင်အစီအစဥ်နှစ်ခုကို အလွယ်တကူ အသုံးပြုပါ။ မီးခိုးရောင်စကေးအရောင်များသည် အများအားဖြင့် အသုံးပြုလေ့ရှိသော အနက်ရောင်အရိပ်များကို အမြန်ဝင်ရောက်နိုင်စေပြီး အဓိပ္ပါယ်ရှိသော ဆက်စပ်တန်ဖိုးများအတွက် သတ်မှတ်ပေးထားသော အရောင်အမျိုးမျိုးကို ဝေါဟာရအသုံးအနှုန်းများပါ၀င်သည်။
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
၎င်းတို့ရှိသကဲ့သို့ ဤအရောင်ပြောင်းသည့် မည်သည့်အရောင်ကိုမဆို အသုံးပြုပါ သို့မဟုတ် သင့်ပရောဂျက်အတွက် ပိုမိုအဓိပ္ပာယ်ရှိသော ကိန်းရှင်များအဖြစ် ၎င်းတို့ကို ပြန်လည်သတ်မှတ်ပါ။
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
သင့်ဆိုက်၏အရိုးစု၏ အဓိကအစိတ်အပိုင်းများကို အမြန်စိတ်ကြိုက်ပြင်ဆင်ရန်အတွက် လက်တစ်ဆုပ်စာ ကိန်းရှင်များ။
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
တန်ဖိုးတစ်ခုတည်းဖြင့် သင့်လင့်ခ်များကို မှန်ကန်သောအရောင်ဖြင့် အလွယ်တကူ ပုံစံဆင်ပါ။
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
@link-hover-color
မှန်ကန်သော hover အရောင်ကို အလိုအလျောက်ဖန်တီးရန် Less မှ အံ့သြဖွယ်ကောင်းသော အခြားကိရိယာတစ်ခု၊ လုပ်ဆောင်ချက်ကို အသုံးပြု ကြောင်း သတိပြုပါ ။ သင် darken
, lighten
, saturate
, နှင့် သုံးနိုင်သည် desaturate
။
သင့်စာရိုက်မျက်နှာ၊ စာသားအရွယ်အစား၊ ထိပ်တန်းနှင့် အခြားအရာများကို အမြန်ပြောင်းလွဲချက်အနည်းငယ်ဖြင့် အလွယ်တကူ သတ်မှတ်ပါ။ Bootstrap သည် လွယ်ကူသော typographic mixins များကို ပံ့ပိုးပေးရန်အတွက်လည်း ၎င်းတို့ကို အသုံးပြုပါသည်။
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
သင့်အိုင်ကွန်များ၏ တည်နေရာနှင့် ဖိုင်အမည်ကို စိတ်ကြိုက်ပြင်ဆင်ရန်အတွက် အမြန်ပြောင်းလွဲချက်နှစ်ခု။
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
Bootstrap တစ်လျှောက်ရှိ အစိတ်အပိုင်းများသည် ဘုံတန်ဖိုးများကို သတ်မှတ်ရန်အတွက် အချို့သော default variable များကို အသုံးပြုသည်။ ဒါကတော့ အသုံးအများဆုံးပါ။
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
Vendor mixins များသည် သင့်စုစည်းထားသော CSS တွင် သက်ဆိုင်ရာ ရောင်းချသူ၏ရှေ့ဆက်များအားလုံးကို ထည့်သွင်းခြင်းဖြင့် များစွာသောဘရောက်ဆာများစွာကို ပံ့ပိုးကူညီပေးရန်အတွက် ရောစပ်ထားသောပစ္စည်းများဖြစ်သည်။
Mixin တစ်ခုတည်းဖြင့် သင်၏ အစိတ်အပိုင်းများ ၏ box model ကို ပြန်လည်သတ်မှတ်ပါ။ အကြောင်းအရာအတွက်၊ Mozilla မှ ဤအသုံးဝင်သောဆောင်းပါးကို ကြည့်ပါ ။
Autoprefixer ၏နိဒါန်းနှင့်အတူ mixin ကို v3.2.0 တွင် ရပ်တန့်ထားသည်။ နောက်ပြန်-လိုက်ဖက်ညီမှုကို ထိန်းသိမ်းရန်၊ Bootstrap သည် Bootstrap v4 အထိ ရောစပ်ထားသော အတွင်းပိုင်းကို ဆက်လက်အသုံးပြုသွားပါမည်။
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
ယနေ့ ခေတ်မီဘရောက်ဆာများအားလုံးသည် ရှေ့မဆက်ထားသော border-radius
ပစ္စည်းကို ပံ့ပိုးပေးပါသည်။ ထို့ကြောင့်၊ .border-radius()
ရောနှောခြင်းမရှိသော်လည်း၊ Bootstrap တွင် အရာဝတ္တုတစ်ခု၏ တစ်ဖက်ခြမ်းရှိ ထောင့်နှစ်ခုကို လျင်မြန်စွာ လှည့်ပတ်ရန်အတွက် ဖြတ်လမ်းများပါရှိသည်။
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
သင်၏ပစ်မှတ်ပရိသတ်သည် နောက်ဆုံးပေါ်နှင့် အကောင်းဆုံးဘရောက်ဆာများနှင့် စက်ပစ္စည်းများကို အသုံးပြုနေပါက၊ box-shadow
၎င်းကို ၎င်း၏ကိုယ်ပိုင်အသုံးပြုမှုကို သေချာစေပါ။ Android အဟောင်း (pre-v4) နှင့် iOS စက်ပစ္စည်းများ (iOS 5 အကြို) အတွက် ပံ့ပိုးမှု လိုအပ်ပါက၊ လိုအပ်သော ရှေ့ဆက် ကို ရွေးရန် ကန့်ကွက်ထားသော mixin ကို အသုံးပြုပါ။-webkit
Bootstrap သည် စံပိုင်ဆိုင်မှုကိုမပံ့ပိုးနိုင်သော ခေတ်မမီသောပလပ်ဖောင်းများကိုတရားဝင်မပံ့ပိုးသောကြောင့် mixin ကို v3.1.0 တွင် ရပ်ဆိုင်းထားသည်။ နောက်ပြန်-လိုက်ဖက်ညီမှုကို ထိန်းသိမ်းရန်၊ Bootstrap သည် Bootstrap v4 အထိ ရောစပ်ထားသော အတွင်းပိုင်းကို ဆက်လက်အသုံးပြုသွားပါမည်။
rgba()
နောက်ခံများနှင့် တတ်နိုင်သမျှ ချောမွေ့စွာ ရောစပ်နိုင်ရန် သင့်အကွက်တွင် အရောင်များကို သေချာစွာ အသုံးပြု ပါ။
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
ပြောင်းလွယ်ပြင်လွယ်ရှိရန်အတွက် ပေါင်းစပ်ပါဝင်မှုများ။ အကူးအပြောင်းအချက်အလက်အားလုံးကို တစ်ခုနှင့်တစ်ခု သတ်မှတ်ပါ၊ သို့မဟုတ် လိုအပ်သလို သီးခြားနှောင့်နှေးမှုနှင့် ကြာချိန်ကို သတ်မှတ်ပါ။
Autoprefixer ၏နိဒါန်းနှင့်အတူ Mixin များကို v3.2.0 တွင် ရပ်တန့ ်ထားသည်။ နောက်ပြန်-လိုက်ဖက်ညီမှုကို ထိန်းသိမ်းရန်၊ Bootstrap သည် Bootstrap v4 အထိ အတွင်းပိုင်းရှိ mixins ကို ဆက်လက်အသုံးပြုနိုင်မည်ဖြစ်သည်။
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
လှည့်ပါ၊ အတိုင်းအတာ၊ ဘာသာပြန် (ရွှေ့) သို့မဟုတ် အရာဝတ္တုတစ်ခုခုကို လှည့်ပါ။
Autoprefixer ၏နိဒါန်းနှင့်အတူ Mixin များကို v3.2.0 တွင် ရပ်တန့ ်ထားသည်။ နောက်ပြန်-လိုက်ဖက်ညီမှုကို ထိန်းသိမ်းရန်၊ Bootstrap သည် Bootstrap v4 အထိ အတွင်းပိုင်းရှိ mixins ကို ဆက်လက်အသုံးပြုနိုင်မည်ဖြစ်သည်။
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
ကြေငြာချက်တစ်ခုတွင် CSS3 ၏ ကာတွန်းဂုဏ်သတ္တိများအားလုံးကို အသုံးပြုရန်အတွက် တစ်ခုတည်းသော mixin တစ်ခုနှင့် တစ်ခုချင်းဂုဏ်သတ္တိများအတွက် အခြား mixin တစ်ခု။
Autoprefixer ၏နိဒါန်းနှင့်အတူ Mixin များကို v3.2.0 တွင် ရပ်တန့ ်ထားသည်။ နောက်ပြန်-လိုက်ဖက်ညီမှုကို ထိန်းသိမ်းရန်၊ Bootstrap သည် Bootstrap v4 အထိ အတွင်းပိုင်းရှိ mixins ကို ဆက်လက်အသုံးပြုနိုင်မည်ဖြစ်သည်။
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
ဘရောက်ဆာအားလုံးအတွက် အလင်းပိတ်နိုင်မှုကို သတ်မှတ်ပြီး filter
IE8 အတွက် ကျောထောက်နောက်ခံကို ပေးဆောင်ပါ။
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
အကွက်တစ်ခုစီအတွင်း ဖောင်ထိန်းချုပ်မှုများအတွက် အကြောင်းအရာကို ပံ့ပိုးပါ။
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
ဒြပ်စင်တစ်ခုအတွင်း CSS မှတစ်ဆင့် ကော်လံများကို ဖန်တီးပါ။
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
မည်သည့်အရောင်နှစ်မျိုးကိုမဆို နောက်ခံအရောင်အဆင့်သို့ အလွယ်တကူပြောင်းပါ။ ပိုမိုအဆင့်မြင့်အောင်လုပ်ပြီး ဦးတည်ချက်တစ်ခုသတ်မှတ်ပါ၊ အရောင်သုံးရောင်သုံးပါ သို့မဟုတ် အ၀ါရောင်အရောင်အဆင့်ကိုသုံးပါ။ တစ်ခုတည်းသော mixin ဖြင့်သင်လိုအပ်မည့် prefixed syntax အားလုံးကိုရရှိသည်။
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
စံနှစ်ရောင်၊ linear gradient ၏ ထောင့်ကိုလည်း သတ်မှတ်နိုင်သည်-
#gradient > .directional(#333; #000; 45deg);
ဆံပင်ညှပ်-အစင်းစတိုင် gradient လိုလျှင်လည်း လွယ်သည်။ အရောင်တစ်ခုတည်းကို သတ်မှတ်ပြီး အလင်းဝင်သော အဖြူရောင်အစင်းတစ်ခုကို ထပ်ပေးပါမည်။
#gradient > .striped(#333; 45deg);
အတက်အဆင်းအစား အရောင်သုံးရောင်သုံးပါ။ ပထမအရောင်၊ ဒုတိယအရောင်၊ ဒုတိယအရောင်၏ အရောင်ရပ်တန့်ခြင်း (25%) ကဲ့သို့သော ရာခိုင်နှုန်းတန်ဖိုးနှင့် ဤရောစပ်ထားသော တတိယအရောင်ကို သတ်မှတ်ပါ-
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
ကြိုတင်အသိပေးသည်! အကယ်၍ သင်သည် gradient ကိုဖယ်ရှားရန်လိုအပ်ပါက၊ filter
သင်ထည့်သွင်းထားသော IE-specific ကိုဖယ်ရှားရန်သေချာပါစေ။ .reset-filter()
Mixin နဲ့တွဲပြီး လုပ်နိုင်ပါတယ် background-image: none;
။
Utility mixins များသည် သတ်မှတ်ထားသော ပန်းတိုင် သို့မဟုတ် အလုပ်တစ်ခုကို အောင်မြင်စေရန်အတွက် အခြားမသက်ဆိုင်သော CSS ဂုဏ်သတ္တိများကို ပေါင်းစပ်ထားသည့် ရောနှောမှုများဖြစ်သည်။
class="clearfix"
မည်သည့်ဒြပ်စင်သို့ထည့်ရန် မေ့လျော့ .clearfix()
ပြီး သင့်လျော်သည့်နေရာတွင် ရောစပ်ထည့်ပါ။ Nicolas Gallagher မှ micro clearfix ကို အသုံးပြုသည် ။
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
၎င်း၏ ပင်မအတွင်း မည်သည့်ဒြပ်စင်ကိုမဆို အမြန်ဗဟိုပြုပါ။ သတ်မှတ်ရန် သို့မဟုတ် လိုအပ်သည် ။width
max-width
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
အရာဝတ္ထုတစ်ခု၏ အတိုင်းအတာကို ပိုမိုလွယ်ကူစွာ သတ်မှတ်ပါ။
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
မည်သည့် textarea သို့မဟုတ် အခြားဒြပ်စင်အတွက်မဆို အရွယ်အစားပြောင်းလဲခြင်း ရွေးချယ်မှုများကို လွယ်ကူစွာ စီစဉ်သတ်မှတ်ပါ။ ပုံမှန်ဘရောက်ဆာအပြုအမူ ( both
) ၏ ပုံသေ။
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Mixin တစ်ခုတည်းဖြင့် စာသားကို ellipsis ဖြင့် အလွယ်တကူ ဖြတ်တောက်ပါ။ အဆင့် ဖြစ်ရန် block
သို့မဟုတ် inline-block
အဆင့်ရှိရန် လိုအပ်သည်။
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
ပုံလမ်းကြောင်းနှစ်ခုနှင့် @1x ပုံအတိုင်းအတာများကို သတ်မှတ်ပါ၊ နှင့် Bootstrap သည် @2x မီဒီယာမေးမြန်းချက်ကို ပေးလိမ့်မည်။ သင့်တွင် ဝန်ဆောင်မှုပေးရန်အတွက် ပုံများစွာရှိပါက၊ မီဒီယာမေးမြန်းချက်တစ်ခုတည်းတွင် သင်၏ retina ပုံ CSS ကို ကိုယ်တိုင်ရေးသားရန် စဉ်းစားပါ။
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
Bootstrap ကို Less တွင်တည်ဆောက်ထားသော်လည်း၊ ၎င်းတွင် တရားဝင် Sass port တစ်ခုလည်းရှိသည် ။ ကျွန်ုပ်တို့သည် ၎င်းကို သီးခြား GitHub သိုလှောင်မှုတွင် ထိန်းသိမ်းထားပြီး ပြောင်းလဲခြင်း script ဖြင့် အပ်ဒိတ်များကို ကိုင်တွယ်ပါသည်။
Sass ဆိပ်ကမ်းတွင် သီးခြား repo ရှိပြီး အနည်းငယ်ကွဲပြားသော ပရိသတ်ကို ဆောင်ရွက်ပေးသောကြောင့် ပရောဂျက်၏ အကြောင်းအရာများသည် ပင်မ Bootstrap ပရောဂျက်နှင့် များစွာကွာခြားပါသည်။ ၎င်းသည် Sass port သည် Sass-based စနစ်များစွာနှင့် တတ်နိုင်သမျှ သဟဇာတဖြစ်စေကြောင်း သေချာစေသည်။
မဂ် | ဖော်ပြချက် |
---|---|
lib/ |
Ruby gem code (Sass configuration၊ Rails and Compass ပေါင်းစပ်မှုများ) |
tasks/ |
Converter script များ (အထက်မှအောက်သို့ Sass သို့ပြောင်းသည်) |
test/ |
စုစည်းစစ်ဆေးမှုများ |
templates/ |
သံလိုက်အိမ်မြှောင် ပက်ကေ့ဂျ် |
vendor/assets/ |
Sass၊ JavaScript နှင့် ဖောင့်ဖိုင်များ |
Rakefile |
ထွန်ခြစ်နှင့် ပြောင်းခြင်းကဲ့သို့သော အတွင်းပိုင်းလုပ်ဆောင်စရာများ |
ဤဖိုင်များကို လုပ်ဆောင်ချက်အဖြစ်မြင်ရန် Sass port ၏ GitHub သိုလှောင်ခန်း သို့ သွားရောက် ပါ။
Sass အတွက် Bootstrap ထည့်သွင်းအသုံးပြုပုံနှင့်ပတ်သက်သည့် အချက်အလက်အတွက် GitHub repository readme ကို တိုင်ပင်ပါ ။ ၎င်းသည် နောက်ဆုံးရသတင်းရင်းမြစ်ဖြစ်ပြီး Rails၊ Compass နှင့် standard Sass ပရောဂျက်များနှင့် အသုံးပြုရန်အတွက် အချက်အလက်များပါဝင်သည်။