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

HTML ခေါင်းစဉ်များအားလုံး <h1>မှတဆင့် <h6>ရနိုင်ပါသည်။

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

h2။ ခေါင်းစီး ၂

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

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

h5။ ခေါင်းစီး ၅

h6။ ခေါင်းစီး ၆

မိတ္တူ

Bootstrap ၏ global default font-sizeသည် 14px ဖြစ်ပြီး 20pxline-height ဖြစ်သည် ။ ၎င်းသည် စာပိုဒ်အားလုံးနှင့် သက်ဆိုင်သည်။ ထို့အပြင်၊ (စာပိုဒ်များ) သည် ၎င်းတို့၏မျဉ်းကြောင်းအမြင့်တစ်ဝက် (ပုံမှန်အားဖြင့် 9px) ၏အောက်ခြေအနားသတ်ကို ရရှိသည်။<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 = "le" > ... </p>

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

စာစီစာရိုက်စကေးသည် variables.less တွင် LESS variables နှစ်ခု @baseFontSizeအပေါ် အခြေခံထားသည် @baseLineHeight။ ပထမတစ်ခုသည် တစ်လျှောက်လုံးအသုံးပြုသည့် အခြေခံဖောင့်အရွယ်အစားဖြစ်ပြီး ဒုတိယမှာ အခြေခံမျဉ်းအမြင့်ဖြစ်သည်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့အမျိုးအစားအားလုံးနှင့် အခြားအရာအားလုံး၏အနားသတ်များ၊ အကွက်များနှင့် မျဉ်းကြောင်းအမြင့်များကို ဖန်တီးရန်အတွက် အဆိုပါကိန်းရှင်များနှင့် ရိုးရှင်းသောသင်္ချာအချို့ကို ကျွန်ုပ်တို့အသုံးပြုပါသည်။ ၎င်းတို့ကို စိတ်ကြိုက်ပြင်ဆင်ပြီး Bootstrap ကို လိုက်လျောညီထွေဖြစ်အောင် ပြုလုပ်ပါ။

အလေးပေး

ပေါ့ပါးသောစတိုင်များဖြင့် HTML ၏ မူရင်းအလေးပေးတဂ်များကို အသုံးပြုပါ။

`<small>`

အတွင်းလိုင်း သို့မဟုတ် စာသားများကို အလေးပေးမှု လျှော့ ရန်အတွက်၊ သေးငယ်သော တက်ဂ်ကို အသုံးပြုပါ။

ဤစာကြောင်းကို အကောင်းမွန်ဆုံး ပုံနှိပ်စာအဖြစ် သတ်မှတ်ရန် ရည်ရွယ်သည်။

<p> <small> ဤစာကြောင်းကို ကောင်းမွန်သော ပုံနှိပ်စာအဖြစ် သတ်မှတ်ရန် ရည်ရွယ်သည်။ </small> </p>

`<strong>`

အရေးကြီးသော စာသားအတိုအထွာကို အလေးထား ပါ။

အောက်ပါစာသားအတိုအထွာ ကို ရဲရင့်သောစာသားအဖြစ် ပြန်ဆိုထားသည် ။

<strong> ကို ရဲရင့်သော စာသားအဖြစ် ပြန်ဆိုထားသည် </strong>

`<em>`

ဖိစီး မှုဖြင့် စာသားအတိုအထွာကို အလေးထားရန်

အောက်ပါ စာသား အတိုအထွာကို စာလုံးစောင်းဖြင့် စာသားအဖြစ် ပြန်ဆိုထားသည် ။

<em> စာလုံးစောင်းဖြင့် ပြန်ဆိုထားသည် </em>

ကြိုတင်အသိပေးသည်! HTML5 တွင် <b>လွတ်လပ်စွာ အသုံးပြုနိုင် သည်။ အများအားဖြင့် အသံ၊ နည်းပညာဆိုင်ရာ အသုံးအနှုန်းများ စသည်ဖြင့် အ ပိုအရေးပါမှုကို မဖော်ပြဘဲ စကားလုံးများ သို့မဟုတ် စကားစုများကို မီးမောင်းထိုးပြရန် ရည်ရွယ်သည် ။<i><b><i>

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

<abbr>အတိုကောက်များနှင့် အတိုကောက်များ အတွက် တိုးချဲ့ထားသော ဗားရှင်းကို အပေါ်မှချပြရန် HTML ၏ အစိတ်အပိုင်းကို ပုံစံကျကျ အကောင်အထည်ဖော်ခြင်း ။ ရည်ညွှန်းချက်ပါ သော အတိုကောက် titleများသည် အောက်ခြေအစက်ချထားသော အလင်းတန်းနှင့် အပေါ်သို့တက်ခြင်းတွင် အကူအညီကာဆာတစ်ခု ပါရှိပြီး၊ အပေါ်တွင် ထပ်လောင်းအကြောင်းအရာကို ပံ့ပိုးပေးပါသည်။

`<abbr>`

အတိုကောက်၏ ရှည်လျားသော ရွှေ့လျားထားသော စာသားအတွက် ရည်ညွှန်းချက်ကို titleထည့်သွင်းပါ။

စကားလုံး attribute ၏ အတိုကောက်သည် attr ဖြစ်သည်။

<abbr title = "attribute" > attr </abbr>

`<abbr class="initialism">`

.initialismအနည်းငယ်သေးငယ်သော ဖောင့်အရွယ်အစားအတွက် အတိုကောက်တစ်ခုသို့ ထည့်ပါ ။

HTML သည် ပေါင်မုန့်လှီးပြီးကတည်းက အကောင်းဆုံးဖြစ်သည်။

<abbr title = "attribute" class = "initialism" > attr </abbr>

လိပ်စာများ

အနီးဆုံးဘိုးဘေး သို့မဟုတ် လုပ်ငန်းတစ်ခုလုံးအတွက် ဆက်သွယ်ရန်အချက်အလက်ကို တင်ပြပါ။

`<address>`

စာကြောင်းအားလုံးကို အဆုံးသတ်ခြင်းဖြင့် ဖော်မတ်ချခြင်းကို ထိန်းသိမ်းပါ <br>။

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

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

