Twitter Bootstrap

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

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

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

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

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

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

GitHub တွင် Fork

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

GitHub တွင် Bootstrap »

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

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

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

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

<div class="row"> class = "row" >
  <div class = "span6 ကော်လံ" > 
    ...
  </div>
  <div class = "span10 ကော်လံ" > 
    ...
  </div>
</div>

၁

၂

၃

၁

၄

၆

၈

၅

၁၁

၁၆

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

၄

၈ ထေရ ၄

၄ ထေရ ၄

၅ ထေရ ၃

၁၀ ထေရီ ၆

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

ဝဘ်ဆိုဒ် သို့မဟုတ် စာမျက်နှာတိုင်းအတွက် အခြေခံ 940px ကျယ်ဝန်းပြီး ဗဟိုပြုသော ကွန်တိန်နာ အပြင်အဆင်။

<body>
  <div class = "container" > 
    ...
  </div>
</body>

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

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

<body>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

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

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

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>

ထွေ။ ဒြပ်စင်

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

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

လိပ်စာများ

addressဒြပ်စင်ကို သင်ခန့်မှန်းထားသည်!—လိပ်စာများအတွက် အသုံးပြုသည် ။ ဒါက ဘယ်လိုပုံစံပါလဲ။

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

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

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

အတိုကောက်များနှင့် အတိုကောက်များအတွက်၊ abbrtag ကိုသုံးပါ ( HTML5acronym တွင် ကန့်ကွက်ထားသည် )။ အတိုကောက်ပုံစံကို တဂ်အတွင်းထည့်ကာ အမည်အပြည့်အစုံအတွက် ခေါင်းစဉ်တစ်ခု သတ်မှတ်ပါ။

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

<blockquote> <p> <cite>

သင်၏ blockquoteပတ်ပတ်လည် paragraphနှင့် citetags များကိုသေချာစေပါ။ အရင်းအမြစ်ကိုကိုးကားသောအခါ၊ citeဒြပ်စင်ကိုသုံးပါ။ CSS သည် အမည်ကို em dash (—) ဖြင့် အလိုအလျောက် နိဂုံးချုပ်ပါမည်။

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
ဒေါက်တာ Julius Hibbert

စာရင်းများ

Unordered`<ul>`

Jeremy Bixby
Robert Dezure
Josh Washington
Anton Capresi
ကျွန်ုပ်၏အသင်းဖော်များ
- George Castanza
- Jerry Seinfeld
- Cosmo Kramer
- Elaine Bennis
- လူသစ်
ယောဟန် ယာကုပ်
ပေါလ်ပီယ
Kevin Garnett

ပုံစံမဲ့`<ul.unstyled>`

Jeremy Bixby
Robert Dezure
Josh Washington
Anton Capresi
ကျွန်ုပ်၏အသင်းဖော်များ
- George Castanza
- Jerry Seinfeld
- Cosmo Kramer
- Elaine Bennis
- လူသစ်
ယောဟန် ယာကုပ်
ပေါလ်ပီယ
Kevin Garnett

အမိန့်ပေးတယ်။`<ol>`

Jeremy Bixby
Robert Dezure
Josh Washington
Anton Capresi
ကျွန်ုပ်၏အသင်းဖော်များ
1. George Castanza
2. Jerry Seinfeld
3. Cosmo Kramer
4. Elaine Bennis
5. လူသစ်
ယောဟန် ယာကုပ်
ပေါလ်ပီယ
Kevin Garnett

