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

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

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

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

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

<div class = "btn-group" > 
  <a class="btn" href="#"> 1 </a> _ _ _ _ _  
  <a class="btn" href="#"> 2 </a> _ _ _ _ _  
  <a class="btn" href="#"> ၃ </a> _ _ _ _ _  
</div>

အုပ်စုများစွာအတွက် ကိရိယာဘားတစ်ခုနှင့်

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

javascript ကိုရယူပါ »

ကြိုတင်အသိပေးသည်

ခလုတ်အုပ်စုများအတွက် CSS သည် သီးခြားဖိုင်တစ်ခုဖြစ်ပြီး button-groups.less ဖြစ်သည်။

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

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

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

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

<div class = "btn-group" > 
  <a class="btn dropdown-toggle" data-toggle = "dropdown" href="#" > _ _ _   
    အက်ရှင်
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

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

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

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

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

<div class = "btn-group" > 
  <a class="btn" href="#"> လုပ်ဆောင်ချက် </a> _ _ _ _ _  
  <a class="btn dropdown-toggle" data-toggle = "dropdown" href="#" > _ _ _   
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

အားကောင်းသော အခြေခံလူတန်းစား

ဤနေရာရှိ nav အစိတ်အပိုင်းများအားလုံး—တဘ်များ၊ ဆေးများနှင့် စာရင်းများ— အတန်း မှတဆင့် တူညီသောအခြေခံအမှတ်အသားနှင့် ပုံစံများကို မျှဝေပါ ။.nav

ဘာ့ကြောင့် ဆေးပြားတွေ သောက်နေရတာလဲ။

Bootstrap ရှိ တက်ဘ်များနှင့် ဆေးပြားများသည် <ul>တူညီသော core HTML၊ လင့်ခ်များစာရင်းတစ်ခုပေါ်တွင် တည်ဆောက်ထားသည်။ တက်ဘ်များ သို့မဟုတ် ဆေးများအကြား အတန်းတစ်ခုသာ လဲလှယ်ပါ။

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

အခြေခံ တက်ဘ်များ

ပုံမှန် <ul>လင့်ခ်များကိုယူ၍ ပေါင်းထည့်ပါ .nav-tabs။

• အိမ်
• ကိုယ်ရေးအကျဉ်း
• စာတို

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href="#"> နေအိမ် </a> _ _ _ 
  </li>
  <li><a href="#" > ... </a> < / li> 
  <li><a href="#" > ... </a> < / li> 
</ul>

အခြေခံဆေးများ

အဲဒီ HTML ကိုပဲ ယူပါ၊ ဒါပေမယ့် .nav-pillsအဲဒီအစား သုံးပါ။

• အိမ်
• ကိုယ်ရေးအကျဉ်း
• စာတို

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href="#"> နေအိမ် </a> _ _ _ 
  </li>
  <li><a href="#" > ... </a> < / li> 
  <li><a href="#" > ... </a> < / li> 
</ul>

သူတို့ကို ဘယ်လိုစုမလဲ။

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

တွဲထားသော တဘ်များ

• အိမ်
• ကိုယ်ရေးအကျဉ်း
• စာတို

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

ဆေးပြားတွေ အထပ်လိုက်

• အိမ်
• ကိုယ်ရေးအကျဉ်း
• စာတို

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

ကြွယ်ဝသော မီနူးများကို လွယ်ကူစွာ ပြုလုပ်ထားသည်။

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

Bootstrap တွင် dropdowns များစတင်ခြင်း အတွက် docs ကိုဖတ်ရန် Javascript စာမျက်နှာသို့သွားပါ ။

dropdowns ပါသော တဘ်များ

• အိမ်
• ကိုယ်ရေးအကျဉ်း
• ကျသည်
  • အက်ရှင်
  • နောက်တစ်ခုက လုပ်ဆောင်ချက်
  • တခြားအရာတစ်ခုပေါ့ဗျ။
  • ခြားထားသောလင့်ခ်

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        ကျသည်
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- လင့်များ -->
    </ul>
  </li>
</ul>

dropdowns နှင့်အတူဆေးပြား

• အိမ်
• ကိုယ်ရေးအကျဉ်း
• ကျသည်
  • အက်ရှင်
  • နောက်တစ်ခုက လုပ်ဆောင်ချက်
  • တခြားအရာတစ်ခုပေါ့ဗျ။
  • ခြားထားသောလင့်ခ်

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        ကျသည်
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- လင့်များ -->
    </ul>
  </li>
</ul>

အပလီကေးရှင်းပုံစံ အညွှန်း