<လိပ်စာ>
  <strong> Twitter၊ Inc. </strong><br>
  795 Folsom Ave၊ Suite 600 <br>
  ဆန်ဖရန်စစ္စကို၊ CA 94107 <br>
  <abbr title = "ဖုန်း" > P: </abbr> (123) 456-7890 
</address>
 
<လိပ်စာ>
  <strong> အမည်အပြည့်အစုံ </strong><br>
  <a href="mailto:#"> [email protected] </a> _ _ _ 
</address>

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

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

ပုံသေ blockqoute

ကိုးကားချက်အဖြစ် မည်သည့် 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 သည် ante တစ်ခုဖြစ်သည်။ </p>
</blockquote>

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ Integer posuere သည် ante တစ်ခုဖြစ်သည်။
အရင်းအမြစ်ခေါင်းစဉ် တွင် ကျော်ကြားသူတစ်ဦး

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit။ Integer posuere သည် ante တစ်ခုဖြစ်သည်။ </p>
  <small> ကျော်ကြားသူ တစ်ဦး <cite title = "အရင်းအမြစ် ခေါင်းစဉ်" > အရင်းအမြစ် ခေါင်းစဉ် </cite></small> 
</blockquote>

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

.pull-rightဇဝေဇဝါဖြစ်ပြီး ညာဖက်ညှိထားသော ဘလော့ကိုးကားအတွက် အသုံးပြု ပါ။

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ Integer posuere သည် ante တစ်ခုဖြစ်သည်။
အရင်းအမြစ်ခေါင်းစဉ် တွင် ကျော်ကြားသူတစ်ဦး

<blockquote class = "pull-right" > 
  ...
</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အဘယ်သူမျှမ သို့မဟုတ် အပိုအဝဲအကွက် ပါရှိသော အရာများစာရင်း ။

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 = "unstyled" > 
  <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>ဘေးချင်းကပ်လျက် တန်းစီပါ။

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

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

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

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

<p>ဤနေရာတွင် နမူနာစာသား...</p>

<pre>
  <p>နမူနာစာသား ဤနေရာတွင်...</p>
</pre>

ကြိုတင်အသိပေးသည်! <pre>ဘယ်ဘက်နဲ့ နီးနိုင်သမျှ ကုတ်တွေကို tag ထဲမှာ ထားဖို့ သေချာပါစေ ။ tabs အားလုံးကို render လုပ်ပါလိမ့်မယ်။

.pre-scrollableအမြင့်ဆုံး အမြင့် 350px သတ်မှတ်ပြီး y-ဝင်ရိုး scrollbar ကို ပံ့ပိုးပေးမည့် အတန်းကို စိတ်ကြိုက်ရွေးချယ်နိုင်ပါသည် ။

ပုံသေပုံစံများ

အခြေခံပုံစံပုံစံအတွက်—အပေါ့စားအကွက်များနှင့် အလျားလိုက်ပိုင်းခြားမှုများကိုသာ—အခြေခံအတန်းအစား .tableကို မည်သည့်အတွက်မဆို ထည့်ပါ <table>။

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

<table class = "table" > 
  …
</table>

ရွေးချယ်နိုင်သော အတန်းများ

.tableလိုက်နာရမည့်အတန်းများကို အခြေခံအတန်း ထဲသို့ ထည့်ပါ ။

`.table-striped`

<tbody>CSS ရွေးချယ်မှု မှတစ်ဆင့် ဇယားကွက်အတွင်း မျဉ်းသားအစင်းကြောင်းများ ပေါင်းထည့် :nth-childသည် (IE7-IE8 တွင်မရနိုင်ပါ)။

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

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

`.table-bordered`

ဘောင်များနှင့် လုံးဝန်းသောထောင့်များကို စားပွဲသို့ထည့်ပါ။

#	နာမည်	မျိုးနွယ်အမည်	အသုံးပြုသူအမည်
၁	မှတ်သားပါ။	အော့တို	@mdo
၁	မှတ်သားပါ။	အော့တို	@getbootstrap
၂	ယာကုပ်	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>

ရွေးချယ်နိုင်သောအတန်းအတန်းများ

ဇယားအတန်းများကို အရောင်ခြယ်ရန်အတွက် ဆက်စပ်အတန်းများကို သုံးပါ။

အတန်း	ဖော်ပြချက်
`.success`	အောင်မြင်သော သို့မဟုတ် အပြုသဘောဆောင်သော လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။
`.error`	အန္တရာယ်ရှိသော သို့မဟုတ် အပျက်သဘောဆောင်သော လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။
`.info`	မူရင်းစတိုင်များကို အစားထိုးအဖြစ် အသုံးပြုသည်။

#	ထုတ်ကုန်	ငွေပေးချေမှု	အဆင့်အတန်း
၁	တီဘီ - လစဉ်	၀၁/၀၄/၂၀၁၂	အတည်
၂	တီဘီ - လစဉ်	၀၂/၀၄/၂၀၁၂	ငြင်းပယ်ခဲ့သည်။
၃	တီဘီ - လစဉ်	၀၃/၀၄/၂၀၁၂	ဆိုင်းငံ့ထားသည်။

...
  < tr class = "success" >
    <td> 1 < /td>
    <td>တီဘီ - လစဉ်</ td >
    < td > 01/04/2012 < / td >
    <td>အတည်ပြုပြီး</ td >
  </ tr >
...

စားပွဲပေါ်တင်ခြင်းကို ပံ့ပိုးထားသည်။

ပံ့ပိုးထားသော ဇယား HTML အစိတ်အပိုင်းများစာရင်းနှင့် ၎င်းတို့ကို မည်သို့အသုံးပြုသင့်သနည်း။

တက်ဂ်	ဖော်ပြချက်
`<table>`	ဇယားဖော်မတ်ဖြင့် ဒေတာကိုပြသရန်အတွက် ထုပ်ပိုးသည့်ဒြပ်စင်
`<thead>`	`<tr>`ဇယားခေါင်းစီးအတန်းများ ( ) အတွက် ဇယားကော်လံများကို အညွှန်းတပ်ရန် ကွန်တိန်နာဒြပ်စင်
`<tbody>`	`<tr>`ဇယား ၏ကိုယ်ထည်ရှိ ဇယားအတန်း ( ) အတွက် ကွန်တိန်နာဒြပ်စင်
`<tr>`	အတန်းတစ်ခုတည်းတွင်ပေါ်လာသော ဇယားဆဲလ် `<td>`အ စုတစ်ခုအတွက် ကွန်တိန်နာဒြပ်စင်`<th>`
`<td>`	မူရင်းဇယားဆဲလ်
`<th>`	ကော်လံ (သို့မဟုတ် အတန်း၊ နယ်ပယ်နှင့် နေရာချထားမှုပေါ်မူတည်၍) အထူးဇယားဆဲလ်များကို အညွှန်းများ အတွင်းတွင် အသုံးပြုရပါမည်။`<thead>`
`<caption>`	အထူးသဖြင့် စခရင်ဖတ်သူများအတွက် အသုံးဝင်သော ဇယား၏ ဖော်ပြချက် သို့မဟုတ် အကျဉ်းချုပ်

