Glifikonoj

Disponeblaj glifoj

Inkluzivas pli ol 250 glifojn en tiparo de la aro Glyphicon Halflings. Glyphicons Halflings kutime ne haveblas senpage, sed ilia kreinto disponigis ilin por Bootstrap senkoste. Kiel dankon, ni nur petas, ke vi enmetu ligon reen al Glyphicons kiam ajn eblas.

  • glifiko glifiko-asterisko
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glifiko glifiko-nubo
  • glifiko glifiko-koverto
  • glifiko glifiko-krajono
  • glifiko glifiko-vitro
  • glifiko glifiko-muziko
  • glifiko glifiko-serĉo
  • glifiko glifiko-koro
  • glyphicon glyphicon-stelo
  • glifiko glifiko-stelo-malplena
  • glifiko glifiko-uzanto
  • glifiko glifiko-filmo
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glifikon glifikon-th-listo
  • glyphicon glyphicon-ok
  • glifikon glifikon-forigi
  • glyphicon glyphicon-zoom-en
  • glyphicon glyphicon-zoom-malgrandigi
  • glyphicon glyphicon-off
  • glifiko glifiko-signalo
  • glifiko glifiko-kog
  • glyphicon glyphicon-rubo
  • glifiko glifiko-hejmo
  • glifiko glifiko-dosiero
  • glifiko glifiko-tempo
  • glifiko glifiko-vojo
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-elŝuto
  • glyphicon glyphicon-alŝuto
  • glifikono glifikono-enirkesto
  • glifiko glifiko-ludo-rondo
  • glifiko glifiko-ripeto
  • glyphicon glyphicon-refresh
  • glifikon glifikon-list-alt
  • glifiko glifiko-ŝlosilo
  • glifiko glifiko-flago
  • glyphicon glyphicon-aŭdiloj
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-malsupren
  • glyphicon glyphicon-volumen-supren
  • glyphicon glyphicon-qrcode
  • glifiko glifiko-strekokodo
  • glifiko glifiko-etikedo
  • glifikon glifikon-etikedoj
  • glifiko glifiko-libro
  • glifiko glifiko-legosigno
  • glyphicon glyphicon-print
  • glifiko glifiko-fotilo
  • glifiko glifiko-tiparo
  • glyphicon glyphicon-bold
  • glifiko glifiko-kursiva
  • glifiko glifiko-teksto-alteco
  • glifiko glifiko-teksto-larĝo
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glifiko glifiko-listo
  • glifiko glifiko-indent-maldekstre
  • glifiko glifiko-indent-dekstra
  • glyphicon glyphicon-facetime-video
  • glifiko glifiko-bildo
  • glifiko glifiko-mapo-markilo
  • glifiko glifiko-ĝustigi
  • glifiko glifiko-tint
  • glyphicon glyphicon-redakti
  • glyphicon glyphicon-share
  • glifiko glifiko-kontrolo
  • glifiko glifiko-movo
  • glifiko glifiko-paŝo-malantaŭen
  • glifiko glifiko-rapide-malantaŭen
  • glifiko glifiko-malantaŭen
  • glyphicon glyphicon-ludo
  • glifiko glifiko-paŭzo
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-antaŭen
  • glifiko glifiko-rapide antaŭen
  • glifiko glifiko-paŝo-antaŭen
  • glifiko glifiko-elĵeti
  • glifiko glifiko-ĉevron-maldekstre
  • glifiko glifiko-ĉevron-dekstra
  • glifiko glifiko-plus-signo
  • glifiko glifiko-minus-signo
  • glifiko glifiko-forigi-signo
  • glifiko glifiko-ok-signo
  • glifiko glifiko-demando-signo
  • glifiko glifiko-info-signo
  • glifiko glifiko-ekrankopio
  • glifiko glifiko-forigi-cirklo
  • glyphicon glyphicon-ok-cirklo
  • glyphicon glyphicon-malpermeso-cirklo
  • glifiko glifiko-sago-maldekstre
  • glifiko glifiko-sago-dekstra
  • glifiko glifiko-sago-supren
  • glifiko glifiko-sago-malsupren
  • glyphicon glyphicon-share-alt
  • glifiko glifiko-regrandigi-plena
  • glifiko glifiko-regrandigi-malgranda
  • glifiko glifiko-ekkrio-signo
  • glifiko glifiko-donaco
  • glifiko glifiko-folio
  • glyphicon glyphicon-fajro
  • glifiko glifiko-oku-malfermita
  • glifiko glifiko-okulo-fermi
  • glifiko glifiko-averta signo
  • glifiko glifiko-aviadilo
  • glifiko glifiko-kalendaro
  • glyphicon glyphicon-hazarda
  • glifikono glifikono-komento
  • glifiko glifiko-magneto
  • glifiko glifiko-ĉevron-supren
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-butikĉaro
  • glifiko glifiko-dosierujo-fermi
  • glifiko glifiko-dosierujo-malfermu
  • glifiko glifiko-regrandigi-vertikala
  • glifiko glifiko-regrandigi-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glifiko glifiko-sonorilo
  • glyphicon glifikon-atestilo
  • glifikon glifikon-dikfingroj-supren
  • glyphicon glyphicon-thums-down
  • glifiko glifiko-mano-dekstra
  • glifiko glifiko-mano-maldekstre
  • glifiko glifiko-mano-supren
  • glifiko glifiko-mano-malsupren
  • glifiko glifiko-cirklo-sago-dekstra
  • glifiko glifiko-cirklo-sago-maldekstre
  • glifiko glifiko-cirklo-sago-supren
  • glyphicon glyphicon-cirklo-sago-malsupren
  • glifiko glifiko-globo
  • glyphicon glyphicon-ŝlosilo
  • glyphicon glyphicon-taskoj
  • glifiko glifiko-filtrilo
  • glyphicon glyphicon-tetujo
  • glifiko glifiko-plena ekrano
  • glifiko glifiko-panelo
  • glifiko glifiko-klipo
  • glifiko glifiko-koro-malplena
  • glifiko glifiko-ligilo
  • glifiko glifiko-telefono
  • glyphicon glifiko-prempinglo
  • glyphicon glyphicon-usd
  • glifiko glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-ordigo-laŭ-alfabeto
  • glyphicon glyphicon-ordigi-laŭ-alfabeto-alt
  • glyphicon glyphicon-ordigi-laŭ-ordo
  • glyphicon glyphicon-ordigo-laŭ-ordo-alt
  • glyphicon glyphicon-ordigi-laŭ-atributoj
  • glyphicon glyphicon-ordigi-laŭ-atributoj-alt
  • glifiko glifiko-nemarkita
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-kolapso-malsupren
  • glifiko glifiko-kolapso-supren
  • glyphicon glyphicon-ensaluti
  • glifiko glifiko-fulmo
  • glyphicon glyphicon-elsaluti
  • glyphicon glyphicon-nova-fenestro
  • glifiko glifiko-registro
  • glyphicon glyphicon-save
  • glyphicon glyphicon-malfermita
  • glifiko glifiko-konservita
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-sendi
  • glyphicon glyphicon-disketo
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-disketo-malfermita
  • glyphicon glyphicon-kreditkarto
  • glyphicon glyphicon-translokigo
  • glyphicon glyphicon-kutlery
  • glifiko glifiko-kapo
  • glifiko glifiko-kunpremita
  • glyphicon glyphicon-earphone
  • glifiko glifiko-telefono-alt
  • glifiko glifiko-turo
  • glifiko glifiko-statistikoj
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitoloj
  • glifiko glifiko-sono-stereo
  • glyphicon glyphicon-sound-dolby
  • glifiko glifiko-sono-5-1
  • glifiko glifiko-sono-6-1
  • glifiko glifiko-sono-7-1
  • glyphicon glyphicon-kopyright-marko
  • glifiko glifiko-registriĝo-marko
  • glyphicon glyphicon-nubo-elŝuto
  • glyphicon glyphicon-nubo-alŝuto
  • glifiko glifiko-arbo-konifero
  • glifiko glifiko-arbo-decidua
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-konservi dosieron
  • glyphicon glyphicon-malfermi-dosiero
  • glifiko glifiko-nivelo-supren
  • glifiko glifiko-kopio
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alerto
  • glifiko glifiko-egaligilo
  • glifiko glifiko-reĝo
  • glifiko glifiko-reĝino
  • glifiko glifiko-peono
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glifiko glifiko-bebo-formulo
  • glyphicon glyphicon-tendo
  • glifiko glifiko-nigrotabulo
  • glifiko glifiko-lito
  • glifiko glifiko-pomo
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-sablohorloĝo
  • glifiko glifiko-lampo
  • glifiko glifiko-duplika
  • glyphicon glyphicon-piggy-bank
  • glifikono glifikono-tondilo
  • glifiko glifiko-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-eno
  • glyphicon glyphicon-jpy
  • glifiko glifiko-rublo
  • glyphicon glyphicon-froti
  • glifiko glifiko-skalo
  • glyphicon glyphicon-glacia-leksumo
  • glyphicon glifiko-glaci-leksumo-gustita
  • glyphicon glyphicon-edukado
  • glyphicon glyphicon-opcio-horizontala
  • glifiko glifiko-opcio-vertikala
  • glyphicon glyphicon-menuo-hamburgero
  • glifiko glifiko-modala-fenestro
  • glifiko glifiko-oleo
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunokulvitroj
  • glifikono glifikono-teksto-grandeco
  • glifiko glifiko-teksto-koloro
  • glifiko glifiko-teksto-fono
  • glifiko glifiko-objekto-align-supro
  • glifiko glifiko-objekto-vicigi-fundo
  • glifiko glifiko-objekto-vicigi-horizontala
  • glifiko glifiko-objekto-vicigi-maldekstre
  • glifiko glifiko-objekto-vicigi-vertikala
  • glifiko glifiko-objekto-vicigi-dekstre
  • glifiko glifiko-triangulo-dekstra
  • glifiko glifiko-triangulo-maldekstre
  • glifiko glifiko-triangula-fundo
  • glifiko glifiko-triangula-supro
  • glyphicon glyphicon-konzolo
  • glifiko glifiko-superskribo
  • glifiko glifiko-subskribo
  • glifiko glifiko-menuo-maldekstre
  • glifiko glifiko-menuo-dekstra
  • glyphicon glyphicon-menu-malsupren
  • glifiko glifiko-menuo-supren

