ဥပမာ

လင့်ခ်များစာရင်းကိုပြသရန် ဆက်စပ်မီနူးကို ပြောင်းနိုင်သည်။ dropdown JavaScript plugin ဖြင့် အပြန်အလှန်အကျိုးသက်ရောက်မှု ပြုလုပ်ခဲ့သည် ။

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > လုပ်ဆောင်ချက် </a></li>  
  <li><a tabindex = "-1" href = "#" > အခြားလုပ်ဆောင်ချက် </a></li>  
  <li><a tabindex = "-1" href = "#" > ဤနေရာတွင် အခြားတစ်ခုခု </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > သီးခြားလင့်ခ် </a></li>  
</ul>

သေား

dropdown menu ကိုကြည့်ပါ၊ ဤသည်မှာလိုအပ်သော HTML ဖြစ်သည်။ dropdown's trigger နှင့် dropdown menu ကို .dropdown၊ သို့မဟုတ် ကြေငြာသော အခြား element များအတွင်းတွင် ချုပ်ထားရန် လိုအပ်ပါသည် position: relative;။ ပြီးရင် Menu ကို ဖန်တီးလိုက်ပါ။

<div class = "dropdown" > 
  <!-- dropdown ကိုပြောင်းရန် လင့်ခ် သို့မဟုတ် ခလုတ် -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > လုပ်ဆောင်ချက် </a></li>  
    <li><a tabindex = "-1" href = "#" > အခြားလုပ်ဆောင်ချက် </a></li>  
    <li><a tabindex = "-1" href = "#" > ဤနေရာတွင် အခြားတစ်ခုခု </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > သီးခြားလင့်ခ် </a></li>  
  </ul>
</div>

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

မီနူးများကို ညာဘက်တွင် ချိန်ညှိပြီး ထပ်ဆင့်ဆွဲချသည့် အဆင့်များ ပါဝင်သည်။

မီနူးများကိုချိန်ညှိခြင်း။

dropdown menu ကို ညာဘက်သို့ ချိန်ညှိရန် .pull-righta သို့ ထည့်ပါ ။.dropdown-menu

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

မီနူးရွေးချယ်စရာများကို ပိတ်ထားသည်။

လင့်ခ်ကိုပိတ်ရန် dropdown တွင် .disableda ထဲသို့ထည့်ပါ ။<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > ပုံမှန်လင့်ခ် </a></li>  
  <li class = "disabled" ><a tabindex="-1" href="#"> ပိတ်ထားသော လင့် ခ် </a> < /li >   
  <li><a tabindex = "-1" href = "#" > အခြားလင့်ခ် </a></li>  
</ul>

dropdowns များရှိ မီနူးများ

OS X ၏ ရိုးရှင်းသော အမှတ်အသား ပေါင်းထည့်မှုများဖြင့် OS X ကဲ့သို့ မောက်စ်ပေါ်တွင် ပေါ်လာသည့် dropdown menus ၏ အပိုအဆင့်ကို ထည့်ပါ။ အလိုအလျောက်ပုံစံပြုလုပ်ခြင်းအတွက် ရှိပြီးသား dropdown menu တွင် .dropdown-submenuမည်သည့်အရာကိုမဆို ပေါင်းထည့်ပါ ။li

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex="-1" href="#"> နောက်ထပ် ရွေးချယ်စရာများ </a> _ _ _ _  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

ဥပမာများ

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

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

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

<div class = "btn-group" > 
  <button class = "btn" > ဘယ်ဘက် </button> 
  <button class = "btn" > အလယ် </button> 
  <button class = "btn" > ညာဘက် </button> 
</div>

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

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

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

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

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

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

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

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

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

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

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

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

<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 ဖြင့် ဖြေရှင်းရန် လိုအပ်သည်။

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

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

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

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

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > လုပ်ဆောင်ချက် </button> 
  <button class = "btn btn-mini 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

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

ပုံမှန် <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 အစိတ်အပိုင်း (တက်ဘ်များ၊ ဆေးပြားများ သို့မဟုတ် စာရင်း) .disabledအတွက် မီးခိုးရောင်လင့်ခ်များအတွက် ပေါင်းထည့်ကာ hover effect မရှိပါ ။ ရည်ညွှန်း ချက်ကို သင်မဖယ်ရှားပါက လင့်ခ်များသည် ကလစ်နှိပ်၍ရနိုင်မည် hrefဖြစ်သည်။ တနည်းအားဖြင့် သင်သည် ထိုကလစ်များကို တားဆီးရန် စိတ်ကြိုက် JavaScript ကို အကောင်အထည်ဖော်နိုင်သည်။

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" > <a href="#"> အိမ် </a> </li >  
  ...
</ul>

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

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

အတွဲလိုက်

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

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

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

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

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

ဆွဲချမှုများ

အနည်းငယ်ပိုသော HTML နှင့် dropdowns JavaScript ပလပ်အင် များဖြင့် dropdown menus များကိုထည့်ပါ ။

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

ဥပမာ 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>

မှတ်ချက်nav list တစ်ခုအတွင်း nesting အတွက်၊ class="nav nav-list"မည်သည့် nested တွင်မဆို ထည့်သွင်း ပါ <ul>။

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

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

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

Tabbable nav

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

Tabbable ဥပမာ

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

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

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

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

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

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

မည်သည့် ဦးတည်ချက်ဖြင့်မဆို စားပွဲတင်နိုင်သည်။

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

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

