Magamit nga mga glyph

Naglakip sa kapin sa 250 ka mga glyph sa format sa font gikan sa set sa Glyphicon Halflings. Ang Glyphicons Halflings kasagarang dili magamit nga libre, apan ang ilang magbubuhat naghimo kanila nga magamit alang sa Bootstrap nga walay bayad. Isip pasalamat, gihangyo lang namo nga iapil nimo ang link balik sa Glyphicons kung mahimo.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-sobre
glyphicon glyphicon-pencil
glyphicon glyphicon-bildo
glyphicon glyphicon-musika
glyphicon glyphicon-search
glyphicon glyphicon-kasingkasing
glyphicon glyphicon-star
glyphicon glyphicon-star-walay sulod
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-dako
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-pagtangtang
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-basura
glyphicon glyphicon-balay
glyphicon glyphicon-file
glyphicon glyphicon-oras
glyphicon glyphicon-dalan
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
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-flag
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-libro
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-gitas-on
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-larawan
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-lakang-paatras
glyphicon glyphicon-fast-backward
glyphicon glyphicon-paatras
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-lingin
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-tuo
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-puno
glyphicon glyphicon-resize-gamay
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-regalo
glyphicon glyphicon-dahon
glyphicon glyphicon-fire
glyphicon glyphicon-open-mata
glyphicon glyphicon-mata-duol
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-komento
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
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-kamot-kamot
glyphicon glyphicon-kamot-wala
glyphicon glyphicon-kamot
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-kasingkasing-walay sulod
glyphicon glyphicon-link
glyphicon glyphicon-telepono
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
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-wala masusi
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-naluwas
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-naluwas
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-pagbalhin
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
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-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alerto
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-reyna
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-higdaanan
glyphicon glyphicon-apple
glyphicon glyphicon-pagpapas
glyphicon glyphicon-hourglass
glyphicon glyphicon-lampa
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-gunting
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-natilawan
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-lana
glyphicon glyphicon-grain
glyphicon glyphicon-sunglasses
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
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-triangle-right
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-sa tuo
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Unsaon paggamit

Alang sa mga hinungdan sa pasundayag, ang tanan nga mga icon nanginahanglan usa ka base nga klase ug indibidwal nga klase sa icon. Aron magamit, ibutang ang mosunod nga code bisan asa. Siguroha nga magbilin ug luna tali sa icon ug teksto para sa hustong padding.

Ayaw pagsagol sa ubang mga sangkap

Ang mga klase sa icon dili mahimong direktang ikombinar sa ubang mga sangkap. Dili sila kinahanglan gamiton kauban sa ubang mga klase sa parehas nga elemento. Hinuon, pagdugang usa ka nested <span>ug i-apply ang mga klase sa icon sa <span>.

Alang lamang sa paggamit sa walay sulod nga mga elemento

Ang mga klase sa icon kinahanglan nga gamiton lamang sa mga elemento nga walay sulod nga teksto ug walay mga elemento sa bata.

Pag-ilis sa lokasyon sa font sa icon

Gituohan sa Bootstrap nga ang mga file sa font sa icon mahimutang sa ../fonts/direktoryo, nga may kalabotan sa giipon nga mga file sa CSS. Ang pagbalhin o pag-ilis sa ngalan sa mga font file nagpasabut sa pag-update sa CSS sa usa sa tulo ka paagi:

Usba ang @icon-font-pathug/o @icon-font-namemga baryable sa tinubdan Dili kaayo mga file.
Gamita ang relatibong mga URL nga opsyon nga gihatag sa Less compiler.
Usba ang mga url()agianan sa giipon nga CSS.

Gamita ang bisan unsang kapilian nga labing angay sa imong piho nga pag-setup sa pag-uswag.

Ma-access nga mga icon

Ang mga moderno nga bersyon sa mga teknolohiya sa pagtabang magpahibalo sa sulud nga nahimo sa CSS, ingon man ang piho nga mga karakter sa Unicode. Aron malikayan ang wala tuyoa ug makalibog nga output sa mga screen reader (ilabi na kung ang mga icon gigamit lamang alang sa dekorasyon), among itago kini uban ang aria-hidden="true"hiyas.

Kung nagagamit ka ug icon aron ipaabot ang kahulogan (imbes isip pangdekorasyon lang nga elemento), siguruha nga kini nga kahulogan gipasabot usab sa mga teknolohiyang makatabang – pananglitan, ilakip ang dugang nga sulod, nga makita sa .sr-onlyklase.

Kung nagmugna ka ug mga kontrol nga wala’y lain nga teksto (sama sa usa <button>nga adunay sulud lamang nga icon), kinahanglan ka kanunay nga maghatag alternatibo nga sulud aron mahibal-an ang katuyoan sa pagkontrol, aron kini masabtan sa mga tiggamit sa mga teknolohiya nga makatabang. Sa kini nga kaso, mahimo nimong idugang ang usa ka aria-labelhiyas sa kontrol mismo.

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

Mga pananglitan

Gamita kini sa mga buton, mga grupo sa butones para sa usa ka toolbar, nabigasyon, o mga prepended nga porma nga mga input.

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

Usa ka icon nga gigamit sa usa ka alerto aron ipahibalo nga kini usa ka mensahe sa sayup, nga adunay dugang .sr-onlynga teksto aron ipahayag kini nga pahiwatig sa mga tiggamit sa mga teknolohiya nga makatabang.

Pagsulod ug balido nga email address

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

Ma-toggle, contextual nga menu para sa pagpakita sa mga lista sa mga link. Gihimo nga interactive sa dropdown JavaScript plugin .

Pananglitan

I-wrap ang trigger sa dropdown ug ang dropdown menu sulod sa .dropdown, o laing elemento nga nagdeklarar position: relative;. Dayon idugang ang HTML sa menu.

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

Ang mga dropdown nga menu mahimong usbon aron mapalapad pataas (imbes paubos) pinaagi sa pagdugang .dropupsa ginikanan.

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