Kiel uzi

Pro agado-kialoj, ĉiuj ikonoj postulas bazan klason kaj individuan ikonklason. Por uzi, metu la sekvan kodon preskaŭ ie ajn. Nepre lasu spacon inter la ikono kaj teksto por taŭga kompletigo.

Ne miksu kun aliaj komponantoj

Ikonoklasoj ne povas esti rekte kombinitaj kun aliaj komponantoj. Ili ne estu uzataj kune kun aliaj klasoj sur la sama elemento. Anstataŭe, aldonu nestitan <span>kaj apliku la ikonklasojn al la <span>.

Nur por uzo sur malplenaj elementoj

Ikonoklasoj devus esti uzataj nur sur elementoj kiuj enhavas neniun tekstan enhavon kaj havas neniujn filajn elementojn.

Ŝanĝante la ikonan tiparolokon

Bootstrap supozas ke ikonotiparaj dosieroj troviĝos en la ../fonts/dosierujo, rilate al la kompilitaj CSS-dosieroj. Movi aŭ renomi tiujn tipardosierojn signifas ĝisdatigi la CSS en unu el tri manieroj:

  • Ŝanĝu la @icon-font-pathkaj/aŭ @icon-font-namevariablojn en la fonto Malpli dosieroj.
  • Uzu la opcion de relativaj URL provizitaj de la Less-kompililo.
  • Ŝanĝu la url()vojojn en la kompilita CSS.

Uzu kian ajn elekton plej taŭgas por via specifa disvolva agordo.

Alireblaj ikonoj

Modernaj versioj de helpaj teknologioj anoncos CSS generitan enhavon, same kiel specifajn Unikodajn signojn. Por eviti neintencitan kaj konfuzan eliron en ekranlegiloj (precipe kiam ikonoj estas uzataj nur por ornamado), ni kaŝas ilin per la aria-hidden="true"atributo.