<စားပွဲ>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

ပုံသေပုံစံများ

<form>တစ်ဦးချင်း ဖောင်ထိန်းချုပ်မှုများသည် ပုံစံဒီဇိုင်းကို လက်ခံရရှိသော်လည်း လိုအပ်သော အခြေခံအတန်းအစား သို့မဟုတ် markup တွင် ကြီးမားသောပြောင်းလဲမှုများ မရှိဘဲ ။ ဖောင်ထိန်းချုပ်မှုများ၏ထိပ်ရှိ ဘယ်ဘက်ညှိထားသော အညွှန်းများ တွင် ရလဒ်များ။

<form>
  <legend> ဒဏ္ဍာရီ </legend>
  <label> အညွှန်းအမည် </label>
  <input type = "text" placeholder = "တစ်ခုခုကို ရိုက်ပါ..." >  
  <span class = "help-block" > နမူနာ ဘလောက်အဆင့် အကူအညီ စာသား ဤနေရာတွင်။ </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > ငါ့ကိုစစ်ဆေးပါ။ 
  </label>
  <button type = "submit" class = "btn" > တင်သွင်းရန် </button>  
</form>

ရွေးချယ်နိုင်သော အပြင်အဆင်များ

Bootstrap တွင် ပါဝင်သော ဘုံအသုံးပြုမှုကိစ္စများအတွက် ရွေးချယ်နိုင်သော ပုံစံ layout သုံးခုဖြစ်သည်။

ရှာဖွေမှုပုံစံ

.form-searchဖောင်သို့ ပေါင်းထည့်ကာ .search-queryအ ပို <input>အဝိုင်းသား စာသားထည့်သွင်းမှုအတွက်။

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > ရှာ </button>  
</form>

Inline ပုံစံ

.form-inlineကျစ်လစ်သိပ်သည်းသော အပြင်အဆင်အတွက် ဘယ်ဘက်ညှိထားသော အညွှန်းများနှင့် လိုင်း-ပိတ်ဆို့ထိန်းချုပ်မှုများကို ထည့်ပါ ။

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > ကျွန်ုပ်ကို မှတ်ထားပါ။ 
  </label>
  <button type = "submit" class = "btn" > အကောင့်ဝင် </button>  
</form>

အလျားလိုက်ပုံစံ

အညွှန်းများကို ညာဘက်ညှိပြီး ထိန်းချုပ်မှုများကဲ့သို့ မျဉ်းတစ်ကြောင်းပေါ်စေရန် ၎င်းတို့ကို ဘယ်ဘက်တွင် မျှောပါ။ ပုံသေပုံစံတစ်ခုမှ မှတ်သားထားသော ပြောင်းလဲမှုအများစုကို လိုအပ်သည်-

.form-horizontalပုံစံသို့ ထည့်ပါ ။
အညွှန်းများနှင့် ထိန်းချုပ်မှုများကို ထည့်သွင်းပါ။.control-group
.control-labelအညွှန်း ထဲသို့ထည့်ပါ ။
.controlsသင့်လျော်သော ချိန်ညှိမှုအတွက် ဆက်စပ်ထိန်းချုပ်မှုများကို ထည့် သွင်းပါ။

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > အီးမေးလ် </label>  
    <div class = "controls" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > စကားဝှက် </label>  
    <div class = "controls" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > ကျွန်ုပ်ကို မှတ်ထားပါ။ 
      </label>
      <button type = "submit" class = "btn" > အကောင့်ဝင် </button>  
    </div>
  </div>
</form>

ပုံစံထိန်းချုပ်မှုများကို ပံ့ပိုးထားသည်။

နမူနာပုံစံ အပြင်အဆင်တွင် ပံ့ပိုးထားသော စံပုံစံထိန်းချုပ်မှု နမူနာများ။

သွင်းအားစုများ

အသုံးအများဆုံးပုံစံထိန်းချုပ်မှု၊ စာသားအခြေခံထည့်သွင်းမှုအကွက်များ။ HTML5 အမျိုးအစားအားလုံးအတွက် ပံ့ပိုးမှုပါဝင်သည်- စာသား၊ စကားဝှက်၊ ရက်စွဲအချိန်၊ ရက်စွဲအချိန်-စက်တွင်း၊ ရက်စွဲ၊ လ၊ အချိန်၊ တစ်ပတ်၊ နံပါတ်၊ အီးမေးလ်၊ url၊ ရှာဖွေမှု၊ ဖုန်းနှင့် အရောင်။

သတ်မှတ်ထားသော typeအချိန်တိုင်း အသုံးပြုရန် လိုအပ်ပါသည်။

<input type = "text" placeholder = "စာသားထည့်သွင်းခြင်း" >

Textarea

စာသားမျဉ်းများစွာကို ပံ့ပိုးပေးသည့် ထိန်းချုပ်မှုပုံစံ။ rowအရည်အချင်းကို လိုအပ်သလို ပြောင်းပါ ။

<textarea rows = "3" ></textarea>

အမှန်ခြစ်ပုံးများနှင့် ရေဒီယိုများ

အမှတ်ခြစ်ကွက်များသည် စာရင်းတစ်ခုအတွင်းရှိ ရွေးချယ်စရာတစ်ခု သို့မဟုတ် အများအပြားကို ရွေးချယ်ရန်အတွက်ဖြစ်ပြီး ရေဒီယိုများသည် ရွေးချယ်စရာများစွာထဲမှ တစ်ခုကို ရွေးချယ်ရန်အတွက်ဖြစ်သည်။

ပုံသေ (စုဖွဲ့ထားသည်)

