စာစီစာရိုက်စကေး

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

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

ဥပမာ ကိုယ်ထည်စာသား

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။

ခဲခန်မိတ္တူ

ပေါင်းထည့်ခြင်းဖြင့် စာပိုဒ်ကို ထင်ရှားအောင်ပြုလုပ်ပါ .lead။

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor ။ Duis mollis, est non commodo luctus။

အလေးပေးအသုံးပြုခြင်း။

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus။ Maecenas faucibus mollis interdum Nulla vitae elit libero၊ pharetra augue။

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

နမူနာလိပ်စာများ

<address>ဤတွင် tag ကိုမည်သို့သုံးနိုင်သည်၏ဥပမာနှစ်ခုဖြစ်သည် ။

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

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

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

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

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

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

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

blockquote ပါ၀င်ရန်၊ ကိုးကားချက်အဖြစ် HTML<blockquote> တစ်ခုခုကို ပတ်ပတ်လည် ခြုံပါ။ ဖြောင့်စင်းသောကိုးကားချက်များအတွက် ကျွန်ုပ်တို့သည် အကြံပြုထားသည် ။<p>

<small>သင်၏အရင်းအမြစ်ကိုကိုးကားရန် ရွေးချယ်နိုင်သော ဒြပ်စင်တစ်ခုပါဝင်ပြီး —ပုံစံပြုလုပ်ရန်ရည်ရွယ်ချက်များအတွက် ၎င်းရှေ့တွင် em dash တစ်ခုရရှိမည်ဖြစ်သည်။

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit။ ကိန်းပြည့် posuere သည် ante venenatis ဖြစ်သည်။ </p>
  <small> နာမည်ကြီးသူတစ်ယောက် </small>
</blockquote>

မူရင်း blockquotes များကို ဤကဲ့သို့ပုံစံဖြင့် ပုံဖော်ထားပါသည်။

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ ကိန်းပြည့် posuere သည် ante venenatis ဖြစ်သည်။

Body of work မှာ နာမည်ကြီးသူတစ်ယောက်ပါ။

သင်၏ blockquote ကို ညာဘက်တွင် မျှောရန်၊ ထည့်ပါ class="pull-right"-

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ ကိန်းပြည့် posuere သည် ante venenatis ဖြစ်သည်။

Body of work မှာ နာမည်ကြီးသူတစ်ယောက်ပါ။

Unordered

<ul>

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

• 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 ကိုရယူပါ။

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

<ol>

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

ဖော်ပြချက်

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

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

<dl class="dl-horizontal">

ဖော်ပြချက်စာရင်းများ

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

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။

---

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

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

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

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

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

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

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

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

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

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

Google Prettify

တူညီသော <pre>ဒြပ်စင်ကိုယူ၍ အဆင့်မြှင့်တင်ဆက်မှုအတွက် ရွေးချယ်နိုင်သောအတန်းနှစ်ခုကို ထည့်ပါ။

<p> နမူနာစာသား ဒီမှာ... </p>

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

google-code-prettify ကိုဒေါင်းလုဒ်လုပ်ပြီး အသုံးပြုနည်းအတွက် readme ကိုကြည့်ပါ။

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

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

ဇယားများကို ဖတ်ရှုနိုင်စေရန်နှင့် ဖွဲ့စည်းပုံကို ထိန်းသိမ်းရန် သေချာစေရန်အတွက် ဘောင်အနည်းငယ်သာ အလိုအလျောက် ပုံစံချပါသည်။ 2.0 ဖြင့်၊ .tableအတန်းလိုအပ်သည်။

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

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

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

မှတ်ချက်- အစင်းလိုက်ဇယားများသည် :nth-childCSS ရွေးချယ်မှုကို အသုံးပြုပြီး IE7-IE8 တွင် မရရှိနိုင်ပါ။

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

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

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

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

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

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

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

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

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

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

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

ပြောင်းလွယ်ပြင်လွယ် HTML နှင့် CSS

Bootstrap ရှိ ဖောင်များနှင့် ပတ်သက်သည့် အကောင်းဆုံး အစိတ်အပိုင်းမှာ သင်၏ သွင်းအားစုများနှင့် ထိန်းချုပ်မှုများ အားလုံးကို သင့် markup တွင် သင်မည်ကဲ့သို့ တည်ဆောက်နေပါစေ ၎င်းတို့ကို ကောင်းမွန်စေပါသည်။ HTML မလိုအပ်သော်လည်း လိုအပ်သူများအတွက် ပုံစံများကို ပေးပါသည်။

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

အပြင်အဆင် လေးခု ပါဝင်ပါတယ်။

Bootstrap သည် form layout လေးမျိုးအတွက် ပံ့ပိုးမှုဖြင့် လာပါသည်။

