ပိုကောင်း၊ ပိုမြန်၊ ပိုအားကောင်းတဲ့ ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုအတွက် ကျွန်ုပ်တို့၏ချဉ်းကပ်မှုအပါအဝင် Bootstrap ၏ အဓိကအခြေခံအဆောက်အအုံဆိုင်ရာ အစိတ်အပိုင်းများကို လျှော့ချလိုက်ပါ။

HTML5 စာတမ်းအမျိုးအစား

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=noviewport မက်တာတက်ဂ်သို့ ထည့်သွင်းခြင်းဖြင့် မိုဘိုင်းစက်ပစ္စည်းများတွင် ဇမ်ချဲ့ခြင်းစွမ်းရည်ကို သင်ပိတ်နိုင်သည် ။ ၎င်းသည် ဇူးမ်ဆွဲခြင်းကို ပိတ်သည်၊ ဆိုလိုသည်မှာ အသုံးပြုသူများသည် လှိမ့်နိုင်ရုံသာ ရှိပြီး သင့်ဆိုဒ်သည် မူရင်းအက်ပ်နှင့် အနည်းငယ် ပိုတူသည်ဟု ခံစားရစေသည်။ ယေဘုယျအားဖြင့်၊ ကျွန်ုပ်တို့သည် ၎င်းကို ဆိုက်တိုင်းတွင် မအကြံပြုထားသောကြောင့် သတိထားအသုံးပြုပါ။

<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။

Normalize.css

ပိုမိုကောင်းမွန်သော ဘရောက်ဆာဖြတ်ကျော်တင်ဆက်မှုအတွက်၊ 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 စနစ် အလုပ်လုပ်ပုံဖြစ်သည် ။

မှန်ကန်သော alignment နှင့် padding အတွက် .container(ပုံသေ-အကျယ်) သို့မဟုတ် (အပြည့်-အကျယ်) အတွင်း အတန်းများကို ထားရှိရမည် ။.container-fluid
အလျားလိုက် ကော်လံအုပ်စုများ ဖန်တီးရန် အတန်းများကို အသုံးပြုပါ။
အကြောင်းအရာကို ကော်လံများအတွင်း ထားရှိသင့်ပြီး ကော်လံများသာ အတန်းများ၏ ချက်ချင်းကလေးများ ဖြစ်နိုင်ပါသည်။
ဇယားကွက်အပြင်အဆင်များကို လျင်မြန်စွာပြုလုပ်ရန်အတွက် ကဲ့သို့သော ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်း .rowများကို ရရှိနိုင်ပါသည်။ .col-xs-4ပိုနည်းသော အဓိပ္ပါယ်ဖွင့်ဆိုချက်များအတွက် ရောစပ်နည်းကိုလည်း သုံးနိုင်သည်။
ကော်လံများမှတဆင့် ရေမြောင်းများ (ကော်လံအကြောင်းအရာကြား ကွာဟချက်) ကို ဖန်တီးသည် padding။ .rowထို padding ကို s ပေါ်ရှိ negative margin မှတစ်ဆင့် ပထမနှင့် နောက်ဆုံးကော်လံအတွက် အတန်းများတွင် offset လုပ်ထားသည် ။
အနုတ်လက္ခဏာအနားသတ်သည် အဘယ်ကြောင့် အောက်ဖော်ပြပါနမူနာများကို ကျော်လွန်နေသနည်း။ ထို့ကြောင့် ဇယားကွက်ကော်လံများအတွင်းမှ အကြောင်းအရာများကို ဇယားကွက်မဟုတ်သော အကြောင်းအရာများဖြင့် တန်းစီထားသည်။
သင်ချဲ့လိုသော ကော်လံဆယ်နှစ်ခု၏ အရေအတွက်ကို သတ်မှတ်ခြင်းဖြင့် ဂရစ်ကော်လံများကို ဖန်တီးပါသည်။ ဥပမာအားဖြင့်၊ တူညီသောကော်လံသုံးခုသည် သုံးခုကိုသုံးသည် .col-xs-4။
အတန်းတစ်ခုတွင် ကော်လံ 12 ခုထက်ပို၍ ထားရှိပါက၊ အပိုကော်လံအုပ်စုတစ်ခုစီသည် ယူနစ်တစ်ခုအနေဖြင့် လိုင်းအသစ်တစ်ခုသို့ ထုပ်ပိုးမည်ဖြစ်သည်။
ဇယားကွက်အတန်းအစားများသည် မျက်နှာပြင်အကျယ်များထက် ပိုကြီးသော သို့မဟုတ် တူညီသော စက်ပစ္စည်းများတွင် သက်ရောက်မှုရှိပြီး သေးငယ်သောစက်ပစ္စည်းများတွင် ပစ်မှတ်ထားသော ဂရစ်အတန်းများကို အစားထိုးပါ။ ထို့ကြောင့် ဥပမာ အားဖြင့်၊ မည်သည့် .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-widthCSS ကို ပိုမိုကျဉ်းမြောင်းသော စက်ကိရိယာအစုံတွင် ကန့်သတ်ရန် 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။

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<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-*သင့်ကော်လံများသို့ ထည့်ခြင်းဖြင့် အပိုအသေးနှင့် အလတ်စား စက်ဂရစ်အတန်းများကို အသုံးပြုပါ ။ အားလုံးဘယ်လိုအလုပ်လုပ်လဲဆိုတာကို ပိုကောင်းတဲ့စိတ်ကူးအတွက် အောက်က ဥပမာကို ကြည့်ပါ။

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- 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-*တက်ဘလက် အတန်းအစား များနှင့်အတူ ပိုမိုတက်ကြွပြီး အားကောင်းသည့် အပြင်အဆင်များကို ဖန်တီးခြင်းဖြင့် ယခင်နမူနာကို တည်ဆောက်ပါ ။

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<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 ခုထက်ပို၍ ထားရှိပါက၊ အပိုကော်လံအုပ်စုတစ်ခုစီသည် ယူနစ်တစ်ခုအနေဖြင့် လိုင်းအသစ်တစ်ခုသို့ ထုပ်ပိုးမည်ဖြစ်သည်။

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 မှစ၍၊ ဤ 4 ကော်လံ-ကျယ်ပြန့်သော div သည် ဆက်တိုက်ယူနစ်တစ်ခုအဖြစ် စာကြောင်းအသစ်တစ်ခုပေါ်သို့ ပတ်ထားသည်။

