ဂလက်ဖကွန်များ

ရနိုင်သော ဂရပ်ဖစ်များ

Glyphicon Halflings သတ်မှတ်မှုမှ ဖောင့်ဖော်မတ်ရှိ ကကွက်ပေါင်း 250 ကျော် ပါဝင်သည်။ Glyphicons Halflings များကို ပုံမှန်အားဖြင့် အခမဲ့မရနိုင်သော်လည်း ၎င်းတို့၏ဖန်တီးသူသည် ၎င်းတို့ကို Bootstrap အခမဲ့အသုံးပြုနိုင်အောင် ပြုလုပ်ပေးထားသည်။ ကျေးဇူးတင်စွာဖြင့်၊ ဖြစ်နိုင်သည့်အခါတိုင်း Glyphicons သို့ လင့်ခ်တစ်ခုထည့်သွင်းပေးရန်သာ တောင်းဆိုပါသည်။

  • glyphicon glyphicon-ခရေပွင့်
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-ယူရို
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-အနှုတ်
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-စာအိတ်
  • glyphicon glyphicon-ခဲတံ
  • glyphicon glyphicon-မှန်
  • glyphicon glyphicon-ဂီတ
  • glyphicon glyphicon-ရှာဖွေမှု
  • glyphicon glyphicon-နှလုံး
  • glyphicon glyphicon-စတား
  • glyphicon glyphicon-star-ဗလာ
  • glyphicon glyphicon-အသုံးပြုသူ
  • glyphicon glyphicon-ရုပ်ရှင်
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-ဖယ်ရှားခြင်း။
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-အမှိုက်
  • glyphicon glyphicon-home
  • glyphicon glyphicon-ဖိုင်
  • glyphicon glyphicon-အချိန်
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-ဒေါင်းလုဒ်လုပ်ပါ။
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-အလံ
  • glyphicon glyphicon-နားကြပ်များ
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-ဘားကုဒ်
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-စာအုပ်
  • glyphicon glyphicon-စာညှပ်
  • glyphicon glyphicon-print
  • glyphicon glyphicon-ကင်မရာ
  • glyphicon glyphicon-ဖောင့်
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-စာသား-အမြင့်
  • glyphicon glyphicon-စာသား-အကျယ်
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-စာရင်း
  • glyphicon glyphicon-အင်တင်း-ဘယ်ဘက်
  • glyphicon glyphicon-အင်တင်း-ညာဘက်
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-ရုပ်ပုံ
  • glyphicon glyphicon-map-အမှတ်အသား
  • glyphicon glyphicon-ချိန်ညှိခြင်း။
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-တည်းဖြတ်
  • glyphicon glyphicon-share
  • glyphicon glyphicon-စစ်ဆေးခြင်း။
  • glyphicon glyphicon-ရွှေ့
  • glyphicon glyphicon-တစ်လှမ်း-နောက်ပြန်
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-နောက်ပြန်
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon ရှေ့သို့
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-တစ်ဆင့်-ရှေ့သို့
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-ဘယ်ဘက်
  • glyphicon glyphicon-chevron-ညာဘက်
  • glyphicon glyphicon-အပေါင်း-လက္ခဏာ
  • glyphicon glyphicon-အနုတ်လက္ခဏာ
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-လက္ခဏာ
  • glyphicon glyphicon-မေးခွန်း-လက္ခဏာ
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-မျက်နှာပြင်ဓာတ်ပုံ
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-စက်ဝိုင်း
  • glyphicon glyphicon-ban-စက်ဝိုင်း
  • glyphicon glyphicon-မြှား-ဘယ်ဘက်
  • glyphicon glyphicon-မြှား-ညာဘက်
  • glyphicon glyphicon-မြှား-အပေါ်သို့
  • glyphicon glyphicon-မြှား-အောက်
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-အာမေဋိတ်-လက္ခဏာ
  • glyphicon glyphicon-လက်ဆောင်
  • glyphicon glyphicon-အရွက်
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-မျက်လုံး-ဖွင့်
  • glyphicon glyphicon-မျက်လုံး-အနီးကပ်
  • glyphicon glyphicon-သတိပေးချက်-လက္ခဏာ
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-ပြက္ခဒိန်
  • glyphicon glyphicon-ကျပန်း
  • glyphicon glyphicon-မှတ်ချက်
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-စျေးဝယ်လှည်း
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-အရွယ်အစား-ဒေါင်လိုက်
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-လက်-ဘယ်ဘက်
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-စက်ဝိုင်း-မြှား-ညာဘက်
  • glyphicon glyphicon-စက်ဝိုင်း-မြှား-ဘယ်ဘက်
  • glyphicon glyphicon-စက်ဝိုင်း-မြှား-အပေါ်သို့
  • glyphicon glyphicon-စက်ဝိုင်း-မြှား-အောက်
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-အလုပ်များ
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-လက်ဆွဲအိတ်
  • glyphicon glyphicon-မျက်နှာပြင်အပြည့်
  • glyphicon glyphicon-ဒိုင်ခွက်
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-နှလုံး-ဗလာ
  • glyphicon glyphicon-link
  • glyphicon glyphicon-ဖုန်း
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-အမျိုးအစား
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon ကို အမှတ်ခြစ်မထားပါ။
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-ပြိုကျ-ဆင်း
  • glyphicon glyphicon-ပြိုကျ-တက်
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-မှတ်တမ်း
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon သိမ်းဆည်းထားသည်။
  • glyphicon glyphicon-တင်သွင်းခြင်း။
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-သိမ်းဆည်းထားသည်။
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-ခရက်ဒစ်ကတ်
  • glyphicon glyphicon-လွှဲပြောင်း
  • glyphicon glyphicon-မီးဖိုချောင်သုံးပစ္စည်း
  • glyphicon glyphicon-ခေါင်းစီး
  • glyphicon glyphicon-ချုံ့ထားသည်။
  • glyphicon glyphicon-နားကြပ်
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-မျှော်စင်
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-စာတန်းထိုးများ
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-မူပိုင်ခွင့်-အမှတ်အသား
  • glyphicon glyphicon-မှတ်ပုံတင်အမှတ်အသား
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-သစ်ပင်-ရွက်ကြွေ
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon အဆင့်-တက်
  • glyphicon glyphicon-ကော်ပီ
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-သတိပေးချက်
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-ဖော်မြူလာ
  • glyphicon glyphicon-တဲ
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-အိပ်ရာ
  • glyphicon glyphicon-ပန်းသီး
  • glyphicon glyphicon-ဖျက်ခြင်း။
  • glyphicon glyphicon-နာရီကြည့်မှန်
  • glyphicon glyphicon-မီးအိမ်
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-ကတ်ကြေး
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-ယန်း
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ရူဘယ်
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-စကေး
  • glyphicon glyphicon-ရေခဲချောင်း
  • glyphicon glyphicon-ရေခဲချောင်း-အရသာ
  • glyphicon glyphicon-ပညာရေး
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-ဒေါင်လိုက်
  • glyphicon glyphicon-မီနူး-ဟမ်ဘာဂါ
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-ဆီ
  • glyphicon glyphicon-စပါး
  • glyphicon glyphicon-နေကာမျက်မှန်
  • glyphicon glyphicon-စာသား-အရွယ်အစား
  • glyphicon glyphicon-စာသား-ရောင်
  • glyphicon glyphicon-စာသား-နောက်ခံ
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-တြိဂံ-ညာဘက်
  • glyphicon glyphicon-တြိဂံ-ဘယ်ဘက်
  • glyphicon glyphicon-တြိဂံ-အောက်ခြေ
  • glyphicon glyphicon-တြိဂံ-ထိပ်
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-ဘယ်ဘက်
  • glyphicon glyphicon-menu-ညာဘက်
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

အသုံးပြုနည်း

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

အခြားအစိတ်အပိုင်းများနှင့် မရောနှောပါနှင့်

အိုင်ကွန်အတန်းများကို အခြားအစိတ်အပိုင်းများနှင့် တိုက်ရိုက်ပေါင်းစပ်၍မရပါ။ ၎င်းတို့ကို တူညီသောဒြပ်စင်ပေါ်ရှိ အခြားအတန်းများနှင့်အတူ အသုံးမပြုသင့်ပါ။ ယင်းအစား၊ အစုအဝေးတစ်ခုထည့် <span>ကာ အိုင်ကွန်အတန်းများကို <span>.