ရွေးချယ်မှုတစ်ခုသည် ဤအချက်ဖြစ်သည်—၎င်းသည် အဘယ်ကြောင့် အလွန်ကောင်းမွန်သည်ကို ထည့်သွင်းရန်သေချာစေပါ။
ရွေးချယ်မှုတစ်ခုသည် ဤအချက်ဖြစ်သည်—၎င်းသည် အဘယ်ကြောင့် အလွန်ကောင်းမွန်သည်ကို ထည့်သွင်းရန်သေချာစေပါ။ ရွေးချယ်မှု နှစ်ခုသည် အခြားအရာတစ်ခု ဖြစ်နိုင်ပြီး ၎င်းကို ရွေးချယ်ခြင်းဖြင့် ရွေးချယ်မှုတစ်ခုကို ဖြုတ်ပစ်မည်ဖြစ်သည်။

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  ရွေးချယ်မှုတစ်ခုသည် ဤအချက်ဖြစ်သည်—၎င်းသည် အဘယ်ကြောင့် အလွန်ကောင်းမွန်သည်ကို ထည့်သွင်းရန်သေချာစေပါ။
</label>
 
<label class = "ရေဒီယို" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" အမှန်ခြစ် >     
  ရွေးချယ်မှုတစ်ခုသည် ဤအချက်ဖြစ်သည်—၎င်းသည် အဘယ်ကြောင့် အလွန်ကောင်းမွန်သည်ကို ထည့်သွင်းရန်သေချာစေပါ။
</label>
<label class = "ရေဒီယို" > 
  <ထည့်သွင်းမှု အမျိုးအစား = "ရေဒီယို" name = "ရွေးချယ်မှုများRadios" id = "ရွေးချယ်မှုများRadios2" တန်ဖိုး = "ရွေးချယ်မှု2" >    
  ရွေးချယ်မှု နှစ်ခုသည် အခြားအရာတစ်ခု ဖြစ်နိုင်ပြီး ၎င်းကို ရွေးချယ်ခြင်းဖြင့် ရွေးချယ်မှုတစ်ခုကို ဖြုတ်ပစ်မည်ဖြစ်သည်။
</label>

Inline checkboxes

.inlineတူညီသောမျဉ်းပေါ်တွင် ပေါ်လာသော ထိန်းချုပ်မှုများကို ထိန်းချုပ်ရန်အတွက် အတန်းကို အမှန်ခြစ်ဘောက်စ်တစ်ခု သို့မဟုတ် ရေဒီယိုတစ်ခုသို့ ပေါင်းထည့်ပါ ။

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" တန်ဖိုး = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" တန်ဖိုး = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" တန်ဖိုး = "option3" > 3   
</label>

ရွေးချယ်သည်။

multiple="multiple"ရွေးချယ်စရာများစွာကို တစ်ပြိုင်နက်ပြသရန် မူရင်းရွေးချယ်ခွင့်ကို အသုံးပြုပါ သို့မဟုတ် သတ်မှတ်ပါ ။

<select>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
< multiple = "multiple" > ရွေးပါ။ 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

ပုံစံထိန်းချုပ်မှုများကို တိုးချဲ့ခြင်း။

ရှိပြီးသားဘရောက်ဆာထိန်းချုပ်မှုများ၏ထိပ်တွင်ထည့်သွင်းခြင်း၊ Bootstrap တွင်အခြားအသုံးဝင်သောပုံစံအစိတ်အပိုင်းများပါဝင်သည်။

ကြိုလင့်ထားသော သွင်းအားစုများ

စာသားအခြေခံ ထည့်သွင်းခြင်း မပြုမီ သို့မဟုတ် ပြီးနောက် စာသား သို့မဟုတ် ခလုတ်များ ထည့်ပါ။ selectဤနေရာတွင် အစိတ်အပိုင်းများကို ပံ့ပိုးမ ထားကြောင်း သတိပြုပါ ။

ပုံသေရွေးချယ်မှုများ

အတန်းနှစ်ခုအနက်မှ တစ်ခု .add-onနှင့်တစ်ခု inputတွဲပြီး စာသားကို ထည့်သွင်းရန် သို့မဟုတ် စာသားကို ထပ်ပေါင်းထည့်ပါ။

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput " size = "16" type = "text" placeholder = "အသုံးပြုသူ" >      
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput" size = "16" type = "text" ><span class = "add-on" > .00 </span>     
</div>

ပေါင်းစပ်

အတန်းအစားနှင့် instance နှစ်ခုစလုံး .add-onကို ရှေ့တွင်ထားပြီး ထည့်သွင်းမှုတစ်ခုကို ထပ်ထည့်ရန် အသုံးပြုပါ။

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span><input class = "span2" id = "appendedPrependedInput" size = "16" type = "text" ><span class = "add-on" > .00 </span>      
</div>

စာသားအစား ခလုတ်များ

<span>စာသားပါ သည့်အစား ၊ .btnထည့်သွင်းမှုတစ်ခုသို့ ခလုတ်တစ်ခု (သို့မဟုတ် နှစ်ခု) တွဲချိတ်ရန် a ကို အသုံးပြုပါ။

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton" size = "16" type = "text" ><button class = "btn" type = "button" > Go! </button>      
</div>
 
<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons" size = "16" type = "text" ><button class = "btn" type = "button" > ရှာရန် </button><button class = "btn" type = "button" > ရွေးချယ်စရာများ </button>        
</div>

ရှာဖွေမှုပုံစံ

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > ရှာ </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > ရှာ </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

အရွယ်အစားကို ထိန်းချုပ်ပါ။

.input-largeသင့်ထည့်သွင်းမှုများကို ဇယားကွက်ကော်လံအရွယ်အစားများကို အသုံးပြု၍ သင့်ထည့်သွင်းမှုများကို ကြိုက်နှစ်သက်သော သို့မဟုတ် ကိုက်ညီ သည့် အရွယ်အစား အတန်းအစားများကို အသုံးပြုပါ။.span* များကို အသုံးပြု ပါ။

နှိုင်းယှဉ်အရွယ်အစား

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