.col-xs-6
နောက်ဆက်တွဲ ကော်လံများသည် စာကြောင်းအသစ်အတိုင်း ဆက်သွားကြသည်။

<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 &gt; 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 နှင့် ကျွန်ုပ်တို့၏တုံ့ပြန်မှုဆိုင်ရာအသုံးဝင်သောအတန်းများကို ပေါင်းစပ်အသုံးပြုပါ ။

.col-xs-6 .col-sm-3
သင့်မြင်ကွင်းကို အရွယ်အစားပြောင်းပါ သို့မဟုတ် နမူနာတစ်ခုအတွက် သင့်ဖုန်းတွင် ၎င်းကို စစ်ကြည့်ပါ။

.col-xs-6 .col-sm-3

<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>

ရေမြောင်းများကိုဖယ်ရှားပါ။

အတန်းတစ်ခုမှ ရေမြောင်းများကို ဖယ်ရှားပြီး ၎င်းသည် အတန်းနှင့် ကော်လံများ .row-no-guttersဖြစ်သည်။

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

နှိမ်ခံကော်လံ

.col-md-offset-*အတန်း များကို အသုံးပြု၍ ကော်လံများကို ညာဘက်သို့ ရွှေ့ပါ ။ ဤအတန်းများသည် ကော်လံတစ်ခု၏ ဘယ်ဘက်အနားသတ်ကို *ကော်လံများအလိုက် တိုးစေသည်။ ဥပမာ၊ ကော်လံလေးခုကို .col-md-offset-4ရွှေ့ ပါ။.col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-၃

<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-*

အဆင့် 1: .col-sm-9

အဆင့် 2: .col-xs-8 .col-sm-6

အဆင့် 2: .col-xs-4 .col-sm-6

<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-*။

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<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>

mixins နှင့် variable နည်းပါးသည်။

လျင်မြန်သော အပြင်အဆင်များအတွက် ကြိုတင် တည်ဆောက်ထားသော ဂရစ်အတန်း များ အပြင် ၊ Bootstrap တွင် သင့်ကိုယ်ပိုင်ရိုးရှင်းပြီး အဓိပ္ပါယ်ရှိသော အပြင်အဆင်များကို လျင်မြန်စွာထုတ်ပေးနိုင်စေရန်အတွက် ကိန်းရှင်များနည်းပါးခြင်းနှင့် ရောနှောပါဝင်ပါသည်။

ကိန်းရှင်များ

ကိန်းရှင်များသည် ကော်လံအရေအတွက်၊ ရေမြောင်းအကျယ်နှင့် ပေါ်နေသောကော်လံများကို စတင်မည့် မီဒီယာမေးမြန်းချက်အမှတ်ကို ဆုံးဖြတ်သည်။ အထက်တွင်ဖော်ပြထားသော ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများအပြင် အောက်တွင်ဖော်ပြထားသော စိတ်ကြိုက် mixins အတွက် ၎င်းတို့ကို ကျွန်ုပ်တို့အသုံးပြုပါသည်။

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

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>

Strikethrough စာသား