အချည်းနှီးသောဒြပ်စင်များအတွက်သာအသုံးပြုရန်

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

အိုင်ကွန်ဖောင့်တည်နေရာကို ပြောင်းလဲခြင်း။

../fonts/Bootstrap သည် စုစည်းထားသော CSS ဖိုင်များနှင့် ဆက်စပ်သော လမ်းညွှန် တွင် အိုင်ကွန်ဖောင့်ဖိုင်များ ရှိနေလိမ့်မည်ဟု ယူဆသည် ။ ထိုဖောင့်ဖိုင်များကို ရွှေ့ခြင်း သို့မဟုတ် အမည်ပြောင်းခြင်းဆိုသည်မှာ နည်းလမ်းသုံးမျိုးထဲမှ CSS ကို အပ်ဒိတ်လုပ်ခြင်းကို ဆိုလိုသည်-

  • ဖိုင်နည်းပါးသော အရင်းအမြစ်ရှိ နှင့်/သို့မဟုတ် ကိန်းရှင်များကို ပြောင်း ပါ @icon-font-path@icon-font-name
  • Less compiler မှပေးသော ဆက်စပ် URLs ရွေးချယ်မှုကို အသုံးပြုပါ။
  • url()စုစည်းထားသော CSS ရှိ လမ်းကြောင်းများကို ပြောင်းလဲပါ ။

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

အသုံးပြုနိုင်သော သင်္ကေတများ

အထောက်အကူပြုနည်းပညာများ၏ ခေတ်မီဗားရှင်းများသည် CSS မှထုတ်လုပ်ထားသော အကြောင်းအရာများအပြင် သတ်မှတ်ထားသော ယူနီကုဒ်အက္ခရာများကို ကြေငြာပါမည်။ စခရင်စာဖတ်သူများတွင် မရည်ရွယ်ဘဲနှင့် ရှုပ်ထွေးနေသော ထွက်ပေါက်များကို ရှောင်ရှားရန် (အထူးသဖြင့် အိုင်ကွန်များကို အလှဆင်ရန်အတွက်သက်သက် အသုံးပြုသည့်အခါ)၊ ၎င်းတို့ကို aria-hidden="true"ရည်ညွှန်းချက်ဖြင့် ဝှက်ထားသည်။

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

အကယ်၍ သင်သည် အခြားစာသားမပါဘဲ ထိန်းချုပ်မှုများကို ဖန်တီးနေပါက ( <button>အိုင်ကွန်တစ်ခုသာပါရှိသော) သည် ထိန်းချုပ်မှု၏ရည်ရွယ်ချက်ကို သိရှိနိုင်စေရန် အခြားအကြောင်းအရာများကို အမြဲတမ်းပံ့ပိုးပေးသင့်သည်၊ သို့မှသာ ၎င်းသည် အကူအညီပေးသောနည်းပညာအသုံးပြုသူများအတွက် အဓိပ္ပါယ်ရှိစေမည်ဖြစ်သည်။ ဤကိစ္စတွင်၊ သင်သည် aria-labelထိန်းချုပ်မှုကိုယ်တိုင်တွင် အရည်အချင်းတစ်ခုထည့်နိုင်သည်။

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

ဥပမာများ

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

အထောက်အကူနည်းပညာအသုံးပြုသူများထံ ဤအရိပ်အမြွက်တင်ပြရန် အ ပိုစာသားပါရှိသော အမှားအယွင်းမက်ဆေ့ဂျ်ဖြစ်ကြောင်း သတိပေးချက် တစ်ခုတွင် အသုံးပြုထားသော အိုင်ကွန်တစ်ခု ။.sr-only

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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

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

dropdown's trigger နှင့် dropdown menu ကို .dropdown၊ သို့မဟုတ် ကြေငြာသော အခြား element အတွင်းတွင် ခြုံ position: relative;ပါ။ ထို့နောက် menu ၏ HTML ကိုထည့်ပါ။

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

.dropupမိဘသို့ ပေါင်းထည့်ခြင်းဖြင့် အထက်သို့ (အောက်သို့) ချဲ့ရန် dropdown menus များကို ပြောင်းလဲနိုင်သည် ။

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ပုံမှန်အားဖြင့်၊ dropdown menu ကို ထိပ်ပိုင်းနှင့် ၎င်း၏မိဘ၏ ဘယ်ဘက်ခြမ်းတွင် 100% အလိုအလျောက် နေရာချထားပါသည်။ dropdown menu ကို ညာဘက်သို့ ချိန်ညှိရန် .dropdown-menu-righta သို့ ထည့်ပါ ။.dropdown-menu

နောက်ထပ်နေရာချထားရန် လိုအပ်နိုင်သည်။

Dropdowns များကို စာရွက်စာတမ်း၏ ပုံမှန်စီးဆင်းမှုအတွင်း CSS မှတဆင့် အလိုအလျောက် နေရာချထားပါသည်။ ဆိုလိုသည်မှာ dropdowns များကို အချို့သော overflowဂုဏ်သတ္တိများဖြင့် မိဘများက ဖြတ်တောက်ခြင်း သို့မဟုတ် viewport ၏ဘောင်အပြင်ဘက်တွင် ပေါ်လာနိုင်သည်ဟု ဆိုလိုသည်။ ဤပြဿနာများ ပေါ်ပေါက်လာသည်နှင့်အမျှ သင်ကိုယ်တိုင်ဖြေရှင်းပါ။

.pull-rightချိန်ညှိ မှုကို ကန့်ကွက် ထားသည်။

v3.1.0 တွင်၊ ကျွန်ုပ်တို့သည် .pull-rightdropdown menus တွင် ရပ်တန့်ထားပါသည်။ မီနူးတစ်ခုကို ညာဘက်ချိန်ညှိရန်၊ အသုံးပြု .dropdown-menu-rightပါ။ မီနူးကို အလိုအလျောက် ချိန်ညှိရန် navbar ရှိ ညာဖက်ညှိထားသော nav အစိတ်အပိုင်းများကို ဤအတန်း၏ mixin ဗားရှင်းကို အသုံးပြုပါသည်။ ၎င်းကို အစားထိုးရန်၊ အသုံးပြု .dropdown-menu-leftပါ။

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

မည်သည့် dropdown menu တွင်မဆို လုပ်ဆောင်ချက်များ၏ အညွှန်းကဏ္ဍများသို့ ခေါင်းစီးတစ်ခုထည့်ပါ။

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

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

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

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

ကိရိယာတစ်ခုအတွင်းရှိ ဒြပ်စင်များပေါ်ရှိ tooltips သို့မဟုတ် popovers များကို အသုံးပြုသောအခါ .btn-group၊ မလိုလားအပ်သော ဘေးထွက်ဆိုးကျိုးများကို ရှောင်ရှားရန် ရွေးချယ်ခွင့်ကို သင်သတ်မှတ်ရပါမည် container: 'body'(ဥပမာ- ဒြပ်စင်သည် ပိုကျယ်လာသည်နှင့်/သို့မဟုတ် tooltip သို့မဟုတ် popover ကို အစပျိုးသောအခါ ၎င်း၏ လုံးဝန်းသောထောင့်များ ဆုံးရှုံးသွားခြင်းကဲ့သို့)။

မှန်ကန်ကြောင်း သေချာစေပြီး roleတံဆိပ်တစ်ခု ပေးပါ။

ခလုတ်များကို အတွဲလိုက်အုပ်စုဖွဲ့ကြောင်း ဖော်ပြရန်အတွက် ဖန်သားပြင်စာဖတ်သူများကဲ့သို့သော အထောက်အကူနည်းပညာများ ပေးဆောင်ရန်အတွက် သင့်လျော်သော roleရည်ညွှန်းချက်တစ်ခုကို ပေးဆောင်ရန် လိုအပ်ပါသည်။ ခလုတ်အုပ်စုများအတွက်၊ role="group"ကိရိယာဘားများတွင် တစ်ခုရှိသင့်သော်လည်း ၎င်းသည် role="toolbar".

