အစိတ်အပိုင်းများ

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

ဥပမာများ

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

ခလုတ်တစ်ခုတည်းအုပ်စု

ခလုတ်များကို အစီအရီဖြင့် ပတ် .btnထားပါ .btn-group

  1. <div class = "btn-group" >
  2. <button class = "btn" > ဘယ်ဘက် </button>
  3. <button class = "btn" > အလယ် </button>
  4. <button class = "btn" > ညာဘက် </button>
  5. </div>

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

ပိုမိုရှုပ်ထွေးသော အစိတ်အပိုင်းများအတွက် အ <div class="btn-group">စု အဝေးများကို ပေါင်းစပ် ပါ။<div class="btn-toolbar">

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

ဒေါင်လိုက်ခလုတ်အုပ်စုများ

အလျားလိုက်မဟုတ်ဘဲ ဒေါင်လိုက်တန်းစီထားသော ခလုတ်များ အစုအဝေးကို ဖန်တီးပါ။

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

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

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

ခလုတ်အုပ်စုများတွင် တွဲချပေးသည်။

ကြိုတင်အသိပေးသည်!မှန်ကန်သော rendering ပြုလုပ်ရန်အတွက် .btn-groupခလုတ် များပါရှိသော ခလုတ်များကို တစ်ခုချင်းအလိုက် ၎င်းတို့ကိုယ်တိုင် ထုပ်ပိုးထားရပါမည် ။.btn-toolbar

ခြုံငုံသုံးသပ်ချက်နှင့်ဥပမာများ

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

  1. <div class = "btn-group" >
  2. <a class="btn dropdown-toggle" data-toggle = "dropdown" href="#" > _ _ _
  3. အက်ရှင်
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

ခလုတ်အရွယ်အစားအားလုံးနှင့်အလုပ်လုပ်သည်။

ခလုတ်များသည် အရွယ်အစားမရွေး လုပ်ဆောင်နိုင်သည်- .btn-large, .btn-small, သို့မဟုတ် .btn-mini.

JavaScript လိုအပ်သည်။

ခလုတ် dropdown များသည် လုပ်ဆောင်ရန် Bootstrap dropdown plugin ကို လိုအပ်သည်။

အချို့ကိစ္စများတွင်—မိုဘိုင်းကဲ့သို့— dropdown menus များသည် viewport အပြင်ဘက်တွင် ကျယ်နေလိမ့်မည်။ သင်သည် ချိန်ညှိမှုကို ကိုယ်တိုင် သို့မဟုတ် စိတ်ကြိုက် JavaScript ဖြင့် ဖြေရှင်းရန် လိုအပ်သည်။


Split ခလုတ်များကို dropdowns

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > လုပ်ဆောင်ချက် </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

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

အပိုခလုတ်အတန်းများ .btn-mini.btn-smallသို့မဟုတ် .btn-largeအရွယ်အစားအတွက် အသုံးပြုပါ။

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > လုပ်ဆောင်ချက် </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Dropup မီနူးများ

အတန်းတစ်ခုတည်းကို ချက်ခြင်းပင်မ၏မိခင်သို့ ပေါင်းထည့်ခြင်းဖြင့် အောက်ဆုံးမှအတက်အဆင်း မီနူးများကိုလည်း ပြောင်းနိုင်သည် .dropdown-menu.caret၎င်းသည် အပေါ်မှအောက်သို့ ရွှေ့မည့်အစား အောက်ခြေအတက်မှ ရွှေ့ရန် မီနူး ၏ ဦးတည်ရာကို လှန်ပြီး သူ့ဘာသာသူ ပြန်လည်နေရာချထားမည်ဖြစ်သည်။

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

စံသတ်မှတ်မှု

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href="#"> ယခင် </a> < /li >
  4. <li><a href="#"> 1 </a> < /li >
  5. <li><a href="#"> 2 </a> < /li >
  6. <li><a href="#"> 3 </a> < /li >
  7. <li><a href="#"> 4 </a> < /li >
  8. <li><a href="#"> 5 </a> < /li >
  9. <li><a href="#"> နောက်တစ်ခု </a> < /li >
  10. </ul>
  11. </div>

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

မသန်စွမ်းသူများနှင့် တက်ကြွသောပြည်နယ်များ

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" > <a href="#" > « ; </a></li>
  4. <li class = "active" > <a href="#" > 1 </a></li >
  5. ...
  6. </ul>
  7. </div>

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

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

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

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

တန်းညှိခြင်း။

