Bootstrap

Twitter မှ Bootstrap

Bootstrap သည် ဝဘ်အက်ပ်များနှင့် ဝဘ်ဆိုက်များကို စတင်ဖန်တီးရန်အတွက် Twitter မှ ကိရိယာတန်ဆာပလာတစ်ခုဖြစ်သည်။
၎င်းတွင် စာစီစာရိုက်၊ ဖောင်များ၊ ခလုတ်များ၊ ဇယားများ၊ ဇယားကွက်များ၊ လမ်းညွှန်ချက်များနှင့် အခြားအရာများအတွက် အခြေခံ CSS နှင့် HTML ပါဝင်သည်။

Nerd သတိပေးချက်- Bootstrap ကို Less ဖြင့် တည်ဆောက်ထားပြီး ခေတ်မီဘရောက်ဆာများကို စိတ်ထဲရှိရှိ တံခါးအပြင်ဘက်တွင် အလုပ်လုပ်ရန် ဒီဇိုင်းထုတ်ထားသည်။

CSS ကို Hotlink လုပ်ပါ။

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

လျှော့သုံးပါ။

Less သုံးတဲ့ ပရိတ်သတ် ? ပြဿနာမရှိပါ၊ repo ကိုပွားပြီး ဤလိုင်းများကိုထည့်လိုက်ပါ-

GitHub တွင် Fork

Github ရှိတရားဝင် Bootstrap repo ဖြင့် ဒေါင်းလုဒ်လုပ်ခြင်း၊ လမ်းခွဲခြင်း၊ ဆွဲထုတ်ခြင်း၊ ဖိုင်ပြဿနာများနှင့် အခြားအရာများ။

GitHub တွင် Bootstrap »

Bootstrap အတိုချုံးမှတ်တမ်းအကြောင်း၊ ဘရောက်ဆာပံ့ပိုးမှုနှင့် အခြားအရာ များအကြောင်း

သမိုင်း

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

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

dev.twitter.com တွင် ပိုမို ဖတ်ရှုရန် ›

Browser ပံ့ပိုးမှု

Bootstrap ကို Chrome၊ Safari၊ Internet Explorer နှင့် Firefox ကဲ့သို့သော ခေတ်မီဘရောက်ဆာများတွင် စမ်းသပ်ပြီး ပံ့ပိုးထားသည်။

Chrome၊ Safari၊ Internet Explorer နှင့် Firefox တို့တွင် စမ်းသပ်ပြီး ပံ့ပိုးထားသည်။
  • နောက်ဆုံးထွက် Safari
  • နောက်ဆုံးထွက် Google Chrome
  • Firefox 4+
  • Internet Explorer 7+
  • အော်ပရာ ၁၁

ဘာတွေပါဝင်လဲ။

Bootstrap သည် စုစည်းထားသော CSS၊ စုစည်းမထားသော၊ နှင့် ဥပမာ နမူနာပုံစံများဖြင့် ပြီးပြည့်စုံပါသည်။

  • မူရင်း .less ဖိုင်များအားလုံး
  • CSS ကို အပြည့်အ၀ စုစည်းပြီး အသေးစိပ်ပါ။
  • စတိုင်လမ်းညွှန်စာရွက်စာတမ်းအပြည့်အစုံ
  • နမူနာစာမျက်နှာ နမူနာပုံစံ (နောက်ထပ် မကြာမီလာမည်)

Grid စနစ်သည် ပုံမှန် 940px ကို ရော့ချပါ သို့မဟုတ် သင့်ကိုယ်ပိုင် လှိမ့်ပါ။

မူရင်းဇယားကွက်

Bootstrap ၏ တစ်စိတ်တစ်ပိုင်းအဖြစ် ပံ့ပိုးပေးထားသည့် မူရင်းဂရစ်စနစ်သည် 940px ကျယ်ပြန့်သော 16-ကော်လံဇယားဖြစ်သည်။ ၎င်းသည် လူကြိုက်များသော 960 ဂရစ်စနစ်၏ အရသာတစ်ခုဖြစ်သော်လည်း ဘယ်ဘက်နှင့် ညာဘက်ရှိ အပိုအနားသတ်/အကွက်များ မပါဝင်ပါ။

နမူနာဇယားကွက်များ မှတ်သားခြင်း။