Se vi uzas ikonon por transdoni signifon (anstataŭ nur kiel ornama elemento), certigu, ke ĉi tiu signifo ankaŭ estas transdonita al helpaj teknologioj - ekzemple, inkludu plian enhavon, videble kaŝitan kun la .sr-onlyklaso.

Se vi kreas kontrolojn kun neniu alia teksto (kiel ekzemple <button>kiu enhavas nur ikonon), vi ĉiam devus provizi alternativan enhavon por identigi la celon de la kontrolo, por ke ĝi havu sencon por uzantoj de helpaj teknologioj. En ĉi tiu kazo, vi povus aldoni aria-labelatributon al la kontrolo mem.

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

Ekzemploj

Uzu ilin en butonoj, butongrupoj por ilobreto, navigado aŭ antaŭmetitaj formularenigaĵoj.

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

Ikono uzata en atentigo por sciigi, ke ĝi estas erarmesaĝo, kun plia .sr-onlyteksto por transdoni ĉi tiun sugeston al uzantoj de helpaj teknologioj.

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

Dropdowns

Ŝaltigebla, kunteksta menuo por montri listojn de ligiloj. Farita interaga kun la falmenuo JavaScript-kromaĵo .

Envolvu la ellasilon de la falmenuo kaj la falmenuon ene de .dropdown, aŭ alia elemento kiu deklaras position: relative;. Poste aldonu la HTML de la menuo.

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

Falmenuoj povas esti ŝanĝitaj por pligrandigi supren (anstataŭ malsupren) per aldonado .dropupal la gepatro.

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

Defaŭlte, falmenuo estas aŭtomate poziciigita 100% de la supro kaj laŭ la maldekstra flanko de sia gepatro. Aldonu .dropdown-menu-rightal .dropdown-menudekstre vicigi la falmenuon.

Povas postuli plian pozicion

Dropdowns estas aŭtomate poziciigitaj per CSS ene de la normala fluo de la dokumento. Ĉi tio signifas, ke gemenuoj povas esti tranĉitaj de gepatroj kun certaj overflowtrajtoj aŭ aperi ekster limoj de la vidfenestro. Pritraktu ĉi tiujn problemojn memstare kiam ili aperas.

Malrekomendita .pull-rightvicigo

Ekde v3.1.0, ni malrekomendis .pull-rightla falmenuojn. Por dekstre vicigi menuon, uzu .dropdown-menu-right. Dekstre vicigitaj navkomponentoj en la navigadbreto uzas miksan version de ĉi tiu klaso por aŭtomate vicigi la menuon. Por anstataŭi ĝin, uzu .dropdown-menu-left.

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

Aldonu kaplinion por etikedi sekciojn de agoj en iu ajn falmenuo.

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

Aldonu dividilon por apartigi seriojn de ligiloj en falmenuo.

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

Aldonu .disabledal <li>en la menuo por malŝalti la ligilon.

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

Butongrupoj

Grupigu serion da butonoj kune sur unu linio kun la butongrupo. Aldonu laŭvolan JavaScript-radion kaj markobuton-stilan konduton per nia butonaldonaĵo .

Konsiletoj kaj popovers en butongrupoj postulas specialan agordon

Kiam vi uzas konsiletojn aŭ popovers sur elementoj ene de .btn-group, vi devos specifi la opcion container: 'body'por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/aŭ perdi siajn rondigitajn angulojn kiam la ilotip aŭ popover estas ekigita).

Certigu korekta rolekaj provizi etikedon

Por ke helpaj teknologioj - kiel ekranlegiloj - peri ke serio de butonoj estas grupigitaj, taŭga roleatributo devas esti provizita. Por butongrupoj, ĉi tio estus role="group", dum ilobretoj devus havi role="toolbar".

Unu escepto estas grupoj kiuj enhavas nur ununuran kontrolon (ekzemple la pravigitaj butongrupoj kun <button>elementoj) aŭ falmenuon.

Krome, grupoj kaj ilobretoj devus ricevi eksplicitan etikedon, ĉar la plej multaj helpaj teknologioj alie ne anoncos ilin, malgraŭ la ĉeesto de la ĝusta roleatributo. En la ekzemploj provizitaj ĉi tie, ni uzas aria-label, sed alternativoj kiel ekzemple aria-labelledbyankaŭ povas esti uzataj.

Baza ekzemplo

Envolvu serion da butonoj per .btnen .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>

Butona ilobreto

Kombinu arojn <div class="btn-group">en a <div class="btn-toolbar">por pli kompleksaj komponantoj.

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

Dimensio

Anstataŭ apliki butonajn grandecoklasojn al ĉiu butono en grupo, simple aldonu .btn-group-*al ĉiu .btn-group, inkluzive kiam nestumas plurajn grupojn.




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

Nesto

Metu a .btn-groupen alian .btn-groupkiam vi volas falmenuojn miksitajn kun serio de butonoj.

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

Vertikala variado

Faru aron da butonoj aperi vertikale stakitaj prefere ol horizontale. Dividitaj butonfalumoj ne estas subtenataj ĉi tie.

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

Pravigitaj butongrupoj

Faru grupon de butonoj etendiĝi je egalaj grandecoj por etendi la tutan larĝon de sia gepatro. Ankaŭ funkcias kun butonfalumoj ene de la butongrupo.

Pritrakti landlimojn

Pro la specifaj HTML kaj CSS uzataj por pravigi butonojn (nome display: table-cell), la limoj inter ili estas duobligitaj. En regulaj butongrupoj, margin-left: -1pxestas uzata por stakigi la randojn anstataŭ forigi ilin. Tamen, marginne funkcias kun display: table-cell. Rezulte, depende de viaj personigoj al Bootstrap, vi eble volas forigi aŭ rekolorigi la randojn.

IE8 kaj limoj

Interreto Explorer 8 ne bildigas randojn sur butonoj en pravigita butongrupo, ĉu ĝi estas ŝaltita <a><button>elementoj. Por ĉirkaŭiri tion, envolvu ĉiun butonon en alian .btn-group.

Vidu #12476 por pliaj informoj.

Kun <a>elementoj

Nur envolvu serion de .btns en .btn-group.btn-group-justified.

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

Ligiloj agante kiel butonoj