မသက်ဆိုင်တော့သော စာသားတုံးများကို ညွှန်ပြရန်အတွက် <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>။

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

အမည်အပြည့်အစုံ
[email protected]

<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>

ကိုးကားချက်များ

သင့်စာရွက်စာတမ်းအတွင်းရှိ အခြားရင်းမြစ်များမှ အကြောင်းအရာတုံးများကို ကိုးကားခြင်း။

မူရင်း blockquote

ကိုးကားချက်အဖြစ် မည်သည့် 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 ရွေးစရာများ

စံတစ်ခုပေါ်ရှိ ရိုးရှင်းသော ပြောင်းလဲမှုများအတွက် စတိုင်နှင့် အကြောင်းအရာ အပြောင်းအလဲများ <blockquote>။

အရင်းအမြစ်အမည်ပေးခြင်း

<footer>အရင်းအမြစ်ကို ဖော်ထုတ်ရန်အတွက် a ထည့်ပါ ။ အရင်းအမြစ်အလုပ်၏အမည်ကို ထုပ်ပိုးပါ <cite>။

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ Integer posuere သည် ante တစ်ခုဖြစ်သည်။

Source Title တွင် နာမည်ကြီးသူ

<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 တစ်ခုအတွက် ထည့် ပါ။

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ Integer posuere သည် ante တစ်ခုဖြစ်သည်။

Source Title တွင် နာမည်ကြီးသူ

<blockquote class="blockquote-reverse">
  ...
</blockquote>

စာရင်းများ

Unordered

အမှာစာ သည် အထူးတလည် အရေးမပါသော ပစ္စည်းစာရင်း ။

Lorem ipsum dolor ထိုင် amet
Consectetur adipiscing elit
Massa တွင် Integer molestie lorem
pretium nisl aliquet တွင် Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean ထိုင် amet erat သီလရှင်
porttitor loem ကိုရယူပါ။

<ul>
  <li>...</li>
</ul>

အမိန့်ပေးတယ်။

အမှာ စာသည် အတိအလင်း အရေးပါ သည့် အရာများစာရင်း ။

Lorem ipsum dolor ထိုင် amet
Consectetur adipiscing elit
Massa တွင် Integer molestie lorem
pretium nisl aliquet တွင် Facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean ထိုင် amet erat သီလရှင်
porttitor loem ကိုရယူပါ။

<ol>
  <li>...</li>
</ol>

ပုံစံမဲ့

list-styleစာရင်းအကြောင်းအရာများပေါ်ရှိ ပုံသေနှင့် ဘယ်ဘက်အနားသတ်ကို ဖယ်ရှား ပါ (ချက်ချင်းကလေးများသာ)။ ၎င်းသည် လက်ငင်းကလေးများစာရင်းဝင်သည့်အရာများနှင့်သာ သက်ဆိုင်သည် ၊ ဆိုလိုသည်မှာ သင်သည် မည်သည့် nested lists အတွက်မဆို အတန်းကို ထည့်ရန် လိုအပ်မည်ဖြစ်သည်။

Lorem ipsum dolor ထိုင် amet
Consectetur adipiscing elit
Massa တွင် Integer molestie lorem
pretium nisl aliquet တွင် Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean ထိုင် amet erat သီလရှင်
porttitor loem ကိုရယူပါ။

<ul class="list-unstyled">
  <li>...</li>
</ul>

တန်းဝင်ကာစီသည်

စာရင်းအရာအားလုံးကို မျဉ်းတစ်ကြောင်းတည်း display: inline-block;နှင့် အလင်းအဖုံးအချို့ဖြင့် ထားလိုက်ပါ။

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

ဖော်ပြချက်

၎င်းတို့၏ ဆက်စပ်ဖော်ပြချက်များနှင့် ဝေါဟာရများစာရင်း။

ဖော်ပြချက်စာရင်းများ: ဖော်ပြချက်စာရင်းသည် ဝေါဟာရများကို သတ်မှတ်ရန်အတွက် ပြီးပြည့်စုံသည်။
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit။; Donec id elit non mi porta gravida at eget metus
Malesuada porta: Etiam porta sem malesuada magna mollis euismod။

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

အလျားလိုက်ဖော်ပြချက်

စည်းကမ်းချက်များနှင့် ဖော်ပြချက်များကို <dl>ဘေးချင်းကပ်လျက် တန်းစီပါ။ default s ကဲ့သို့ stacked မှစတင်သည် <dl>, သို့သော် navbar ကိုချဲ့ထွင်သောအခါ, ထိုသို့လုပ်ပါ။