ဤနေရာတွင် ပြထားသည့်အတိုင်း၊ ကျွန်ုပ်တို့၏ grid စနစ်၏ တစ်စိတ်တစ်ပိုင်းအဖြစ် ကျွန်ုပ်တို့သတ်မှတ်ထားသော အခြေခံကော်လံ 16 ခုအနက် တစ်ခုစီကို "ကော်လံ" နှစ်ခုဖြင့် အခြေခံ အပြင်အဆင်ကို ဖန်တီးနိုင်သည်။ နောက်ထပ် ပုံစံကွဲများအတွက် အောက်ပါ ဥပမာများကို ကြည့်ပါ။

  1. <div class = "row" > 
  2.   <div class = "span6 ကော်လံ" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10 ကော်လံ" > 
  6.     ...
  7.   </div>
  8. </div>
၁
၁
၁
၁
၁
၁
၁
၁
၁
၁
၁
၁
၁
၁
၁
၁
၂
၂
၂
၂
၂
၂
၂
၂
၃
၃
၃
၃
၃
၁
၄
၄
၄
၄
၄
၆
၆
၈
၈
၅
၁၁
၁၆

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

၄
၈ ထေရ ၄
၄ ထေရ ၄
၄ ထေရ ၄
၅ ထေရ ၃
၅ ထေရ ၃
၁၀ ထေရီ ၆

ဝဘ်စာမျက်နှာများဖန်တီးရန် Layouts အခြေခံ နမူနာပုံစံများ

ပုံသေ အပြင်အဆင်

ပုံသေနှင့် ရိုးရှင်းသော 940px ကျယ်ဝန်းသော၊ တစ်ခုတည်းသော ဝဘ်ဆိုဒ် သို့မဟုတ် စာမျက်နှာတစ်ခုအတွက် ပံ့ပိုးပေးသည့် မည်သည့်ဝဘ်ဆိုဒ် သို့မဟုတ် စာမျက်နှာအတွက်မဆို ဗဟိုပြုထားသော အပြင်အဆင် <div.container>။

  1. <body>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

အရည် အဆင်အပြင်

min- နှင့် max-widths နှင့် ဘယ်ဘက် sidebar ပါရှိသော ပြောင်းလွယ်ပြင်လွယ်ရှိသော အရည် စာမျက်နှာတည်ဆောက်ပုံ။ အက်ပ်များနှင့် စာရွက်စာတမ်းများအတွက် ကောင်းမွန်သည်။

  1. <body>
  2.   <div class = "container-fluid" > 
  3.     <div class = "sidebar" > 
  4.       ...
  5.     </div>
  6.     <div class = "content" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

စာစီစာရိုက် ခေါင်းစဉ်များ၊ စာပိုဒ်များ၊ စာရင်းများနှင့် အခြား inline အမျိုးအစား အစိတ်အပိုင်းများ

ခေါင်းစဉ်များနှင့် မိတ္တူ

သင့်ဝဘ်စာမျက်နှာများကို တည်ဆောက်ခြင်းအတွက် စံစာစီစာကုံးအဆင့်။

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

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

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

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

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

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

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

နမူနာစာပိုဒ်

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 ut id elit ။

ဥပမာ ခေါင်းစီး တွင် ခေါင်းစဉ် ခွဲရှိသည်…

ထွေ။ ဒြပ်စင်

အလေးပေးမှု၊ လိပ်စာများနှင့် အတိုကောက်များကို အသုံးပြုခြင်း။

<strong> <em> <address> <abbr>

ဘယ်အချိန်မှာ သုံးမလဲ။

အလေးပေးတဂ်များ ( <strong>နှင့် <em>) ကို ၎င်း၏ပတ်ဝန်းကျင်မိတ္တူနှင့်ဆက်စပ်သော စကားလုံး သို့မဟုတ် စကားစုတစ်ခု၏ ထပ်လောင်းအရေးကြီးမှု သို့မဟုတ် အလေးပေးဖော်ပြရန်အတွက် အသုံးပြုသင့်သည်။ <strong>အရေးပါမှုနှင့် ဖိစီး မှုအလေးပေး <em>မှုအတွက် အသုံးပြု ပါ။

စာပိုဒ်တစ်ခုတွင် အလေးပေးသည်။

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

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