Pag-align

Sa kasagaran, ang usa ka dropdown menu awtomatik nga gipahimutang 100% gikan sa ibabaw ug ubay sa wala nga bahin sa ginikanan niini. Idugang .dropdown-menu-rightsa usa .dropdown-menungadto sa tuo nga i-align ang dropdown menu.

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

Mga ulohan

Pagdugang og usa ka header sa pag-label sa mga seksyon sa mga aksyon sa bisan unsang dropdown menu.

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

Divider

Pagdugang og divider sa pagbulag sa serye sa mga link sa dropdown menu.

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

Gibalda ang mga butang sa menu

Idugang .disabledsa usa <li>sa dropdown aron ma-disable ang link.

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

Paggrupo ang serye sa mga buton sa usa ka linya nga adunay grupo sa butones. Idugang ang opsyonal nga JavaScript radio ug checkbox style behavior gamit ang among buttons plugin .

Ang mga tooltip ug popover sa mga grupo sa butones nanginahanglan espesyal nga setting

Kung mogamit mga tooltip o popovers sa mga elemento sa sulod sa usa ka .btn-group, kinahanglan nimo nga itakda ang kapilian container: 'body'aron malikayan ang dili gusto nga mga epekto (sama sa elemento nga modako ug / o mawala ang mga lingin nga suok kung ang tooltip o popover ma-trigger).

Siguroha nga husto `role`ug paghatag og label

Aron ang mga teknolohiya sa pagtabang - sama sa mga tigbasa sa screen - aron ipahayag nga usa ka serye sa mga buton ang gi-grupo, usa ka angay rolenga kinaiya ang kinahanglan nga ihatag. Alang sa mga grupo sa butones, kini mao ang role="group", samtang ang mga toolbar kinahanglan adunay usa ka role="toolbar".

Ang usa ka eksepsiyon mao ang mga grupo nga adunay usa lamang ka kontrol (pananglitan ang gipakamatarong nga mga grupo sa buton nga adunay <button>mga elemento) o usa ka dropdown.

Dugang pa, ang mga grupo ug mga toolbar kinahanglan nga hatagan usa ka tin-aw nga label, tungod kay ang kadaghanan sa mga teknolohiya nga makatabang kung dili kini ipahibalo, bisan pa sa presensya sa husto rolenga hiyas. Sa mga pananglitan nga gihatag dinhi, among gigamit ang aria-label, apan ang mga alternatibo sama sa aria-labelledbymagamit usab.

Panguna nga pananglitan

I-wrap ang usa ka serye sa mga buton gamit ang .btnin .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>

Combine sets sa <div class="btn-group">ngadto sa usa ka <div class="btn-toolbar">alang sa mas komplikado nga mga sangkap.

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

Pagsukod

Imbis nga i-apply ang mga klase sa pag-size sa butones sa matag buton sa usa ka grupo, idugang lang .btn-group-*ang matag usa .btn-group, lakip na kung magsalag sa daghang mga grupo.

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

Nagsalag

Ibutang ang usa .btn-groupsa sulod sa lain .btn-groupkung gusto nimo ang mga dropdown menu nga gisagol sa usa ka serye sa mga buton.

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

Bertikal nga kalainan

Himoa nga ang usa ka hugpong sa mga buton makita nga patindog nga gipatong kay sa pinahigda. Ang mga dropdown sa split button wala gisuportahan dinhi.

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

Gipakamatarong nga mga grupo sa buton

Paghimo og usa ka grupo sa mga butones nga mag-inat sa parehas nga gidak-on aron mosangkad sa tibuok gilapdon sa ginikanan niini. Naglihok usab sa mga dropdown sa butones sulod sa grupo sa buton.

Pagdumala sa mga utlanan

Tungod sa piho nga HTML ug CSS nga gigamit sa paghatag og katarungan sa mga buton (nga mao display: table-cell), ang mga utlanan tali kanila gidoble. Sa regular nga mga grupo sa buton, margin-left: -1pxgigamit sa pag-stack sa mga utlanan imbes nga tangtangon kini. Bisan pa, margindili molihok sa display: table-cell. Ingon usa ka sangputanan, depende sa imong mga pag-customize sa Bootstrap, mahimo nimong tangtangon o koloran pag-usab ang mga utlanan.

IE8 ug mga utlanan

Ang Internet Explorer 8 wala maghatag ug mga utlanan sa mga buton sa usa ka gipakamatarong nga grupo sa buton, naa man kini <a>o <button>mga elemento. Aron makalibot niana, ibutang ang matag buton sa lain .btn-group.

Tan-awa ang #12476 para sa dugang nga impormasyon.

Uban sa `<a>`mga elemento

Pagputos lang ug serye sa .btns sa .btn-group.btn-group-justified.

Sa wala Tunga-tunga Husto

Sa wala Tunga-tunga

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

Mga link nga naglihok isip mga buton

Kung ang mga <a>elemento gigamit aron molihok ingon mga buton - nagpalihok sa in-page nga pagpaandar, imbes nga mag-navigate sa lain nga dokumento o seksyon sa sulod sa karon nga panid - kinahanglan usab nga hatagan sila usa ka angay nga role="button".

Uban sa `<button>`mga elemento

Aron magamit ang makatarunganon nga mga grupo sa butones nga adunay <button>mga elemento, kinahanglan nimo nga ibalot ang matag butones sa usa ka grupo sa butones . Kadaghanan sa mga browser dili husto nga magamit ang among CSS alang sa katarungan sa <button>mga elemento, apan tungod kay gisuportahan namon ang mga dropdown sa butones, mahimo namon kana nga buhaton.

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

Gamita ang bisan unsang buton aron ma-trigger ang usa ka dropdown menu pinaagi sa pagbutang niini sa sulod sa usa .btn-groupug paghatag sa tukma nga marka sa menu.

Pagsalig sa plugin

Ang mga dropdown sa buton nagkinahanglan nga ang dropdown plugin iapil sa imong bersyon sa Bootstrap.