pagination လင့်ခ်များ၏ ချိန်ညှိမှုကို ပြောင်းလဲရန် ရွေးချယ်နိုင်သော အတန်းနှစ်ခုထဲမှ တစ်ခုကို ထည့်ပါ- .pagination-centeredနှင့် .pagination-right.

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

ပေဂျာ

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

မူရင်းဥပမာ

မူရင်းအားဖြင့်၊ pager သည် လင့်ခ်များကို ဗဟိုပြုသည်။

  1. <ul class = "pager" >
  2. <li><a href="#"> ယခင် </a> < /li >
  3. <li><a href="#"> နောက်တစ်ခု </a> < /li >
  4. </ul>

ညှိထားသောလင့်များ

တနည်းအားဖြင့် သင်သည် လင့်ခ်တစ်ခုစီကို ဘေးနှစ်ဖက်သို့ ချိန်ညှိနိုင်သည်။

  1. <ul class = "pager" >
  2. <li class = "ယခင်" >
  3. <a href="#"> & larr ; _ အသက်ကြီးပြီ </a>
  4. </li>
  5. <li class = "next" >
  6. <a href="#"> ပိုသစ်သော & rarr ; </a>
  7. </li>
  8. </ul>

ရွေးချယ်ခွင့်ပိတ်ထားသည့်အခြေအနေ

Pager လင့်ခ်များသည် pagination မှ ယေဘူယျ .disabledအသုံးဝင်မှု အတန်းကို အသုံးပြုပါသည်။

  1. <ul class = "pager" >
  2. <li class = "ယခင် ပိတ်ထားသည်" >
  3. <a href="#"> & larr ; _ အသက်ကြီးပြီ </a>
  4. </li>
  5. ...
  6. </ul>

တံဆိပ်များ

တံဆိပ်များ သေား
ပုံသေ <span class="label">Default</span>
အောင်မြင်မှု <span class="label label-success">Success</span>
သတိပေးချက် <span class="label label-warning">Warning</span>
အရေးကြီးတယ်။ <span class="label label-important">Important</span>
အချက်အလက် <span class="label label-info">Info</span>
ပြောင်းပြန် <span class="label label-inverse">Inverse</span>

တံဆိပ်များ

နာမည် ဥပမာ သေား
ပုံသေ <span class="badge">1</span>
အောင်မြင်မှု <span class="badge badge-success">2</span>
သတိပေးချက် <span class="badge badge-warning">4</span>
အရေးကြီးတယ်။ <span class="badge badge-important">6</span>
အချက်အလက် <span class="badge badge-info">8</span>
ပြောင်းပြန် ၁၀ <span class="badge badge-inverse">10</span>

အလွယ်တကူ ခေါက်သိမ်းနိုင်ပါသည်။

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

သူရဲကောင်းယူနစ်

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

မင်္ဂလာပါကမ္ဘာလောက!

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

ပိုမိုသိရှိရန်

  1. <div class = "hero-unit" >
  2. <h1> ခေါင်းစီး </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class="btn btn-primary btn-large" >
  6. ပိုမိုသိရှိရန်
  7. </a>
  8. </p>
  9. </div>

စာမျက်နှာ ခေါင်းစီး

h1သင့်လျော်စွာ ဖယ်ထုတ်ရန်နှင့် စာမျက်နှာတစ်ခုပေါ်ရှိ အကြောင်းအရာအပိုင်းများကို အပိုင်းပိုင်းခွဲရန် ရိုးရှင်းသော အခွံတစ်ခု ။ ၎င်းသည် h1's default small, element နှင့် အခြားသော အစိတ်အပိုင်းအများစု (အပိုဆောင်းစတိုင်များဖြင့်) ကို အသုံးပြုနိုင်သည်။

  1. <div class = "page-header" >
  2. <h1> ဥပမာ စာမျက်နှာ ခေါင်းစီး <small> ခေါင်းစီးအတွက် စာတန်းခွဲ </small></h1>
  3. </div>

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

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

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

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

  • ၃၀၀x၂၀၀

    ပုံသေး အညွှန်း

    Cras justo odio၊ dapibus ac facilisis in၊ egestas eget quam။ Donec id elit non mi porta gravida at eget metus Nullam id dolor id nibh ultricies vehicula ut id elit ။

    အက်ရှင် အက်ရှင်

  • ၃၀၀x၂၀၀

    ပုံသေး အညွှန်း

    Cras justo odio၊ dapibus ac facilisis in၊ egestas eget quam။ Donec id elit non mi porta gravida at eget metus Nullam id dolor id nibh ultricies vehicula ut id elit ။

    အက်ရှင် အက်ရှင်

  • ၃၀၀x၂၀၀

    ပုံသေး အညွှန်း

    Cras justo odio၊ dapibus ac facilisis in၊ egestas eget quam။ Donec id elit non mi porta gravida at eget metus Nullam id dolor id nibh ultricies vehicula ut id elit ။

    အက်ရှင် အက်ရှင်