ဖော်ပြချက်စာရင်းများ: ဖော်ပြချက်စာရင်းသည် ဝေါဟာရများကို သတ်မှတ်ရန်အတွက် ပြီးပြည့်စုံသည်။
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit။; Donec id elit non mi porta gravida at eget metus
Malesuada porta: Etiam porta sem malesuada magna mollis euismod။
Felis euismod semper eget lacinia: Fusce dapibus၊ tellus ac cursus commodo၊ tortor mauris condimentum nibh၊ ut fermentum massa justo sit amet risus။

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

အလိုအလျောက်ဖြတ်တောက်ခြင်း။

အလျားလိုက်ဖော်ပြချက်စာရင်းများသည် ဘယ်ဘက်ကော်လံတွင် လိုက်ဖက်ရန် ရှည်လွန်းသော ဝေါဟာရများကို ဖြတ်တောက်ပေးပါမည် text-overflow။ ပိုကျဉ်းသော viewports များတွင်၊ ၎င်းတို့သည် ပုံသေ stacked layout သို့ ပြောင်းလဲသွားပါမည်။

တန်းဝင်ကာစီသည်

ကုဒ်အတိုအထွာများကို အတွင်းလိုင်းအတိုအထွာများဖြင့် ခြုံပါ။<code> ။

ဥပမာအားဖြင့် <section>inline အဖြစ်ထုပ်ပိုးသင့်သည်။

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

အသုံးပြုသူ ထည့်သွင်းမှု

ကိုသုံးပါ။<kbd>ပုံမှန်အားဖြင့် ကီးဘုတ်မှတစ်ဆင့် ထည့်သွင်းသည့် ထည့်သွင်းမှုကို ညွှန်ပြရန်အတွက်

လမ်းညွှန်များကို ပြောင်းရန်၊ လမ်းညွှန် cd၏အမည်ကို နောက်တွင် ရိုက်ထည့်ပါ။
ဆက်တင်များကို တည်းဖြတ်ရန် နှိပ်ပါ။ ctrl + ,

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>&lt;p&gt;Sample text here...&lt;/p&gt;</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	@ဖြိုး
၃	လာရီ	ငှက်	@twitter

<table class="table">
  ...
</table>

အစင်းတန်းများ

. .table-striped_ <tbody>_

ဘရောင်ဇာ ဖြတ်ကျော် လိုက်ဖက်မှု

အစင်းကြောင်းဇယားများကို :nth-childInternet Explorer 8 တွင်မရရှိနိုင်သော CSS ရွေးချယ်မှုမှတစ်ဆင့် ပုံစံပြုလုပ်ထားသည်။

#	နာမည်	မျိုးနွယ်အမည်	အသုံးပြုသူအမည်
၁	မှတ်သားပါ။	အော့တို	@mdo
၂	ယာကုပ်	Thornton	@ဖြိုး
၃	လာရီ	ငှက်	@twitter

<table class="table table-striped">
  ...
</table>

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

.table-borderedဇယားနှင့် ဆဲလ်များအားလုံးရှိ ဘောင်များအတွက် ထည့်ပါ ။

#	နာမည်	မျိုးနွယ်အမည်	အသုံးပြုသူအမည်
၁	မှတ်သားပါ။	အော့တို	@mdo
၂	ယာကုပ်	Thornton	@ဖြိုး
၃	လာရီ	ငှက်	@twitter

<table class="table table-bordered">
  ...
</table>

အတန်းများကို ရွှေ့ပါ။

.table-hoverတစ်ခုအတွင်း စားပွဲအတန်းများပေါ်တွင် ပျံဝဲနေသော အခြေအနေတစ်ခုကို ဖွင့်ရန် ထည့်ပါ <tbody>။

#	နာမည်	မျိုးနွယ်အမည်	အသုံးပြုသူအမည်
၁	မှတ်သားပါ။	အော့တို	@mdo
၂	ယာကုပ်	Thornton	@ဖြိုး
၃	လာရီ	ငှက်	@twitter

<table class="table table-hover">
  ...
</table>

နို့ဆီစားပွဲ

.table-condensedဆဲလ်အကွက်များကို တစ်ဝက်ခန့်ဖြတ်ခြင်းဖြင့် ဇယားများကို ပိုမိုကျစ်လစ်စေရန် ပေါင်းထည့်ပါ ။

#	နာမည်	မျိုးနွယ်အမည်	အသုံးပြုသူအမည်
၁	မှတ်သားပါ။	အော့တို	@mdo
၂	ယာကုပ်	Thornton	@ဖြိုး
၃	လာရီငှက်		@twitter

<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အတန်းထဲတွင် ဝှက်ထားသော နောက်ထပ်စာသားများကဲ့သို့သော အခြားနည်းလမ်းများဖြင့် ထည့်သွင်းထားကြောင်း သေချာပါစေ။

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