Usa ka butones nga dropdown

Himua ang usa ka buton nga usa ka dropdown toggle nga adunay pipila nga sukaranan nga pagbag-o sa markup.

<!-- 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 button dropdowns

Sa susama, paghimo og split button dropdown nga adunay parehas nga mga pagbag-o sa markup, gamit lamang ang usa ka bulag nga buton.

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

Pagsukod

Ang mga dropdown sa buton magamit sa mga buton sa tanan nga gidak-on.

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

Pagkalainlain sa paghulog

I-trigger ang mga dropdown menu sa ibabaw sa mga elemento pinaagi sa pagdugang .dropupsa ginikanan.

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

Ipalapad ang mga kontrol sa porma pinaagi sa pagdugang sa teksto o mga buton sa wala pa, pagkahuman, o sa duha ka kilid sa bisan unsang gibase sa teksto <input>. Gamita .input-groupuban sa .input-group-addono .input-group-btnsa pag-andam o pagdugang sa mga elemento sa usa ka .form-control.

Textual `<input>`lang

Likayi ang paggamit<select> mga elemento dinhi tungod kay dili kini hingpit nga maestilo sa mga browser sa WebKit.

Likayi ang paggamit sa <textarea>mga elemento dinhi tungod kay ang ilang mga rowshiyas dili tahuron sa pipila ka mga kaso.

Ang mga tooltip ug popover sa input nga mga grupo nanginahanglan espesyal nga setting

Kung mogamit mga tooltip o popovers sa mga elemento sa sulod sa usa ka .input-group, kinahanglan nimo nga itakda ang kapilian container: 'body'aron malikayan ang dili gusto nga mga epekto (sama sa elemento nga modako ug / o mawala ang mga lingin nga suok kung ang tooltip o popover na-trigger).

Ayaw pagsagol sa ubang mga sangkap

Ayaw pagsagol sa mga grupo sa porma o mga klase sa kolum sa grid direkta sa mga grupo sa input. Hinuon, ibutang ang input nga grupo sa sulod sa porma nga grupo o elemento nga may kalabutan sa grid.

Kanunay idugang ang mga label

Ang mga magbabasa sa screen adunay problema sa imong mga porma kung dili nimo iapil ang usa ka label sa matag input. Alang sa kini nga mga grupo sa pag-input, siguruha nga ang bisan unsang dugang nga label o pagpaandar gihatag sa mga teknolohiya nga makatabang.

Ang eksakto nga teknik nga gamiton (makita <label>nga mga elemento, <label>mga elemento nga gitago gamit ang .sr-onlyklase, o paggamit sa aria-label, aria-labelledby, aria-describedby, titleo placeholderattribute) ug unsa nga dugang nga impormasyon ang kinahanglan nga ipaabot magkalahi depende sa eksaktong matang sa interface widget nga imong gipatuman. Ang mga pananglitan niini nga seksyon naghatag og pipila ka gisugyot, piho nga mga paagi sa kaso.

Panguna nga pananglitan

Ibutang ang usa ka add-on o buton sa bisan asa nga kilid sa usa ka input. Mahimo usab nimo ibutang ang usa sa duha ka kilid sa usa ka input.

Wala kami nagsuporta sa daghang mga add-on ( .input-group-addono .input-group-btn) sa usa ka bahin.

Wala kami nagsuporta sa daghang mga kontrol sa porma sa usa ka grupo sa pag-input.

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

Pagsukod

Idugang ang mga relatibong porma sa .input-groupgidak-on nga mga klase sa iyang kaugalingon ug ang mga sulud sa sulod awtomatiko nga magbag-o-dili kinahanglan nga balikon ang mga klase sa gidak-on sa pagkontrol sa porma sa matag elemento.

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

Mga checkbox ug mga addon sa radyo

Ibutang ang bisan unsang checkbox o opsyon sa radyo sulod sa addon sa input group imbes sa text.

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

Mga addon sa butones

Ang mga butones sa mga grupo sa pag-input medyo lahi ug nanginahanglan usa ka dugang nga lebel sa pagsalag. Imbis nga .input-group-addon, kinahanglan nimo nga gamiton .input-group-btnang pagputos sa mga buton. Gikinahanglan kini tungod sa default nga mga estilo sa browser nga dili ma-override.

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

Mga buton nga adunay mga dropdown

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

Gibahin nga mga buton

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

Daghang butones

Samtang mahimo ka lang adunay usa ka add-on matag kilid, mahimo ka adunay daghang mga buton sa sulod sa usa ka .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>

Ang mga nav nga anaa sa Bootstrap adunay gipaambit nga markup, sugod sa base .navnga klase, ingon man usab sa gipaambit nga mga estado. Ibaylo ang mga klase sa modifier aron mabalhin sa matag istilo.

Ang paggamit sa navs para sa mga tab panel nanginahanglan ug JavaScript tabs plugin

Alang sa mga tab nga adunay tabbable nga mga lugar, kinahanglan nimong gamiton ang mga tab nga JavaScript plugin . Ang markup magkinahanglan usab ug dugang roleug ARIA attributes – tan-awa ang pananglitan nga markup sa plugin para sa dugang mga detalye.

Himua ang mga nav nga gigamit ingon nabigasyon nga ma-access

Kung naggamit ka ug navs para maghatag ug navigation bar, siguruha nga magdugang ug usa role="navigation"sa labing lohikal nga sudlanan sa ginikanan sa <ul>, o ibutang ang usa ka <nav>elemento sa tibuok nabigasyon. Ayaw idugang ang papel sa <ul>iyang kaugalingon, tungod kay kini makapugong niini nga ipahibalo ingon usa ka aktwal nga lista sa mga teknolohiya nga makatabang.

Mga tab

Timan-i nga ang .nav-tabsklase nagkinahanglan sa .navbase nga klase.

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

Pills

Kuhaa kanang parehas nga HTML, apan gamita .nav-pillshinuon:

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