• ဒေါင်လိုက် (မူလ)
• ရှာရန်
• တန်းဝင်ကာစီသည်
• အလျားလိုက်

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

ပြည်နယ်များနှင့် အခြားအရာများကို ထိန်းချုပ်ပါ။

Bootstrap ၏ဖောင်များတွင် ထည့်သွင်းမှု၊ textarea နှင့် သင်မျှော်လင့်ထားသည့် ရွေးချယ်မှုများကဲ့သို့သော အခြေခံပုံစံထိန်းချုပ်မှုအားလုံးအတွက် စတိုင်များပါဝင်သည်။ သို့သော် ၎င်းတွင် ထည့်သွင်းထားသော၊ ကြိုတင်ထည့်သွင်းထားသည့် ထည့်သွင်းမှုများနှင့် checkboxes စာရင်းများအတွက် ပံ့ပိုးမှုကဲ့သို့သော စိတ်ကြိုက်အစိတ်အပိုင်းများစွာလည်း ပါရှိသည်။

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

အခြေခံပုံစံ

အပိုတံဆိပ်များမပါဘဲ စမတ်ကျပြီး ပေါ့ပါးသော ပုံသေများ။

အညွှန်းအမည်

ဤနေရာတွင် နမူနာ ပိတ်ဆို့အဆင့် အကူအညီ စာသား။

ငါ့ကိုစစ်ဆေးပါ။ တင်ပြပါ။

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

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

.form-searchဖောင်သို့ .search-queryပေါင်း ထည့်ပါ input။

ရှာရန်

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

Inline ပုံစံ

.form-inlineပုံစံထိန်းချုပ်မှုများ၏ ဒေါင်လိုက်ချိန်ညှိမှုနှင့် အကွာအဝေးကို အသေးစိပ်သိရန် ပေါင်းထည့်ပါ ။

ငါ့ကိုသတိရပါ ဆိုင်းအင်လုပ်ခြင်း

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

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

• စာသားထည့်သွင်းမှုများ (စာသား၊ စကားဝှက်၊ အီးမေးလ်၊ စသည်)
• အမှန်ခြစ်ပေးပါ။
• ရေဒီယို
• ရွေးချယ်ပါ။
• ရွေးချယ်မှုမျိုးစုံ
• ဖိုင်ထည့်သွင်းခြင်း။
• စာသားဧရိယာ

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

Freeform text အပြင် HTML5 စာသားအခြေခံ ထည့်သွင်းမှု သည် ထိုကဲ့သို့ ပေါ်လာသည်။

အမှန်ခြစ်ပါ။

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

စာရင်းကို ရွေးပါ။

တစ်ခုခု ၂ ၃ ၄ ၅

Multicon-ရွေးချယ်ပါ။

၁ ၂ ၃ ၄ ၅

ဖိုင်ထည့်သွင်းခြင်း။

Textarea

အပြောင်းအလဲများကို သိမ်းဆည်းပါ။ မလုပ်တော့

ဥပမာ စျေးတက်ခြင်း။

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

<form class = "form-horizontal" > 
  <fieldset>
    <legend> ဒဏ္ဍာရီစာသား </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > စာသားထည့်သွင်းမှု </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > အကူအညီစာသားကို ပံ့ပိုးပေးခြင်း </p> 
      </div>
    </div>
  </fieldset>
</form>

Bootstrap သည် ဘရောက်ဆာ-ပံ့ပိုးပေးထားသော အာရုံစူးစိုက်မှုနှင့် disabledပြည်နယ်များအတွက် စတိုင်များ ပါရှိသည်။ outlineကျွန်ုပ်တို့သည် မူရင်း Webkit ကို box-shadowဖယ်ရှားပြီး :focus.

---

ပုံစံအတည်ပြုခြင်း။

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

<ကွက်လပ်
  class = "control-group error" >
  …
</fieldset>

အာရုံစူးစိုက်မှု ထည့်သွင်းခြင်း။

ထည့်သွင်း၍မရပါ။

တချို့က ဒီမှာ တန်ဖိုးရှိတယ်။

ထည့်သွင်းမှုကို ပိတ်ထားသည်။

ပိတ်ထားသော အမှန်ခြစ်

ဤသည်မှာ ပိတ်ထားသော အမှန်ခြစ်ကွက်တစ်ခုဖြစ်သည်။

သတိပေးချက်ဖြင့် ထည့်သွင်းပါ။

တစ်ခုခု မှားသွားနိုင်သည်။

မှားယွင်းစွာ ထည့်သွင်းပါ။

အမှားကိုပြင်ပေးပါ။

အောင်မြင်စွာထည့်သွင်းပါ။

ဝူးဟူး။

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

၁ ၂ ၃ ၄ ၅ ဝူးဟူး။