Se la <a>elementoj estas uzataj por funkcii kiel butonoj - ekigante enpaĝan funkcion, anstataŭ navigi al alia dokumento aŭ sekcio ene de la nuna paĝo - ili ankaŭ devus ricevi taŭgan role="button".

Kun <button>elementoj

Por uzi pravigitajn butongrupojn kun <button>elementoj, vi devas envolvi ĉiun butonon en butongrupon . Plej multaj retumiloj ne taŭge aplikas nian CSS por pravigo al <button>elementoj, sed ĉar ni subtenas butonfalumojn, ni povas ĉirkaŭlabori tion.

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

Butonfalumoj

Uzu ajnan butonon por ekigi falmenuon metante ĝin ene de a .btn-groupkaj disponigante la taŭgan menuan markadon.

Dependeco de kromprogramoj

Butonaj falmenuoj postulas, ke la falmenuo-kromaĵo estu inkluzivita en via versio de Bootstrap.

Ununura butono falmenuoj

Transformu butonon en falmenuman baskulon kun iuj bazaj markadaj ŝanĝoj.

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

Dividi butonajn menuojn

Simile, kreu dividitajn butonajn falmenuojn kun la samaj markaj ŝanĝoj, nur per aparta butono.

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

Dimensio

Butonfalumoj funkcias kun butonoj de ĉiuj grandecoj.

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

Ekfunkciigu falmenuojn super elementoj aldonante .dropupal la gepatro.

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

Eniggrupoj

Plilongigu formularajn kontrolojn aldonante tekston aŭ butonojn antaŭ, post aŭ ambaŭflanke de iu tekst-bazita <input>. Uzu .input-groupkun .input-group-addon.input-group-btnpor antaŭmeti aŭ almeti elementojn al unuopa .form-control.

Nur tekstaj <input>s

Evitu uzi <select>elementojn ĉi tie ĉar ili ne povas esti plene stilitaj en WebKit-retumiloj.

Evitu uzi <textarea>elementojn ĉi tie ĉar ilia rowsatributo ne estos respektata en iuj kazoj.

Konsiletoj kaj popovers en eniggrupoj postulas specialan agordon

Kiam vi uzas konsiletojn aŭ popovers sur elementoj ene de .input-group, vi devos specifi la opcion container: 'body'por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/aŭ perdi siajn rondigitajn angulojn kiam la ilotip aŭ popover estas ekigita).

Ne miksu kun aliaj komponantoj

Ne miksu formgrupojn aŭ kradkolumnklasojn rekte kun eniggrupoj. Anstataŭe, nestu la eniggrupon interne de la formogrupo aŭ krad-rilata elemento.

Ĉiam aldonu etikedojn

Ekranlegiloj havos problemojn kun viaj formoj se vi ne inkluzivas etikedon por ĉiu enigo. Por ĉi tiuj eniggrupoj, certigu, ke ajna aldona etikedo aŭ funkcieco estas transdonita al helpaj teknologioj.

La preciza tekniko uzota (videblaj <label>elementoj, <label>elementoj kaŝitaj uzante la .sr-onlyklason, aŭ uzo de la aria-label, aria-labelledby, aria-describedby, titleplaceholderatributo) kaj kiaj aldonaj informoj devos esti transdonitaj varias depende de la preciza speco de interfaca fenestraĵo, kiun vi efektivigas. La ekzemploj en ĉi tiu sekcio disponigas kelkajn proponitajn, kaz-specifajn alirojn.

Baza ekzemplo

Metu unu aldonaĵon aŭ butonon ambaŭflanke de enigo. Vi ankaŭ povas meti unu ambaŭflanke de enigo.

Ni ne subtenas plurajn aldonaĵojn ( .input-group-addon.input-group-btn) unuflanke.

Ni ne subtenas plurajn formularajn kontrolojn en ununura eniga grupo.

@

@ekzemplo.com

$ .00

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>

Dimensio

Aldonu la relativajn formo-grandecklasojn al la .input-groupmem kaj enhavo ene aŭtomate regrandiĝos—ne necesas ripeti la formo-kontrolgrandecklasojn sur ĉiu 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>

Markobutonoj kaj radioaldonaĵoj

Metu ajnan markobutonon aŭ radio-opcion en la aldonaĵon de eniga grupo anstataŭ tekston.

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

Butonaj aldonaĵoj

Butonoj en eniggrupoj estas iom malsamaj kaj postulas unu ekstran nivelon de nestado. Anstataŭ .input-group-addon, vi devos uzi .input-group-btnpor envolvi la butonojn. Ĉi tio estas postulata pro defaŭltaj retumstiloj, kiuj ne povas esti anstataŭitaj.

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

Butonoj kun falmenuoj

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

Segmentitaj butonoj

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

Multoblaj butonoj

Dum vi povas nur havi unu aldonaĵon per flanko, vi povas havi plurajn butonojn ene de unu .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>

Navs

Navs disponeblaj en Bootstrap havas komunan markadon, komencante de la baza .navklaso, same kiel komunaj ŝtatoj. Interŝanĝu modifklasojn por ŝanĝi inter ĉiu stilo.

Uzado de navs por langetaj paneloj postulas JavaScript-langetojn-kromaĵon

Por langetoj kun tabulaj areoj, vi devas uzi la langetojn JavaScript-kromaĵon . La markado ankaŭ postulos kromajn rolekaj ARIA-atributojn - vidu la ekzemplan markadon de la kromaĵo por pliaj detaloj.

Faru navigaciojn uzatajn kiel navigado alirebla

Se vi uzas navs por provizi navigadbreton, nepre aldonu role="navigation"al la plej logika gepatra ujo de la <ul>, aŭ envolvu <nav>elementon ĉirkaŭ la tuta navigado. Ne aldonu la rolon al la <ul>mem, ĉar tio malhelpus ĝin esti anoncita kiel reala listo de helpaj teknologioj.

Notu, ke la .nav-tabsklaso postulas la .navbazan klason.

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

Prenu tiun saman HTML, sed uzu .nav-pillsanstataŭe:

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

Piloloj ankaŭ estas vertikale stakeblaj. Nur aldonu .nav-stacked.

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

Facile faru langetojn aŭ pilolojn egalajn larĝojn de sia gepatro ĉe ekranoj pli larĝaj ol 768px kun .nav-justified. Sur pli malgrandaj ekranoj, la nav-ligiloj estas stakigitaj.