Ang mga pildoras usab vertically stackable. Idugang lang .nav-stacked.

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

Gipakamatarung

Sayon paghimo sa mga tab o pills nga managsama ang gilapdon sa ilang ginikanan sa mga screen nga mas lapad kaysa 768px nga adunay.nav-justified . Sa gagmay nga mga screen, ang mga link sa nav gipatong.

Ang gipakamatarong nga navbar nav link sa pagkakaron wala gisuportahan.

Safari ug responsive nga makatarunganon nga navs

Sukad sa v9.1.2, ang Safari nagpakita og bug diin ang pag-usab sa imong browser nga pinahigda hinungdan sa paghubad sa mga sayop sa makatarunganon nga nav nga gitangtang sa pag-refresh. Kini nga bug gipakita usab sa gipakamatarong nga pananglitan sa nav .

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

Na-disable nga mga link

Para sa bisan unsang sangkap sa nav (mga tab o pills), idugang .disabledang mga gray nga link ug walay mga epekto sa hover .

Ang pag-andar sa link wala maapektuhan

Kini nga klase magbag-o lang <a>sa hitsura sa 's, dili ang gamit niini. Gamita ang custom nga JavaScript aron ma-disable ang mga link dinhi.

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

Paggamit sa mga dropdown

Idugang ang mga dropdown menu nga adunay gamay nga ekstra nga HTML ug ang dropdown JavaScript plugin .

Mga tab nga adunay mga dropdown

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

Mga pildoras nga adunay mga dropdown

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

Ang mga Navbars mga responsive meta component nga nagsilbing navigation header para sa imong aplikasyon o site. Nagsugod sila sa pagkahugno (ug mahimong i-toggle) sa mga pagtan-aw sa mobile ug mahimong pinahigda samtang ang mga magamit nga gilapdon sa viewport nagdugang.

Ang gipakamatarong nga navbar nav link sa pagkakaron wala gisuportahan.

Nag-awas nga sulod

Tungod kay wala mahibal-an sa Bootstrap kung unsa ka dako nga espasyo ang gikinahanglan sa sulud sa imong navbar, mahimo ka nga adunay mga isyu sa pagputos sa sulud sa ikaduha nga laray. Aron masulbad kini, mahimo nimo:

Bawasan ang gidaghanon o gilapdon sa mga butang sa navbar.
Tagoa ang pipila ka mga butang sa navbar sa pipila ka gidak-on sa screen gamit ang responsive utility classes .
Usba ang punto diin ang imong navbar mobalhin tali sa nahugno ug horizontal mode. Ipasibo ang @grid-float-breakpointvariable o idugang ang imong kaugalingon nga pangutana sa media.

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

Ilisan ang brand sa navbar sa imong kaugalingon nga imahe pinaagi sa pagbaylo sa teksto alang sa usa ka <img>. Tungod kay ang .navbar-brandadunay kaugalingon nga padding ug gitas-on, kinahanglan nimo nga i-override ang pipila ka CSS depende sa imong imahe.

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

Ibutang ang sulod sa porma sa sulod .navbar-formpara sa hustong bertikal nga paglinya ug nahugno nga kinaiya sa pig-ot nga viewports. Gamita ang mga opsyon sa pag-align sa pagdesisyon kung asa kini nagpuyo sulod sa sulod sa navbar.

Ingon usa ka ulo, .navbar-formgipaambit ang kadaghanan sa code niini .form-inlinepinaagi sa mixin. Ang ubang mga kontrol sa porma, sama sa mga grupo sa pag-input, mahimong magkinahanglan og mga gitakdang gilapdon aron ipakita sa husto sulod sa usa ka navbar.

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

Kanunay idugang ang mga label

Ang mga magbabasa sa screen adunay problema sa imong mga porma kung dili nimo iapil ang usa ka label sa matag input. Alang niining mga inline nga porma, mahimo nimong tagoan ang mga label gamit ang .sr-onlyklase. Adunay dugang nga alternatibong mga pamaagi sa paghatag og label para sa mga teknolohiya sa pagtabang, sama sa aria-label, aria-labelledbyo titleattribute. Kung walay bisan usa niini, ang mga screen reader mahimong mogamit sa placeholderhiyas, kung anaa, apan timan-i nga ang paggamit sa placeholderisip puli sa ubang mga pamaagi sa pag-label wala gitambagan.

Idugang ang .navbar-btnklase sa <button>mga elemento nga wala magpuyo sa usa <form>aron patindog nga isentro kini sa navbar.

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

I-wrap ang mga string sa teksto sa usa ka elemento nga adunay .navbar-text, kasagaran sa usa ka <p>tag alang sa husto nga pagpangulo ug kolor.

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

Para sa mga tawo nga naggamit ug standard links nga wala sa sulod sa regular navbar navigation component, gamita ang .navbar-linkklase aron idugang ang saktong mga kolor para sa default ug inverse navbar nga mga opsyon.

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

I-align ang mga link sa nav, mga porma, mga buton, o teksto, gamit ang .navbar-lefto .navbar-rightmga klase sa utility. Ang duha ka klase magdugang ug CSS float sa espesipikong direksyon. Pananglitan, aron ipahiangay ang mga link sa nav, ibutang kini sa usa ka bulag <ul>nga adunay gi-apply nga klase sa utility.

Kini nga mga klase kay mixin-ed nga mga bersyon sa .pull-leftug .pull-right, apan nasakpan kini sa mga pangutana sa media para sa mas sayon nga pagdumala sa mga component sa navbar sa tanang gidak-on sa device.

Idugang .navbar-fixed-topug iapil ang .containero .container-fluidsa sentro ug pad navbar nga sulod.

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

Gikinahanglan ang padding sa lawas

Ang fixed navbar mosapaw sa imong uban nga sulod, gawas kon imong idugang paddingsa ibabaw sa <body>. Sulayi ang imong kaugalingon nga mga mithi o gamita ang among snippet sa ubos. Tip: Sa kasagaran, ang navbar kay 50px ang taas.

