အခြေခံ CSS

ငြမ်း၏ထိပ်တွင်၊ အခြေခံ HTML ဒြပ်စင်များကို လတ်ဆတ်သော၊ တသမတ်တည်းရှိသော အသွင်အပြင်နှင့် ခံစားမှုကို ပေးစွမ်းရန် တိုးချဲ့နိုင်သော အတန်းများဖြင့် မြှင့်တင်ထားသည်။

ခေါင်းစီးနှင့် စာကိုယ် မိတ္တူ

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

စာစီစာရိုက်ဇယားတစ်ခုလုံးသည် ကျွန်ုပ်တို့၏ 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။

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

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

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

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

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

အလေးပေးမှု၊ လိပ်စာနှင့် အတိုကောက်

ဒြပ် အသုံးပြုမှု ရွေးချယ်ခွင့်
<strong> အရေးကြီးသော စာသားအတိုအထွာကို အလေးထား ပါ။ တစ်ခုမှ
<em> ဖိစီး မှုဖြင့် စာသားအတိုအထွာကို အလေးထားရန် တစ်ခုမှ
<abbr> အတိုကောက်များနှင့် အတိုကောက်များကို အတိုချုံးပြီး ချဲ့ထားသော ဗားရှင်းကို အပေါ်သို့ အပေါ်သို့ တင်ပြသည်။

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

.initialismစာလုံးကြီးအတိုကောက်များအတွက် အတန်း ကိုသုံး ပါ။
<address> ၎င်း၏ အနီးဆုံးဘိုးဘေး သို့မဟုတ် လုပ်ငန်းတစ်ခုလုံးအတွက် ဆက်သွယ်ရန် အချက်အလက်အတွက် စာကြောင်းအားလုံးကို အဆုံးသတ်ခြင်းဖြင့် ဖော်မတ်ချခြင်းကို ထိန်းသိမ်းပါ။<br>

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

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> အခြားအရင်းအမြစ်မှ အကြောင်းအရာကို ကိုးကားခြင်းအတွက် ပိတ်ဆို့အဆင့်ဒြပ်စင်

citeအရင်းအမြစ် URL အတွက် ရည်ညွှန်းချက် ထည့်ပါ ။

.pull-leftfloated options များအတွက် .pull-rightအတန်းများကို အသုံးပြု ပါ။
<small> ပုံမှန်အားဖြင့် အလုပ်ခေါင်းစဉ်ပါသော စာရေးဆရာသည် အသုံးပြုသူမျက်နှာစာ ကိုးကားချက်ကို ပေါင်းထည့်ခြင်းအတွက် ရွေးချယ်နိုင်သောဒြပ်စင်ဖြစ်သည်။ <cite>ခေါင်းစဉ် သို့မဟုတ် အရင်းအမြစ်အမည်ကို ဘေး ပတ်လည်တွင်ထားပါ။

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

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

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

ဥပမာ blockquotes

မူရင်း 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>

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

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

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

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

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

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

Google Prettify

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

  1. <p> နမူနာစာသား ဒီမှာ... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>နမူနာစာသား ဤနေရာတွင်...</p>
  4. </pre>

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

ဇယားစျေးတက်ခြင်း။

တက်ဂ် ဖော်ပြချက်
<table> ဇယားဖော်မတ်ဖြင့် ဒေတာကိုပြသရန်အတွက် ထုပ်ပိုးသည့်ဒြပ်စင်
<thead> <tr>ဇယားခေါင်းစီးအတန်းများ ( ) အတွက် ဇယားကော်လံများကို အညွှန်းတပ်ရန် ကွန်တိန်နာဒြပ်စင်
<tbody> <tr>ဇယား ၏ကိုယ်ထည်ရှိ ဇယားအတန်း ( ) အတွက် ကွန်တိန်နာဒြပ်စင်
<tr> အတန်းတစ်ခုတည်းတွင်ပေါ်လာသော ဇယားဆဲလ် <td>အ စုတစ်ခုအတွက် ကွန်တိန်နာဒြပ်စင်<th>
<td> မူရင်းဇယားဆဲလ်
<th> ကော်လံ (သို့မဟုတ် အတန်း၊ နယ်ပယ်နှင့် နေရာချထားမှုပေါ်မူတည်၍) အထူးဇယားဆဲလ်များကို အညွှန်းများ
အတွင်းတွင် အသုံးပြုရပါမည်။<thead>
<caption> အထူးသဖြင့် စခရင်ဖတ်သူများအတွက် အသုံးဝင်သော ဇယား၏ ဖော်ပြချက် သို့မဟုတ် အကျဉ်းချုပ်
  1. <စားပွဲ>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

ဇယားရွေးချယ်မှုများ