Pravigitaj navbar nav-ligiloj nuntempe ne estas subtenataj.

Safaro kaj respondemaj pravigitaj navigacioj

Ekde v9.1.2, Safaro montras cimon en kiu regrandigi vian retumilon horizontale kaŭzas bildigajn erarojn en la pravigita navigado, kiuj estas forigitaj post refreŝiĝo. Ĉi tiu cimo ankaŭ estas montrita en la pravigita nav-ekzemplo .

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

Por iu ajn navkomponento (langetoj aŭ piloloj), aldonu .disabledpor grizaj ligiloj kaj neniuj ŝvebaj efikoj .

Ligfunkcio ne tuŝita

Ĉi tiu klaso ŝanĝos nur la <a>aspekton de la ', ne ĝian funkcion. Uzu kutiman JavaScript por malŝalti ligilojn ĉi tie.

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

Aldonu falmenuojn kun iom kroma HTML kaj la falmenuojn JavaScript kromaĵo .

Langetoj kun falmenuoj

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

Piloloj kun falmenuoj

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

Navbaro

Navbaroj estas respondemaj metakomponentoj, kiuj funkcias kiel navigaj kaplinioj por via aplikaĵo aŭ retejo. Ili komencas kolapsitaj (kaj estas ŝanĝeblaj) en moveblaj vidoj kaj iĝas horizontalaj kiam la disponebla vidfenestro-larĝo pliiĝas.

Pravigitaj navbar nav-ligiloj nuntempe ne estas subtenataj.

Superflua enhavo

Ĉar Bootstrap ne scias kiom da spaco bezonas la enhavo en via navdrinkejo, vi eble renkontos problemojn kun enhavo envolvita en duan vicon. Por solvi ĉi tion, vi povas:

  1. Redukti la kvanton aŭ larĝon de navbar-eroj.
  2. Kaŝi certajn navbarajn erojn ĉe certaj ekrangrandoj uzante respondemajn utilajn klasojn .
  3. Ŝanĝu la punkton, ĉe kiu via navbar ŝanĝas inter kolapsita kaj horizontala reĝimo. Agordu la @grid-float-breakpointvariablon aŭ aldonu vian propran amaskomunikilan demandon.

Postulas JavaScript-kromaĵon

Se JavaScript estas malŝaltita kaj la vidfenestro estas sufiĉe mallarĝa por ke la navigadbreto kolapsas, estos neeble vastigi la navigadbreton kaj vidi la enhavon ene de la .navbar-collapse.

La respondema navbar postulas ke la kolapsa kromaĵo estu inkluzivita en via versio de Bootstrap.

Ŝanĝante la kolapsitan poŝtelefonan navbar-romppunkton

La navbar kolapsas en sian vertikalan moveblan vidon kiam la vidfenestro estas pli mallarĝa ol @grid-float-breakpoint, kaj disetendiĝas en sian horizontalan ne-poŝtelefonan vidon kiam la vidfenestro estas almenaŭ @grid-float-breakpointen larĝo. Alĝustigu ĉi tiun variablon en la Malpli fonto por kontroli kiam la navbar kolapsas/vastiĝas. La defaŭlta valoro estas 768px(la plej malgranda "malgranda" aŭ "tablojdo") ekrano).

Faru navbarojn alireblaj

Nepre uzu <nav>elementon aŭ, se vi uzas pli senmarkan elementon kiel ekzemple <div>, aldonu a role="navigation"al ĉiu navbar por eksplicite identigi ĝin kiel grava regiono por uzantoj de helpaj teknologioj.

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

Anstataŭigu la navbarmarkon per via propra bildo interŝanĝante la tekston por <img>. Ĉar la .navbar-brandhavas sian propran remburaĵon kaj altecon, eble vi devos anstataŭi iujn CSS depende de via bildo.

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

Metu formenhavon interne .navbar-formpor taŭga vertikala vicigo kaj kolapsitan konduton en mallarĝaj vidfenestroj. Uzu la alineajn opciojn por decidi kie ĝi loĝas ene de la navbar enhavo.

Kiel atentigo, .navbar-formdividas grandan parton de sia kodo .form-inlineper mixin. Iuj formularaj kontroloj, kiel eniggrupoj, povas postuli fiksajn larĝojn aperigi ĝuste ene de navigadbreto.

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

Avertoj pri poŝtelefonoj

Estas kelkaj avertoj pri uzado de formularaj kontroloj ene de fiksaj elementoj en porteblaj aparatoj. Vidu nian retumilon subtendokumentojn por detaloj.

Ĉiam aldonu etikedojn

Ekranlegiloj havos problemojn kun viaj formoj se vi ne inkluzivas etikedon por ĉiu enigo. Por ĉi tiuj enliniaj formoj, vi povas kaŝi la etikedojn uzante la .sr-onlyklason. Ekzistas pliaj alternativaj metodoj provizi etikedon por helpaj teknologioj, kiel ekzemple la aria-label, aria-labelledbytitleatributo. Se neniu el ĉi tiuj ĉeestas, ekranlegantoj povas uzi la placeholderatributon, se ĉeestas, sed notu ke uzo de placeholderkiel anstataŭaĵo por aliaj etikedmetodoj ne estas konsilita.

Aldonu la .navbar-btnklason al <button>elementoj ne loĝantaj en a <form>por vertikale centri ilin en la navbar.

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

Kuntekst-specifa uzado

Kiel la normaj butonklasoj , .navbar-btnpovas esti uzata sur <a>kaj <input>elementoj. Tamen, .navbar-btnnek la normaj butonklasoj devus esti uzataj sur <a>elementoj ene de .navbar-nav.

Envolvu ŝnurojn de teksto en elemento kun .navbar-text, kutime sur <p>etikedo por ĝusta gvidado kaj koloro.

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

Por homoj uzantaj normajn ligilojn, kiuj ne estas ene de la regula navigad-naviga komponento, uzu la .navbar-linkklason por aldoni la taŭgajn kolorojn por la defaŭltaj kaj inversaj navbar-opcioj.

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