ကြိုတင်အသိပေးသည်! အနာဂတ်ဗားရှင်းများတွင်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ခလုတ်အရွယ်အစားများနှင့် ကိုက်ညီစေရန် ဤဆက်စပ်ထည့်သွင်းမှုအတန်းများကို အသုံးပြုခြင်းကို ပြောင်းလဲပါမည်။ ဥပမာအားဖြင့်၊ .input-largeထည့်သွင်းမှုတစ်ခု၏ padding နှင့် font-size ကို တိုးပေးလိမ့်မည်။

ဇယားကွက်အရွယ်အစား

ဇယားကွက်ကော်လံများ၏ တူညီသောအရွယ်အစားများနှင့် ကိုက်ညီသော ထည့်သွင်းမှုများကို .span1အသုံးပြု ပါ ။.span12

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
< class = "span1" > ကို ရွေးပါ။ 
  ...
</select>
< class = "span2" > ကို ရွေးပါ။ 
  ...
</select>
< class = "span3" > ကို ရွေးပါ။ 
  ...
</select>

စာကြောင်းတစ်ခုစီတွင် ဇယားကွက်ထည့်သွင်းမှုများစွာ အတွက်၊ သင့်လျော်သောအကွာအဝေးအတွက် ပြုပြင်မွမ်းမံမှုအတန်းအစားကို အသုံးပြုပါ.controls-row ။ ၎င်းသည် အဖြူ-နေရာကို ပြိုကျစေရန် သွင်းအားစုများကို မျှောပေးကာ၊ သင့်လျော်သော အနားသတ်များကို သတ်မှတ်ပေးပြီး မျှော့ကို ရှင်းလင်းစေသည်။

<div class = "controls" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

ပြုပြင်၍မရသော သွင်းအားစုများ

အမှန်တကယ် ဖောင်အမှတ်အသားကို အသုံးမပြုဘဲ ပြင်လို့မရနိုင်သော ဖောင်တစ်ခုတွင် ဒေတာကို တင်ပြပါ။

<span class = "input-xlarge uneditable-input" > ဤနေရာတွင် တန်ဖိုးအချို့ </span>

လုပ်ဆောင်ချက်တွေကို ဖွဲ့ပါ။

လုပ်ဆောင်ချက်အုပ်စု (ခလုတ်များ) ဖြင့် ပုံစံတစ်ခုကို အဆုံးသတ်ပါ။ တစ်ခုအတွင်း ထားရှိသည့်အခါ .form-horizontal၊ ခလုတ်များသည် ပုံစံထိန်းချုပ်မှုများနှင့် တန်းစီရန် အလိုအလျောက် အင်တင်းပေးလိမ့်မည်။

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > ပြောင်းလဲမှုများကို သိမ်းဆည်းပါ </button>  
  <button type = "button" class = "btn" > Cancel </button>  
</div>

အကူအညီစာသား

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

လိုင်းအကူအညီ

<input type = "text" ><span class = "help-inline" > အင်လိုင်း အကူအညီ စာသား </span>

အကူအညီကို ပိတ်ဆို့ပါ။

<input type = "text" ><span class = "help-block" > စာကြောင်းအသစ်သို့ ကွဲသွားကာ တစ်ကြောင်းထက် ကျော်လွန်နိုင်သော အကူအညီ စာသား ပိုရှည်သော ဘလောက်တစ်ခု။ </span>

ပုံစံထိန်းချုပ်မှုပြည်နယ်များ

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

ထည့်သွင်းအာရုံစိုက်

outlineကျွန်ုပ်တို့သည် ပုံစံထိန်းချုပ်မှုအချို့ ရှိ ပုံသေစတိုင်များကို ဖယ်ရှားပြီး box-shadow၎င်း၏နေရာ၌ ပုံစံတစ်ခုကို အသုံးပြုသည် :focus။

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "ဒါကို အဓိကထား..." >

သွင်းအားစုများကို ပိတ်ထားသည်။

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

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ထည့်သွင်းမှုကို ဤနေရာတွင် ပိတ်ထားသည်..." ပိတ်ထား သည်။ >

အတည်ပြုချက်ဖော်ပြထားသည်။

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

<div class = "control-group သတိပေးချက်" > 
  <label class = "control-label" for = "inputWarning" > သတိပေးချက်ဖြင့် ထည့်သွင်းပါ </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > တစ်ခုခု မှားသွားနိုင်တယ် </span> 
  </div>
</div>
<div class = "control-group error" > 
  <label class = "control-label" for = "inputError" > အမှားပါသော ထည့်သွင်းမှု </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > အမှားကိုပြင်ပါ </span> 
  </div>
</div>
<div class = "control-group အောင်မြင်မှု" > 
  <label class = "control-label" for = "inputSuccess" > ထည့်သွင်းမှု အောင်မြင်သည် </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > ဝူးဟူး။ </span> 
  </div>
</div>

ပုံသေခလုတ်များ

ခလုတ်ပုံစံများကို အသုံးပြုထားသည့် .btnအတန်းနှင့် မည်သည့်အရာမဆို အသုံးပြုနိုင်မည်ဖြစ်သည်။ သို့သော်၊ ပုံမှန်အားဖြင့် သင်သည် ၎င်းတို့ကို အကောင်းဆုံး rendering အတွက် သာ <a>နှင့် ဒြပ်စင် များသို့ အသုံးချလိုပါလိမ့်မည် ။<button>

ခလုတ်	class=""	ဖော်ပြချက်
	`btn`	gradient ဖြင့် စံမီးခိုးရောင်ခလုတ်
	`btn btn-primary`	ပိုမြင်သာသောအလေးချိန်ကို ပေးဆောင်ပြီး ခလုတ်အစုံရှိ အဓိကလုပ်ဆောင်ချက်ကို ခွဲခြားသတ်မှတ်သည်။
	`btn btn-info`	မူရင်းစတိုင်များကို အစားထိုးအဖြစ် အသုံးပြုသည်။
	`btn btn-success`	အောင်မြင်သော သို့မဟုတ် အပြုသဘောဆောင်သော လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။
	`btn btn-warning`	ဤလုပ်ရပ်ကို သတိထားဆောင်ရွက်သင့်သည်ဟု ဖော်ပြသည်။
	`btn btn-danger`	အန္တရာယ်ရှိသော သို့မဟုတ် အပျက်သဘောဆောင်သော လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။
	`btn btn-inverse`	အလှည့်ကျ မီးခိုးရောင်ခလုတ်၊ ဝေါဟာရလုပ်ဆောင်ချက် သို့မဟုတ် အသုံးပြုခြင်းနှင့် ချိတ်ဆက်ခြင်းမပြုပါ။
	`btn btn-link`	ခလုတ်အမူအကျင့်ကို ထိန်းသိမ်းထားစဉ် လင့်ခ်တစ်ခုသဖွယ်ဖြစ်အောင် ပြုလုပ်ခြင်းဖြင့် ခလုတ်တစ်ခုကို အလေးအနက်ပြုပါ။

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

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