ကိရိယာငယ်များ (768px အောက်) တွင် ၎င်းတို့ကို အလျားလိုက် လှိမ့်သွားစေရန် .tableတုံ့ပြန်မှု ရှိသောဇယားများကို ဖန်တီး ပါ။ .table-responsiveအနံ 768px ထက်ကြီးသော အရာများကို ကြည့်ရှုသောအခါ၊ ဤဇယားများတွင် ခြားနားမှု တစ်စုံတစ်ရာ မတွေ့ရ။

ဒေါင်လိုက်ဖြတ်တောက်ခြင်း/ဖြတ်တောက်ခြင်း

Responsive Tables သည် ဇယား overflow-y: hidden၏အောက်ခြေ သို့မဟုတ် အပေါ်ဘက်အစွန်းများထက်ကျော်လွန်သွားသည့် မည်သည့်အကြောင်းအရာကိုမဆို ကလစ်ဖြတ်ထားသည့်အရာကို အသုံးပြုသည်။ အထူးသဖြင့်၊ ၎င်းသည် dropdown menus နှင့် အခြားသော third-party widget များကို ဖြတ်တောက်နိုင်သည်။

Firefox နှင့် ကွက်လပ်များ

widthFirefox တွင် တုံ့ပြန်မှုဇယားကို အနှောင့်အယှက်ဖြစ်စေသော အဆင်မပြေသည့်ကွက်လပ်ပုံစံပုံစံအချို့ ရှိသည်။ 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>

ဖြည့်သွင်းအုပ်စုများနှင့် ဖောင်အဖွဲ့များ မရောနှောပါနှင့်

ဖောင်အုပ်စုများကို ထည့်သွင်းအုပ်စုများ နှင့် တိုက်ရိုက်မရောနှောပါနှင့် ။ ယင်းအစား၊ ဖောင်အဖွဲ့၏ အတွင်းတွင် ထည့်သွင်းသည့်အဖွဲ့ကို အသိုက်ဖွဲ့ပါ။

Inline ပုံစံ

ဘယ်ဘက်ညှိပြီး လိုင်း-ပိတ်ဆို့ထိန်းချုပ်မှုများအတွက် .form-inline(တစ်ခုဖြစ်ရန်မလိုပါ) သင့်ဖောင်တွင် ထည့်ပါ ။ ၎င်းသည် အနည်းဆုံး 768px ကျယ်သော viewports အတွင်းရှိ ပုံစံများနှင့်သာ သက်ဆိုင်ပါသည်။<form>

စိတ်ကြိုက်အကျယ်များ လိုအပ်နိုင်သည်။

ထည့်သွင်းမှုများနှင့် ရွေးချယ်မှုများကို width: 100%;Bootstrap တွင် မူရင်းအတိုင်း အသုံးပြုထားသည်။ inline ဖောင် width: auto;များအတွင်း၊ ထိန်းချုပ်မှုများစွာသည် တူညီသောလိုင်းပေါ်တွင် ရှိနေနိုင်စေရန် ၎င်းကို ပြန်လည်သတ်မှတ်သည်။ သင့်အပြင်အဆင်အပေါ်မူတည်၍ စိတ်ကြိုက်အကျယ်များ ထပ်မံလိုအပ်နိုင်ပါသည်။

တံဆိပ်များကို အမြဲထည့်ပါ။

ထည့်သွင်းမှုတိုင်းအတွက် အညွှန်းမပါဝင်ပါက စခရင်ဖတ်သူများသည် သင့်ဖောင်များတွင် ပြဿနာရှိလိမ့်မည်။ ဤ inline ပုံစံများအတွက်၊ သင်သည် .sr-onlyအတန်းကို အသုံးပြု၍ အညွှန်းများကို ဝှက်ထားနိုင်သည်။ aria-label, aria-labelledbyသို့မဟုတ် titleattribute ကဲ့သို့သော အထောက်အကူနည်းပညာများအတွက် အညွှန်းကို ပေးဆောင်သည့် နောက်ထပ် အခြားနည်းလမ်းများ ရှိသေးသည် ။ ယင်းတို့အနက်မှတစ်ခုမျှမရှိပါက၊ စခရင်ဖတ်သူများသည် ရည်ညွှန်းချက်ကိုအသုံးပြုရန် အားကိုးအား ထားပြုနိုင်သော်လည်း အခြားတံဆိပ်ကပ်ခြင်းနည်းလမ်းများအတွက် အစားထိုး 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>၊ ထည့်သွင်းမှုအုပ်စု အစိတ်အပိုင်းကို စစ်ဆေးပါ ။

Textarea

စာသားမျဉ်းများစွာကို ပံ့ပိုးပေးသည့် ထိန်းချုပ်မှုပုံစံ။ လိုအပ်သလို 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&mdash;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&mdash;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>

ကွက်လပ်များကို ပိတ်ထားသည်။