ခြွင်းချက်တစ်ခုသည် ထိန်းချုပ်မှုတစ်ခုသာပါဝင်သည့် အုပ်စုများ (ဥပမာအားဖြင့် မျှတသော ခလုတ်အုပ်စုများ<button> ) သို့မဟုတ် dropdown တစ်ခုပါရှိသည်။

roleထို့အပြင်၊ အထောက်အကူနည်းပညာအများစုသည် မှန်ကန်သော ရည်ညွှန်းချက် ရှိသော်လည်း ၎င်းတို့ကို ကြေညာမည်မဟုတ်သောကြောင့် အဖွဲ့များနှင့် တူးလ်ဘားများကို တိကျပြတ်သားသော အညွှန်းတစ်ခုပေးသင့်သည် ။ ဤနေရာတွင် ပေးထားသော ဥပမာများတွင်၊ ကျွန်ုပ်တို့သည် အသုံးပြု aria-labelသော်လည်း၊ ထိုကဲ့သို့သော အခြားရွေးချယ်စရာများ aria-labelledbyကိုလည်း အသုံးပြုနိုင်ပါသည်။

အခြေခံဥပမာ

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

ခလုတ်ဘား

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

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

အရွယ်အစား

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




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

အသိုက်

ခလုတ်များ အတွဲလိုက်နှင့် ရောထားသော dropdown menus များကို လိုသောအခါ .btn-groupတွင် အခြားတစ်ခုအတွင်း ထည့် ပါ ။.btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

ဒေါင်လိုက်ကွဲလွဲမှု

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

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

ခလုတ် ကုသိုလ်အဖွဲ့များ

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

နယ်နိမိတ်များကို ကိုင်တွယ်ခြင်း။

ခလုတ်များကို အကြောင်းပြရန် အသုံးပြုသည့် သီးခြား HTML နှင့် CSS ကြောင့် (ဆိုလိုသည်မှာ display: table-cell) ၎င်းတို့ကြားရှိ နယ်နိမိတ်များကို နှစ်ဆတိုးစေသည်။ ပုံမှန်ခလုတ်အုပ်စုများတွင် margin-left: -1px၎င်းတို့ကိုဖယ်ရှားမည့်အစား ဘောင်များကို စည်းရန်အသုံးပြုသည်။ သို့သော်၊ marginနှင့်အလုပ်မလုပ်ပါ display: table-cell။ ရလဒ်အနေဖြင့်၊ Bootstrap တွင် သင်၏စိတ်ကြိုက်ပြင်ဆင်မှုများပေါ်မူတည်၍ နယ်နိမိတ်များကို ဖယ်ရှားရန် သို့မဟုတ် ပြန်လည်အရောင်ခြယ်ရန် ဆန္ဒရှိနိုင်သည်။

IE8 နှင့် နယ်နိမိတ်များ

<a>Internet Explorer 8 သည် ဖွင့်ထားသည် ဖြစ်စေ <button>ဒြပ်စင်များ ဖြစ်စေ မျှတသောခလုတ်အုပ်စုရှိ ခလုတ်များပေါ်တွင် နယ်နိမိတ်များကို မဖော်ပြပါ ။ အဲဒါကို ရဖို့အတွက် ခလုတ်တစ်ခုစီကို နောက်တစ်ခုနဲ့ ပတ်လိုက်ပါ .btn-group

နောက်ထပ်အချက်အလက်များအတွက် #12476 ကိုကြည့်ပါ ။

<a>ဒြပ်စင် နှင့်

.btns ကို အတွဲလိုက် ခြုံလိုက်ရုံ .btn-group.btn-group-justifiedပါပဲ။

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

လင့်ခ်များကို ခလုတ်များအဖြစ် လုပ်ဆောင်သည်။

<a>ဒြပ်စင်များကို ခလုတ်များအဖြစ် အသုံးပြုပါက - စာမျက်နှာအတွင်း လုပ်ဆောင်နိုင်စွမ်းကို အစပျိုးပေးခြင်း၊ လက်ရှိစာမျက်နှာရှိ အခြားစာရွက်စာတမ်း သို့မဟုတ် ကဏ္ဍများသို့ သွားလာခြင်းထက် - ၎င်းတို့ကိုလည်း သင့်လျော်သော ပေးဆောင်သင့် ပါသည် role="button"

<button>ဒြပ်စင် နှင့်

<button>ဒြပ်စင်များ ပါရှိသော တရားမျှတသော ခလုတ်အုပ်စုများကို အသုံးပြုရန် ၊ ခလုတ်တစ်ခုစီကို ခလုတ်အုပ်စုတစ်ခုတွင် ခြုံထားရပါမည် ။ ဘရောက်ဆာအများစုသည် ကျွန်ုပ်တို့၏ CSS ကို <button>အစိတ်အပိုင်းများအတွက် မျှတစေရန်အတွက် ကောင်းစွာမကျင့်သုံးသော်လည်း၊ ကျွန်ုပ်တို့သည် ခလုတ် dropdowns များကို ပံ့ပိုးပေးသောကြောင့်၊ ကျွန်ုပ်တို့သည် ၎င်းကို လုပ်ဆောင်နိုင်ပါသည်။

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

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

ပလပ်အင် မှီခိုမှု

Button dropdowns သည် သင်၏ Bootstrap ဗားရှင်းတွင် dropdown plugin ကို လိုအပ်ပါသည်။

ခလုတ်တစ်ချက် ပြုတ်ကျခြင်း။

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

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

အလားတူ၊ သီးခြားခလုတ်တစ်ခုဖြင့်သာ တူညီသော markup အပြောင်းအလဲများဖြင့် ခွဲခြမ်းခလုတ်များကို ဖန်တီးပါ။

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

အရွယ်အစား

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

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropup ကွဲပြားမှု

.dropupမိဘသို့ ထည့်ခြင်းဖြင့် ဒြပ်စင်များအထက်ရှိ dropdown menus များကို အစပျိုးပါ ။

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ထည့်သွင်းသည့်အဖွဲ့များ

စာသားအခြေခံသည့် မည်သည့်စာသားမဆို ရှေ့၊ နောက်၊ သို့မဟုတ် နှစ်ဖက်စလုံးတွင် စာသား သို့မဟုတ် ခလုတ်များကို ပေါင်းထည့်ခြင်းဖြင့် ဖောင်ထိန်းချုပ်မှုများကို တိုးချဲ့ပါ <input>.input-groupတစ်ခုနှင့်တစ်ခု .input-group-addonသို့မဟုတ် .input-group-btnအစိတ်အပိုင်းတစ်ခုအား ဖြည့်စွက်ရန် သို့မဟုတ် နောက်ဆက်တွဲ ကို အသုံးပြု ပါ .form-control

အဘိဓာယ ဥပါဒါနက္ခန္ဓာ <input>သာ

<select>WebKit ဘရောက်ဆာများတွင် ၎င်းတို့ကို အပြည့်အ၀ ပုံစံမချနိုင်သောကြောင့် ဤနေရာတွင် ဒြပ်စင် များကို အသုံးပြုခြင်းကို ရှောင်ကြဉ် ပါ။

အချို့ကိစ္စများတွင် ၎င်းတို့၏ဂုဏ်ရည်ကို လေးစားမည်မဟုတ်သောကြောင့် <textarea>ဤနေရာတွင် ဒြပ်စင်များ အသုံးပြုခြင်းကို ရှောင်ကြဉ် ပါ။rows

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

ဒြပ်စင်တစ်ခုအတွင်းရှိ tooltips သို့မဟုတ် popovers များကိုအသုံးပြုသောအခါ .input-group၊ မလိုလားအပ်သောဘေးထွက်ဆိုးကျိုးများကိုရှောင်ရှားရန် ရွေးချယ်ခွင့်ကို သင်သတ်မှတ်ရပါမည် container: 'body'(ဥပမာ- ဒြပ်စင်သည် ပိုကျယ်လာသည်နှင့်/သို့မဟုတ် tooltip သို့မဟုတ် popover ကို အစပျိုးလိုက်သောအခါ ၎င်း၏ဝိုင်းဝန်းထောင့်များဆုံးရှုံးသွားခြင်းကဲ့သို့)။