ခလုတ်အရွယ်အစားများ

ပိုကြီးသော သို့မဟုတ် သေးငယ်သော ခလုတ်များကို နှစ်သက်ပါသလား။ .btn-large, .btn-small, သို့မဟုတ် .btn-miniအပိုအရွယ်အစားများအတွက် ထည့်ပါ ။

<p>
  <button class = "btn btn-large btn-primary" type = "button" > ကြီးမားသောခလုတ် </button>  
  <button class = "btn btn-large" type = "button" > ကြီးမားသောခလုတ် </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > ပုံသေခလုတ် </button>  
  <button class = "btn" type = "button" > ပုံသေခလုတ် </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > ခလုတ်အသေး </button>  
  <button class = "btn btn-small" type = "button" > ခလုတ်ငယ် </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > မီနီခလုတ် </button>  
  <button class = "btn btn-mini" type = "button" > မီနီ ခလုတ် </button>  
</p>

ပေါင်းထည့်ခြင်းဖြင့် မိဘ၏ အကျယ်အဝန်း အပြည့်ရှိသော ပိတ်ဆို့အဆင့်ခလုတ်များကို ဖန်တီးပါ .btn-block။

<button class = "btn btn-large btn-block btn-primary" type = "button" > ပိတ်ရန် အဆင့်ခလုတ် </button>  
<button class = "btn btn-large btn-block" type = "button" > ပိတ်ရန် အဆင့်ခလုတ် </button>

မသန်စွမ်းသောအခြေအနေ

ခလုတ်များကို 50% လျော့သွားခြင်းဖြင့် နှိပ်၍မရသောပုံဖြစ်အောင် ဖန်တီးပါ။

ကျောက်ဆူးဒြပ်

.disabledအတန်းကို <a>ခလုတ်များ ထဲသို့ ထည့်ပါ ။

မူလလင့်ခ် လင့်

<a href="#" class="btn btn-large btn-primary disabled"> မူလ လင့် ခ် </a>  
<a href="#" class="btn btn-large disabled"> လင့် </a> _ _ _

ကြိုတင်အသိပေးသည်! .disabledဤနေရာတွင် ကျွန်ုပ်တို့သည် ဘုံအတန်းအစားနှင့် ဆင်တူသောကြောင့် ဤနေရာတွင် utility class တစ်ခုအဖြစ် သုံးသည် .active၊ ထို့ကြောင့် ရှေ့ဆက်ရန် မလိုအပ်ပါ။

ခလုတ်ဒြပ်စင်

ခလုတ် များတွင် disabledအရည်အချင်းကို ထည့်ပါ ။<button>

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > ပင်မခလုတ် </button>   
<button type = "button" class = "btn btn-large" ကို ပိတ်ထား သည် > ခလုတ် </button>

အတန်းတစ်ခု၊ တက်ဂ်များစွာ

.btnအတန်းကို an <a>, <button>, or <input>element တွင် သုံး ပါ။

<a class="btn" href=""> လင့် </a> _ _ _ _ _  
<button class = "btn" type = "submit" > ခလုတ် </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Submit" >

အကောင်းဆုံးအလေ့အကျင့်တစ်ခုအနေဖြင့်၊ ဘရောက်ဆာဖြတ်ကျော်တင်ဆက်မှု ကိုက်ညီမှုရှိစေရန် သင့်အကြောင်းအရာအတွက် အစိတ်အပိုင်းကို ကိုက်ညီအောင်ကြိုးစားပါ။ သင့်တွင် တစ်ခုရှိလျှင် သင့်ခလုတ်ကို inputအသုံးပြု ပါ။<input type="submit">

<img>မည်သည့်ပရောဂျက်တွင်မဆို ပုံများကို အလွယ်တကူစတိုင်လ်ကျစေရန် အတန်းများကို အစိတ်အပိုင်းတစ်ခုသို့ ပေါင်းထည့်ပါ ။

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

ကြိုတင်အသိပေးသည်! .img-roundedအထောက်အပံ့ .img-circleမရှိခြင်းကြောင့် IE7-8 တွင် အလုပ်မလုပ်ပါ border-radius။

သင်္ကေတ အကွက်များ

Glyphicons မှပံ့ပိုးပေးသော မီးခိုးရောင် (မူရင်း) နှင့် အဖြူရောင်ဖြင့် ရရှိနိုင်သော sprite ပုံစံ အိုင်ကွန် ၁၄၀ ။