Vicigu nav-ligilojn, formojn, butonojn aŭ tekston, uzante la .navbar-left.navbar-rightutilajn klasojn. Ambaŭ klasoj aldonos CSS-flosilon en la specifita direkto. Ekzemple, por vicigi nav-ligilojn, metu ilin en apartan <ul>kun la respektiva utila klaso aplikita.

Ĉi tiuj klasoj estas miksitaj versioj de .pull-leftkaj .pull-right, sed ili estas ampleksitaj al amaskomunikilaj demandoj por pli facila uzado de navbar-komponentoj trans aparataj grandecoj.

Dekstre vicigante plurajn komponantojn

Navbars nuntempe havas limigon kun pluraj .navbar-rightklasoj. Por ĝuste spacigi enhavon, ni uzas negativan marĝenon sur la lasta .navbar-rightelemento. Kiam ekzistas pluraj elementoj uzantaj tiun klason, ĉi tiuj marĝenoj ne funkcias kiel celite.

Ni revizitos ĉi tion kiam ni povos reverki tiun komponanton en v4.

Aldonu .navbar-fixed-topkaj inkluzivu .container.container-fluidal centro kaj kuseneto navbar enhavo.

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

Korpa remburaĵo necesas

La fiksita navbaro supermetos vian alian enhavon, krom se vi aldonos paddingal la supro de la <body>. Provu viajn proprajn valorojn aŭ uzu nian fragmenton sube. Konsilo: Defaŭlte, la navigadbreto estas 50px alta.

body { padding-top: 70px; }

Certiĝu inkluzivi ĉi tion post la kerno Bootstrap CSS.

Aldonu .navbar-fixed-bottomkaj inkluzivu .container.container-fluidal centro kaj kuseneto navbar enhavo.

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

Korpa remburaĵo necesas

La fiksita navbreto supermetos vian alian enhavon, krom se vi aldonos paddingal la malsupro de la <body>. Provu viajn proprajn valorojn aŭ uzu nian fragmenton sube. Konsilo: Defaŭlte, la navigadbreto estas 50px alta.

body { padding-bottom: 70px; }

Certiĝu inkluzivi ĉi tion post la kerno Bootstrap CSS.

Kreu plenlarĝan navbaron, kiu rulumas for kun la paĝo aldonante .navbar-static-topkaj inkluzivi .container.container-fluidal centra kaj kuseneto navbar enhavo.

Male al la .navbar-fixed-*klasoj, vi ne bezonas ŝanĝi ajnan kompletigo sur la body.

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

Modifi la aspekton de la navbar aldonante .navbar-inverse.

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

Panpecetoj

Indiku la lokon de la aktuala paĝo ene de navigacia hierarkio.

Apartigiloj estas aŭtomate aldonitaj en CSS per :beforekaj content.

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

Paĝigo

Provizu paĝigajn ligilojn por via retejo aŭ aplikaĵo per la plurpaĝa paĝiga komponanto, aŭ la pli simpla paĝiga alternativo .

Defaŭlta paĝigo

Simpla paĝigo inspirita de Rdio, bonega por programoj kaj serĉrezultoj. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.

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

Etikedado de la paĝiga komponanto

La paĝiga komponanto devas esti envolvita en <nav>elemento por identigi ĝin kiel navigada sekcio por ekranlegantoj kaj aliaj helpaj teknologioj. Krome, ĉar paĝo verŝajne jam havas pli ol unu tian navigadan sekcion (kiel la ĉefa navigado en la kaplinio aŭ flanka navigado), estas konsilinde provizi priskriban aria-labelpor la <nav>kiu reflektas ĝian celon. Ekzemple, se la paĝiga komponanto estas uzata por navigi inter aro de serĉrezultoj, taŭga etikedo povus esti aria-label="Search results pages".

Malfunkciigitaj kaj aktivaj ŝtatoj

Ligiloj estas agordeblaj por malsamaj cirkonstancoj. Uzu .disabledpor neklakeblaj ligiloj kaj .activepor indiki la nunan paĝon.

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

Ni rekomendas ke vi interŝanĝu aktivajn aŭ malebligitajn ankrojn por <span>, aŭ preterlasu la ankron en la kazo de la antaŭaj/sekvaj sagoj, por forigi klakfunkciecon konservante celitajn stilojn.

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

Dimensio

Ĉu vi volas pli grandan aŭ pli malgrandan paĝigon? Aldonu .pagination-lg.pagination-smpor pliaj grandecoj.

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

Televokilo

Rapidaj antaŭaj kaj sekvaj ligiloj por simplaj paĝigaj efektivigoj kun malpeza markado kaj stiloj. Ĝi estas bonega por simplaj retejoj kiel blogoj aŭ revuoj.

Defaŭlta ekzemplo

Defaŭlte, la paginador centras ligilojn.

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

Alternative, vi povas vicigi ĉiun ligilon al la flankoj:

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

Laŭvola malfunkciigita ŝtato

Pager-ligiloj ankaŭ uzas la ĝeneralan .disabledutilecan klason de la paĝigo.

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

Etikedoj

Ekzemplo

Ekzempla titolo Nova

Ekzempla titolo Nova

Ekzempla titolo Nova

Ekzempla titolo Nova

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

Disponeblaj variadoj

Aldonu iun el la sube menciitaj modifklasoj por ŝanĝi la aspekton de etikedo.

Defaŭlta Primara Sukcesa Informo Averto Danĝero
<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>

Ĉu vi havas tunojn da etikedoj?

Problemoj de bildado povas aperi kiam vi havas dekojn da enliniaj etikedoj ene de mallarĝa ujo, ĉiu enhavante sian propran inline-blockelementon (kiel ikono). La vojo ĉirkaŭ ĉi tio fiksiĝas display: inline-block;. Por kunteksto kaj ekzemplo, vidu #13219 .

Insignoj

Facile reliefigu novajn aŭ nelegitajn erojn aldonante <span class="badge">al ligiloj, Bootstrap-nav-ojn kaj pli.

Enirkesto42

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

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

Mem kolapsanta

Kiam ne estas novaj aŭ nelegitaj eroj, insignoj simple kolapsos (per la :emptyelektilo de CSS) kondiĉe ke neniu enhavo ekzistas ene.

Inter-retumila kongruo

Insignoj ne mem kolapsos en Internet Explorer 8 ĉar mankas subteno por la :emptyelektilo.