အခြားအစိတ်အပိုင်းများနှင့် မရောနှောပါနှင့်

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

တံဆိပ်များကို အမြဲထည့်ပါ။

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

အသုံးပြုရမည့် တိကျသောနည်းပညာ (မြင်သာသော <label>ဒြပ်စင်များ၊ အတန်း <label>ကိုအသုံးပြု၍ ဝှက်ထားသောဒြပ်စင်များ ၊ သို့မဟုတ် , , , သို့မဟုတ် attribute ကိုအသုံးပြုခြင်း) နှင့် သင်အသုံးပြုနေသည့် အင်တာဖေ့စ်ဝစ်ဂျက်အမျိုးအစားအတိအကျပေါ်မူတည်၍ ပေးပို့ရန် လိုအပ်မည့် နောက်ထပ်အချက်အလက်များ ကွဲပြားပါမည်။ ဤအပိုင်းရှိ ဥပမာများသည် အကြံပြုထားသော ကိစ္စရပ်အလိုက် ချဉ်းကပ်နည်းအချို့ကို ပေးပါသည်။.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

အခြေခံဥပမာ

ထည့်သွင်းမှု၏တစ်ဖက်တစ်ချက်တွင် အပိုပရိုဂရမ်တစ်ခု သို့မဟုတ် ခလုတ်တစ်ခုကို ထားရှိပါ။ ထည့်သွင်းမှုတစ်ခု၏ နှစ်ဖက်စလုံးတွင် တစ်ခုကိုလည်း သင်ထားနိုင်သည်။

တစ်ဖက်တည်းတွင် အ ပိုပရိုဂရမ်များစွာ ( .input-group-addonသို့မဟုတ် ) အများအပြားကို ကျွန်ုပ်တို့ မပံ့ပိုးပါ ။.input-group-btn

ကျွန်ုပ်တို့သည် ထည့်သွင်းမှုအုပ်စုတစ်ခုတွင် ပုံစံ-ထိန်းချုပ်မှုအများအပြားကို မပံ့ပိုးပါ။

@

@example.com

$ .၀၀

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

အရွယ်အစား

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

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

checkbox များနှင့် ရေဒီယို addons

စာသားအစား ထည့်သွင်းသည့်အဖွဲ့၏ addon အတွင်း မည်သည့် checkbox သို့မဟုတ် ရေဒီယိုရွေးချယ်ခွင့်ကိုမဆို ထည့်ပါ။

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ခလုတ် addons များ

ထည့်သွင်းသည့်အုပ်စုများရှိ ခလုတ်များသည် အနည်းငယ်ကွဲပြားပြီး nesting အဆင့်တစ်ခု ထပ်မံလိုအပ်သည်။ အဲဒီအစား ခလုတ်တွေကို ခြုံ .input-group-addonဖို့ အသုံးပြု ရမှာ ဖြစ်ပါတယ်။ .input-group-btnအစားထိုး၍မရသော မူရင်းဘရောက်ဆာစတိုင်များကြောင့် ၎င်းကို လိုအပ်ပါသည်။

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

dropdowns ပါသောခလုတ်များ

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

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

တစ်ဖက်တွင် add-on တစ်ခုသာရှိနိုင်သော်လည်း တစ်ခုတည်းအတွင်းတွင် ခလုတ်များစွာရှိနိုင်သည် .input-group-btn

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

ရေတပ်

Bootstrap တွင်ရရှိနိုင်သော Navs များသည် base .navclass မှစတင်ကာ၊ နှင့် shared states များကိုမျှဝေထားသည်။ စတိုင်တစ်ခုစီကြားပြောင်းရန် မွမ်းမံမှုအတန်းများကို လဲလှယ်ပါ။

တက်ဘ်အကန့်များအတွက် navs ကိုအသုံးပြုခြင်းသည် JavaScript တက်ဘ်ပလပ်အင် လိုအပ်သည်။

tabbable ဧရိယာများပါရှိသော တဘ်များအတွက်၊ သင်သည် tabs JavaScript plugin ကို အသုံးပြုရပါမည် ။ Markup သည် နောက်ထပ်အသေးစိတ်အချက်အလက်များအတွက် ARIA ရည်ညွှန်း ချက်များလည်း လိုအပ်ပါမည် role– နောက်ထပ်အသေးစိတ်အချက်အလက်များအတွက် ပလပ်အင်၏ နမူနာအမှတ်အသား ကို ကြည့်ပါ။

navigation များကို အသုံးပြု၍ရနိုင်စေပါသည်။

လမ်းကြောင်းပြဘားတစ်ခုပေးရန်အတွက် navs ကိုအသုံးပြုနေပါက၊ လမ်းညွှန်မှု role="navigation"အရှိဆုံး ပင်မကွန်တိန်နာ ထဲသို့ တစ်ခုထည့်ပါ <ul>သို့မဟုတ် <nav>လမ်းကြောင်းပြမှုတစ်ခုလုံးပတ်လည်တွင် ဒြပ်စင်တစ်ခုကို ပတ်ထားသည်။ <ul>အထောက်အကူနည်းပညာများဖြင့် အမှန်တကယ်စာရင်းအဖြစ် ကြေညာခြင်းမှ တားဆီးနိုင်သောကြောင့် ၎င်းသည် ၎င်း၏ အခန်းကဏ္ဍကို ကိုယ်တိုင်မထည့်ပါနှင့် ။

class သည် base class .nav-tabsလိုအပ်သည်ကို သတိပြုပါ ။.nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ဆေးပြားများသည်လည်း ဒေါင်လိုက် တန်းစီနိုင်သည်။ ထည့်လိုက်ရုံ .nav-stackedပါပဲ။

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

768px ထက် ပိုကျယ်သော စခရင်များတွင် ၎င်းတို့၏ မိဘများ၏ အကျယ်အဝန်းကို တဘ်များ သို့မဟုတ် ဆေးပြားများကို လွယ်ကူစွာ ပြုလုပ်ပါ .nav-justified။ သေးငယ်သော ဖန်သားပြင်များတွင်၊ nav လင့်ခ်များကို စုထားသည်။

မျှတသော navbar nav လင့်ခ်များကို လောလောဆယ် ပံ့ပိုးမထားပါ။

Safari နှင့် တုံ့ပြန်မှု မျှတသော ရေကြောင်းများ

v9.1.2 တွင်၊ Safari သည် သင့်ဘရောက်ဆာကို အလျားလိုက် အရွယ်အစားပြောင်းခြင်းဖြင့် ပြန်လည်စတင်သည့်အခါ ရှင်းလင်းထားသည့် တရားမျှတသော nav တွင် rendering error များဖြစ်စေသည့် bug ကိုပြသထားသည်။ ဤ bug ကို တရားမျှတသော nav ဥပမာ တွင်လည်း ပြထားသည် ။

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

မည်သည့် nav အစိတ်အပိုင်း (တက်ဘ်များ သို့မဟုတ် ဆေးပြားများ) .disabledအတွက် မီးခိုးရောင်လင့်ခ်များအတွက် ပေါင်းထည့်ကာ hover effect မရှိပါ

လင့်ခ်လုပ်ဆောင်ချက်ကို ထိခိုက်မှုမရှိပါ။

<a>ဤအတန်း သည် ၎င်း၏ လုပ်ဆောင်နိုင်စွမ်းကို မဟုတ်ဘဲ 'ပုံပန်းသဏ္ဌာန် ကိုသာ ပြောင်းလဲပါမည် ။ လင့်ခ်များကို ဤနေရာတွင် ပိတ်ရန် စိတ်ကြိုက် JavaScript ကို အသုံးပြုပါ။

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

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

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

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

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

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbar

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

မျှတသော navbar nav လင့်ခ်များကို လောလောဆယ် ပံ့ပိုးမထားပါ။

ပြည့်လျှံနေသော အကြောင်းအရာ

