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

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

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

ပေါင်းစပ်အစိတ်အပိုင်းတစ်ခုအဖြစ် ခလုတ်များစွာကို ပေါင်းစပ်ရန် ခလုတ်အုပ်စုများကို အသုံးပြုပါ။ <a>၎င်းတို့ကို အတွဲလိုက် သို့မဟုတ် <button>ဒြပ်စင်များ ဖြင့် တည်ဆောက် ပါ။

အကောင်းဆုံးအလေ့အကျင့်များ

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

  • ခလုတ်တစ်ခုတည်းအုပ်စု <a>သို့မဟုတ် တူညီသောဒြပ်စင်ကို အမြဲသုံးပါ <button>
  • တူညီသောခလုတ်အုပ်စုတွင် မတူညီသောအရောင်များ၏ ခလုတ်များကို မရောနှောပါနှင့်။
  • စာသားအပြင် သို့မဟုတ် အစား အိုင်ကွန်များကို အသုံးပြုပါ၊ သို့သော် သင့်လျော်သည့်နေရာတွင် alt နှင့် ခေါင်းစဉ် စာသားပါ၀င်ကြောင်း သေချာပါစေ။

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

မူရင်းဥပမာ

ဤသည်မှာ HTML သည် anchor tag ခလုတ်များဖြင့် တည်ဆောက်ထားသော စံခလုတ်အုပ်စုကို ရှာဖွေပုံဖြစ်သည်-

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

Toolbar ဥပမာ

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

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

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

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

javascript ကိုရယူပါ »

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

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

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

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

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

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

ခလုတ်အုပ်စုတစ်ခုနှင့်ဆင်တူသည်၊ ကျွန်ုပ်တို့၏ markup သည် ပုံမှန်ခလုတ် markup ကိုအသုံးပြုသည်၊ သို့သော် စတိုင်ကိုပြန်လည်သန့်စင်ရန်နှင့် Bootstrap ၏ dropdown jQuery plugin ကိုပံ့ပိုးရန် လက်တစ်ဆုပ်စာ ပေါင်းထည့်မှုများနှင့်အတူ။

  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

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

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

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

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- dropdown menu links -->
  5. </ul>
  6. </div>

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

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

  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>

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>

Multicon-page pagination

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

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

ဖော်ပြထားသော စာမျက်နှာလင့်ခ်များ

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

ပြောင်းလွယ်ပြင်လွယ် ချိန်ညှိမှု

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

ဥပမာများ

ပုံသေ pagination အစိတ်အပိုင်းသည် ပြောင်းလွယ်ပြင်လွယ်ဖြစ်ပြီး ကွဲပြားမှုများစွာဖြင့် အလုပ်လုပ်သည်။

သေား

ထုပ်ပိုးထားသော <div>pagination သည် တစ်ခုသာဖြစ်သည် <ul>

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

Pager သည် ယခင်နှင့် နောက်လင့်ခ်များ အမြန် ရရှိရန်

ပေဂျာအကြောင်း

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

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

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

မူရင်းဥပမာ

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

  1. <ul class = "pager" >
  2. <li>
  3. <a href="#"> ယခင် </a> _ _ _
  4. </li>
  5. <li>
  6. <a href="#"> နောက်တစ်ခု </a> _ _ _
  7. </li>
  8. </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>
တံဆိပ်များ သေား
ပုံသေ <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>

အကြောင်း

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

ရရှိနိုင်သောအတန်းများ

နာမည် ဥပမာ သေား
ပုံသေ <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>

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

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

သေား

သင့်အကြောင်းအရာကို ဤကဲ့သို့ ပေါင်းစပ်ပါ div-

  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> ဥပမာ စာမျက်နှာ ခေါင်းစီး </h1>
  3. </div>

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

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

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

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

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

    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 ။

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

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

    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 = "span3" >
  3. <a href="#" class="thumbnail" > _ _ _ _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> ပုံသေး အညွှန်း </h5>
  6. <p> ပုံသေးစာတန်းကို ဒီမှာ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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

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

အခြေခံလူတန်းစားကို ပြန်ရေးတယ်။