တစ်ပြိုင်နက် အတွင်း ထိန်းချုပ်မှုအားလုံးကို ပိတ်ရန် disabledattribute ကို a တွင် ထည့်ပါ ။<fieldset><fieldset>

လင့်ခ်၏ လုပ်ဆောင်နိုင်စွမ်းအကြောင်း သတိပေးချက်`<a>`

မူရင်းအားဖြင့်၊ ဘရောက်ဆာများသည် မူလပုံစံ ထိန်းချုပ်မှု ( နှင့် ဒြပ်စင်များ) အားလုံးကို disabled အဖြစ် ဆက်ဆံမည်ဖြစ်ပြီး <input>၎င်းတို့ တွင် <select>ကီးဘုတ် နှင့် မောက်စ် အပြန်အလှန်တုံ့ပြန်မှုများကို တားဆီးပေးမည်ဖြစ်သည်။ သို့ရာတွင်၊ သင့်ဖောင်တွင် ဒြပ်စင်များပါ၀င်ပါက၊ ၎င်းတို့ကို စတိုင်လ်တစ်ခုသာပေးပါမည် ။ ခလုတ်များအတွက် ပိတ်ထားရသည့် အခြေအနေ အကြောင်း ကဏ္ဍတွင် မှတ်သားထားသည့်အတိုင်း (အထူးသဖြင့် ကျောက်ဆူးဒြပ်စင်များအတွက် အပိုင်းခွဲပိုင်း) တွင် ဤ CSS ပိုင်ဆိုင်မှုသည် စံသတ်မှတ်ထားခြင်းမရှိသေးဘဲ Opera 18 နှင့် အောက်ဖော်ပြပါတွင် အပြည့်အဝ မပံ့ပိုးနိုင်သေးပါ၊ သို့မဟုတ် Internet Explorer 11 တွင် အနိုင်ရရှိခဲ့သည်။ ကီးဘုတ်အသုံးပြုသူများသည် ဤလင့်ခ်များကို အာရုံစိုက်ခြင်း သို့မဟုတ် အသက်သွင်းနိုင်ခြင်းကို တားဆီးခြင်းမပြုပါ။ ထို့ကြောင့် ဘေးကင်းစေရန်၊ ထိုလင့်ခ်များကို ပိတ်ရန် စိတ်ကြိုက် JavaScript ကို အသုံးပြုပါ။<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

ဘရောင်ဇာ ဖြတ်ကျော် လိုက်ဖက်မှု

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>

ဖတ်ရန်သာဖော်ပြသည်။

readonlyinput ၏တန်ဖိုးကိုမွမ်းမံခြင်းမှကာကွယ်ရန် input တစ်ခုတွင် boolean attribute ကို ထည့်ပါ ။ ဖတ်ရန်သီးသန့်ထည့်သွင်းမှုများသည် ပိုမိုပေါ့ပါးသည် (ပိတ်ထားသောထည့်သွင်းမှုများကဲ့သို့) ပေါ်လွင်သော်လည်း စံညွှန်းကို ထိန်းသိမ်းပါ။

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

အကူအညီစာသား

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

ဖောင်ထိန်းချုပ်မှုများဖြင့် အကူအညီစာသားကို ချိတ်ဆက်ခြင်း။

အကူအညီစာသားသည် ရည်ညွှန်းချက်အသုံးပြုခြင်းနှင့် သက်ဆိုင်သည့် ပုံစံထိန်းချုပ်မှုနှင့် ပြတ်သားစွာ ဆက်စပ်နေသင့်သည် aria-describedby။ အသုံးပြုသူက အာရုံစူးစိုက်မှု သို့မဟုတ် ထိန်းချုပ်မှုထဲသို့ ဝင်ရောက်သည့်အခါ မျက်နှာပြင်ဖတ်သူများကဲ့သို့သော အထောက်အကူပြုနည်းပညာများဖြစ်သည့် ဤအကူအညီစာသားကို ကြေညာမည်ဖြစ်ကြောင်း သေချာစေမည်ဖြစ်သည်။

<label 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>

အလျားလိုက် နှင့် inline ပုံစံများဖြင့် ရွေးချယ်နိုင်သော သင်္ကေတများ

<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 နှင့် navbar အစိတ်အပိုင်းများအတွင်း အစိတ်အပိုင်းများကိုသာ <a>ပံ့ပိုး ထားပါသည်။<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-responsiveBootstrap 3 ရှိ ရုပ်ပုံများကို အတန်း ၏ ထပ်တိုးခြင်းဖြင့် တုံ့ပြန်မှု အဆင်ပြေစေနိုင်သည် ။ ၎င်းသည် ပင်မဒြပ်စင်သို့ ကောင်းမွန်စွာ ချိန်ညှိနိုင်စေရန်၊ ၎င်းသည် ပုံ max-width: 100%;နှင့် height: auto;သက်ဆိုင် သည် ။display: block;