Bootstrap သည် သင့် navbar တွင် အကြောင်းအရာ မည်မျှ နေရာ လိုအပ်သည် ကို မသိသောကြောင့်၊ သင်သည် ဒုတိယ အတန်းသို့ အကြောင်းအရာ ထုပ်ပိုးခြင်းဆိုင်ရာ ပြဿနာများနှင့် ကြုံတွေ့ရနိုင်သည်။ ၎င်းကိုဖြေရှင်းရန်၊ သင်လုပ်နိုင်သည်-

  1. navbar ပစ္စည်းများ၏ ပမာဏ သို့မဟုတ် အကျယ်ကို လျှော့ချပါ။
  2. တုံ့ပြန်နိုင်သော အသုံးဝင်မှုအတန်း များကို အသုံးပြု၍ အချို့သော မျက်နှာပြင်အရွယ်အစားများတွင် navbar ဖိုင်များကို ဝှက် ထားပါ။
  3. ပြိုကျနေသော နှင့် အလျားလိုက်မုဒ်ကြားတွင် သင့် navbar ကို ပြောင်းသည့်အချက်ကို ပြောင်းပါ။ ပြောင်းလဲနိုင်သော ကို စိတ်ကြိုက် @grid-float-breakpointပြင်ဆင်ပါ သို့မဟုတ် သင့်ကိုယ်ပိုင်မီဒီယာမေးမြန်းချက်ကို ထည့်ပါ။

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

JavaScript ကိုပိတ်ထားပြီး navbar ပြိုလဲသွားလောက်အောင် viewport ကျဉ်းနေပါက navbar ကို ချဲ့ထွင်ပြီး အတွင်းမှ အကြောင်းအရာကို ကြည့်ရှုရန် မဖြစ်နိုင်ပါ .navbar-collapse

တုံ့ပြန်မှုရှိသော navbar သည် သင်၏ Bootstrap ဗားရှင်းတွင် ပြိုကွဲနေသော ပလပ်အင် ကို လိုအပ်သည်။

ပြိုကျနေသော မိုဘိုင်း navbar ခွဲအမှတ်ကို ပြောင်းလဲခြင်း။

@grid-float-breakpointမြင်ကွင်းပို့တ်ထက် ပိုကျဉ်း သောအခါ၊ မြင်ကွင်းပို့တ်သည် အနည်းဆုံး @grid-float-breakpointအကျယ် ရှိသော အခါ navbar သည် ၎င်း၏ဒေါင်လိုက် မိုဘိုင်းမြင်ကွင်းသို့ ပြိုကျသွားသည် ။ navbar ပြိုကျ/ချဲ့ထွင်သည့်အခါ ထိန်းချုပ်ရန် အရင်းအမြစ်နည်းသော ဤကိန်းရှင်ကို ချိန်ညှိပါ။ မူရင်းတန်ဖိုးသည် 768px(အသေးဆုံး "သေးငယ်သော" သို့မဟုတ် "တက်ဘလက်" မျက်နှာပြင်) ဖြစ်သည်။

navbar များကို အသုံးပြုနိုင်ရန် ပြုလုပ်ပါ။

ဒြပ်စင် တစ်ခုကို အသုံးပြုရန် သေချာစေ <nav>ပါ သို့မဟုတ် a ကဲ့သို့သော ယေဘုယျဒြပ်စင်တစ်ခုကို အသုံးပြုပါက ၊ ၎င်းအား အကူအညီနည်းပညာအသုံးပြုသူများအတွက် အထင်ကရနေရာတစ်ခုအဖြစ် ပြတ်သားစွာခွဲခြားသတ်မှတ်ရန် navbar တစ်ခုစီ <div>တွင် a ထည့်ပါ ။role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

စာသားကို လဲလှယ်ခြင်းဖြင့် navbar အမှတ်တံဆိပ်ကို သင့်ကိုယ်ပိုင်ပုံဖြင့် အစားထိုးပါ <img>။ ၎င်း၏ .navbar-brandကိုယ်ပိုင် padding နှင့် အမြင့်ရှိသောကြောင့်၊ သင့်ပုံပေါ် မူတည်၍ CSS အချို့ကို ထပ်ရေးရန် လိုအပ်နိုင်သည်။

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

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

ဦးခေါင်းတစ်ခုအနေဖြင့်၊ ၎င်း၏ကုဒ်အများအပြားကို mixin မှတစ်ဆင့် .navbar-formမျှဝေသည် ။ ထည့်သွင်းသည့်အဖွဲ့များကဲ့သို့ အချို့သောပုံစံထိန်းချုပ်မှုများသည် navbar တစ်ခုအတွင်း မှန်ကန်စွာပြသရန် ပုံသေအကျယ်များ လိုအပ်နိုင်သည်။.form-inline

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

မိုဘိုင်းလ်စက်က သတိပေးသည်။

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

တံဆိပ်များကို အမြဲထည့်ပါ။

ထည့်သွင်းမှုတိုင်းအတွက် အညွှန်းမပါဝင်ပါက စခရင်ဖတ်သူများသည် သင့်ဖောင်များတွင် ပြဿနာရှိလိမ့်မည်။ ဤ inline ပုံစံများအတွက်၊ သင်သည် .sr-onlyအတန်းကို အသုံးပြု၍ အညွှန်းများကို ဝှက်ထားနိုင်သည်။ aria-label, aria-labelledbyသို့မဟုတ် titleattribute ကဲ့သို့သော အထောက်အကူနည်းပညာများအတွက် အညွှန်းကို ပေးဆောင်သည့် နောက်ထပ်အခြားနည်းလမ်းများ ရှိသေးသည် ။ ယင်းတို့အနက်မှတစ်ခုမျှမရှိပါက၊ စခရင်ဖတ်သူများသည် ရည်ညွှန်းချက်ကိုအသုံးပြုရန် အားကိုးအား ထားပြုနိုင်သော်လည်း အခြားတံဆိပ်ကပ်ခြင်းနည်းလမ်းများအတွက် အစားထိုး placeholderအသုံးပြုခြင်းကို အကြံပြုမည်မဟုတ်ကြောင်း သတိပြုပါ ။placeholder

အတန်းကို navbar တွင် ဒေါင်လိုက်အလယ်ဗဟိုထားရန် .navbar-btnအတန်းထဲတွင် မ <button>နေသော အစိတ်အပိုင်းများ ကို ထည့်ပါ ။<form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

အကြောင်းအရာအလိုက် အသုံးပြုမှု

စံ ခလုတ်အတန်းများ ကဲ့သို့ပင် ၊ နှင့် ဒြပ်စင်များကို .navbar-btnအသုံးပြုနိုင်သည် ။ သို့သော်၊ စံခလုတ်အတန်း များကို အတွင်းရှိ အစိတ်အပိုင်းများ တွင် အသုံးမပြုသင့်ပါ ။<a><input>.navbar-btn<a>.navbar-nav

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

<p class="navbar-text">Signed in as Mark Otto</p>

ပုံမှန် navbar လမ်းညွှန်မှု အစိတ်အပိုင်းအတွင်း မဟုတ်သော ပုံမှန်လင့်ခ်များကို အသုံးပြုသူများအတွက်၊ .navbar-linkပုံသေနှင့် ပြောင်းပြန် navbar ရွေးစရာများအတွက် သင့်လျော်သောအရောင်များကို ထည့်ရန် အတန်းကို အသုံးပြုပါ။

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

nav လင့်ခ်များ၊ ဖောင်များ၊ ခလုတ်များ သို့မဟုတ် စာသား .navbar-leftသို့မဟုတ် .navbar-rightအသုံးဝင်သောအတန်းများကို အသုံးပြု၍ ချိန်ညှိပါ။ အတန်းနှစ်ခုစလုံးသည် သတ်မှတ်ထားသော ဦးတည်ချက်တွင် CSS float တစ်ခုကို ထည့်ပါမည်။ ဥပမာအားဖြင့်၊ nav link များကို ချိန်ညှိရန် <ul>သက်ဆိုင်ရာ utility class နှင့် သီးခြားခွဲထားလိုက်ပါ။

ဤအတန်းများသည် mixin-ed ဗားရှင်းများ .pull-leftဖြစ်ပြီး .pull-right၊ သို့သော် ၎င်းတို့သည် စက်အရွယ်အစားတစ်လျှောက် navbar အစိတ်အပိုင်းများကို ပိုမိုလွယ်ကူစွာ ကိုင်တွယ်နိုင်စေရန် မီဒီယာမေးမြန်းချက်များတွင် ကန့်သတ်ထားပါသည်။