အိုင်ကွန်-မှန်
အိုင်ကွန်-ဂီတ
အိုင်ကွန်-ရှာဖွေရေး
အိုင်ကွန်-စာအိတ်
icon-နှလုံးသား
အိုင်ကွန်-ကြယ်ပွင့်
အိုင်ကွန်-ကြယ်-ဗလာ
icon-အသုံးပြုသူ
အိုင်ကွန်-ရုပ်ရှင်
icon-th-large
icon-th
icon-th-list
icon-ok
အိုင်ကွန်ကို ဖယ်ရှားပါ။
icon-zoom-in
icon-zoom-out
icon-off
အိုင်ကွန်-အချက်ပြ
အိုင်ကွန်-ခွေးငှက်
icon-အမှိုက်
အိုင်ကွန်-အိမ်
အိုင်ကွန်-ဖိုင်
icon-အချိန်
အိုင်ကွန်-လမ်း
icon-download-alt
icon-ဒေါင်းလုဒ်လုပ်ပါ။
အိုင်ကွန်-အပ်လုဒ်
အိုင်ကွန်-ဝင်စာပုံး
icon-play-circle
icon-repeat
အိုင်ကွန်-ပြန်လည်စတင်ပါ။
icon-list-alt
အိုင်ကွန်-လော့ခ်
အိုင်ကွန်-အလံ
အိုင်ကွန်-နားကြပ်များ
icon-volume-off
icon-volume-down
icon-volume-up
အိုင်ကွန်-qrcode
အိုင်ကွန်-ဘားကုဒ်
အိုင်ကွန်-တက်ဂ်
အိုင်ကွန်-တက်ဂ်များ
အိုင်ကွန်-စာအုပ်
အိုင်ကွန်-စာညှပ်
အိုင်ကွန်-ပုံနှိပ်
အိုင်ကွန်-ကင်မရာ
အိုင်ကွန်ဖောင့်
icon-bold
သင်္ကေတ-စာလုံးစောင်း
အိုင်ကွန်-စာသား-အမြင့်
အိုင်ကွန်-စာသား-အကျယ်
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
အိုင်ကွန်-စာရင်း
အိုင်ကွန်-အင်တင်း-ဘယ်ဘက်
အိုင်ကွန်-အင်တင်း-ညာဘက်
icon-facetime-video
အိုင်ကွန်-ရုပ်ပုံ
icon-ခဲတံ
အိုင်ကွန်-မြေပုံ-အမှတ်အသား
icon-adjust
icon-tint
အိုင်ကွန်-တည်းဖြတ်
icon-share
အိုင်ကွန်-စစ်ဆေးပါ။
အိုင်ကွန်-ရွှေ့
အိုင်ကွန်-တစ်လှမ်း-နောက်ပြန်
icon-fast-backward
အိုင်ကွန်- နောက်ပြန်
icon-play
icon-pause
icon-stop
အိုင်ကွန်-ရှေ့သို့
icon-fast-forward
အိုင်ကွန်-တစ်ဆင့်-ရှေ့သို့
အိုင်ကွန်-ထုတ်ပါ။
အိုင်ကွန်-ခဗရွန်-ဘယ်ဘက်
icon-chevron-ညာဘက်
အိုင်ကွန်-အပေါင်း-သင်္ကေတ
အိုင်ကွန်-အနုတ်လက္ခဏာ
icon-remove-sign
icon-ok-sign
အိုင်ကွန်-မေးခွန်း-သင်္ကေတ
icon-info-sign
အိုင်ကွန်-မျက်နှာပြင်ဓာတ်ပုံ
အိုင်ကွန်-ဖယ်ရှား-စက်ဝိုင်း
အိုင်ကွန်-အိုကေ-စက်ဝိုင်း
အိုင်ကွန်-တားမြစ်-စက်ဝိုင်း
အိုင်ကွန်-မြှား-ဘယ်ဘက်
အိုင်ကွန်-မြှား-ညာဘက်
အိုင်ကွန်-မြှား-ပေါ်
အိုင်ကွန်-မြှား-အောက်
icon-share-alt
icon-resize-full
icon-resize-small
အိုင်ကွန်-အပေါင်း
အိုင်ကွန်-အနုတ်
အိုင်ကွန်-ခရေပွင့်
အိုင်ကွန်-အာမေဋိတ်-သင်္ကေတ
icon-လက်ဆောင်
အိုင်ကွန်-ရွက်
အိုင်ကွန်-မီး
အိုင်ကွန်-မျက်လုံးဖွင့်
အိုင်ကွန်-မျက်လုံး-ပိတ်
အိုင်ကွန်-သတိပေးချက်-သင်္ကေတ
အိုင်ကွန်-လေယာဉ်
အိုင်ကွန်-ပြက္ခဒိန်
ပုံ-ကျပန်း
အိုင်ကွန်-မှတ်ချက်
အိုင်ကွန်-သံလိုက်
icon-chevron-up
icon-chevron-down
icon-retweet
အိုင်ကွန်-စျေးဝယ်-လှည်း
icon-folder-close
icon-folder-open
အိုင်ကွန်-အရွယ်အစား-ဒေါင်လိုက်
icon-resize-horizontal
icon-hdd
icon-bullhorn
အိုင်ကွန်-ခေါင်းလောင်း
အိုင်ကွန်-လက်မှတ်
အိုင်ကွန်- လက်မထောင်
icon-thumbs-down
အိုင်ကွန်-လက်-ညာဘက်
အိုင်ကွန်-လက်-ဘယ်ဘက်
အိုင်ကွန်-လက်မြှောက်
icon-hand-down
အိုင်ကွန်-စက်ဝိုင်း-မြှား-ညာဘက်
အိုင်ကွန်-စက်ဝိုင်း-မြှား-ဘယ်ဘက်
icon-circle-arrow-up
icon-circle-arrow-down
အိုင်ကွန်-ကမ္ဘာလုံး
အိုင်ကွန်-လိမ်ဖဲ့ခြင်း။
icon-အလုပ်များ
icon-filter
အိုင်ကွန်-လက်ဆွဲအိတ်
အိုင်ကွန်-မျက်နှာပြင်အပြည့်

Glyphicons ထည့်သွင်းတွက်ချက်ခြင်း။

Glyphicons Halflings များသည် ပုံမှန်အားဖြင့် အခမဲ့မရနိုင်သော်လည်း Bootstrap နှင့် Glyphicons ဖန်တီးသူများကြားရှိ အစီအစဉ်သည် developer များအနေနှင့် သင့်အတွက် ကုန်ကျစရိတ်မရှိဘဲ ၎င်းကို ဖြစ်နိုင်ချေရှိသည်။ ကျေးဇူးတင်စွာဖြင့်၊ လက်တွေ့ကျသည့်အခါတိုင်း တွင် Glyphicons သို့ ပြန်သွားရန် ရွေးချယ်ခွင့်လင့်ခ်တစ်ခု ထည့်သွင်းပေးရန် တောင်းဆိုပါသည်။

အသုံးပြုနည်း

အိုင်ကွန်များအားလုံးသည် <i>ထူးခြားသော အတန်းအစား၊ ရှေ့တွဲဖြင့် တဂ် တစ်ခု လိုအပ်သည် icon-။ အသုံးပြုရန်၊ အောက်ဖော်ပြပါ ကုဒ်ကို မည်သည့်နေရာတွင်မဆို ထားရှိပါ။

<i class = "icon-search" ></i>