Nav lists သည် ရွေးချယ်နိုင်သော ခေါင်းစီးများဖြင့် nav link အဖွဲ့များကို တည်ဆောက်ရန် ရိုးရှင်းပြီး လွယ်ကူသောနည်းလမ်းကို ပေးပါသည်။ ၎င်းတို့ကို OS X ရှိ Finder ကဲ့သို့ sidebar များတွင် အကောင်းဆုံးအသုံးပြုသည်။

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

အိုင်ကွန်များနှင့်

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

ဥပမာ nav list

လင့်ခ်များစာရင်းကိုယူ၍ ပေါင်းထည့်ပါ class="nav nav-list"။

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    စာရင်းခေါင်းစီး
  </li>
  <li class = "active" > 
    <a href="#"> နေအိမ် </a> _ _ _ 
  </li>
  <li>
    <a href="#"> စာ ကြည့် တိုက် </a> _ 
  </li>
  ...
</ul>

အိုင်ကွန်များနှင့်အတူဥပမာ

ဥပမာတူသော်လည်း <i>အိုင်ကွန်များအတွက် တဂ်များပါရှိသည်။

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href="#" > _ _ 
      <i class = "icon-book" ></i> 
      စာကြည့်တိုက်
    </a>
  </li>
  ...
</ul>

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

တဘ်များမှတစ်ဆင့် အကြောင်းအရာများကြားပြောင်းရန် ရိုးရှင်းသော ပလပ်အင်တစ်ခုဖြင့် သင့်တဘ်များကို အသက်ဝင်စေပါသည်။ Bootstrap သည် စတိုင်လေးမျိုးဖြင့် တက်ဘ်စားနိုင်သော တက်ဘ်များကို ပေါင်းစပ်ထားသည်- အပေါ် (ပုံသေ)၊ ညာဘက်၊ အောက်နှင့် ဘယ်ဘက်။

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

Tabbable ဥပမာ

တဘ်များကို tabbable လုပ်ရန်၊ .nav-tabsအခြား div တွင် class ဖြင့် ပေါင်းပါ .tabbable။

စိတ်ကြိုက် jQuery ပလပ်အင်

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

javascript → ရယူပါ။

အောက်ခြေတွင် တဘ်များ

HTML ၏အစီအစဥ်ကိုလှန်ပြီး အောက်ခြေတွင် tabs များထည့်ရန် အတန်းတစ်ခုထည့်ပါ။

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ဘယ်ဘက်ရှိ တဘ်များ

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

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

ညာဘက်ရှိ တက်ဘ်များ

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

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar ငြမ်း

navbar သည် static သို့မဟုတ် fixed display အတွက် ကောင်းမွန်စွာ တည်ဆောက်ရန် div အနည်းငယ်သာ လိုအပ်သည်။

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

navbar ကို viewport ၏ထိပ်တွင် fix လုပ်ရန်၊ .navbar-fixed-topအပြင်ဘက်ဆုံး div၊ .navbar. သင်၏ CSS တွင်၊ padding-top: 40px;သင်၏ <body>.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

အမှတ်တံဆိပ်အမည်

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

<a class="brand" href="#" > _ _ _ _  
  စီမံကိန်းအမည်
</a>

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

.navbar-searchရှာဖွေမှုပုံစံများသည် အတန်း နှင့်အတူ navbar တွင် စိတ်ကြိုက်စတိုင်များကို ရရှိသည် ။ ၎င်းကို ချိန်ညှိရန် .pull-leftသို့မဟုတ် .pull-rightပေါ်တွင် ပါဝင် ပါ။form

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

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

သင့်ထိပ်ဘားရှိ အကြောင်းအရာပမာဏပေါ်မူတည်၍ တုံ့ပြန်မှုရွေးချယ်စရာများကို သင်အကောင်အထည်ဖော်လိုပေမည်။ ထိုသို့ပြုလုပ်ရန်၊ သင်၏ nav ပါအကြောင်းအရာကို div တွင် .nav-collapse.collapseခြုံပြီး navbar toggle ခလုတ်ကို ထည့်ပါ .btn-navbar။

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar ကို ပြိုကျသော navbar အကြောင်းအရာအတွက် ခလုတ်အဖြစ် အသုံးပြုသည်။
      <a class="btn btn-navbar" data-toggle = "ပြိုကျသည်" data-target = ".nav-collapse" > _   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- အမှတ်တံဆိပ်ကို ပြသလိုပါက ဤနေရာတွင် ထားခဲ့ရန် သေချာပါစေ။-->
      <a class="brand" href="#"> ပရောဂျက် အမည် </a> _ _ _ _  
 
      <!-- 940px သို့မဟုတ် ထို့ထက်နည်းသော နေရာတွင် ဝှက်ထားလိုသမျှကို ဤနေရာတွင် -->
      <div class = "nav-collapse" > 
        <!-- .nav၊ .navbar-search၊ .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

ရေကြောင်းလင့်ခ်များ