body { padding-top: 70px; }

Siguruha nga iapil kini pagkahuman sa kinauyokan nga Bootstrap CSS.

Idugang .navbar-fixed-bottomug iapil ang .containero .container-fluidsa sentro ug pad navbar nga sulod.

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

Gikinahanglan ang padding sa lawas

Ang fixed navbar mosapaw sa imong uban nga sulod, gawas kon imong idugang paddingsa ubos sa <body>. Sulayi ang imong kaugalingon nga mga mithi o gamita ang among snippet sa ubos. Tip: Sa kasagaran, ang navbar kay 50px ang taas.

body { padding-bottom: 70px; }

Siguruha nga iapil kini pagkahuman sa kinauyokan nga Bootstrap CSS.

Paghimo og bug-os nga gilapdon nga navbar nga mag-scroll palayo sa panid pinaagi sa pagdugang .navbar-static-topug paglakip sa sulod sa .containero .container-fluidsa sentro ug pad navbar.

Dili sama sa mga .navbar-fixed-*klase, dili nimo kinahanglan nga usbon ang bisan unsang padding sa body.

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

Usba ang hitsura sa navbar pinaagi sa pagdugang .navbar-inverse.

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

Mga mumho sa pan

Itudlo ang nahimutangan sa kasamtangan nga panid sulod sa usa ka hierarchy sa nabigasyon.

Ang mga separator awtomatikong idugang sa CSS pinaagi sa :beforeug content.

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

Pagination

Paghatag og mga link sa pagination para sa imong site o app nga adunay multi-page nga pagination component, o ang mas simple nga alternatibo sa pager .

Default nga pagination

Yano nga pagination nga giinspirar sa Rdio, maayo alang sa mga app ug mga resulta sa pagpangita. Ang dako nga bloke lisud makalimtan, dali nga masukod, ug naghatag daghang mga lugar sa pag-klik.

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

Pag-label sa sangkap sa pagination

Ang sangkap sa pagination kinahanglan nga giputos sa usa ka <nav>elemento aron mailhan kini ingon usa ka seksyon sa nabigasyon aron i-screen ang mga magbabasa ug uban pang mga teknolohiya nga makatabang. Dugang pa, tungod kay ang usa ka panid lagmit adunay labaw pa sa usa ka seksyon sa nabigasyon (sama sa panguna nga nabigasyon sa ulohan, o usa ka nabigasyon sa sidebar), gitambagan nga maghatag usa ka deskriptibo aria-labelnga <nav>nagpakita sa katuyoan niini. Pananglitan, kung ang bahin sa pagination gigamit sa pag-navigate tali sa usa ka set sa mga resulta sa pagpangita, ang usa ka angay nga label mahimong aria-label="Search results pages".

Baldado ug aktibo nga estado

Ang mga link napasibo alang sa lainlaing mga kahimtang. Gigamit .disabledalang sa dili ma-klik nga mga link ug .activearon ipakita ang kasamtangan nga panid.

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

Among girekomendar nga imong ibaylo ang aktibo o baldado nga mga angkla alang sa <span>, o ihiklin ang angkla sa kaso sa miaging/sunod nga mga pana, aron matangtang ang pag-andar sa pag-klik samtang gipabilin ang gituyo nga mga estilo.

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

Pagsukod

Gusto nga mas dako o mas gamay nga pagination? Idugang .pagination-lgo .pagination-smpara sa dugang nga mga gidak-on.

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

Pager

Dali nga nangagi ug sunod nga mga link alang sa yano nga pag-implementar sa pagination nga adunay light markup ug mga istilo. Maayo kini alang sa yano nga mga site sama sa mga blog o magasin.

Default nga pananglitan

Sa kasagaran, ang pager nagsentro sa mga link.

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

Nahiangay nga mga link

Sa laing paagi, mahimo nimong i-align ang matag link sa mga kilid:

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

Opsyonal nga baldado nga estado

Ang mga link sa pager naggamit usab sa kinatibuk-ang .disabledklase sa utility gikan sa pagination.

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

Pananglitan

Pananglitan nga ulohan Bag -o

<h3>Example heading <span class="label label-default">New</span></h3>

Anaa nga mga kalainan

Idugang ang bisan unsa sa nahisgutan sa ubos nga mga klase sa modifier aron mabag-o ang hitsura sa usa ka label.

Default nga Panguna nga Kalampusan nga Impormasyon Warning Peligro

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

Adunay daghang mga label?

Mahimong motumaw ang mga problema sa pag-render kung adunay ka daghang mga inline nga label sa sulod sa usa ka pig-ot nga sudlanan, ang matag usa adunay kaugalingon inline-blocknga elemento (sama sa usa ka icon). Ang paagi sa palibot niini mao ang setting display: inline-block;. Para sa konteksto ug pananglitan, tan-awa ang #13219 .

Dali nga i-highlight ang mga bag-o o wala pa mabasa nga mga butang pinaagi sa pagdugang <span class="badge">sa mga link, Bootstrap navs, ug uban pa.

Inbox42

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

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

Pagkahugno sa kaugalingon

Kung wala’y bag-o o wala pa mabasa nga mga butang, ang mga badge mahugno lang (pinaagi sa :emptytigpili sa CSS) kung wala’y sulud nga naa sa sulod.

Pagkaangay sa cross-browser

Ang mga badge dili mahugno sa kaugalingon sa Internet Explorer 8 tungod kay wala kini suporta alang sa :emptynagpili.

Nahiangay sa aktibo nga estado sa nav

Ang mga built-in nga istilo gilakip para sa pagbutang sa mga badge sa mga aktibo nga estado sa mga nabigasyon sa pildoras.

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

Usa ka gaan, flexible nga sangkap nga mahimo nga opsyonal nga mapalawig ang tibuuk nga viewport aron ipakita ang hinungdanon nga sulud sa imong site.

Hello, kalibutan!