ပုံသေးများကို ဘာကြောင့်သုံးတာလဲ။

ပုံသေးများ (ယခင် .media-gridv1.4 အထိ) သည် ဓာတ်ပုံ သို့မဟုတ် ဗီဒီယိုများ၊ ရုပ်ပုံရှာဖွေမှုရလဒ်များ၊ လက်လီထုတ်ကုန်များ၊ အစုစုများနှင့် အခြားအရာများအတွက် ကောင်းမွန်ပါသည်။ ၎င်းတို့သည် လင့်ခ်များ သို့မဟုတ် တည်ငြိမ်သော အကြောင်းအရာများ ဖြစ်နိုင်သည်။

ရိုးရှင်းသော၊ လိုက်လျောညီထွေရှိသော စျေးတက်ခြင်း။

ပုံသေး အမှတ်အသားပြုခြင်းသည် ရိုးရှင်းသည်- မည်သည့် ဒြပ်စင် ulအရေအတွက်မဆို လိုအပ်သည် ။ li၎င်းသည် အလွန်ပြောင်းလွယ်ပြင်လွယ်ရှိပြီး သင့်အကြောင်းအရာများကို ခြုံငုံမိစေရန် အနည်းငယ်ပိုသော markup ဖြင့် မည်သည့်အကြောင်းအရာအမျိုးအစားကိုမဆို အသုံးပြုနိုင်မည်ဖြစ်သည်။

ဇယားကွက် ကော်လံ အရွယ်အစားများကို အသုံးပြုသည်။

နောက်ဆုံးအနေဖြင့်၊ ပုံသေးများ အစိတ်အပိုင်းများသည် ပုံသေးအတိုင်းအတာများကို ထိန်းချုပ်ရန်အတွက် ရှိပြီးသား ဂရစ်စနစ်အတန်းများကို အသုံးပြုသည် .span2.span3

သေား

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

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <a href="#" class="thumbnail" > _ _ _ _
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

ပုံသေးများတွင် စိတ်ကြိုက် HTML အကြောင်းအရာအတွက်၊ အမှတ်အသားသည် အနည်းငယ် ပြောင်းလဲပါသည်။ ဘလောက်အဆင့်အကြောင်းအရာကို မည်သည့်နေရာတွင်မဆို ခွင့်ပြုရန်၊ ကျွန်ုပ်တို့သည် ၎င်းကို ကြိုက်သလို လဲလှယ် <a>ပါ <div>-

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> ပုံ သေး အညွှန်း </h3>
  6. <p> ပုံသေးစာတန်း... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

နောက်ထပ် ဥပမာများ

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

ပုံသေသတိပေးချက်

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

သတိပေးချက် သင့်ကိုယ်သင် အကောင်းဆုံးစစ်ဆေးပါ၊ သင်အရမ်းကြည့်ကောင်းနေမှာမဟုတ်ပါဘူး။
  1. <div class = "alert" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <strong> သတိပေးချက်။ </strong> အကောင်းဆုံးကတော့ သင့်ကိုယ်သင် အရမ်းကြည့်ကောင်းနေမှာ မဟုတ်ပါဘူး။
  4. </div>

ခလုတ်များကို ဖြုတ်ပါ။

ရည်ညွှန်းချက် အပြင် Mobile Safari နှင့် Mobile Opera ဘရောက်ဆာ များသည် တဂ် ကိုအသုံးပြုသည့်အခါ သတိပေးချက်များကို ထုတ်ပယ် data-dismiss="alert"ရန် လိုအပ်ပါသည် ။href="#"<a>

  1. <a href="#" class="close" data-dismiss = "alert" > & times ; _ _ </a>

တစ်နည်းအားဖြင့် သင်သည် <button>ကျွန်ုပ်တို့၏စာရွက်စာတမ်းအတွက် ကျွန်ုပ်တို့ရွေးချယ်ထားသော ဒေတာ attribute ပါသည့် အစိတ်အပိုင်းတစ်ခုကို အသုံးပြုနိုင်သည်။ အသုံးပြုသည့်အခါတွင် <button>သင်သည် ထည့်သွင်းရမည် type="button"သို့မဟုတ် သင်၏ပုံစံများကို မတင်ပြနိုင်ပါ။

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