အစိတ်အပိုင်းများစွာကို ညာဘက်ချိန်ညှိခြင်း။

.navbar-rightNavbar များသည် လက်ရှိတွင် အတန်း များစွာဖြင့် ကန့်သတ်ချက်ရှိသည် ။ .navbar-rightအကြောင်းအရာကို မှန်ကန်စွာ နေရာလွတ်ရရှိရန်၊ ကျွန်ုပ်တို့သည် နောက်ဆုံး ဒြပ်စင် တွင် အနုတ်လက္ခဏာအနားသတ်ကို အသုံးပြု ပါသည်။ ထိုအတန်းကိုအသုံးပြုသည့် ဒြပ်စင်များစွာရှိသောအခါ၊ ဤအနားသတ်များသည် ရည်ရွယ်ထားသည့်အတိုင်း အလုပ်မလုပ်ပါ။

v4 တွင် ထိုအစိတ်အပိုင်းကို ပြန်ရေးနိုင်သည့်အခါ ၎င်းကို ပြန်လည်ကြည့်ရှုပါမည်။

.navbar-fixed-topတစ်ခု .containerသို့မဟုတ် .container-fluidဗဟိုနှင့် pad navbar အကြောင်းအရာကို ပေါင်းထည့်ပါ ။

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

ကိုယ်ထည်အဖုံး လိုအပ်သည်။

သင် . padding_ <body>သင့်ကိုယ်ပိုင်တန်ဖိုးများကို စမ်းသုံးကြည့်ပါ သို့မဟုတ် အောက်တွင် ကျွန်ုပ်တို့၏ အတိုအထွာကို အသုံးပြုပါ။ အကြံပြုချက်- ပုံမှန်အားဖြင့်၊ navbar သည် 50px မြင့်သည်။

body { padding-top: 70px; }

core Bootstrap CSS ပြီးနောက် ၎င်းကို ထည့်သွင်းရန် သေချာပါစေ ။

.navbar-fixed-bottomတစ်ခု .containerသို့မဟုတ် .container-fluidဗဟိုနှင့် pad navbar အကြောင်းအရာကို ပေါင်းထည့်ပါ ။

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

ကိုယ်ထည်အဖုံး လိုအပ်သည်။

ပုံသေ navbar paddingသည် <body>. သင့်ကိုယ်ပိုင်တန်ဖိုးများကို စမ်းသုံးကြည့်ပါ သို့မဟုတ် အောက်တွင် ကျွန်ုပ်တို့၏ အတိုအထွာကို အသုံးပြုပါ။ အကြံပြုချက်- ပုံမှန်အားဖြင့်၊ navbar သည် 50px မြင့်သည်။

body { padding-bottom: 70px; }

core Bootstrap CSS ပြီးနောက် ၎င်းကို ထည့်သွင်းရန် သေချာပါစေ ။

.navbar-static-topထည့် ကာ .containerသို့မဟုတ် .container-fluidအလယ်နှင့် pad navbar အကြောင်းအရာကို ပေါင်းထည့်ခြင်းဖြင့် စာမျက်နှာနှင့် ဝေးကွာသွားသော အကျယ်အဝန်းအပြည့် navbar တစ်ခုကို ဖန်တီး ပါ။

အတန်းများ နှင့်မတူဘဲ .navbar-fixed-*၊ သင်သည်မည်သည့် padding ကိုမှပြောင်းရန်မလိုအပ်ပါ body

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

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

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

Breadcrumbs

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

Separators များကို CSS မှတဆင့် :beforeနှင့် content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Pagination

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

မူရင်းစာမျက်နှာ

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

pagination အစိတ်အပိုင်းကို တံဆိပ်တပ်ခြင်း။

<nav>စခရင်ဖတ်သူများနှင့် အခြားအကူအညီနည်းပညာများဆီသို့ ၎င်းကို လမ်းညွှန်မှုအပိုင်းအဖြစ် သတ်မှတ်ရန် pagination အစိတ်အပိုင်းကို ဒြပ်စင်တစ်ခုတွင် ပတ်ထားသင့်သည် ။ ထို့အပြင်၊ စာမျက်နှာတစ်ခုတွင် ယင်းကဲ့သို့ လမ်းညွှန်မှုအပိုင်းတစ်ခုထက်ပိုပြီး ရှိနိုင်ဖွယ်ရှိသောကြောင့် (ခေါင်းစီးရှိ အဓိကလမ်းညွှန်ချက် သို့မဟုတ် ဘေးဘားလမ်းညွှန်ခြင်းကဲ့သို့) ၎င်း၏ရည်ရွယ်ချက်ကို ထင်ဟပ်စေသည့် ဖော်ပြချက် aria-labelတစ်ခု ပံ့ပိုးပေးရန် အကြံပြုလိုပါသည်။ <nav>ဥပမာအားဖြင့်၊ ရှာဖွေမှုရလဒ်အစုတစ်ခုကြားတွင် လမ်းကြောင်းရှာဖွေရန် pagination အစိတ်အပိုင်းကို အသုံးပြုပါက၊ သင့်လျော်သော အညွှန်းတစ်ခု ဖြစ်နိုင်သည် aria-label="Search results pages"

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

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

အရွယ်အစား

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

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

ပေဂျာ

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

မူရင်းဥပမာ

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

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

တံဆိပ်များ

ဥပမာ

ဥပမာ New ခေါင်းစဉ်

ဥပမာ New ခေါင်းစဉ်

ဥပမာ New ခေါင်းစဉ်

ဥပမာ New ခေါင်းစဉ်

ဥပမာ New ခေါင်းစဉ်
ဥပမာ New ခေါင်းစဉ်
<h3>Example heading <span class="label label-default">New</span></h3>

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

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

မူရင်း အောင်မြင်မှု အချက်အလက် သတိပေးချက် အန္တရာယ် _
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

တံဆိပ်များ အများအပြား ရှိပါသလား။

inline-blockသင့်တွင် ၎င်း၏ကိုယ်ပိုင် ဒြပ်စင် (အိုင်ကွန်ကဲ့သို့) ပါရှိသော ကျဉ်းမြောင်းသော ကွန်တိန်နာအတွင်း ဒါဇင်ပေါင်းများစွာသော အညွှန်းများရှိပါက တင်ဆက်ခြင်း ပြဿနာများ ဖြစ်ပေါ်လာနိုင်သည် ။ ဒီနည်းလမ်းက setting display: inline-block;ပါ။ အကြောင်းအရာနှင့် ဥပမာတစ်ခုအတွက်၊ #13219 ကိုကြည့်ပါ

တံဆိပ်များ

<span class="badge">လင့်ခ်များ၊ Bootstrap navs နှင့် အခြား အရာများကို ပေါင်းထည့်ခြင်းဖြင့် အသစ် သို့မဟုတ် မဖတ်ရသေးသော အရာများကို အလွယ်တကူ မီးမောင်းထိုးပြပါ ။

ဝင်စာ၄၂

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

ကိုယ်တိုင်ပြိုကျခြင်း။

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

ဘရောင်ဇာ ဖြတ်ကျော် လိုက်ဖက်မှု

:emptyတံဆိပ်များသည် ရွေးချယ် သည့်ကိရိယာ အတွက် ပံ့ပိုးမှုမရရှိသောကြောင့် Internet Explorer 8 တွင် တံဆိပ်များ ကိုယ်တိုင်ပြိုကျမည်မဟုတ်ပါ ။

တက်ကြွသောရေကြောင်းအခြေအနေများကို လိုက်လျောညီထွေဖြစ်စေသည်။

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Jumbotron

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

မင်္ဂလာပါကမ္ဘာလောက!

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

ပိုမိုသိရှိရန်

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

jumbotron ကို အကျယ် အပြည့်ဖြစ်အောင်၊ လုံးဝန်းသော ထောင့်များ မရှိစေရန်၊ ၎င်းကို .containers အားလုံးကို အပြင်ဘက်တွင် ထားကာ .containerအတွင်းတွင် ထည့်ပါ။

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

စာမျက်နှာ ခေါင်းစီး

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

ပုံသေးများ

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