Kini usa ka yano nga yunit sa bayani, usa ka yano nga sangkap nga istilo sa jumbotron alang sa pagtawag sa dugang nga atensyon sa gipakita nga sulud o kasayuran.

Pagkat-on pa

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

Aron mahimo ang jumbotron nga bug-os nga gilapdon, ug walay lingin nga mga kanto, ibutang kini sa gawas sa tanan .containerug idugang ang .containersulod.

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

Usa ka yano nga kabhang alang sa usa ka h1tukma nga lugar ug bahin sa mga seksyon sa sulud sa usa ka panid. Mahimong gamiton niini ang h1default smallnga elemento, ingon man ang kadaghanan sa ubang mga sangkap (nga adunay dugang nga mga istilo).

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

I-extend ang grid system sa Bootstrap gamit ang thumbnail component aron daling mapakita ang grids sa mga hulagway, video, text, ug uban pa.

Kung nangita ka nga sama sa Pinterest nga presentasyon sa mga thumbnail nga lainlain ang gitas-on ug/o gilapdon, kinahanglan nimo nga mogamit usa ka ikatulo nga partido nga plugin sama sa Masonry , Isotope , o Salvattore .

Default nga pananglitan

Sa default, ang mga thumbnail sa Bootstrap gidisenyo aron ipakita ang mga nalambigit nga mga imahe nga adunay gamay nga kinahanglan nga marka.

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

Custom nga sulod

Uban sa gamay nga dugang nga marka, posible nga idugang ang bisan unsang klase sa sulud sa HTML sama sa mga ulohan, parapo, o butones sa mga thumbnail.

Label sa thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ug eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Butang Butang

Label sa thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ug eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Butang Butang

Label sa thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ug eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Butang Butang

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

Paghatag mga mensahe sa feedback sa konteksto alang sa kasagaran nga mga aksyon sa gumagamit nga adunay pipila nga magamit ug nabag-o nga mga mensahe sa alerto.

Mga pananglitan

I-wrap ang bisan unsang teksto ug usa ka opsyonal nga dismiss nga buton .alertug usa sa upat ka mga klase sa konteksto (pananglitan, .alert-success) alang sa mga batakang mensahe sa alerto.

Walay default nga klase

Ang mga alerto walay mga default nga klase, base lamang ug mga klase sa modifier. Ang usa ka default nga gray nga alerto dili kaayo makatarunganon, mao nga kinahanglan nimo nga itakda ang usa ka tipo pinaagi sa klase sa konteksto. Pagpili gikan sa kalampusan, impormasyon, pasidaan, o peligro.

Maayong pagkabuhat! Malampuson nimong nabasa kining importanteng mensahe sa alerto.

Taas ang ulo! Kini nga alerto nanginahanglan sa imong atensyon, apan dili kini labi ka hinungdanon.

Pasidaan! Mas maayo nga susihon ang imong kaugalingon, dili ka maayo tan-awon.

Oh kalit! Usba ang pipila ka mga butang ug sulayi pagsumite pag-usab.

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

Dili madawat nga mga alerto

Pagtukod sa bisan unsang alerto pinaagi sa pagdugang usa ka opsyonal .alert-dismissibleug close nga buton.

Nagkinahanglan ug JavaScript alert plugin

Para sa bug-os nga paglihok, dili madawat nga mga alerto, kinahanglan nimong gamiton ang mga alerto nga JavaScript plugin .

Pasidaan! Mas maayo nga susihon ang imong kaugalingon, dili ka maayo tan-awon.

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

Siguruha ang husto nga pamatasan sa tanan nga mga aparato

Siguroha nga gamiton ang <button>elemento nga adunay data-dismiss="alert"data attribute.

Mga link sa mga alerto

Gamita ang .alert-linkklase sa utility aron dali nga mahatagan ang parehas nga kolor nga mga link sa sulod sa bisan unsang alerto.

Maayong pagkabuhat! Malampuson nimong nabasa kining importanteng mensahe sa alerto .

Taas ang ulo! Kini nga alerto nanginahanglan sa imong atensyon , apan dili kini labi ka hinungdanon.

Pasidaan! Mas maayo nga susihon ang imong kaugalingon, dili ka maayo tan-awon .

Oh kalit! Usba ang pipila ka butang ug sulayi pagsumite pag-usab.

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

Paghatag ug pinakabag-o nga feedback sa pag-uswag sa usa ka workflow o aksyon nga adunay yano apan flexible nga progress bar.

Pagkaangay sa cross-browser

Ang mga progress bar naggamit sa CSS3 nga mga transisyon ug mga animation aron makab-ot ang pipila sa ilang mga epekto. Kini nga mga bahin wala gisuportahan sa Internet Explorer 9 ug sa ubos o mas karaan nga mga bersyon sa Firefox. Ang Opera 12 wala nagsuporta sa mga animation.

Pagkaangay sa Content Security Policy (CSP).

Kung ang imong website adunay Content Security Policy (CSP) nga dili motugot style-src 'unsafe-inline', nan dili ka makagamit sa inline stylenga mga hiyas aron itakda ang mga gilapdon sa progress bar sama sa gipakita sa among mga pananglitan sa ubos. Ang mga alternatibong pamaagi sa pagtakda sa mga gilapdon nga nahiuyon sa estrikto nga mga CSP naglakip sa paggamit ug gamay nga custom JavaScript (nga nagtakda element.style.width) o paggamit sa custom CSS classes.

Panguna nga pananglitan

Default nga progress bar.

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

Uban sa label

Kuhaa ang <span>uban nga .sr-onlyklase gikan sa sulod sa progress bar aron ipakita ang usa ka makita nga porsyento.

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>

Aron masiguro nga ang teksto sa label magpabilin nga mabasa bisan sa gamay nga porsyento, hunahunaa ang pagdugang usa min-widthsa progress bar.

0%

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>

Mga alternatibo sa konteksto

Ang mga progress bar naggamit sa pipila sa parehas nga buton ug alerto nga mga klase alang sa makanunayon nga mga istilo.

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