.img-responsiveအတန်းကို အသုံးပြုသည့် ပုံများကို ဗဟိုပြုရန် ၊ .center-blockအစား သုံးပါ .text-center။ အသုံးပြုမှု နှင့်ပတ်သက်ပြီး အသေးစိတ်အချက်အလက်များအတွက် helper classes ကဏ္ဍကို ကြည့်ပါ ။.center-block

SVG ပုံများနှင့် IE 8-10

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">&times;</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 ပိုင်ဆိုင်မှုတန်ဖိုးတစ်ခုစီအတွက် တစ်ခုဖြစ်သည်။

အတန်းအုပ်စု	CSS`display`
`.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 တွင် ဒြပ်စင် ကို မြင်နိုင်သည် ကို ညွှန်ပြသည်။

ပိုသေးငယ်သည်။ ✔ x-small တွင် မြင်နိုင်သည်။

အငယ် ✔ သေးသေးလေးပေါ်မှာ မြင်နိုင်ပါတယ်။

အလယ်အလတ် ✔အလယ်အလတ်တွင်မြင်နိုင်သည်။

ကြီးမားသည်။ ✔ ကြီးမားစွာမြင်နိုင်သည်။

သေးငယ်သည်နှင့် သေးငယ်သည်။ ✔ အသေး နှင့် x တွင် မြင်နိုင်သည်။

အလယ်အလတ်နှင့်အကြီး ✔အလယ်အလတ်နှင့်အကြီးတွင်မြင်နိုင်သည်။

အပိုအသေးနှင့်အလတ် ✔ x-အသေးနှင့်အလတ်တွင်မြင်နိုင်သည်။

အကြီးအသေး ✔ အကြီး အသေး ပေါ်တွင် မြင်နိုင်သည်။

အပိုအသေးနှင့်အကြီး ✔ x အသေးနှင့်အကြီးတွင်မြင်နိုင်သည်။

အသေးစားနှင့်အလတ်စား ✔ အသေးစားနှင့်အလတ်စားတွင်မြင်နိုင်သည်။

ဝှက်ထားသည်...

ဤတွင်၊ အစိမ်းရောင် checkmarks များသည် သင့်လက်ရှိ viewport တွင် ဒြပ်စင် ကို ဝှက် ထားသည်ကို ဖော်ပြသည်။

ပိုသေးငယ်သည်။ ✔ x-small တွင်ဝှက်ထားသည်။

အငယ် ✔ Hidden on small

အလယ်အလတ် ✔ Hidden on medium

Large ✔ အကြီးကြီးပေါ်တွင် ဝှက်ထားသည်။

သေးငယ်သည်နှင့် သေးငယ်သည်။ ✔ Hidden on x-small and small

Medium and large ✔အလတ်နှင့်အကြီးတွင်ဝှက်ထားသည်။

အပိုအသေးနှင့်အလတ် ✔ Hidden on x-small and medium

Small and large ✔အသေးနှင့်အကြီးပေါ်တွင်ဝှက်ထားသည်။

Extra small and large ✔ x အသေးနှင့်အကြီးတွင်ဝှက်ထားသည်။

အသေးစားနှင့်အလတ်စား ✔ Hidden on small and medium

Bootstrap ၏ CSS ကို Less ပေါ်တွင် တည်ဆောက်ထားပြီး CSS ပြုစုရန်အတွက် variables၊ mixins နှင့် functions များကဲ့သို့ ထပ်လောင်းလုပ်ဆောင်နိုင်စွမ်းရှိသော preprocessor တစ်ခုဖြစ်သည်။ ကျွန်ုပ်တို့စုစည်းထားသော CSS ဖိုင်များအစား ဖိုင်နည်းပါးသော အရင်းအမြစ်ကို အသုံးပြုလိုသူများသည် မူဘောင်တစ်လျှောက်တွင် ကျွန်ုပ်တို့အသုံးပြုသော ကိန်းရှင်များနှင့် ရောစပ်ထားသော အများအပြားကို အသုံးပြုနိုင်သည်။

Grid variable များနှင့် mixin များကို Grid system အပိုင်းအတွင်းတွင် အကျုံးဝင် ပါသည်။

Bootstrap ပြုစုခြင်း။

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;
}

အကွက် (Drop) အရိပ်များ

သင်၏ပစ်မှတ်ပရိသတ်သည် နောက်ဆုံးပေါ်နှင့် အကောင်းဆုံးဘရောက်ဆာများနှင့် စက်ပစ္စည်းများကို အသုံးပြုနေပါက၊ 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;
}

အသွင်ပြောင်းမှုများ

လှည့်ပါ၊ အတိုင်းအတာ၊ ဘာသာပြန် (ရွှေ့) သို့မဟုတ် အရာဝတ္တုတစ်ခုခုကို လှည့်ပါ။

.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 တစ်ခု။

.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;
}

အလင်းပိတ်

ဘရောက်ဆာအားလုံးအတွက် အလင်းပိတ်နိုင်မှုကို သတ်မှတ်ပြီး filterIE8 အတွက် ကျောထောက်နောက်ခံကို ပေးဆောင်ပါ။

.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();
}

အလျားလိုက်ဗဟိုပြုခြင်း။

၎င်း၏ ပင်မအတွင်း မည်သည့်ဒြပ်စင်ကိုမဆို အမြန်ဗဟိုပြုပါ။ သတ်မှတ်ရန် သို့မဟုတ် လိုအပ်သည် ။widthmax-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 ပရောဂျက်များတွင် အသုံးပြုရန်အတွက် အချက်အလက်များပါဝင်သည်။

Sass အတွက် Bootstrap

CSS

ခြုံငုံသုံးသပ်ချက်

HTML5 စာတမ်းအမျိုးအစား

မိုဘိုင်းလ်အရင်

စာစီစာရိုက်နှင့် လင့်ခ်များ

Normalize.css

ကွန်တိန်နာများ

ဂရစ်စနစ်

နိဒါန်း

မီဒီယာများ၏မေးမြန်းချက်

ဂရစ်ရွေးချယ်စရာများ

ဥပမာ- အထပ်လိုက်-အလျားလိုက်

ဥပမာ- အရည်ပုံး

ဥပမာ- မိုဘိုင်းနှင့် ဒက်စ်တော့

ဥပမာ- မိုဘိုင်း၊ တက်ဘလက်၊ ဒက်စ်တော့

ဥပမာ- ကော်လံ ပတ်ခြင်း

တုံ့ပြန်မှုကော်လံကို ပြန်လည်သတ်မှတ်သည်။

ရေမြောင်းများကိုဖယ်ရှားပါ။

နှိမ်ခံကော်လံ

အသိုက်ကော်လံများ

ကော်လံအော်ဒါမှာတယ်။

mixins နှင့် variable နည်းပါးသည်။

ကိန်းရှင်များ

Mixins

နမူနာအသုံးပြုမှု

စာစီစာရိုက်

ခေါင်းစဉ်များ

h1။ Bootstrap ခေါင်းစဉ်

h2။ Bootstrap ခေါင်းစဉ်

h3။ Bootstrap ခေါင်းစဉ်

h4။ Bootstrap ခေါင်းစဉ်

h5။ Bootstrap ခေါင်းစဉ်

h6။ Bootstrap ခေါင်းစဉ်

h1။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား

h2။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား

h3။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား

h4။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား

h5။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား

h6။ Bootstrap ခေါင်းစီး အလယ်တန်း စာသား

မိတ္တူ

ခဲခန်မိတ္တူ

လျှော့နည်းဖြင့် တည်ဆောက်ထားသည်။

စာသားအစိတ်အပိုင်းများ

အမှတ်အသားပြုထားသော စာသား

ဖျက်လိုက်သော စာသား

Strikethrough စာသား

စာသားထည့်သွင်းထားသည်။

မျဉ်းသားထားသော စာသား

စာသားလေးတွေ

ရဲရင့်သည်။

စာလုံးစောင်း

တလှည့်စီဒြပ်စင်

တန်းညှိသင်တန်းများ

အသွင်ပြောင်းသင်တန်းများ

အတိုကောက်များ

အခြေခံအတိုကောက်

ကနဦးဝါဒ

လိပ်စာများ

ကိုးကားချက်များ

မူရင်း blockquote

Blockquote ရွေးစရာများ

အရင်းအမြစ်အမည်ပေးခြင်း

အလှည့်ကျပြသမှုများ

စာရင်းများ

Unordered

အမိန့်ပေးတယ်။

ပုံစံမဲ့

တန်းဝင်ကာစီသည်

ဖော်ပြချက်

အလျားလိုက်ဖော်ပြချက်

အလိုအလျောက်ဖြတ်တောက်ခြင်း။

ကုဒ်

တန်းဝင်ကာစီသည်

အသုံးပြုသူ ထည့်သွင်းမှု

အခြေခံလုပ်ကွက်

ကိန်းရှင်များ

နမူနာအထွက်

စားပွဲများ

အခြေခံဥပမာ

အစင်းတန်းများ

ဒီမို `:focus`ပြည်နယ်

လင့်ခ်၏ လုပ်ဆောင်နိုင်စွမ်းအကြောင်း သတိပေးချက်`<a>`

`.sr-only`ဝှက်ထားသော အညွှန်းများပါ သည့် ရွေးချယ်နိုင်သော အိုင်ကွန်များ