အပိုအတန်းတစ်ခုဖြင့် အဆင်သင့်ပြုလုပ်ထားသော ပြောင်းပြန် (အဖြူရောင်) သင်္ကေတများအတွက် ရနိုင်သောပုံစံများလည်း ရှိပါသည်။ nav နှင့် dropdown links အတွက် hover နှင့် active state များတွင် ဤအတန်းကို အထူးကြပ်မတ်ပေးပါမည်။

<i class = "icon-search icon-white" ></i>

ကြိုတင်အသိပေးသည်! <i>ခလုတ်များ သို့မဟုတ် nav လင့်ခ်များကဲ့သို့ စာသားစာကြောင်းများဘေးတွင် အသုံးပြုသည့်အခါ၊ သင့်လျော်သောအကွာအဝေးအတွက် တဂ် နောက်တွင် နေရာလွတ်ချန်ထားရန် သေချာပါစေ ။

Icon ဥပမာများ

ကိရိယာဘား၊ လမ်းညွှန်မှု သို့မဟုတ် ကြိုတင်ထည့်သွင်းထားသော ပုံစံထည့်သွင်းမှုများအတွက် ခလုတ်များ၊ ခလုတ်အုပ်စုများတွင် ၎င်းတို့ကို အသုံးပြုပါ။

ခလုတ်များ

ခလုတ်ကိရိယာဘားရှိ ခလုတ်အုပ်စု

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
 
    <a class="btn" href="#" > <i class = " icon - align-left" > </i></a>   
    <a class="btn" href="#" > <i class = " icon - align -center" ></i></a>   
    <a class="btn" href="#" > <i class = " icon-align-right" > < /i></a>   
    <a class="btn" href="#" > <i class = " icon - align-justify" > </i></a>   
  </div>
</div>

ခလုတ်အုပ်စုတစ်ခုတွင် အောက်ဆွဲချပါ။

အသုံးပြုသူကို

<div class = "btn-group" > 
  <a class="btn btn-primary" href="#" > < i class = " icon - user icon-white" ></i> အသုံးပြုသူ </a>   
  <a class="btn btn-primary dropdown-toggle" data-toggle = "dropdown" href="#" > <span class = "caret" > < /span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href="#" > < i class = "icon-pencil" ></i> တည်းဖြတ် ရန် </a></li>  
    <li><a href="#" > < i class = "icon-trash" ></i> ဖျက်ရန် </a></li>  
    <li><a href="#" > < i class = "icon-ban-circle" ></i> ဘန် </a></li>  
    <li class = "divider" ></li> 
    <li><a href="#" > <i class = "i" > </i> စီမံခန့်ခွဲ ရန် </a></li>  
  </ul>
</div>

သေးငယ်သောခလုတ်

<a class="btn btn-small" href="#" > < i class = " icon-star" > < /i></a>

ညွှန်း

<ul class = "nav nav-list" > 
  <li class = "active" ><a href="#" > <i class = "icon - home icon-white" ></i> Home </a></li>   
  <li><a href="#" > < i class = "icon-book" ></i> စာကြည့်တိုက် </a></li>  
  <li><a href="#" > < i class = "icon-pencil" ></i> အသုံးချ မှုများ</a></li>  
  <li><a href="#" ><i class = "i" ></i> ထွေ </a> < /li>  
</ul>

ပုံစံကွက်များ

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > အီးမေးလ်လိပ်စာ </label>  
  <div class = "controls" > 
    <div class = "input-prepend" > 
    <span class = "add-on" ><i class = "icon-envelope" ><i><span><input class = "span2" id = "inputIcon" type = "text" >     
  </div>
</div>

စာစီစာရိုက်

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

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

h2။ ခေါင်းစီး ၂

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

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

h5။ ခေါင်းစီး ၅

h6။ ခေါင်းစီး ၆

မိတ္တူ

ခဲခန်မိတ္တူ

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

အလေးပေး

<small>

<strong>

<em>

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

<abbr>

<abbr class="initialism">

လိပ်စာများ

<address>

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

ပုံသေ blockqoute

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

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

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

စာရင်းများ

Unordered

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

ပုံစံမဲ့

ဖော်ပြချက်

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

ကုဒ်

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

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

စားပွဲများ

ပုံသေပုံစံများ

ရွေးချယ်နိုင်သော အတန်းများ

.table-striped

.table-bordered

.table-hover

.table-condensed

ရွေးချယ်နိုင်သောအတန်းအတန်းများ

စားပွဲပေါ်တင်ခြင်းကို ပံ့ပိုးထားသည်။

ပုံစံများ

ပုံသေပုံစံများ

ရွေးချယ်နိုင်သော အပြင်အဆင်များ

ရှာဖွေမှုပုံစံ

Inline ပုံစံ

အလျားလိုက်ပုံစံ

ပုံစံထိန်းချုပ်မှုများကို ပံ့ပိုးထားသည်။

သွင်းအားစုများ

Textarea

အမှန်ခြစ်ပုံးများနှင့် ရေဒီယိုများ

ပုံသေ (စုဖွဲ့ထားသည်)

Inline checkboxes

ရွေးချယ်သည်။

ပုံစံထိန်းချုပ်မှုများကို တိုးချဲ့ခြင်း။

ကြိုလင့်ထားသော သွင်းအားစုများ

ပုံသေရွေးချယ်မှုများ

ပေါင်းစပ်

စာသားအစား ခလုတ်များ

ရှာဖွေမှုပုံစံ

အရွယ်အစားကို ထိန်းချုပ်ပါ။

နှိုင်းယှဉ်အရွယ်အစား

ဇယားကွက်အရွယ်အစား

ပြုပြင်၍မရသော သွင်းအားစုများ

လုပ်ဆောင်ချက်တွေကို ဖွဲ့ပါ။

အကူအညီစာသား

လိုင်းအကူအညီ

အကူအညီကို ပိတ်ဆို့ပါ။

ပုံစံထိန်းချုပ်မှုပြည်နယ်များ

ထည့်သွင်းအာရုံစိုက်

သွင်းအားစုများကို ပိတ်ထားသည်။

အတည်ပြုချက်ဖော်ပြထားသည်။

ခလုတ်များ

ပုံသေခလုတ်များ

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

ခလုတ်အရွယ်အစားများ

မသန်စွမ်းသောအခြေအနေ

ကျောက်ဆူးဒြပ်

`<small>`

`<strong>`

`<em>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`