Kinudlisan

Naggamit og gradient aron makahimo og striped effect. Dili magamit sa IE9 ug sa ubos.

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

Animated

Idugang .activesa .progress-bar-stripedaron ma-animate ang mga labud gikan sa tuo ngadto sa wala. Dili magamit sa IE9 ug sa ubos.

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

Gipatong

Ibutang ang daghang mga bar sa parehas .progressaron i-stack kini.

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

Abstract nga mga estilo sa butang alang sa pagtukod sa lain-laing mga matang sa mga sangkap (sama sa blog comments, Tweets, etc) nga nagpakita sa usa ka wala-o-tuo-aligned nga larawan uban sa teksto nga sulod.

Default nga media

Ang default nga media nagpakita ug media object (mga hulagway, video, audio) sa wala o tuo sa usa ka content block.

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.

Nested nga ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, 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>

Ang mga klase .pull-leftug .pull-rightnaglungtad usab ug gigamit kaniadto isip bahin sa sangkap sa media, apan wala magamit alang sa kana nga paggamit sa v3.3.0. Kini gibana-bana nga katumbas sa .media-leftug .media-right, gawas nga .media-rightkinahanglan ibutang pagkahuman sa .media-bodysa html.

Pag-align sa media

Ang mga hulagway o uban pang media mahimong i-align sa ibabaw, tunga, o ubos. Ang default kay top aligned.

Top aligned nga media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang 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.

Middle aligned nga media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang 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.

Ubos nga linya nga media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang 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>

Listahan sa media

Uban sa gamay nga dugang nga markup, mahimo nimong gamiton ang media sa sulod nga lista (mapuslanon alang sa mga thread sa komento o mga lista sa artikulo).

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.

Nested nga ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.

Nested nga ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis.

Nested nga ulohan sa media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, 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>

Ang mga grupo sa lista usa ka flexible ug gamhanan nga sangkap alang sa pagpakita dili lamang sa yano nga mga lista sa mga elemento, apan mga komplikado nga adunay naandan nga sulud.

Panguna nga pananglitan

Ang pinaka-basic nga grupo sa listahan kay usa lang ka unordered list nga adunay list items, ug ang saktong mga klase. Pagtukod niini uban ang mga kapilian nga nagsunod, o ang imong kaugalingon nga CSS kung gikinahanglan.

Cras justo odio
Dapibus ac facilisis sa
Morbi leo risus
Porta ac consectetur ac
Vestibulum ug eros

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

Mga badge

Idugang ang sangkap sa badge sa bisan unsang butang nga lista sa grupo ug awtomatiko kini nga ibutang sa tuo.

14Cras justo odio
2Dapibus ac facilisis sa
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Gisumpay nga mga butang

I-link ang mga butang sa lista sa grupo pinaagi sa paggamit sa mga tag sa angkla imbes sa mga butang sa lista (nga nagpasabut usab usa ka ginikanan <div>imbis usa ka <ul>). Dili kinahanglan alang sa indibidwal nga mga ginikanan sa palibot sa matag elemento.

Cras justo odio Dapibus ac facilisis sa Morbi leo risus Porta ac consectetur ac Vestibulum ug eros

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

Butang nga butang

Ang mga butang sa lista sa grupo mahimong mga butones imbis nga mga butang sa lista (nga nagpasabut usab usa ka ginikanan <div>imbis usa ka <ul>). Dili kinahanglan alang sa indibidwal nga mga ginikanan sa palibot sa matag elemento. Ayaw gamita ang standard nga .btnmga klase dinhi.

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

Mga butang nga nabaldado

Idugang .disabledsa usa .list-group-itemaron ma-gray kini aron makita nga disabled.

Cras justo odio Dapibus ac facilisis sa Morbi leo risus Porta ac consectetur ac Vestibulum ug eros

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

Mga klase sa konteksto

Gamita ang mga klase sa konteksto sa pag-istilo sa mga butang sa lista, default o na-link. Naglakip usab sa .activeestado.

Dapibus ac facilisis sa
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum ug eros

Dapibus ac facilisis sa Cras sit amet nibh libero Porta ac consectetur ac Vestibulum ug eros

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

Custom nga sulod

Idugang ang halos bisan unsang HTML sa sulod, bisan alang sa mga linked list nga grupo sama sa ubos.

Ilista ang ulohan nga butang sa grupo

Donec id elit non mi porta gravida ug eget metus. Maecenas sed diam eget risus varius blandit.

Ilista ang ulohan nga butang sa grupo

Donec id elit non mi porta gravida ug eget metus. Maecenas sed diam eget risus varius blandit.

Ilista ang ulohan nga butang sa grupo

Donec id elit non mi porta gravida ug eget metus. Maecenas sed diam eget risus varius blandit.

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

Samtang dili kanunay gikinahanglan, usahay kinahanglan nimo nga ibutang ang imong DOM sa usa ka kahon. Alang sa maong mga sitwasyon, sulayi ang panel component.

Panguna nga pananglitan

Sa kasagaran, ang tanan nga .panelbuhaton mao ang paggamit sa pipila ka sukaranan nga utlanan ug padding aron adunay sulud nga sulud.

Pananglitan sa sukaranan nga panel

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel nga adunay ulohan

Sayon nga pagdugang usa ka sulud sa ulohan sa imong panel nga adunay .panel-heading. Mahimo usab nimong iapil ang bisan unsang <h1>- <h6>nga adunay usa ka .panel-titleklase aron makadugang usa ka pre-styled nga ulohan. Bisan pa, ang mga gidak-on sa font sa <h1>- <h6>gi-override sa .panel-heading.

Alang sa hustong pagkolor sa link, siguroha nga ibutang ang mga link sa mga ulohan sulod sa .panel-title.

Ulohan sa panel nga walay titulo

Kontento sa panel

Titulo sa panel

Kontento sa 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 nga adunay footer