မှတ်ချက်- အကြောင်းအရာကို မှန်ကန်စွာတည်ဆောက်ရန်အတွက် လိုင်းတစ်ခုစီမှ စာကြောင်းတစ်ကြောင်းစီ ( ) သို့မဟုတ် ဘလောက်အဆင့်တက်ဂ် (ဥပမာ ) <address>ဖြင့် အဆုံးသတ်ရပါမည် ။<br /><p>

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

အတိုကောက်များနှင့် အတိုကောက်များအတွက်၊ <abbr>tag ကိုသုံးပါ ( HTML5<acronym> တွင် ကန့်ကွက်ထားသည် )။ အတိုကောက်ပုံစံကို တဂ်အတွင်းထည့်ကာ အမည်အပြည့်အစုံအတွက် ခေါင်းစဉ်တစ်ခု သတ်မှတ်ပါ။

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

<blockquote> <p> <small>

ကိုးကားနည်း

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ ကိန်းပြည့် posuere erat a ante venenatis dapibus posuere velit aliquet ။

ဒေါက်တာ Julius Hibbert

စာရင်းများ

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

Tables For၊ သင် ခန့်မှန်းထားသည်၊ ဇယားဒေတာ

စားပွဲများတည်ဆောက်ခြင်း။

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

စားပွဲများသည် အလွန်ကောင်းသည်—အရာများစွာအတွက်။ သို့သော် ဇယားကြီးများသည် အသုံးဝင်၊ အရွယ်တင်၍ ဖတ်နိုင်သော (ကုဒ်အဆင့်တွင်) ရှိရန် မတ်ခ်အပ်နှစ်သက်မှု အနည်းငယ် လိုအပ်ပါသည်။ ဤသည်မှာ ကူညီရန် အကြံပြုချက်အချို့ဖြစ်သည်။

သင့်ကော်လံခေါင်းစီးများကို <thead>အထက်တန်းပုံစံ <thead>> <tr>> တွင် အမြဲထည့်ပါ <th>။

ကော်လံခေါင်းစီးများနှင့်ဆင်တူသည်၊ သင့်ဇယား၏ကိုယ်ထည်အကြောင်းအရာအားလုံးကို <tbody>သင့်အထက်တန်းအဆင့် အဖြစ် <tbody>> <tr>> ဖြင့် ပတ်ထားသင့်သည် <td>။

ဥပမာ- မူရင်းဇယားပုံစံများ

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

# နာမည် မျိုးနွယ်အမည် ဘာသာစကား
၁ တချို့က တစ်မျိုး အင်္ဂလိပ်စာ
၂ ဂျိုး ခြောက်ထုပ် အင်္ဂလိပ်စာ
၃ စတူး အံ ကုဒ် 
  1. <စားပွဲ>
  2.   ...
  3. </table>

ဥပမာ- မြင်းကျားအစင်း

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

# နာမည် မျိုးနွယ်အမည် ဘာသာစကား
၁ တချို့က တစ်မျိုး အင်္ဂလိပ်စာ
၂ ဂျိုး ခြောက်ထုပ် အင်္ဂလိပ်စာ
၃ စတူး အံ ကုဒ်

မှတ်ချက်- Zebra-striping သည် IE8 နှင့် အောက်ရှိ ဘရောင်ဆာအဟောင်းများအတွက် မရရှိနိုင်သော တိုးတက်မှုအဆင့်မြှင့်တင်မှုတစ်ခုဖြစ်သည်။

  1. <table class = "မြင်းကျားအစင်း" > 
  2. ...
  3. </table>

ဥပမာ- မြင်းကျားအစင်း w/ TableSorter.js

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

# နာမည် မျိုးနွယ်အမည် ဘာသာစကား
၁ မင်းရဲ့ တစ်မျိုး အင်္ဂလိပ်စာ
၂ ဂျိုး ခြောက်ထုပ် အင်္ဂလိပ်စာ
၃ စတူး အံ ကုဒ် 
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
  2. <script > 
  3.   $ ( function () { 
  4.     $ ( "table#sortTableExample" )။ tablesorter ({ sortList : [[ 1 , 0 ]] });  
  5.   });
  6. </script>
  7. <table class = "မြင်းကျားအစင်း" > 
  8.   ...
  9. </table>

ပုံစံများ

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

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

