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

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

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

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

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

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

မူရင်းဥပမာ

ဤသည်မှာ 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>

Toolbar ဥပမာ

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

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

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

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

javascript ကိုရယူပါ »

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

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

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

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

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

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

ခလုတ်အုပ်စုတစ်ခုနှင့်ဆင်တူသည်၊ ကျွန်ုပ်တို့၏ 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

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

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

အစိတ်အပိုင်း ချိန်ညှိခြင်း။

nav လင့်ခ်များကို ချိန်ညှိရန် .pull-leftသို့မဟုတ် .pull-rightအသုံးဝင်သော အတန်းများကို အသုံးပြုပါ။ အတန်းနှစ်ခုစလုံးသည် သတ်မှတ်ထားသော ဦးတည်ချက်တွင် CSS float တစ်ခုကို ထည့်ပါမည်။

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

ပုံမှန် <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 ကဲ့သို့ ဘေးဘားများတွင် အကောင်းဆုံးအသုံးပြုသည်။

ဖွဲ့စည်းတည်ဆောက်ပုံအရ၊ ၎င်းတို့သည် တဘ်များနှင့် ဆေးပြားများကဲ့သို့ တူညီသော 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 ကို ပုံသေ

navbar ကို viewport ၏ထိပ်တွင် fix လုပ်ရန်၊ .navbar-fixed-topအပြင်ဘက်ဆုံး div၊ .navbar.

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

သင်၏ CSS တွင်၊ 40px သို့မဟုတ် ထို့ထက်ပိုသော padding ကို သင်၏ <body>. core Bootstrap CSS ပြီးနောက် နှင့် ရွေးချယ်နိုင်သော တုံ့ပြန်မှု CSS မတိုင်မီ ၎င်းကို ထည့်သွင်းရန် သေချာပါစေ။

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

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

<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 ပစ္စည်းများသည် အစီအစဥ်မရှိသောစာရင်းများမှတစ်ဆင့် ထည့်ရန် ရိုးရှင်းပါသည်။

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

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

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

အစိတ်အပိုင်း ချိန်ညှိခြင်း။

လမ်းကြောင်း၊ ရှာဖွေမှုပုံစံ သို့မဟုတ် စာသားကို ချိန်ညှိရန် .pull-leftသို့မဟုတ် .pull-rightအသုံးဝင်မှု အတန်းများကို အသုံးပြုပါ။ အတန်းနှစ်ခုစလုံးသည် သတ်မှတ်ထားသော ဦးတည်ချက်တွင် CSS float တစ်ခုကို ထည့်ပါမည်။

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

သေား

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

<div class = "hero-unit" > 
  <h1> ခေါင်းစီး </h1>
  <p> Tagline </p>
  <p>
    <a class="btn btn-primary btn-large" > 
      ပိုမိုသိရှိရန်
    </a>
  </p>
</div>

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

<div class = "page-haeder" > 
  <h1> ဥပမာ စာမျက်နှာ ခေါင်းစီး </h1>
</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 သည် ပေါ့ပါးပြီး ရိုးရှင်းပါသည်။ ဤသည်မှာ လင့်ခ် ချိတ်ထားသော ပုံများအတွက် ပုံသေသတ်မှတ်မှုကို ကြည့်ပါ -

<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" data-dismiss="alert" > × </a> _ _ _ _  
  <strong> သတိပေးချက်။ </strong> အကောင်းဆုံးကတော့ သင့်ကိုယ်သင် အရမ်းကြည့်ကောင်းနေမှာ မဟုတ်ပါဘူး။
</div>

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

<div class = "alert alert-block" > 
  <a class="close" data-dismiss="alert" > × </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 = "ဘား" 
       style="width: 60%;"></div>
</div>

Striped

Uses a gradient to create a striped effect.

<div class="progress progress-info
     progress-striped">
  <div class="bar"
       style="width: 20%;"></div>
</div>

Animated

Takes the striped example and animates it.

<div class="progress progress-danger
     progress-striped active">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Additional colors

Progress bars utilize some of the same class names as buttons and alerts for similar styling.

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

Alternatively, you can customize the LESS files and roll your own colors and sizes.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

Opera does not support animations at this time.

Wells

Use the well as a simple effect on an element to give it an inset effect.

<div class="well">
  ...
</div>

တံဆိပ်များ

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

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

Close icon

Use the generic close icon for dismissing content like modals and alerts.

×

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