အကယ်၍ သင်သည် မတူညီသော အမြင့်နှင့်/သို့မဟုတ် အကျယ်များ၏ ပုံသေးများကို Pinterest ကဲ့သို့သော တင်ဆက်မှုကို ရှာဖွေနေပါက၊ သင်သည် MasonryIsotope သို့မဟုတ် Salvattore ကဲ့သို့သော ပြင်ပပလပ်အင်ကို အသုံးပြုရန် လိုအပ် မည်ဖြစ်သည် ။

မူရင်းဥပမာ

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

စိတ်ကြိုက်အကြောင်းအရာ

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

100%x200

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

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 ။

ခလုတ် ခလုတ်

100%x200

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

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 ။

ခလုတ် ခလုတ်

100%x200

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

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 ။

ခလုတ် ခလုတ်

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

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

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

ဥပမာများ

မည်သည့်စာသားကိုမဆို ခြုံပြီး ချန်လှပ်ထားသော ခလုတ် တစ်ခုနှင့် အခြေခံသတိပေးချက်မက်ဆေ့ချ်များအတွက် .alertဆက်စပ်အကြောင်းအရာ အတန်းလေးခုထဲမှ တစ်ခု (ဥပမာ၊ )။.alert-success

ပုံသေအတန်းမရှိပါ။

သတိပေးချက်များတွင် မူရင်းအတန်းများ၊ အခြေခံနှင့် မွမ်းမံမှုအတန်းများသာ မရှိပါ။ ပုံသေမီးခိုးရောင်သတိပေးချက်သည် အလွန်အဓိပ္ပါယ်မရှိသောကြောင့် အမျိုးအစားတစ်ခုကို contextual class မှတစ်ဆင့် သတ်မှတ်ရန် လိုအပ်ပါသည်။ အောင်မြင်မှု၊ အချက်အလက်၊ သတိပေးချက် သို့မဟုတ် အန္တရာယ်မှ ရွေးချယ်ပါ။

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

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

.alert-dismissibleစိတ်ကြိုက်ရွေးချယ် နိုင်ပြီး ပိတ်ခလုတ်ကို ပေါင်းထည့်ခြင်းဖြင့် မည်သည့်သတိပေးချက်ကိုမဆို တည်ဆောက်ပါ ။

JavaScript သတိပေးချက် ပလပ်အင် လိုအပ်သည်။

အပြည့်အဝလုပ်ဆောင်နိုင်သော၊ ခွင့်မပြုနိုင်သော သတိပေးချက်များအတွက်၊ သတိပေးချက်များ JavaScript ပလပ်အင် ကို အသုံးပြုရပါမည် ။

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

စက်အားလုံးတွင် သင့်လျော်သောအပြုအမူကို သေချာပါစေ။

ဒေတာ attribute <button>ဖြင့် element ကိုအသုံးပြုရန်သေချာ ပါစေ။data-dismiss="alert"

.alert-linkသတိပေးချက်တိုင်းအတွင်း လိုက်ဖက်သော အရောင်အသွေးရှိသော လင့်ခ်များကို လျင်မြန်စွာ ပေးဆောင်ရန် utility class ကို အသုံးပြုပါ ။

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

တိုးတက်မှုဘားများ

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

ဘရောင်ဇာ ဖြတ်ကျော် လိုက်ဖက်မှု

တိုးတက်မှုဘားများသည် ၎င်းတို့၏သက်ရောက်မှုအချို့ကိုရရှိရန် CSS3 အကူးအပြောင်းများနှင့် ကာတွန်းများကို အသုံးပြုသည်။ ဤအင်္ဂါရပ်များကို Internet Explorer 9 နှင့် အောက် သို့မဟုတ် Firefox ဗားရှင်းအဟောင်းများတွင် ပံ့ပိုးမထားပါ။ Opera 12 သည် ကာတွန်းများကို မပံ့ပိုးပါ။

အကြောင်းအရာ လုံခြုံရေးမူဝါဒ (CSP) လိုက်ဖက်မှု

အကယ်၍ သင့်ဝဘ်ဆိုက်တွင် ခွင့်မပြုသော အကြောင်းအရာ လုံခြုံရေးမူဝါဒ (CSP) ရှိပါက၊ ကျွန်ုပ်တို့၏ နမူနာများတွင် ဖော်ပြထားသည့်အတိုင်း တိုးတက်မှုဘားအကျယ်များကို သတ်မှတ်ရန် style-src 'unsafe-inline'inline attribute များကို သင်အသုံးပြုနိုင်မည် မဟုတ်ပါ ။ styleတင်းကျပ်သော CSP များနှင့် ကိုက်ညီသည့် အကျယ်များကို သတ်မှတ်ခြင်းအတွက် အစားထိုးနည်းလမ်းများတွင် စိတ်ကြိုက် JavaScript အနည်းငယ် (ထိုသို့ သတ်မှတ်သည် element.style.width) သို့မဟုတ် စိတ်ကြိုက် CSS အတန်းများကို အသုံးပြုခြင်း ပါဝင်သည်။

အခြေခံဥပမာ

ပုံသေ တိုးတက်မှုဘား။

60% ပြီးပါပြီ။
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

တံဆိပ်နှင့်

မြင်သာသောရာခိုင်နှုန်းကိုပြသရန် တိုးတက်မှုဘားအတွင်းမှ အတန်းကို ဖယ်ရှားပါ <span>.sr-only

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

ရာခိုင်နှုန်းနည်းသည့်တိုင် အညွှန်းစာသားကို ထင်ရှားအောင်ပြုလုပ်ရန်၊ min-widthတိုးတက်မှုဘားသို့ ထည့်သွင်းစဉ်းစားပါ။

၀%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

ဆက်စပ်ရွေးချယ်စရာများ

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

40% ပြီးမြောက်ခြင်း (အောင်မြင်မှု)
20% ပြီးပါသည်။
60% ပြီးမြောက်သည် (သတိပေးချက်)
80% ပြီးမြောက်သည် (အန္တရာယ်)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

အစင်း

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

40% ပြီးမြောက်ခြင်း (အောင်မြင်မှု)
20% ပြီးပါသည်။
60% ပြီးမြောက်သည် (သတိပေးချက်)
80% ပြီးမြောက်သည် (အန္တရာယ်)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ကာတွန်း

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

45% ပြီးပါပြီ။
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

တွဲထားသည်။

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

35% ပြီးမြောက်ခြင်း (အောင်မြင်မှု)
20% ပြီးမြောက်သည် (သတိပေးချက်)
10% ပြီးအောင် (အန္တရာယ်)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

မီဒီယာတွေရှိကြပါတယ်။

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

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

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

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

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။

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

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။

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

Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

အတန်းများ .pull-leftနှင့် .pull-rightလည်း တည်ရှိပြီး ယခင်က မီဒီယာ အစိတ်အပိုင်းအဖြစ် အသုံးပြုခဲ့ကြသော်လည်း v3.3.0 ကဲ့သို့ အသုံးပြုမှုအတွက် ငြင်းပယ်ထားသည်။ ၎င်းတို့သည် html ၏ နောက်တွင် ထည့်သင့်သည် မှလွဲ၍ ၎င်းတို့သည် ခန့်မှန်းခြေ .media-leftနှင့် ညီမျှသည် ။.media-right.media-right.media-body

မီဒီယာတန်းညှိ

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

ထိပ်တန်း ညှိထားသော မီဒီယာ

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။

Donec sed odio dui ။ Nullam quis risus eget urna mollis ornare vel eu leo။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

အလယ်တန်းညှိမီဒီယာ

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။

Donec sed odio dui ။ Nullam quis risus eget urna mollis ornare vel eu leo။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

အောက်ခြေ ညှိထားသော မီဒီယာ

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။

Donec sed odio dui ။ Nullam quis risus eget urna mollis ornare vel eu leo။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

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

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

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

    Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။

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

    Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။

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

    Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။

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

    Cras သည် amet nibh libero, gravida nulla တွင်ထိုင်သည်။ Nulla vel metus scelerisque ante sollicitudin ကွန်မိုဒို။ Cras purus odio၊ vulputate တွင်ရှိသော vestibulum၊ tempus viverra turpis။
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

အုပ်စုစာရင်း

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