JavaScript မှတစ်ဆင့် သတိပေးချက်များကို ဖယ်ရှားပါ။

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


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

ပိုရှည်သောမက်ဆေ့ဂျ်များအတွက်၊ ပေါင်းထည့်ခြင်းဖြင့် သတိပေးချက်ထုပ်ပိုးမှု၏ အပေါ်နှင့်အောက်ခြေရှိ အကွက်ကို တိုး .alert-blockပေးပါ။

သတိပေးချက်

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

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <h4> သတိပေးချက်။ </h4>
  4. ကိုယ့်ကိုကိုယ် သေချာစစ်ကြည့်ပါ၊ မင်းမဟုတ်ဘူး...
  5. </div>

ဆက်စပ်ရွေးချယ်စရာများ

သတိပေးချက်၏ အဓိပ္ပါယ်ကို ပြောင်းလဲရန် ရွေးချယ်နိုင်သော အတန်းများကို ထည့်ပါ။

အမှား သို့မဟုတ် အန္တရာယ်

အိုး! အချို့သောအရာများကို ပြောင်းလဲပြီး ထပ်မံတင်ပြကြည့်ပါ။
  1. <div class = "alert-alert-error" >
  2. ...
  3. </div>

အောင်မြင်မှု

ကောင်းစွာပြီးဆုံးသည်! ဤအရေးကြီးသောသတိပေးစာကို သင်အောင်မြင်စွာဖတ်ပြီးဖြစ်သည်။
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

သတင်းအချက်အလက်

ကြိုတင်အသိပေးသည်! ဤသတိပေးချက်သည် သင့်အာရုံစိုက်မှု လိုအပ်သော်လည်း ၎င်းသည် အလွန်အရေးမကြီးပါ။
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

နမူနာများနှင့် စျေးတက်ခြင်း။

အခြေခံ

ဒေါင်လိုက်အရောင်အဆင့်ဖြင့် ပုံသေတိုးတက်မှုဘား။

  1. <div class = "တိုးတက်မှု" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

အစင်း

အစင်းကြောင်းအကျိုးသက်ရောက်မှုဖန်တီးရန် gradient ကိုအသုံးပြုသည်။ IE7-8 တွင် မရရှိနိုင်ပါ။

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

ကာတွန်း

အစင်းကြောင်းများကို ညာဘက်မှ ဘယ်သို့ လှုပ်ရှားရန် .activeပေါင်း ထည့်ပါ ။ .progress-stripedIE ဗားရှင်းအားလုံးတွင် မရရှိနိုင်ပါ။

  1. <div class = "progress-progress-striped active" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

တွဲထားသည်။

ဘားများစွာကို တူညီစွာ တွဲထည့် .progressပါ။

  1. <div class = "တိုးတက်မှု" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

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

အပိုအရောင်များ

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

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress-progress-warning" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

အစင်းရာတွေ

အစိုင်အခဲအရောင်များနှင့်ဆင်တူသည်၊ ကျွန်ုပ်တို့တွင် အမျိုးမျိုးသော အစင်းကြောင်းတိုးတက်မှုဘားများရှိသည်။

  1. <div class = "progress-info progress-triped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress-progress-warning-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-triped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Browser ပံ့ပိုးမှု

တိုးတက်မှုဘားများသည် ၎င်းတို့၏သက်ရောက်မှုအားလုံးကိုရရှိရန် CSS3 gradients၊ အသွင်ကူးပြောင်းမှုများနှင့် ကာတွန်းများကို အသုံးပြုပါသည်။ ဤအင်္ဂါရပ်များကို IE7-9 သို့မဟုတ် Firefox ဗားရှင်းအဟောင်းများတွင် ပံ့ပိုးမထားပါ။

Internet Explorer 10 နှင့် Opera 12 ထက်စောသောဗားရှင်းများသည် ကာတွန်းများကို မပံ့ပိုးပါ။

စာသားအကြောင်းအရာနှင့်အတူ ဘယ်ဘက် သို့မဟုတ် ညာဘက်ညှိထားသော ရုပ်ပုံပါရှိသော အစိတ်အပိုင်းအမျိုးမျိုး (ဘလော့ဂ်မှတ်ချက်များ၊ တွဒ်များကဲ့သို့) အမျိုးမျိုးသောအစိတ်အပိုင်းများကို တည်ဆောက်ရန်အတွက် စိတ္တဇအရာဝတ္ထုပုံစံများ။