နမူနာပုံစံ ဒဏ္ဍာရီ
တန်ဖိုးအချို့ ဤတွင်
အကူအညီ စာသားအတိုအထွာလေးများ
နမူနာပုံစံ ဒဏ္ဍာရီ
@
နမူနာပုံစံ ဒဏ္ဍာရီ
မှတ်ချက်- အညွှန်းများသည် ပိုမိုကြီးမားသောကလစ်ဧရိယာများနှင့် ပိုမိုအသုံးပြုနိုင်သောပုံစံအတွက် ရွေးချယ်စရာအားလုံးကို ဝိုင်းရံထားသည်။
သို့ အချိန်အားလုံးကို ပစိဖိတ်စံတော်ချိန် (GMT -08:00) အဖြစ် ပြထားသည်။
လိုအပ်ပါက အထက်ဖော်ပြပါအကွက်ကို ဖော်ပြရန် အကူအညီစာသားကို ပိတ်ဆို့ပါ။
 

ဖွဲ့ထားသောပုံစံများ

သင့်ဖောင်၏ HTML တွင် ထည့်ပါ .form-stackedက ၎င်းတို့၏ ဘယ်ဘက်တွင် အကွက်များအစား ၎င်းတို့၏ အကွက်များထိပ်တွင် အညွှန်းများ ရှိနေမည်ဖြစ်သည်။ သင့်ဖောင်များသည် တိုတောင်းသည် သို့မဟုတ် ပိုမိုလေးသောပုံစံများအတွက် ထည့်သွင်းမှုကော်လံနှစ်ခုရှိသည်ဆိုပါက ၎င်းသည် ကောင်းမွန်ပါသည်။

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

ခလုတ်များ

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

ခလုတ်များအားလုံးသည် မီးခိုးရောင်ဖျော့ဖျော့စတိုင်သို့ ပုံသေဖြစ်သော်လည်း၊ ကွဲပြားသောအရောင်စတိုင်များအတွက် လုပ်ဆောင်နိုင်သော အတန်းများစွာကို အသုံးပြုနိုင်ပါသည်။ ဤအတန်းများတွင် အပြာ .primaryအတန်း၊ အပြာနုရောင် .infoအတန်း၊ အစိမ်းရောင် .successအတန်းနှင့် အနီရောင် .dangerအတန်းတို့ ပါဝင်သည်။ ထို့အပြင်၊ သင့်ကိုယ်ပိုင်စတိုင်များကို လှိမ့်သွင်းခြင်းသည် လွယ်ကူသက်သာသည်။

ဥပမာ ခလုတ်များ

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

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

ပိုကြီးသော သို့မဟုတ် သေးငယ်သော ခလုတ်များကို နှစ်သက်ပါသလား။ လုပ်လိုက်ပါ!

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

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

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

လင့်များ

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

ခလုတ်များ

 

သတိပေးချက်များနှင့် အမှားအယွင်းများ ပုံစံများ

အခြေခံသတိပေးချက်များ

div.alert-message

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

×

သန့်ရှင်းသော gaucamole။ သင့်ကိုယ်သင် အကောင်းဆုံးစစ်ဆေးပါ၊ သင်အရမ်းကြည့်ကောင်းနေမှာမဟုတ်ပါဘူး။

×

အိုး! အဲဒါကို ပြောင်းပြီး ထပ်စမ်းကြည့်ပါ။

×

ကောင်းစွာပြီးဆုံးသည်! ဤသတိပေးစာကို သင်အောင်မြင်စွာ ဖတ်ပြီးပါပြီ။

×

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

မက်ဆေ့ချ်များကို ပိတ်ပါ။

div.alert-message.block-message

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

×

သန့်ရှင်းသော gaucamole။ ဒါက သတိပေးချက်ပါ။ သင့်ကိုယ်သင် အကောင်းဆုံးစစ်ဆေးပါ၊ သင်အရမ်းကြည့်ကောင်းနေမှာမဟုတ်ပါဘူး။ Nulla vitae elit libero၊ pharetra augue။ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

ဒါကို အရေးယူပါ။ ဒါမှမဟုတ် ဒီလိုလုပ်ပါ။
×