စတင်ရန်၊ navbars များသည် static (အပေါ်ဆုံးတွင် ပုံသေမဟုတ်ပါ) ဖြစ်ပြီး ပရောဂျက်အမည်နှင့် အခြေခံလမ်းညွှန်မှုအတွက် ပံ့ပိုးမှုပါ၀င်ပါသည်။ .containerသင့်ဆိုက်နှင့် အကြောင်းအရာ၏ အကျယ်ကို သတ်မှတ်ပေး သည့် တစ်ခုအတွင်း၌ တစ်ခုကို နေရာတိုင်းတွင် ထားပါ။

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class="brand" href="#"> ခေါင်းစဉ် </a> _ _ _ _ _  
    <ul class = "nav" > 
      <li class = "active" > <a href="#"> အိမ် </a> </li >  
      <li><a href="#"> လင့် ခ် </a> </li > 
      <li><a href="#"> လင့် ခ် </a> </li > 
    </ul>
  </div>
</div>

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

အမှတ်တံဆိပ်

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

<a class="brand" href="#"> ပရောဂျက် အမည် </a> _ _ _ _  

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

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>

ပုံစံများ

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > တင်သွင်းရန် </button>  
</form>

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

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

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

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

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

dropdowns များကိုအသုံးပြုခြင်း။

အမှတ်အသားအနည်းငယ်နှင့် dropdowns JavaScript ပလပ်အင် များနှင့်အတူ nav သို့ dropdowns နှင့် dropups များကိုထည့်ပါ ။

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

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

စာသား

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

ရွေးချယ်နိုင်သော ပြသမှုပုံစံများ

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

ထိပ်သို့ ချိန်းထားသည်။

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

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

အောက်ခြေအထိ ပြုပြင်ထားသည်။

အစား ထည့်ပါ .navbar-fixed-bottom။

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

Static top navbar

ထည့်ခြင်းဖြင့် စာမျက်နှာနှင့် ဝေးကွာသွားသော အကျယ်အဝန်းအပြည့်ရှိသော navbar တစ်ခုကို ဖန်တီးပါ .navbar-static-top။ အတန်း နှင့်မတူဘဲ .navbar-fixed-top၊ သင်သည်မည်သည့် padding ကိုမှပြောင်းရန်မလိုအပ်ပါ body။

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

တုံ့ပြန်နိုင်သော navbar

ပြိုကျနေသော တုံ့ပြန်မှုရှိသော navbar ကို အကောင်အထည်ဖော်ရန်၊ သင်၏ navbar အကြောင်းအရာကို div ပါဝင်သော 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>

ပြောင်းပြန် ကွဲလွဲမှု

ထည့်သွင်းခြင်းဖြင့် navbar ၏အသွင်အပြင်ကိုမွမ်းမံပါ .navbar-inverse။

<div class = "navbar navbar-inverse" > 
  ...
</div>

ဥပမာများ

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

<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 မှမှုတ်သွင်းထားသော ရိုးရှင်းသော pagination။ ကြီးမားသော ဘလောက်သည် လက်လွတ်ရန် ခဲယဉ်းသည်၊ အလွယ်တကူ အရွယ်အစား ချဲ့ထွင်နိုင်ပြီး ကြီးမားသော ကလစ်ဧရိယာများကို ပံ့ပိုးပေးသည်။

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

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

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

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

<div class = "pagination" > 
  <ul>
    <li class = "disabled" > <a href="#" > « ; </a></li>  
    <li class = "active" > <a href="#" > 1 </a></li >  
    ...
  </ul>
</div>

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

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

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

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

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

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

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

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</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>

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

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

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

တံဆိပ်များ

တံဆိပ်များ

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

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

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

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

<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> ဥပမာ စာမျက်နှာ ခေါင်းစီး <small> ခေါင်းစီးအတွက် စာတန်းခွဲ </small></h1>
</div>

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

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

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

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

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

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

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

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

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

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

သေား

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

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href="#" class="thumbnail" > _ _ _ _  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> ပုံ သေး အညွှန်း </h3>
      <p> ပုံသေးစာတန်း... </p>
    </div>
  </li>
  ...
</ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> သတိပေးချက်။ </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 ကိုအသုံးပြုသည်။ IE7-8 တွင် မရရှိနိုင်ပါ။

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

ကာတွန်း

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

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

တွဲထားသည်။

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

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

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

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

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress-progress-warning" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

အစင်းရာတွေ

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

<div class = "progress-info progress-triped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress-progress-warning-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-triped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Browser ပံ့ပိုးမှု

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

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

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

မူရင်းဥပမာ

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

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

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။

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

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။

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

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။

<div class = "media" > 
  <a class="pull-left" href="#" > _ _ _ _  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > မီဒီယာ ခေါင်းစီး </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

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

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

<ul class = "media-list" > 
  <li class = "media" > 
    <a class="pull-left" href="#" > _ _ _ _  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > မီဒီယာ ခေါင်းစီး </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

ရေတွင်း

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

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

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

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

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

<div class = "ကောင်းလိုက်တာ-ငယ်" > 
  ...
</div>

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

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

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

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

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

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

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

.ဆွဲ-ဘယ်ဘက်

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

class = "pull-left"

. ဆွဲ - ဘယ် {
  float : ဘယ်ဘက် ;
}

.ဆွဲ-ညာဘက်

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

class = "ဆွဲ-ညာဘက်"

. ဆွဲ - ညာဘက် {
  float : မှန် ;
}

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

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

class = "အသံတိတ်"

. အသံပိတ်ထား သည် {
  အရောင် : #999; 
}

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

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

class = "clearfix"

. ရှင်းလင်းချက် {
  * zoom : 1 ; 
  &: ရှေ့ ၊
  &: { ပြီးနောက်
    ပြသမှု : စားပွဲ ;
    အကြောင်းအရာ : "" ; 
  }
  &: { ပြီးနောက်
    ရှင်းပါတယ် ။ _ _
  }
}