နာမည် အတန်း ဖော်ပြချက်
ပုံသေ တစ်ခုမှ ပုံစံများမရှိပါ၊ ကော်လံများနှင့်အတန်းများသာဖြစ်သည်။
အခြေခံ .table အတန်းများကြားတွင် အလျားလိုက်လိုင်းများသာ
နယ်နိမိတ်ချင်းထိစပ်နေသည်။ .table-bordered ထောင့်များကို ဝိုင်းပြီး အပြင်ဘက်ဘောင်ကို ထည့်ပါ။
မြင်းကျား-စင်း .table-striped မီးခိုးရောင်ဖျော့ဖျော့နောက်ခံအရောင်ကို ထူးဆန်းသောအတန်းများ (1၊ 3၊ 5၊ စသည်ဖြင့်) ပေါင်းထည့်သည်
နို့ဆီ .table-condensed ဒေါင်လိုက်အကွက်များကို 8px မှ 4px အထိ၊ တစ်ဝက် tdနှင့် thအစိတ်အပိုင်း အားလုံးအတွင်း ဖြတ်သည်။

နမူနာဇယားများ

1. မူရင်းဇယားပုံစံများ

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

  1. <table class = "table" >
  2. </table>
# နာမည် မျိုးနွယ်အမည် အသုံးပြုသူအမည်
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီ ငှက် @twitter

2. အစင်းစားပွဲ

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

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

  1. <table class = "table table- striped" >
  2. </table>
# နာမည် မျိုးနွယ်အမည် အသုံးပြုသူအမည်
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီ ငှက် @twitter

3. နယ်ခြားထားသော စားပွဲ

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

  1. <table class = "table table-bordered" >
  2. </table>
# နာမည် မျိုးနွယ်အမည် အသုံးပြုသူအမည်
မှတ်သားပါ။ အော့တို @mdo
မှတ်သားပါ။ အော့တို @getbootstrap
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter

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

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

  1. <table class = "table table-condensed" >
  2. </table>
# နာမည် မျိုးနွယ်အမည် အသုံးပြုသူအမည်
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter

5. ၎င်းတို့အားလုံးကို ပေါင်းစပ်ပါ။

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

  1. <table class = "table table- striped table-bordered table-condensed" >
  2. ...
  3. </table>
နာမည်အပြည့်အစုံ
# နာမည် မျိုးနွယ်အမည် အသုံးပြုသူအမည်
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter

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

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

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

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

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

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

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

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

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

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

ပုံစံလေးမျိုး

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

နာမည် အတန်း ဖော်ပြချက်
ဒေါင်လိုက် (မူလ) .form-vertical (မလိုအပ်ဘူး) ထိန်းချုပ်မှုများအပေါ်တွင် ဘယ်ဘက်ညှိထားသော အညွှန်းများ တန်းစီထားသည်။
တန်းဝင်ကာစီသည် .form-inline ကျစ်လစ်သောစတိုင်အတွက် ဘယ်ဘက်ညှိထားသော အညွှန်းနှင့် လိုင်း-ပိတ်ဆို့ထိန်းချုပ်မှုများ
ရှာရန် .form-search ပုံမှန်ရှာဖွေမှုဗေဒအတွက် အပိုအဝိုင်းသားစာသားထည့်သွင်းခြင်း။
အလျားလိုက် .form-horizontal ထိန်းချုပ်မှုများကဲ့သို့ မျဉ်းတစ်ကြောင်းပေါ်တွင် ဘယ်ဘက်၊ ညာဘက်ညှိထားသော အညွှန်းများကို မျှောပါ။

ဖောင် ပုံစံထိန်းချုပ်မှုများကို အသုံးပြု၍ နမူနာပုံစံများ၊ အပိုအမှတ်အသားမရှိပါ။

အခြေခံပုံစံ

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

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

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

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

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

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

Inline ပုံစံ

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

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

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

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

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

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

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

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

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

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

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


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

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

  1. <ကွက်လပ်
  2. class = "control-group error" >
  3. </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

@

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

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

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

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

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

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

ခလုတ်ပုံစံများကို အသုံးပြုထားသည့် .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 တွင် သုံး ပါ။

လင့်
  1. <a class="btn" href=""> လင့် </a> _ _ _ _ _
  2. <button class = "btn" type = "submit" >
  3. ခလုတ်
  4. </button>
  5. <input class = "btn" type = "button"
  6. value = "ထည့်သွင်းခြင်း" >
  7. <input class = "btn" type = "submit"
  8. 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 မရှိ—မျှဝေထားသော ရှေ့ဆက်တစ်ခုသာဖြစ်သည်။ အသုံးပြုရန်၊ အောက်ဖော်ပြပါ ကုဒ်ကို မည်သည့်နေရာတွင်မဆို ထားရှိပါ။

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

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

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

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

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

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

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

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

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

ဥပမာများ

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