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

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

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

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

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

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

မူရင်းဥပမာ

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

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

Toolbar ဥပမာ

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

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

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

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

javascript ကိုရယူပါ »

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

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

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

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

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

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

javascript လိုအပ်သည်။

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

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

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

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

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

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

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- dropdown menu links -->
  </ul>
</div>

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

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

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

Dropup မီနူးများ

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

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <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 ပါသော တဘ်များ

• အိမ်
• ကူညီပါ
• ကျသည်
  • Action
  • Another action
  • Something else here
  • Separated link

<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 နှင့်အတူဆေးပြား

• အိမ်
• ကူညီပါ
• ကျသည်
  • Action
  • Another action
  • Something else here
  • Separated link

<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 ကိုထည့် ၍ သင်သတ်မှတ်ပါ။

အလျားလိုက် ပိုင်းခြားချက်များ

အတန်းအစား အလွတ်စာရင်းအကြောင်းအရာကို ဖန်တီးခြင်းဖြင့် အလျားလိုက် ပိုင်းခြားမှုကို ထည့်ပါ .divider-

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

ဥပမာ 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 ကို ပြောင်းလဲရန် လိုအပ်ပါသည်။

တက်ဘ်များတွင် မှိန်သွားသည်။

တဘ်များ မှိန် .fadeသွားစေရန် တစ်ခုစီသို့ ထည့်ပါ .tab-pane။

jQuery ပလပ်အင် လိုအပ်သည်။

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

javascript → ရယူပါ။

Tabbable ဥပမာ

တဘ်များကို တက်ဘလက်လုပ်နိုင်စေရန်၊ တဘ် .tab-paneတိုင်းအတွက် သီးသန့် ID တစ်ခုဖန်တီးပြီး ၎င်းတို့ကို ထည့်သွင်းပါ .tab-content။

ညာဘက် သို့မဟုတ် ဘယ်သို့ ညှိထားသည့် တဘ်များအတွက်၊ နှင့် အပိုင်းကို .nav-tabsခြုံ .tab-contentပါ .tabbable။

ဖြောင့်စင်းသေား

tabbable တက်ဘ်များကို အသုံးပြုခြင်းဖြင့် wrapping div၊ တက်ဘ်များ အစုအဝေးနှင့် အကြောင်းအရာ၏ tabbable panes အစုံ လိုအပ်ပါသည်။

<div class = "tabbable" > <-- ဘယ်/ညာ တက်ဘ်များ အတွက်သာ လိုအပ်သည် --> 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href="#tab1" data-toggle="tab"> အပိုင်း 1 </a> < / li >   
    <li><a href = "#tab2" data-toggle = "tab"> အပိုင်း ၂ </a></li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> ကျွန်တော် အပိုင်း 1 မှာနေတယ်။ </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> မင်္ဂလာပါ အပိုင်း 2 မှာနေတယ်။ </p>
    </div>
  </div>
</div>

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

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 ကို ပုံသေ

အပြင်ဘက်ဆုံး div၊ တွင် ထပ်လောင်းအတန်းတစ်ခုဖြင့် viewport ၏ အပေါ် သို့မဟုတ် အောက်ခြေတွင် navbar ကို ပြင်ဆင်ပါ .navbar။

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

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

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

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

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

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

navbar တွင် ပုံစံများ

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

ပိုမိုစိတ်ကြိုက်ရှာဖွေမှုပုံစံ အတွက်၊ navbar ရှိ အထူးပြုစတိုင်များအတွက် ထည့်သွင်းခြင်း သို့ .navbar-searchပေါင်း ထည့်ပါ။form.search-query

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

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

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

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

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

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

nav တွင် dropdowns နှင့် dropups များကိုထည့်ခြင်းသည် အလွန်ရိုးရှင်းသော်လည်း ကျွန်ုပ်တို့၏ 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 → ရယူပါ။

navbar တွင်စာသား

<.navbar-text>ပုံမှန်အားဖြင့် <p>သင့်လျော်သော ဦးဆောင်မှုနှင့် အရောင်အတွက် တဂ် တစ်ခုတွင် စာသားကြိုးများကို ခြုံပါ ။

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

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" > ဒေတာ </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 လင့်ခ်များသည် pagination မှ ယေဘူယျ .disabledအတန်းကို အသုံးပြုပါသည်။

မူရင်းဥပမာ

မူရင်းအားဖြင့်၊ 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>

အကြောင်း

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

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

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-header" > 
  <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" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> သတိပေးချက်။ </strong> အကောင်းဆုံးကတော့ သင့်ကိုယ်သင် ကြည့်ကောင်းလွန်းမနေဘူးလား။
</div>

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

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

<div class = "alert alert-block" > 
  <a class="close" data-dismiss="alert" href="#" > × </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 ကိုအသုံးပြုသည် (IE မရှိပါ)။

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

ကာတွန်း

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

<div class = "တိုးတက်မှု-တိုးတက်မှု-အစင်း 
     တက်ကြွသည်" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

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

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

အစင်းရာတွေ

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

အနေအထိုင်

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

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

Browser ပံ့ပိုးမှု

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

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

ရေတွင်း

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

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

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

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

×

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

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

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