Bootstrap 2 ဖြင့်၊ ကျွန်ုပ်တို့သည် အခြေခံလူတန်းစားကို ရိုးရှင်းစေသည်- .alertအစား .alert-message. ကျွန်ုပ်တို့သည် အနိမ့်ဆုံးလိုအပ်သော အမှတ်အသားကိုလည်း လျှော့ချထားသည်— <p>ပုံသေအားဖြင့် မလိုအပ်ပါ၊ အပြင်ဘက် <div>.

တစ်ခုတည်းသတိပေးစာ

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


javascript နဲ့ အရမ်းကောင်းပါတယ်။

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

ပလပ်အင်ကို ရယူပါ »

နမူနာသတိပေးချက်များ

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

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

ကြိုတင်အသိပေးသည်! href="#"သတိပေးချက်များကို ထုတ်ပယ်ရန်အတွက် iOS စက်ပစ္စည်းများ လိုအပ်ပါသည် ။ ၎င်းနှင့် anchor close icons အတွက် ဒေတာ attribute ကို ထည့်သွင်းရန် သေချာပါစေ။ တစ်နည်းအားဖြင့် သင်သည် <button>ကျွန်ုပ်တို့၏စာရွက်စာတမ်းအတွက် ကျွန်ုပ်တို့ရွေးချယ်ထားသော ဒေတာ attribute ပါသည့် အစိတ်အပိုင်းတစ်ခုကို အသုံးပြုနိုင်သည်။ အသုံးပြုသည့်အခါတွင် <button>သင်သည် ထည့်သွင်းရမည် type="button"သို့မဟုတ် သင်၏ပုံစံများကို မတင်ပြနိုင်ပါ။

.alert-blockနောက်ထပ် ကွက်လပ်နှင့် စာသားထိန်းချုပ်မှု .alert-headingများနှင့် လိုက်ဖက်သော ခေါင်းစဉ်များအတွက် ရွေးချယ်နိုင်သော အတန်းနှစ်ခုဖြင့် စံသတိပေးစာကို အလွယ်တကူ တိုးချဲ့ပါ ။

သတိပေးချက်

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

  1. <div class = "alert alert-block" >
  2. <a class="close" data-dismiss="alert" href="#" > × </a> _ _ _ _ _ _
  3. <h4 class = "alert-heading" > သတိပေးချက်။ </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 = "ဘား"
  3. style = " width : 60 %; " ></div>
  4. </div>

အစင်း

အစင်းကြောင်းအကျိုးသက်ရောက်မှုကိုဖန်တီးရန် gradient ကိုအသုံးပြုသည် (IE မရှိပါ)။

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

ကာတွန်း

အစင်းကြောင်းများကို နမူနာယူ၍ ၎င်းကို သက်ဝင်လှုပ်ရှားစေသည် (IE မရှိပါ)။

  1. <div class = "တိုးတက်မှု-တိုးတက်မှု-အစင်း
  2. တက်ကြွသည်" >
  3. <div class = "ဘား"
  4. style = " width : 40 %; " ></div>
  5. </div>

ရွေးချယ်စရာများနှင့် ဘရောက်ဆာပံ့ပိုးမှု

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

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

အစင်းရာတွေ

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

အနေအထိုင်

တိုးတက်မှုဘားများသည် CSS3 အကူးအပြောင်းများကိုအသုံးပြုသည်၊ ထို့ကြောင့် သင်သည် javascript မှတဆင့် width ကို dynamically ချိန်ညှိပါက၊ ၎င်းသည် ချောမွေ့စွာ ပြောင်းလဲနိုင်သည်။

သင်အတန်းကိုအသုံးပြုပါက .active၊ သင်၏ .progress-stripedတိုးတက်မှုဘားများသည် ဘယ်မှညာသို့ အစင်းကြောင်းများကို လှုပ်ရှားစေမည်ဖြစ်သည်။

Browser ပံ့ပိုးမှု

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

Opera နှင့် IE သည် ယခုအချိန်တွင် ကာတွန်းများကို မပံ့ပိုးပါ။

ရေတွင်း

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

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

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

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

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

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

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