အိုး! မင်းမှာ အမှားတစ်ခု ရှိတယ်။ အဲဒါကို ပြောင်းပြီး ထပ်စမ်းကြည့်ပါ။ Duis mollis၊ est non commodo luctus၊ nisi erat porttitor ligula၊ eget lacinia odio sem nec elit။ Cras mattis consectetur purus ထိုင် amet fermentum ။

ဒါကို အရေးယူပါ။ ဒါမှမဟုတ် ဒီလိုလုပ်ပါ။
×

ကောင်းစွာပြီးဆုံးသည်! ဤသတိပေးစာကို သင်အောင်မြင်စွာ ဖတ်ပြီးပါပြီ။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum

ဒါကို အရေးယူပါ။ ဒါမှမဟုတ် ဒီလိုလုပ်ပါ။
×

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

ဒါကို အရေးယူပါ။ ဒါမှမဟုတ် ဒီလိုလုပ်ပါ။

modals၊ tooltips နှင့် popovers များတွင် အကြောင်းအရာကိုပြသရန်အတွက် Popovers အစိတ်အပိုင်းများ

မော်ဒယ်များ

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

Modal ခေါင်းစီး

×

တစ်ကိုယ်ကောင်း...

မူလတန်း အလယ်တန်း

Tool Tips

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

Lorem ipsum dollar sit amet illo အမှား ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus အကျိုးဆက် ရလဒ်, aut natus illo voluptatem odit perpiciatis laudantium rem dolorupquetam. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit fugit quasi fugit, totam doloremque unde sunt sed dicta quae voltamo accusant .

အောက်မှာ!
မှန်တယ်!
ကျန်ခဲ့သည်!
အပေါ်က!

Popovers

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

Popover ခေါင်းစဉ်

Etiam porta sem malesuada magna mollis euismod။ Maecenas faucibus mollis interdum Morbi leo risus၊ porta ac consectetur ac၊ vestibulum နှင့် eros။

သင့် CSS ကို ကိန်းရှင်များ၊ ရောနှောခြင်းနှင့် လုပ်ဆောင်ချက်များပါ၀င်သော CSS အား ပိုနည်းသော Bootstrap ကိုအသုံးပြုခြင်း ။

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

Bootstrap တွင် Preboot ကိုကျွန်ုပ်တို့အသုံးပြုပုံနှင့် သင့်နောက်ပရောဂျက်တွင် Less ကို run ရန်ရွေးချယ်သင့်ပါက ၎င်းကို မည်သို့အသုံးပြုနိုင်ကြောင်း စစ်ဆေးကြည့်ပါ။

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

သင့်ဘရောက်ဆာရှိ javascript မှတစ်ဆင့် CSS တွင် အနည်းအကျဉ်း၊ ရောနှောပါဝင်မှုများနှင့် CSS တွင် nesting ပြုလုပ်ရန် Bootstrap ၏နည်းသော ကိန်းရှင်များကို အပြည့်အဝအသုံးပြုရန် ဤရွေးချယ်မှုကို အသုံးပြုပါ။

  1. <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
  2. <script src = "js/less-1.1.3.min.js" ></script>

.js ဖြေရှင်းချက်ကို မခံစားရဘူးလား။ Less Mac အက်ပ်ကို စမ်းသုံးကြည့်ပါ သို့မဟုတ် သင့်ကုဒ်ကို အသုံးပြုသည့်အခါ စုစည်းရန် Node.js ကို အသုံးပြုပါ။

ဘာတွေပါဝင်လဲ။

ဤသည်မှာ Bootstrap ၏တစ်စိတ်တစ်ပိုင်းအနေဖြင့် Twitter Bootstrap တွင်ပါ ၀ င်သည့်အချက်အချို့ဖြစ်သည်။ ဒေါင်းလုဒ်လုပ်ပြီး ပိုမိုလေ့လာရန် Bootstrap ဝဘ်ဆိုက် သို့မဟုတ် Github ပရောဂျက်စာမျက်နှာသို့ သွားပါ။

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