အခြေခံဥပမာ

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

  • Cras justo odio
  • Dapibus ac facilisis အတွက်
  • Morbi leo risus
  • Porta ac consectetur ac
  • eros တွင် vestibulum
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

တံဆိပ်များ

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

  • ၁၄Cras justo odio
  • Dapibus ac facilisis အတွက်
  • Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

ချိတ်ဆက်ထားသော အရာများ

စာရင်းပါအရာများအစား anchor tags များကိုအသုံးပြုခြင်းဖြင့် list group item များကို ချိတ်ဆက်ပါ (၎င်းသည် မိဘတစ်ဦးကို ဆိုလိုသည် <div>) <ul>။ ဒြပ်စင်တစ်ခုစီပတ်လည်တွင် တစ်ဦးချင်းမိဘများအတွက် မလိုအပ်ပါ။

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ခလုတ်ပစ္စည်းများ

စာရင်းအုပ်စုအကြောင်းအရာများသည် စာရင်းအရာများအစား ခလုတ်များဖြစ်နိုင်သည် (၎င်းသည် မိဘတစ် <div>ဦးအစား <ul>) ကိုလည်း ဆိုလိုသည်။ ဒြပ်စင်တစ်ခုစီပတ်လည်တွင် တစ်ဦးချင်းမိဘများအတွက် မလိုအပ်ပါ။ ဤနေရာတွင် စံအတန်းများကို မသုံးပါနှင့် ။.btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

မသန်စွမ်းသောအရာများ

ပိတ်ထားပုံပေါ်စေရန် မီးခိုးရောင်သို့ .disabledပေါင်း ထည့်ပါ ။.list-group-item

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ဆက်စပ်အတန်းများ

ပုံသေ သို့မဟုတ် လင့်ခ်ချိတ်ထားသော စတိုင်လ်စာရင်းအရာများကို စတိုင်လ်ပြုလုပ်ရန် ဆက်စပ်အတန်းများကို အသုံးပြုပါ။ .activeပြည်နယ် လည်း ပါဝင်ပါတယ် ။

  • Dapibus ac facilisis အတွက်
  • Cras ထိုင်ပြီး လွတ်လွတ်လပ်လပ်နေပါ။
  • Porta ac consectetur ac
  • eros တွင် vestibulum
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

စိတ်ကြိုက်အကြောင်းအရာ

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

ပြားများ

အမြဲတမ်းမလိုအပ်သော်လည်း၊ တစ်ခါတစ်ရံတွင် သင်သည် သင်၏ DOM ကို သေတ္တာတစ်ခုထဲတွင် ထည့်ထားရန် လိုအပ်သည်။ ထိုအခြေအနေများအတွက်၊ အကန့်အစိတ်အပိုင်းကို စမ်းကြည့်ပါ။

အခြေခံဥပမာ

ပုံမှန်အားဖြင့်၊ .panelလုပ်ဆောင်ချက်အားလုံးသည် အကြောင်းအရာအချို့ပါဝင်ရန် အခြေခံဘောင်နှင့် padding အချို့ကို အသုံးပြုပါသည်။

အခြေခံဘောင်ဥပမာ
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

ခေါင်းစဉ်ဖြင့် အကန့်

သင့်အကန့်သို့ ခေါင်းစီးကွန်တိန်နာကို အလွယ်တကူထည့်ပါ .panel-heading။ ကြိုတင်ပုံသွင်းထားသော ခေါင်းစီးတစ်ခုကို ထည့်ရန် အတန်း တစ်ခု <h1>နှင့် <h6>အတူ သင်လည်း ပါဝင်နိုင်သည် ။ သို့သော်၊ ၏ဖောင့ ် .panel-titleအရွယ်အစား <h1>များကို .<h6>.panel-heading

သင့်လျော်သော လင့်ခ်အရောင်ခြယ်ခြင်းအတွက်၊ အတွင်းခေါင်းစဉ်များတွင် လင့်ခ်များကို သေချာစွာထည့်ပါ .panel-title

ခေါင်းစဉ်မပါဘဲ အကန့်ခေါင်းစဉ်
Panel အကြောင်းအရာ

Panel ခေါင်းစဉ်

Panel အကြောင်းအရာ
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

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

Panel အကြောင်းအရာ
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

ဆက်စပ်ရွေးချယ်စရာများ

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

Panel ခေါင်းစဉ်

Panel အကြောင်းအရာ

Panel ခေါင်းစဉ်

Panel အကြောင်းအရာ

Panel ခေါင်းစဉ်

Panel အကြောင်းအရာ

Panel ခေါင်းစဉ်

Panel အကြောင်းအရာ

Panel ခေါင်းစဉ်

Panel အကြောင်းအရာ
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

စားပွဲတွေနဲ့

.tableချောမွေ့မှုမရှိသော ဒီဇိုင်းအတွက် အကန့်အတွင်း နယ်နိမိတ်မရှိသော မည်သည့်အရာကိုမဆို ထည့်ပါ ။ တစ်ခုရှိလျှင် .panel-bodyခွဲခြမ်းရန်အတွက် ဇယားထိပ်တွင် အပိုဘောင်တစ်ခု ထည့်ပါသည်။

ဘောင်ခေါင်းစဉ်

ဤနေရာတွင် မူရင်းအကန့်အကြောင်းအရာအချို့။ Nulla vitae elit libero၊ pharetra augue။ Aenean lacinia bibendum nulla sed consectetur။ Aenean eu leo ​​quam။ Pellentesque ornare sem lacinia quam venenatis vestibulum။ Nullam id dolor id nibh ultricies vehicula ut id elit ။

# နာမည် မျိုးနွယ်အမည် အသုံးပြုသူအမည်
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီ ငှက် @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

အကန့်ကိုယ်ထည်မရှိပါက၊ အစိတ်အပိုင်းသည် အနှောင့်အယှက်မရှိဘဲ အကန့်ခေါင်းစီးမှ ဇယားသို့ ရွှေ့သည်။

ဘောင်ခေါင်းစဉ်
# နာမည် မျိုးနွယ်အမည် အသုံးပြုသူအမည်
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီ ငှက် @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

စာရင်းအဖွဲ့များနှင့်

မည်သည့်အကန့်အတွင်းမဆို အကျယ်အဝန်း စာရင်းအုပ်စုများ ကို အလွယ်တကူ ထည့်သွင်း ပါ။

ဘောင်ခေါင်းစဉ်

ဤနေရာတွင် မူရင်းအကန့်အကြောင်းအရာအချို့။ Nulla vitae elit libero၊ pharetra augue။ Aenean lacinia bibendum nulla sed consectetur။ Aenean eu leo ​​quam။ Pellentesque ornare sem lacinia quam venenatis vestibulum။ Nullam id dolor id nibh ultricies vehicula ut id elit ။

  • Cras justo odio
  • Dapibus ac facilisis အတွက်
  • Morbi leo risus
  • Porta ac consectetur ac
  • eros တွင် vestibulum
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

တုံ့ပြန်မှု မြှပ်နှံသည်။

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

<iframe>စည်းမျဉ်းများသည် , <embed>, <video>, နှင့် <object>ဒြပ်စင် များသို့ တိုက်ရိုက်သက်ရောက်သည် ။ .embed-responsive-itemအခြားသော အရည်အချင်းများနှင့် ကိုက်ညီလိုသောအခါ တွင် တိကျပြတ်သားသော ဆင်းသက်သည့် အတန်းအစားကို ရွေးချယ်နိုင်သည် ။

အကြံပြုချက်။ frameborder="0"ကျွန်ုပ်တို့သည် သင့်အတွက် ၎င်းကို ထပ်လောင်းထားသောကြောင့် သင့်တွင် သင် ထည့်သွင်းရန် မလိုအပ်ပါ <iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ရေတွင်း

ပုံသေပါဘဲ။

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

ငါရေတွင်းထဲရောက်နေတာ။
<div class="well">...</div>

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

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

ငါရေတွင်းကြီးထဲမှာ ရောက်နေတာ။
<div class="well well-lg">...</div>
ငါရေတွင်းငယ်လေးထဲမှာ ရောက်နေတာ။
<div class="well well-sm">...</div>