Adaptiĝas al aktivaj navigaj statoj

Enkonstruitaj stiloj estas inkluzivitaj por meti insignojn en aktivajn ŝtatojn en pilo-navigacioj.

<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

Malpeza, fleksebla komponanto, kiu povas laŭvole etendi la tutan vidpunkton por montri ŝlosilan enhavon en via retejo.

Saluton mondo!

Ĉi tio estas simpla herounuo, simpla jumbotron-stila komponento por nomi ekstran atenton al elstara enhavo aŭ informoj.

Lernu pli

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

Por fari la jumbotron plenan larĝon, kaj sen rondigitaj anguloj, metu ĝin ekster ĉiuj .containers kaj anstataŭe aldonu .containerene.

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

Paĝa kaplinio

Simpla ŝelo por h1taŭge interspacigi kaj segmenti sekciojn de enhavo sur paĝo. Ĝi povas utiligi la h1defaŭltan smallelementon, same kiel plej multajn aliajn komponantojn (kun pliaj stiloj).

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

Bildetojn

Etendi la kradsistemon de Bootstrap kun la bildeto-komponento por facile montri kradojn de bildoj, filmetoj, tekstoj kaj pli.

Se vi serĉas Pinterest-similan prezenton de bildetoj de diversaj altecoj kaj/aŭ larĝoj, vi devos uzi aldonaĵon de triaj kiel ekzemple Masonry , Isotope , aŭ Salvattore .

Defaŭlta ekzemplo

Defaŭlte, la bildetoj de Bootstrap estas dizajnitaj por montri ligitajn bildojn kun minimuma postulata markado.

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

Propra enhavo

Kun iom da ekstra markado, eblas aldoni ajnan specon de HTML-enhavo kiel titoloj, alineoj aŭ butonoj en bildetojn.

100% x 200

Bildeto-etikedo

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.

Butono Butono

100% x 200

Bildeto-etikedo

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.

Butono Butono

100% x 200

Bildeto-etikedo

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.

Butono Butono

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

Atentigoj

Provizu kontekstajn sugestajn mesaĝojn por tipaj uzant-agoj per la manpleno da disponeblaj kaj flekseblaj atentaj mesaĝoj.

Ekzemploj

Envolvu ajnan tekston kaj laŭvolan forĵetbutonon en .alertkaj unu el la kvar kuntekstaj klasoj (ekz. .alert-success) por bazaj atentaj mesaĝoj.

Neniu defaŭlta klaso

Atentigoj ne havas defaŭltajn klasojn, nur bazajn kaj modifklasojn. Defaŭlta griza alarmo ne havas tro da senco, do vi devas specifi tipon per kunteksta klaso. Elektu el sukceso, informoj, averto aŭ danĝero.

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

Malakcepteblaj atentigoj

Konstruu sur iu ajn atentigo aldonante laŭvolan .alert-dismissiblekaj fermbutonon.

Postulas JavaScript-alertan kromprogramon

Por plene funkciaj, malakcepteblaj atentigoj, vi devas uzi la alarmojn JavaScript-kromaĵon .

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

Certigu taŭgan konduton tra ĉiuj aparatoj

Nepre uzu la <button>elementon kun la data-dismiss="alert"datuma atributo.

Uzu la .alert-linkutilan klason por rapide provizi kongruajn kolorajn ligilojn ene de ajna atentigo.

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

Progresaj stangoj

Provizu ĝisdatigitajn komentojn pri la progreso de laborfluo aŭ ago per simplaj sed flekseblaj progresbrikoj.

Inter-retumila kongruo

Progresdrinkejoj uzas CSS3-transirojn kaj kuraĝigojn por atingi kelkajn el siaj efikoj. Ĉi tiuj funkcioj ne estas subtenataj en Internet Explorer 9 kaj sub aŭ pli malnovaj versioj de Firefox. Opera 12 ne subtenas kuraĝigojn.

Kongruo pri Enhava Sekurecpolitiko (CSP).

Se via retejo havas Enhavan Sekurecpolitikon (CSP) kiu ne permesas style-src 'unsafe-inline', tiam vi ne povos uzi enliniajn styleatributojn por agordi larĝojn de progresbreto kiel montrite en niaj ekzemploj sube. Alternativaj metodoj por agordi la larĝojn, kiuj estas kongruaj kun striktaj CSP-oj, inkluzivas uzi iom laŭmendan JavaScript (tio starigas element.style.width) aŭ uzi kutimajn CSS-klasojn.

Baza ekzemplo

Defaŭlta progresbreto.

60% Kompleta
<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>

Kun etikedo

Forigu la <span>kun .sr-onlyklason el la progresbreto por montri videblan procenton.

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>

Por certigi, ke la etikedo teksto restas legebla eĉ por malaltaj procentoj, konsideru aldoni a min-widthal la progresbreto.

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>

Kuntekstaj alternativoj

Progresbrikoj uzas iujn el la samaj butonoj kaj atentaj klasoj por konsekvencaj stiloj.

40% Kompleta (sukceso)
20% Kompleta
60% Kompleta (averto)
80% Kompleta (danĝero)
<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>

Striita

Uzas gradienton por krei strian efikon. Ne havebla en IE9 kaj sube.

40% Kompleta (sukceso)
20% Kompleta
60% Kompleta (averto)
80% Kompleta (danĝero)
<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>

Vigla

Aldonu .activeal .progress-bar-stripedpor animi la striojn dekstren al maldekstre. Ne havebla en IE9 kaj sube.

45% Kompleta
<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>

Stakitaj

Metu plurajn stangojn en la saman .progresspor staki ilin.

35% Kompleta (sukceso)
20% Kompleta (averto)
10% Kompleta (danĝero)
<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>

Media objekto

Abstraktaj objektostiloj por konstrui diversajn specojn de komponantoj (kiel blogaj komentoj, Tweets, ktp) kiuj prezentas maldekstren aŭ dekstren vicigitan bildon kune kun teksta enhavo.

Defaŭlta amaskomunikilaro

La defaŭlta amaskomunikilaro montras amaskomunikilaron (bildojn, vidbendon, aŭdion) maldekstre aŭ dekstre de enhavbloko.

Media titolo

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media titolo

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nestitaj amaskomunikiloj titolo

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media titolo

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