အပြောင်းအလဲများကို သိမ်းဆည်းပါ။ မလုပ်တော့

သွင်းအားစုများကို ရှေ့တိုးပြီး ထပ်ထည့်ပါ။

ထည့်သွင်းသည့်အုပ်စုများ—နောက်ဆက်တွဲ သို့မဟုတ် ကြိုတင်ထားသော စာသားများဖြင့်—သင်၏ထည့်သွင်းမှုများအတွက် နောက်ထပ်အကြောင်းအရာများပေးရန် လွယ်ကူသောနည်းလမ်းကို ပေးသည်။ ကြီးမားသောဥပမာများတွင် Twitter အသုံးပြုသူအမည်များအတွက် @ သင်္ကေတ သို့မဟုတ် ငွေကြေးဆိုင်ရာ ဒေါ်လာများပါဝင်သည်။

---

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

v1.4 အထိ၊ Bootstrap သည် ၎င်းတို့ကို တန်းစီရန် checkboxes များနှင့် ရေဒီယိုများအနီးတွင် အပို markup လိုအပ်သည်။ <label class="checkbox">ယခု ထုပ်ပိုးထားသော အရာများကို ထပ်ခါတလဲလဲ ပြုလုပ်ရန် ရိုးရှင်းသော ကိစ္စ <input type="checkbox">ဖြစ်ပါသည်။

Inline checkboxes များနှင့် ရေဒီယိုများကို ပံ့ပိုးပေးပါသည်။ ဒါမှမဟုတ် .inlineတစ်ခုခုကို ထည့် လိုက်ရုံ နဲ့ ပြီးသွားပါပြီ။.checkbox.radio

---

Inline ပုံစံများနှင့် နောက်ဆက်တွဲ/အကြို

inline form တစ်ခုတွင် ရှေ့တန်း သို့မဟုတ် ထည့်သွင်းမှုများကို အသုံးပြုရန်၊ နေရာလွတ်များမပါဘဲ စာကြောင်းနှင့် တူညီသောမျဉ်းပေါ်တွင် နေရာချရန် သေချာပါ .add-onစေ input။

---

အကူအညီစာသားပုံစံ

သင့်ဖောင်ဖြည့်သွင်းမှုများအတွက် အကူအညီစာသားထည့်ရန်၊ ထည့်သွင်းသည့်ဒြပ်စင်ပြီးနောက် <span class="help-inline">အကူအညီ စာသားပါသော လိုင်းအကူအညီစာသားကို ထည့်ပါ။<p class="help-block">

ဇယားကွက် အရွယ်အစားများကို ပုံဖော်ပါ။

၁ ၂ ၃ ၄ ၅ ၁ ၂ ၃ ၄ ၅ ၁ ၂ ၃ ၄ ၅

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

အရွယ်အစားအမျိုးမျိုး

ဇယားကွက်နှင့် မြေပုံမညီသော တည်ငြိမ်သောအတန်းများကို အသုံးပြုနိုင်ပြီး၊ တုံ့ပြန်မှုရှိသော CSS စတိုင်များနှင့် လိုက်လျောညီထွေဖြစ်အောင်၊ သို့မဟုတ် ထိန်းချုပ်မှုအမျိုးအစားအမျိုးမျိုးအတွက် အကောင့်ကို အသုံးပြုနိုင် inputသည် select။

ကြိုတင်ထားသော စာသား

@

ဤသည်မှာ အကူအညီစာသားအချို့ဖြစ်သည်။

နောက်ဆက်တွဲစာသား

.၀၀

ဤတွင် နောက်ထပ် အကူအညီ စာသား

နောက်ဆက်တွဲနှင့် ရှေ့တိုးပါ။

$ .၀၀

ခလုတ်ဖြင့်ထည့်ပါ။

သွား!

ခလုတ်နှစ်ချောင်း ထပ်ထည့်ပါ။

ရှာရန် ရွေးချယ်စရာများ

Inline checkboxes

၁ ၂ ၃

အမှန်ခြစ်များ

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

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

ရေဒီယိုခလုတ်များ

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

အပြောင်းအလဲများကို သိမ်းဆည်းပါ။ မလုပ်တော့

လုပ်ဆောင်ချက်များအတွက် ခလုတ်များ

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

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

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

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

အရွယ်အစားမျိုးစုံ

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

အဓိကလုပ်ဆောင်ချက် အက်ရှင်

အဓိကလုပ်ဆောင်ချက် အက်ရှင်

အဓိကလုပ်ဆောင်ချက် အက်ရှင်

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

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

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

မူလခလုတ် ခလုတ်

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

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

.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 class = "btn" type = "submit"  
         value = "တင်ပြရန်" >

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