I-wrap ang mga buton o sekondaryang teksto sa .panel-footer. Timan-i nga ang mga footer sa panel dili makapanunod sa mga kolor ug mga utlanan kung naggamit sa mga kalainan sa konteksto tungod kay wala kini gituyo nga naa sa foreground.

Kontento sa panel

Footer sa panel

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Mga alternatibo sa konteksto

Sama sa ubang mga sangkap, dali paghimo sa usa ka panel nga mas makahuluganon sa usa ka partikular nga konteksto pinaagi sa pagdugang sa bisan unsang mga klase sa estado sa konteksto.

Titulo sa panel

Kontento sa panel

Titulo sa panel

Kontento sa panel

Titulo sa panel

Kontento sa panel

Titulo sa panel

Kontento sa panel

Titulo sa panel

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

Uban sa mga lamesa

Idugang ang bisan unsang non-bordered .tablesulod sa usa ka panel alang sa usa ka seamless nga disenyo. Kung adunay usa ka .panel-body, magdugang kami og dugang nga utlanan sa ibabaw sa lamesa alang sa pagbulag.

Ulohan sa panel

Pipila ka default nga sulud sa panel dinhi. Nulla vitae elit libero, usa ka pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry	Ang langgam	@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>

Kung walay panel body, ang component mobalhin gikan sa panel header ngadto sa lamesa nga walay hunong.

Ulohan sa panel

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry	Ang langgam	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Uban sa listahan nga mga grupo

Sayon nga ilakip ang bug-os nga gilapdon nga mga grupo sa lista sa sulod sa bisan unsang panel.

Ulohan sa panel

Pipila ka default nga sulud sa panel dinhi. Nulla vitae elit libero, usa ka pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Espesye sa tanom nga bulak ang pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis sa
Morbi leo risus
Porta ac consectetur ac
Vestibulum ug eros

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

Tugoti ang mga browser sa pagdeterminar sa mga dimensyon sa video o slideshow base sa gilapdon sa ilang gisudlan nga block pinaagi sa pagmugna og intrinsic ratio nga hustong mosukod sa bisan unsang device.

Ang mga lagda direktang gigamit sa <iframe>, <embed>, <video>, ug <object>mga elemento; opsyonal nga gamiton ang usa ka tin-aw nga kaliwat nga klase .embed-responsive-itemkung gusto nimo ipares ang estilo para sa ubang mga hiyas.

Pro-Tip! Dili nimo kinahanglan nga ilakip frameborder="0"sa imong <iframe>s ingon nga among gi-override kana alang kanimo.

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

Default nga maayo

Gamita ang atabay isip usa ka yano nga epekto sa usa ka elemento aron mahatagan kini og inset nga epekto.

Tan-awa, naa ko sa atabay!

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

Opsyonal nga mga klase

Kontrola ang padding ug mga rounded corner nga adunay duha ka opsyonal nga mga klase sa modifier.

Tan-awa, naa ko sa dakong atabay!

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

Tan-awa, naa ko sa gamay nga atabay!

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

Mga sangkap

Mga Glyphicon

Magamit nga mga glyph

Unsaon paggamit

Ayaw pagsagol sa ubang mga sangkap

Alang lamang sa paggamit sa walay sulod nga mga elemento

Pag-ilis sa lokasyon sa font sa icon

Ma-access nga mga icon

Mga pananglitan

Mga dropdown

Pananglitan

Pag-align

Mahimong manginahanglan dugang nga posisyon

Wala na gigamit .pull-rightnga paglinya

Mga ulohan

Divider

Gibalda ang mga butang sa menu

Mga grupo sa butones

Ang mga tooltip ug popover sa mga grupo sa butones nanginahanglan espesyal nga setting

Siguroha nga husto roleug paghatag og label

Panguna nga pananglitan

Butang nga toolbar

Pagsukod

Nagsalag

Bertikal nga kalainan

Gipakamatarong nga mga grupo sa buton

Pagdumala sa mga utlanan

IE8 ug mga utlanan

Uban sa <a>mga elemento

Mga link nga naglihok isip mga buton

Uban sa <button>mga elemento

Mga dropdown sa buton

Pagsalig sa plugin

Usa ka butones nga dropdown

Split button dropdowns

Pagsukod

Pagkalainlain sa paghulog

Mga grupo sa input

Textual <input>lang

Ang mga tooltip ug popover sa input nga mga grupo nanginahanglan espesyal nga setting

Ayaw pagsagol sa ubang mga sangkap

Kanunay idugang ang mga label

Panguna nga pananglitan

Pagsukod

Mga checkbox ug mga addon sa radyo

Mga addon sa butones

Mga buton nga adunay mga dropdown

Gibahin nga mga buton

Daghang butones

Nav

Ang paggamit sa navs para sa mga tab panel nanginahanglan ug JavaScript tabs plugin

Himua ang mga nav nga gigamit ingon nabigasyon nga ma-access

Mga tab

Pills

Gipakamatarung

Safari ug responsive nga makatarunganon nga navs

Na-disable nga mga link

Ang pag-andar sa link wala maapektuhan

Paggamit sa mga dropdown

Mga tab nga adunay mga dropdown

Mga pildoras nga adunay mga dropdown

Navbar

Default nga navbar

Nag-awas nga sulod

Nagkinahanglan ug JavaScript plugin

Pag-usab sa nahugno nga mobile navbar breakpoint

Himua nga ma-access ang mga navbar

Imahe sa brand

Mga porma

Mga pasidaan sa mobile device

Kanunay idugang ang mga label

Mga butones

Paggamit nga espesipiko sa konteksto

Text

Non-nav links

Pag-align sa mga sangkap

Tuo nga pag-align sa daghang mga sangkap

Giayo sa ibabaw

Gikinahanglan ang padding sa lawas

Giayo hangtod sa ilawom

Wala na gigamit `.pull-right`nga paglinya

Siguroha nga husto `role`ug paghatag og label

Uban sa `<a>`mga elemento

Uban sa `<button>`mga elemento

Textual `<input>`lang