Nav items များသည် အစီအစဥ်မတင်ထားသော စာရင်းများမှတစ်ဆင့် ထည့်ရန် ရိုးရှင်းပါသည်။

<ul class = "nav" > 
  <li class = "active" > 
    <a href="#"> နေအိမ် </a> _ _ _ 
  </li>
  <li><a href="#"> လင့် ခ် </a> </li > 
  <li><a href="#"> လင့် ခ် </a> </li > 
</ul>

dropdowns များထည့်ခြင်း။

nav တွင် dropdowns များထည့်ခြင်းသည် အလွန်ရိုးရှင်းသော်လည်း ကျွန်ုပ်တို့၏ javascript plugin ကိုအသုံးပြုရန် လိုအပ်ပါသည် ။

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          အကောင့်
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

javascript → ရယူပါ။

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

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

ဥပမာများ

စာမျက်နှာများစွာတွင် ပြသနိုင်သောကြောင့် နမူနာတစ်ခုတည်းကို ပြထားသည်။

• အိမ်

• Home /
• စာကြည့်တိုက်

• Home /
• စာကြည့်တိုက် /
• ဒေ

သေား

HTML သည် လင့်ခ်များပါရှိသော သင့်စံမထားသော စာရင်းဖြစ်သည်။

<ul class = "breadcrumb" > 
  <li>
    <a href="#"> နေအိမ် </a> < span class = "divider" > / </ span >   
  </li>
  <li>
    <a href="#"> စာကြည့်တိုက် </a> < span class = "divider" > / < /span >   
  </li>
  <li class = "active" > 
    <a href="#"> ဒေ တာ </a> _ _ 
  </li>
</ul>

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

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

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

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

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

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

ဥပမာများ

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

သေား

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

<div class = "pagination" > 
  <ul>
    <li><a href="#"> ယခင် </a> < /li > 
    <li class = "active" > 
      <a href="#"> ၁ </a> _ _ _ 
    </li>
    <li><a href="#"> 2 </a> < /li > 
    <li><a href="#"> 3 </a> < /li > 
    <li><a href="#"> 4 </a> < /li > 
    <li><a href="#"> နောက်တစ်ခု </a> < /li > 
  </ul>
</div>

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

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

မူရင်းဥပမာ

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

• အရင်
• နောက်တစ်ခု

<ul class = "pager" > 
  <li>
    <a href="#"> ယခင် </a> _ _ _ 
  </li>
  <li>
    <a href="#"> နောက်တစ်ခု </a> _ _ _ 
  </li>
</ul>

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

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

• ← အသက်ကြီးသည်။
• အသစ် →

<ul class = "pager" > 
  <li class = "ယခင်" > 
    <a href="#"> & larr ; _ အသက်ကြီးပြီ </a> 
  </li>
  <li class = "next" > 
    <a href="#"> ပိုသစ်သော & rarr ; </a> 
  </li>
</ul>

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

ပုံမှန်အားဖြင့်၊ 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 သည် ပေါ့ပါးပြီး ရိုးရှင်းပါသည်။ ဤသည်မှာ လင့်ခ် ချိတ်ထားသော ပုံများအတွက် ပုံသေသတ်မှတ်မှုကို ကြည့်ပါ -

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href="#" class="thumbnail" > _ _ _ _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "alert" > 
  <a class="close"> × </a> _ _ _ 
  <strong> သတိပေးချက်။ </strong> အကောင်းဆုံးကတော့ သင့်ကိုယ်သင် ကြည့်ကောင်းလွန်းမနေဘူးလား။
</div>

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

<div class = "alert alert-block" > 
  <a class="close"> × </a> _ _ _ 
  <h4 class = "alert-heading" > သတိပေးချက်။ </h4> 
  ကိုယ့်ကိုကိုယ် သေချာစစ်ကြည့်ပါ၊ မင်းမဟုတ်ဘူး...
</div>

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

<div class = "alert-alert-error" > 
  ...
</div>

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

<div class = "alert alert-success" > 
  ...
</div>

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

<div class = "alert alert-info" > 
  ...
</div>

အခြေခံ

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

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

အစင်း

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

<div class = "progress progress-info 
     တိုးတက်မှုအစင်း" >
  <div class = "bar" 
       style = " width : 20 %; " ></div> 
</div>

ကာတွန်း

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

<div class = "progress-progress-danger 
     တိုးတက်မှု-အစင်း active" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

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

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

• .progress-info
• .progress-success
• .progress-danger

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

အနေအထိုင်

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

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

Browser ပံ့ပိုးမှု

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

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

ရေတွင်း

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

<div class = "ကောင်းပြီ" > 
  ...
</div>

တံဆိပ်များ

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

<span class = "badge" > 3 </div> 

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

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

×

<a class="close"> & times ; _ </a>