Media titolo

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

La klasoj .pull-leftkaj .pull-rightankaŭ ekzistas kaj antaŭe estis uzataj kiel parto de la amaskomunikilaro, sed estas malrekomenditaj por tiu uzo ekde v3.3.0. Ili estas proksimume ekvivalentaj al .media-leftkaj .media-right, krom tio .media-rightdevus esti metitaj post la .media-bodyen la html.

Media vicigo

La bildoj aŭ aliaj rimedoj povas esti vicigitaj supre, meze aŭ malsupre. La defaŭlto estas supre vicigita.

Supraj vicigitaj amaskomunikiloj

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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.

Meza vicigita amaskomunikilaro

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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.

Malsupre vicigita amaskomunikilaro

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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>

Listo de amaskomunikiloj

Kun iom da ekstra markado, vi povas uzi amaskomunikilaron ene de listo (utila por komentfadenoj aŭ artikoloj-listoj).

  • Media titolo

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

    Nestitaj amaskomunikiloj titolo

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

    Nestitaj amaskomunikiloj titolo

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

    Nestitaj amaskomunikiloj titolo

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

Listo grupo

Listogrupoj estas fleksebla kaj potenca komponanto por montri ne nur simplajn listojn de elementoj, sed kompleksajn kun kutima enhavo.

Baza ekzemplo

La plej baza listogrupo estas simple neordigita listo kun listeroj, kaj la taŭgaj klasoj. Konstruu sur ĝi per la ebloj kiuj sekvas, aŭ via propra CSS laŭbezone.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulo ĉe 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>

Insignoj

Aldonu la komponenton de insignoj al iu ajn listgrupo kaj ĝi estos aŭtomate poziciigita dekstre.

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Ligitaj eroj

Ligi listgrupajn erojn uzante ankrajn etikedojn anstataŭ listaĵojn (tio ankaŭ signifas gepatron <div>anstataŭ <ul>). Ne necesas individuaj gepatroj ĉirkaŭ ĉiu elemento.

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

Butonaj eroj

Listo-grupo-eroj povas esti butonoj anstataŭ list-eroj (tio ankaŭ signifas gepatron <div>anstataŭ <ul>). Ne necesas individuaj gepatroj ĉirkaŭ ĉiu elemento. Ne uzu la normajn .btnklasojn ĉi tie.

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

Malebligitaj eroj

Aldonu .disabledal .list-group-itempor grizi ĝin por aperi malŝaltita.

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

Kuntekstaj klasoj

Uzu kuntekstajn klasojn por stiligi listaĵojn, defaŭltajn aŭ ligitajn. Ankaŭ inkluzivas .activeŝtaton.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulo ĉe 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>

Propra enhavo

Aldonu preskaŭ ajnan HTML ene, eĉ por ligitaj listogrupoj kiel tiu ĉi sube.

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

Paneloj

Kvankam ne ĉiam necesas, foje vi devas meti vian DOM en skatolon. Por tiuj situacioj, provu la panelan komponanton.

Baza ekzemplo

Defaŭlte, ĉiuj .panelfaroj estas apliki iun bazan randon kaj remburaĵon por enhavi iom da enhavo.

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

Panelo kun titolo

Facile aldonu titolon al via panelo per .panel-heading. Vi ankaŭ povas inkluzivi ajnan <h1>- <h6>kun .panel-titleklaso por aldoni antaŭstilan titolon. Tamen, la tiparograndoj de <h1>- <h6>estas anstataŭitaj de .panel-heading.

Por taŭga ligokolorigo, nepre metu ligilojn en rubrikojn ene de .panel-title.

Panela titolo sen titolo
Enhavo de panelo

Paneltitolo

Enhavo de panelo
<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>

Envolvi butonojn aŭ malĉefajn tekstojn en .panel-footer. Notu, ke panelpiedoj ne heredas kolorojn kaj randojn kiam oni uzas kontekstajn variojn, ĉar ili ne estas intencitaj esti en la malfono.

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

Kuntekstaj alternativoj

Kiel aliaj komponantoj, facile faru panelon pli signifa al aparta kunteksto aldonante iun ajn el la kuntekstaj ŝtatklasoj.

Paneltitolo

Enhavo de panelo

Paneltitolo

Enhavo de panelo

Paneltitolo

Enhavo de panelo

Paneltitolo

Enhavo de panelo

Paneltitolo

Enhavo de panelo
<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>

Kun tabloj

Aldonu ajnan neborditan .tableene de panelo por senjunta dezajno. Se estas .panel-body, ni aldonas kroman randon al la supro de la tablo por apartigo.

Panela titolo

Iu defaŭlta panelenhavo ĉi tie. Nulla vitae elit libero, a 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.

# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @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>

Se ne ekzistas panela korpo, la komponanto moviĝas de panela kaplinio al tablo sen interrompo.

Panela titolo
# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Kun listgrupoj

Facile inkluzivi plenlarĝajn listgrupojn ene de ajna panelo.

Panela titolo

Iu defaŭlta panelenhavo ĉi tie. Nulla vitae elit libero, a 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 in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulo ĉe 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>

Respondema embed

Permesu al retumiloj determini dimensiojn de video aŭ lumbildoj laŭ la larĝo de sia entena bloko kreante internan rilatumon, kiu taŭge skalos en iu ajn aparato.

Reguloj estas rekte aplikataj al <iframe>, <embed>, <video>, kaj <object>elementoj; laŭvole uzu eksplicitan posteulklason .embed-responsive-itemkiam vi volas kongrui kun la stilo por aliaj atributoj.

Por-Konsileto! Vi ne bezonas inkluzivi frameborder="0"en viaj <iframe>s ĉar ni superregas tion por vi.

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

Wells

Defaŭlte bone

Uzu la puton kiel simplan efikon al elemento por doni al ĝi enmetitan efikon.

Rigardu, mi estas en puto!
<div class="well">...</div>

Laŭvolaj klasoj

Kontrolu remburaĵon kaj rondigitajn angulojn kun du laŭvolaj modifklasoj.

Rigardu, mi estas en granda puto!
<div class="well well-lg">...</div>
Rigardu, mi estas en malgranda puto!
<div class="well well-sm">...</div>