မူရင်းဥပမာ

မူရင်းမီဒီယာသည် အကြောင်းအရာဘလောက်တစ်ခု၏ ဘယ်ဘက် သို့မဟုတ် ညာဘက်တွင် မီဒီယာအရာဝတ္ထုတစ်ခု (ရုပ်ပုံများ၊ ဗီဒီယို၊ အသံ) ကို မျှောရန်ခွင့်ပြုသည်။

၆၄x၆၄

မီဒီယာခေါင်းစဉ်

Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။
၆၄x၆၄

မီဒီယာခေါင်းစဉ်

Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။
၆၄x၆၄

မီဒီယာခေါင်းစဉ်

Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။ Fusce condimentum nunc ac nisi vulputate fringilla Faucibus ရှိ Donec lacinia congue felis။
  1. <div class = "media" >
  2. <a class="pull-left" href="#" > _ _ _ _
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > မီဒီယာ ခေါင်းစီး </h4>
  7. ...
  8.  
  9. <!-- Nested media object -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

မီဒီယာစာရင်း

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

  • ၆၄x၆၄

    မီဒီယာခေါင်းစဉ်

    Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။

    ၆၄x၆၄

    Nested မီဒီယာခေါင်းစဉ်

    Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။
    ၆၄x၆၄

    Nested မီဒီယာခေါင်းစဉ်

    Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။
    ၆၄x၆၄

    Nested မီဒီယာခေါင်းစဉ်

    Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။
  • ၆၄x၆၄

    မီဒီယာခေါင်းစဉ်

    Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class="pull-left" href="#" > _ _ _ _
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > မီဒီယာ ခေါင်းစီး </h4>
  8. ...
  9.  
  10. <!-- Nested media object -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

ရေတွင်း

၎င်းကို inset effect ပေးရန်အတွက် ဒြပ်စင်တစ်ခုပေါ်ရှိ ရိုးရှင်းသောအကျိုးသက်ရောက်မှုအဖြစ် ရေတွင်းကို အသုံးပြုပါ။

ငါရေတွင်းထဲရောက်နေတာ။
  1. <div class = "ကောင်းပြီ" >
  2. ...
  3. </div>

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

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

ငါရေတွင်းထဲရောက်နေတာ။
  1. <div class = " well well-large" >
  2. ...
  3. </div>
ငါရေတွင်းထဲရောက်နေတာ။
  1. <div class = "ကောင်းလိုက်တာ-ငယ်" >
  2. ...
  3. </div>

သင်္ကေတကို ပိတ်ပါ။

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

  1. <button class = "close" > × </button>

အကယ်၍ သင်သည် ကျောက်ဆူးတစ်ခုကို အသုံးပြုလိုလျှင် iOS စက်များတွင် href="#"ကလစ်ဖြစ်ရပ်များအတွက် လိုအပ်ပါသည်။

  1. <a class="close" href="#" > & times ; _ _ </a>

ဥပဇ္ဈာယ်ဆရာ အတန်း

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

.ဆွဲ-ဘယ်ဘက်

Float တစ်ခုကျန်ခဲ့တယ်။

  1. class = "pull-left"
  1. . ဆွဲ - ဘယ် {
  2. float : ဘယ်ဘက် ;
  3. }

.ဆွဲ-ညာဘက်

ဒြပ်စင်တစ်ခု မျှောပါ

  1. class = "ဆွဲ-ညာဘက်"
  1. . ဆွဲ - ညာဘက် {
  2. float : မှန် ;
  3. }

.အသံတိတ်ထားသည်။

အစိတ်အပိုင်းတစ်ခု၏အရောင်သို့ပြောင်းပါ။#999

  1. class = "အသံတိတ်"
  1. . အသံပိတ်ထား သည် {
  2. အရောင် : #999;
  3. }

.ရှင်းလင်းချက်

floatမည်သည့်ဒြပ်စင်ပေါ်တွင်မဆို ရှင်းလင်းပါ။

  1. class = "clearfix"
  1. . ရှင်းလင်းချက် {
  2. * zoom : 1 ;
  3. &: ရှေ့
  4. &: { ပြီးနောက်
  5. ပြသမှု : စားပွဲ ;
  6. အကြောင်းအရာ : "" ;
  7. }
  8. &: { ပြီးနောက်
  9. ရှင်းပါတယ် _ _
  10. }
  11. }