Less ရှိ Variable များသည် သင်၏ CSS ခေါင်းကိုက်ခြင်းကို အခမဲ့ ထိန်းသိမ်းရန်နှင့် အဆင့်မြှင့်တင်ခြင်းအတွက် ပြီးပြည့်စုံပါသည်။ အရောင်တန်ဖိုး သို့မဟုတ် မကြာခဏအသုံးပြုသည့်တန်ဖိုးကို ပြောင်းလဲလိုပါက ၎င်းကို တစ်နေရာတည်းတွင် အပ်ဒိတ်လုပ်ပြီး သင်သတ်မှတ်လိုက်ပါ။

  1. //လင့်များ
  2. @linkColor : #8b59c2;         
  3. @linkColorHover :     darken ( @linkColor , 10 ); 
  4.  
  5. // မီးခိုးရောင်
  6. @အနက်ရောင် : #000;             
  7. @grayDark : အလင်း (           @black , 25 %); 
  8. @gray :               lighten ( @black , 50 % ); 
  9. @grayLight : အလင်း (          @black , 70 %); 
  10. @grayLighter : အလင်း (        @black , 90 %); 
  11. @အဖြူ : #ffff ;             
  12.  
  13. // အသံထွက်အရောင်များ
  14. @blue : #08b5fb;              
  15. @green : #46a546;             
  16. @red : #9d261d;               
  17. @yellow : #ffc40d;            
  18. @လိမ္မော်ရောင် : #f89406 ;            
  19. @ပန်းရောင် : #c3325f ;              
  20. @ခရမ်းရောင် : #7a43b6 ;            
  21.  
  22. // အခြေခံဇယားကွက်
  23. @basefont : 13px ;          
  24. @baseline : 18px ;

မှတ်ချက်ပေးခြင်း

/* ... */Less သည် CSS ၏ ပုံမှန်အထားအ သို အပြင် အခြားမှတ်ချက်ပေးသည့်ပုံစံကိုလည်း ပေးသည် ။

  1. // ဒါက မှတ်ချက်
  2. /*ဒါက comment တစ်ခုပါ*/

wazoo ကို ရောနှောလိုက်ပါ။

Mixins သည် အခြေခံအားဖြင့် CSS အတွက် အစိတ်အပိုင်းများ သို့မဟုတ် တစ်စိတ်တစ်ပိုင်းပါဝင်ပြီး ကုဒ်တစ်ခုအား တစ်ခုအဖြစ် ပေါင်းစပ်နိုင်စေပါသည်။ ၎င်းတို့သည် ရောင်းသူရှေ့ဆက်သော ဂုဏ်သတ္တိများ box-shadow၊ ဘရောက်ဆာဖြတ်ကျော် gradients၊ font stacks နှင့် အခြားအရာများကဲ့သို့သော ရောင်းချသူများအတွက် အလွန်ကောင်းမွန်ပါသည်။ အောက်တွင် Bootstrap ပါ၀င်သော mixins နမူနာတစ်ခုဖြစ်သည်။

ဖောင့်အတွဲများ

  1. #ဖောင့် {
  2.   . အတိုကောက် ( @weight : ပုံမှန် ၊ @size : 14px ၊ @lineHeight : 20px ) {     
  3.     ဖောင့ ် အရွယ်အစား : @size ; 
  4.     ဖောင့ ် - အလေးချိန် : @weight ; 
  5.     လိုင်း အ မြင့် : @lineHeight ; 
  6.   }
  7.   . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  8.     ဖောင့ ် - မိသားစု : "Helvetica Neue" ၊ Helvetica ၊ Arial ၊ sans - serif ;   
  9.     ဖောင့ ် အရွယ်အစား : @size ; 
  10.     ဖောင့ ် - အလေးချိန် : @weight ; 
  11.     လိုင်း အ မြင့် : @lineHeight ; 
  12.   }
  13.   . serif ( @weight : ပုံမှန် ၊ @size : 14px ၊ @lineHeight : 20px ) {     
  14.     font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
  15.     ဖောင့ ် အရွယ်အစား : @size ; 
  16.     ဖောင့ ် - အလေးချိန် : @weight ; 
  17.     လိုင်း အ မြင့် : @lineHeight ; 
  18.   }
  19.   . monospace ( @weight : ပုံမှန် ၊ @size : 12px ၊ @lineHeight : 20px ) {     
  20.     ဖောင့ ် - မိသားစု : "မိုနာကို" ၊ ချော စာ အသစ် ၊ monospace ;   
  21.     ဖောင့ ် အရွယ်အစား : @size ; 
  22.     ဖောင့ ် - အလေးချိန် : @weight ; 
  23.     လိုင်း အ မြင့် : @lineHeight ; 
  24.   }
  25. }