• အိုင်ကွန်-မှန်
• အိုင်ကွန်-ဂီတ
• အိုင်ကွန်-ရှာဖွေရေး
• အိုင်ကွန်-စာအိတ်
• icon-နှလုံးသား
• အိုင်ကွန်-ကြယ်ပွင့်
• အိုင်ကွန်-ကြယ်-ဗလာ
• 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
• အိုင်ကွန်-လက်ဆွဲအိတ်
• အိုင်ကွန်-မျက်နှာပြင်အပြည့်

sprite အဖြစ်တည်ဆောက်ထားသည်။

အိုင်ကွန်တိုင်းကို အပိုတောင်းဆိုမှုတစ်ခုပြုလုပ်မည့်အစား၊ ၎င်းတို့ကို CSS ကို အသုံးပြု၍ ပုံများကို နေရာချထားရန် CSS ကို အသုံးပြုသည့် ဖိုင်တစ်ခုရှိ ပုံတစ်ဖိုင်တွင် ပုံများအစုအဝေးတစ်ခုအဖြစ် ၎င်းတို့ကို sprite အဖြစ် စုစည်းထားပါသည်။background-position ထားပါသည်။ ၎င်းသည် Twitter.com တွင်ကျွန်ုပ်တို့အသုံးပြုသည့်တူညီသောနည်းလမ်းဖြစ်ပြီး ၎င်းသည်ကျွန်ုပ်တို့အတွက်ကောင်းစွာအလုပ်လုပ်ပါသည်။

အိုင်ကွန်အတန်းများအားလုံးသည် ကျွန်ုပ်တို့၏ .icon-အခြားအစိတ်အပိုင်းများကဲ့သို့ သင့်လျော်သော အမည်အကွာအဝေးနှင့် အတိုင်းအတာအတွက် ရှေ့ဆက်ထားသည်။ ၎င်းသည် အခြားကိရိယာများနှင့် ပဋိပက္ခများကို ရှောင်ရှားရန် ကူညီပေးပါမည်။

Docs တွင် link နှင့် credit ပေးသရွေ့ ကျွန်ုပ်တို့အား ကျွန်ုပ်တို့၏ open-source toolkit တွင် သတ်မှတ်ထားသော Halflings ကို Glyphicons မှ အသုံးပြုခွင့်ပေးထားပါသည်။ သင့်ပရောဂျက်များတွင် အလားတူလုပ်ဆောင်ရန် စဉ်းစားပါ။

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

Bootstrap သည် <i>အိုင်ကွန်အားလုံးအတွက် တဂ်ကို အသုံးပြုသော်လည်း ၎င်းတို့တွင် case class မရှိ—မျှဝေထားသော ရှေ့ဆက်တစ်ခုသာဖြစ်သည်။ အသုံးပြုရန်၊ အောက်ဖော်ပြပါ ကုဒ်ကို မည်သည့်နေရာတွင်မဆို ထားရှိပါ။

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

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

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

သင့်အိုင်ကွန်များအတွက် ရွေးချယ်ရန် အတန်းပေါင်း ၁၄၀ ရှိပါသည်။ <i>မှန်ကန်သောအတန်းများနှင့်အတူ တဂ် တစ်ခုထည့် လိုက်ရုံဖြင့် သင်သတ်မှတ်ပြီးပါပြီ။ စာရင်းအပြည့်အစုံကို sprites.less တွင် သို့မဟုတ် ဤစာတမ်းတွင် ဤနေရာတွင် ရှာနိုင်သည်။

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

ကိစ္စရပ်များကို အသုံးပြု

အိုင်ကွန်များသည် ကောင်းမွန်သော်လည်း ၎င်းတို့ကို မည်သည့်နေရာတွင် အသုံးပြုမည်နည်း။ ဤသည်မှာ အကြံဥာဏ်အချို့ ဖြစ်သည်-

• သင့် sidebar လမ်းညွှန်မှုအတွက် ရုပ်ပုံများအဖြစ်
• အိုင်ကွန်ဖြင့် မောင်းနှင်သော လမ်းညွှန်မှုသက်သက်အတွက်
• လုပ်ဆောင်ချက်တစ်ခု၏ အဓိပ္ပါယ်ကိုဖော်ပြရန် ခလုတ်များအတွက်
• အသုံးပြုသူ၏ဦးတည်ရာပေါ်တွင် အကြောင်းအရာကိုမျှဝေရန် လင့်ခ်များဖြင့်

အခြေခံအားဖြင့် <i>၊ သင် tag ထားနိုင်သည့်နေရာတိုင်းတွင် icon တစ်ခုထည့်နိုင်သည်။

ပြန်လည်စတင်ပါ။ ထွက်ခွာသည် ဖျက်ပါ။

မှတ်ချက် ဆက်တင်များ နောက်ထပ် အချက်အလက်

အီးမေးလ်လိပ်စာ