ဖော်ပြချက်`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။

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

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

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

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

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

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

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

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

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

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

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

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

<table class="common-table zebra-striped"> class = "common-table zebra-စင်း" >
...
</table>

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

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

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

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> အမျိုးအစား = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( စာရွက်စာတမ်း )။ အဆင်သင့် ( function () { 
    $ ( "table#sortTableExample" )။ tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-စင်း" > 
  ...
</table>

အပေါ်ဘားပုံသေ

အဲဒါဘာလဲ

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

စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။

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

ဆွဲချခြင်းများ ပါဝင်သည်။

ပင်မလမ်းညွှန်မှု၏တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ သင့် nav တွင် dropdowns များထည့်နိုင်သည့်စွမ်းရည်ကို ကျွန်ုပ်တို့ထည့်သွင်းထားပါသည်။ ပြီးမြောက်ပုံကိုကြည့်ရန် အပေါ်က ဒုတိယလမ်းကြောင်း (ညာဘက်ညှိထားသည်) ကိုကြည့်ပါ။

တက်ဘ်များနှင့် ဆေးပြားများ

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

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

<ul class = "tabs" > 
  <li class = "active" > <a href=""> အိမ် </a> </li >  
  <li><a href=""> ပရိုဖိုင် </a> < /li > 
  <li><a href=""> မက်ဆေ့ချ် များ </a> </li > 
  <li><a href=""> ဆက် တင် များ </a></li > 
  <li><a href=""> ဆက်သွယ်ရန် </a> < /li > 
</ul>

<ul class = "ဆေးပြား" > 
  <li class = "active" > <a href=""> အိမ် </a> </li >  
  <li><a href=""> ပရိုဖိုင် </a> < /li > 
  <li><a href=""> မက်ဆေ့ချ် များ </a> </li > 
  <li><a href=""> ဆက် တင် များ </a></li > 
  <li><a href=""> ဆက်သွယ်ရန် </a> < /li > 
</ul>

Pagination

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

<div class = "pagination" > 
  <ul>
    < li class = "prev disabled" > <a href=""> & larr ; ယခင် </a></li>  
    <li class = "active" > <a href=""> 1 </a></ li >  
    <li><a href=""> 2 </a> < /li > 
    <li><a href=""> 3 </a> < /li > 
    <li><a href=""> 4 </a> < /li > 
    <li><a href=""> 5 </a> < /li > 
    < li class = "next" > <a href=""> နောက်တစ်ခု &rarr ; </a></li>  
  </ul>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

မော်ဒယ်များ

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

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 ကိုသုံးပါ။

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

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

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

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

<link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />     
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>

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

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

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

အရောင်ပြောင်းသည်။

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

//လင့်များ
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
 
// မီးခိုးရောင်
@အနက်ရောင် : #000;             
@grayDark : အလင်း (           @black , 25 %); 
@gray :               lighten ( @black , 50 % ); 
@grayLight : အလင်း (          @black , 70 %); 
@grayLighter : အလင်း (        @black , 90 %); 
@အဖြူ : #ffff ;             
 
// အသံထွက်အရောင်များ
@blue : #08b5fb;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@လိမ္မော်ရောင် : #f89406 ;            
@ပန်းရောင် : #c3325f ;              
@ခရမ်းရောင် : #7a43b6 ;            
 
// အခြေခံအချက်
@baseline : 20px ;

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

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

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

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

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

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

#ဖောင့် {
  . အတိုကောက် ( @weight : ပုံမှန် ၊ @size : 14px ၊ @lineHeight : 20px ) {     
    ဖောင့ ် အရွယ်အစား : @size ; 
    ဖောင့ ် - အလေးချိန် : @weight ; 
    လိုင်း အ မြင့် : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    ဖောင့ ် - မိသားစု : "Helvetica Neue" ၊ Helvetica ၊ Arial ၊ sans - serif ;   
    ဖောင့ ် အရွယ်အစား : @size ; 
    ဖောင့ ် - အလေးချိန် : @weight ; 
    လိုင်း အ မြင့် : @lineHeight ; 
  }
  . serif ( @weight : ပုံမှန် ၊ @size : 14px ၊ @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    ဖောင့ ် အရွယ်အစား : @size ; 
    ဖောင့ ် - အလေးချိန် : @weight ; 
    လိုင်း အ မြင့် : @lineHeight ; 
  }
  . monospace ( @weight : ပုံမှန် ၊ @size : 12px ၊ @lineHeight : 20px ) {     
    ဖောင့ ် - မိသားစု : "မိုနာကို" ၊ ချော စာ အသစ် ၊ monospace ;   
    ဖောင့ ် အရွယ်အစား : @size ; 
    ဖောင့ ် - အလေးချိန် : @weight ; 
    လိုင်း အ မြင့် : @lineHeight ; 
  }
}

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

#gradient {
  . အလျားလိုက် ( @startColor : #555 ၊ @endColor : #333 ) { 
    နောက်ခံအရောင် - @endColor ; _ _ 
    နောက်ခံ - repeat : repeat - x ;
    နောက်ခံပုံ - khtml - gradient ( linear ၊ ဘယ်ဘက်ထိပ် ၊ ညာဘက်အပေါ် ၊ မှ ( @startColor ) ) မှ ( @endColor ) ) ; // Konqueror   
    နောက်ခံပုံ - moz - linear - gradient ( left , @startColor , @endColor ) ; _ _ // FF 3.6+    
    နောက်ခံပုံ - ms - linear - gradient ( left , @startColor , @endColor ) ; _ _ // IE10    
    နောက်ခံပုံ - webkit - gradient ( linear ၊ ဘယ်ဘက်ထိပ် ၊ ညာဘက်အပေါ် ၊ color - stop ( 0 %, @startColor ), color - stop ( 100 % , @endColor ) ) ; // Safari 4+၊ Chrome 2+    
    နောက်ခံပုံ - webkit - linear - gradient ( left , @startColor , @endColor ) ; _ _ // Safari 5.1+၊ Chrome 10+    
    နောက်ခံပုံ - o - linear - gradient ( left , @startColor , @endColor ) ; _ _ // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    နောက်ခံပုံ - linear - gradient ( left , @startColor , @endColor ) ; _ //လဲ့စံ   
  }
  . ဒေါင်လိုက် ( @startColor : #555 ၊ @endColor : #333 ) { 
    နောက်ခံအရောင် - @endColor ; _ _ 
    နောက်ခံ - repeat : repeat - x ;
    နောက်ခံပုံ - khtml - gradient ( linear ၊ ဘယ်ဘက်အပေါ် ၊ ဘယ်ဘက်အောက်ခြေ ၊ မှ ( @startColor ) ) မှ ( @endColor ) ) ; // Konqueror   
    နောက်ခံပုံ - moz - linear - gradient ( @startColor , @endColor ) ; _ _ // FF 3.6+   
    နောက်ခံပုံ - ms - linear - gradient ( @startColor , @endColor ) ; _ _ // IE10   
    နောက်ခံပုံ - webkit - gradient ( linear ၊ ဘယ်ဘက်အပေါ် ၊ ဘယ်ဘက် အောက်ခြေ ၊ color - stop ( 0 %, @startColor ), color - stop ( 100 % , @endColor ) ) ; // Safari 4+၊ Chrome 2+    
    နောက်ခံပုံ - webkit - linear - gradient ( @startColor , @endColor ) ; _ _ // Safari 5.1+၊ Chrome 10+   
    နောက်ခံပုံ - o - linear - gradient ( @startColor , @endColor ) ; _ _ // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    နောက်ခံပုံ - linear - gradient ( @startColor , @endColor ) ; _ // စံ  
  }
  . ဦးတည်ချက် ( @startColor : #555 ၊ @endColor : #333 ၊ @deg : 45deg ) { 
    ...
  }
  . ဒေါင်လိုက် - သုံး ရောင် ( @startColor : #00b3ee ၊ @midColor : #7a43b6 ၊ @colorStop : 0.5 ၊ @endColor : #c3325f ) { 
    ...
  }
}

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

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

// ဂရစ်တဒ်
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Grid စနစ်
. ကွန်တိန်နာ {
  အကျယ် : @siteWidth ; 
  အနားသတ် : 0 အော်တို ;  
  . clearfix ();
}
. ကော်လံများ ( @columnSpan : 1 ) {  
  ပြသမှု : inline ; 
  float : ဘယ်ဘက် ;
  အကျယ် : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  အနားသတ် - ဘယ်ဘက် : @gridGutterWidth ; 
  &: ပထမ - ကလေး {
    အနားသတ် - ဘယ်ဘက် : 0 ; 
  }
}
. အော့ ဖ်ဆက် ( @columnOffset : 1 ) {  
  အနားသတ် - ဘယ်ဘက် : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! အရေးကြီး ;          
}

Bootstrap

Twitter Bootstrap

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

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

GitHub တွင် Fork

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ထွေ။ ဒြပ်စင်

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

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

လိပ်စာများ

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

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

စာရင်းများ

Unordered<ul>

ပုံစံမဲ့<ul.unstyled>

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

ဖော်ပြချက်dl

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

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

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

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

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

ပုံစံများ

မူရင်းစတိုင်များ

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

ခလုတ်များ

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

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

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

လင့်များ

ခလုတ်များ

ညွှန်း

အပေါ်ဘားပုံသေ

စီမံကိန်းအမည်

အဲဒါဘာလဲ

စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။

ဆွဲချခြင်းများ ပါဝင်သည်။

တက်ဘ်များနှင့် ဆေးပြားများ

Pagination

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

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

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

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

မော်ဒယ်များ

Modal ခေါင်းစီး

Tool Tips

Popovers

Popover ခေါင်းစဉ်

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

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

အရောင်ပြောင်းသည်။

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

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

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

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

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

Unordered`<ul>`

ပုံစံမဲ့`<ul.unstyled>`

အမိန့်ပေးတယ်။`<ol>`

ဖော်ပြချက်`dl`