အဆင့်အတန်းများ

  1. #gradient {
  2.   . အလျားလိုက် ( @startColor : #555 ၊ @endColor : #333 ) { 
  3.     နောက်ခံအရောင် - @endColor ; _ _ 
  4.     နောက်ခံ - repeat : repeat - x ;
  5.     နောက်ခံပုံ : - khtml - gradient ( linear ၊ ဘယ်ဘက်ထိပ် ၊ ညာဘက်အပေါ် ၊ မှ ( @startColor ) ) မှ ( @endColor ) ) ; // Konqueror   
  6.     နောက်ခံပုံ - moz - linear - gradient ( left , @startColor , @endColor ) ; _ _ // FF 3.6+    
  7.     နောက်ခံပုံ - ms - linear - gradient ( left , @startColor , @endColor ) ; _ _ // IE10    
  8.     နောက်ခံပုံ - webkit - gradient ( linear ၊ ဘယ်ဘက်ထိပ် ၊ ညာဘက်အပေါ် ၊ color - stop ( 0 %, @startColor ), color - stop ( 100 % , @endColor ) ) ; // Safari 4+၊ Chrome 2+    
  9.     နောက်ခံပုံ - webkit - linear - gradient ( left , @startColor , @endColor ) ; _ _ // Safari 5.1+၊ Chrome 10+    
  10.     နောက်ခံပုံ - o - linear - gradient ( left , @startColor , @endColor ) ; _ _ // Opera 11.10    
  11.     နောက်ခံပုံ - linear - gradient ( left , @startColor , @endColor ) ; _ //လဲ့စံ   
  12.   }
  13.   . ဒေါင်လိုက် ( @startColor : #555 ၊ @endColor : #333 ) { 
  14.     နောက်ခံအရောင် - @endColor ; _ _ 
  15.     နောက်ခံ - repeat : repeat - x ;
  16.     နောက်ခံပုံ - khtml - gradient ( linear ၊ ဘယ်ဘက်အပေါ် ၊ ဘယ်ဘက်အောက်ခြေ ၊ မှ ( @startColor ) ) မှ ( @endColor ) ) ; // Konqueror   
  17.     နောက်ခံပုံ - moz - linear - gradient ( @startColor , @endColor ) ; _ _ // FF 3.6+   
  18.     နောက်ခံပုံ - ms - linear - gradient ( @startColor , @endColor ) ; _ _ // IE10   
  19.     နောက်ခံပုံ - webkit - gradient ( linear ၊ ဘယ်ဘက်အပေါ် ၊ ဘယ်ဘက် အောက်ခြေ ၊ color - stop ( 0 %, @startColor ), color - stop ( 100 % , @endColor ) ) ; // Safari 4+၊ Chrome 2+    
  20.     နောက်ခံပုံ - webkit - linear - gradient ( @startColor , @endColor ) ; _ _ // Safari 5.1+၊ Chrome 10+   
  21.     နောက်ခံပုံ - o - linear - gradient ( @startColor , @endColor ) ; _ _ // Opera 11.10   
  22.     နောက်ခံပုံ - linear - gradient ( @startColor , @endColor ) ; _ // စံ  
  23.   }
  24.   . ဦးတည်ချက် ( @startColor : #555 ၊ @endColor : #333 ၊ @deg : 45deg ) { 
  25.     ...
  26.   }
  27.   . ဒေါင်လိုက် - သုံး ရောင် ( @startColor : #00b3ee ၊ @midColor : #7a43b6 ၊ @colorStop : 50 % @endColor : #c3325f ) { 
  28.     ...
  29.   }
  30. }

လည်ပတ်မှုနှင့် လိုင်းစနစ်

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

  1. // ဂရစ်တဒ်
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // Grid စနစ်
  8. . ကွန်တိန်နာ {
  9.   အကျယ် : @siteWidth ; 
  10.   အနားသတ် : 0 အော်တို ;  
  11.   . clearfix ();
  12. }
  13. . ကော်လံများ ( @columnSpan : 1 ) {  
  14.   အကျယ် : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  15. }
  16. . အော့ ဖ်ဆက် ( @columnOffset : 1 ) {  
  17.   အနားသတ် - ဘယ်ဘက် : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
  18. }