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.

Enigu validan retadreson

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

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

Ekzemplo

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>

Vicigo

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.

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

Kapoj

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>

Dividilo

Aldonu dividilon por apartigi seriojn de ligiloj en falmenuo.

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

Malebligitaj menueroj

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>

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 `role`kaj 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>

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

Maldekstre Mezo Ĝuste

Maldekstre Mezo

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

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>

Plilongigu formularajn kontrolojn aldonante tekston aŭ butonojn antaŭ, post aŭ ambaŭflanke de iu tekst-bazita <input>. Uzu .input-groupkun .input-group-addonaŭ .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, titleaŭ placeholderatributo) 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-addonaŭ .input-group-btn) unuflanke.

Ni ne subtenas plurajn formularajn kontrolojn en ununura eniga grupo.

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

Langetoj

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>

Piloloj

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>

Pravigita

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>

Malŝaltitaj ligiloj

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>

Uzante falmenuojn

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>

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:

Redukti la kvanton aŭ larĝon de navbar-eroj.
Kaŝi certajn navbarajn erojn ĉe certaj ekrangrandoj uzante respondemajn utilajn klasojn .
Ŝ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.

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

Ĉ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-labelledbyaŭ titleatributo. 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>

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

Aldonu .navbar-fixed-topkaj inkluzivu .containeraŭ .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 .containeraŭ .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 .containeraŭ .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-lgaŭ .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>

Vicigitaj ligiloj

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>

Ekzemplo

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 .

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>

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>

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>

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.

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

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

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>

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.

Bone farita! Vi sukcese legis ĉi tiun gravan atentan mesaĝon.

Atentu! Ĉi tiu atentigo bezonas vian atenton, sed ĝi ne estas tre grava.

Averto! Pli bone kontrolu vin, vi ne aspektas tro bona.

Ho klaku! Ŝanĝu kelkajn aferojn kaj provu sendi denove.

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

Averto! Pli bone kontrolu vin, vi ne aspektas tro bona.

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

Ligiloj en atentigoj

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

Bone farita! Vi sukcese legis ĉi tiun gravan atentan mesaĝon .

Atentu! Ĉi tiu atentigo bezonas vian atenton , sed ĝi ne estas tre grava.

Averto! Pli bone kontrolu vin, vi ne aspektas tro bona .

Ho klaku! Ŝanĝu kelkajn aferojn kaj provu sendi denove.

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

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.

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

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

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

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

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

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>

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.

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

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.

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

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

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.

Listo de grupa rubriko

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Listo de grupa rubriko

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Listo de grupa rubriko

Donec id elit non mi porta gravida at eget metus. Mecenas 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>

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>

Panelo kun piedlinio

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

Panela piedlinio

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

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>

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>

Komponentoj

Glifikonoj

Disponeblaj glifoj

Kiel uzi

Ne miksu kun aliaj komponantoj

Nur por uzo sur malplenaj elementoj

Ŝanĝante la ikonan tiparolokon

Alireblaj ikonoj

Ekzemploj

Dropdowns

Ekzemplo

Vicigo

Povas postuli plian pozicion

Malrekomendita .pull-rightvicigo

Kapoj

Dividilo

Malebligitaj menueroj

Butongrupoj

Konsiletoj kaj popovers en butongrupoj postulas specialan agordon

Certigu korekta rolekaj provizi etikedon

Baza ekzemplo

Butona ilobreto

Dimensio

Nesto

Vertikala variado

Pravigitaj butongrupoj

Pritrakti landlimojn

IE8 kaj limoj

Kun <a>elementoj

Ligiloj agante kiel butonoj

Kun <button>elementoj

Butonfalumoj

Dependeco de kromprogramoj

Ununura butono falmenuoj

Dividi butonajn menuojn

Dimensio

Dropup-vario

Eniggrupoj

Nur tekstaj <input>s

Konsiletoj kaj popovers en eniggrupoj postulas specialan agordon

Ne miksu kun aliaj komponantoj

Ĉiam aldonu etikedojn

Baza ekzemplo

Dimensio

Markobutonoj kaj radioaldonaĵoj

Butonaj aldonaĵoj

Butonoj kun falmenuoj

Segmentitaj butonoj

Multoblaj butonoj

Navs

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

Faru navigaciojn uzatajn kiel navigado alirebla

Langetoj

Piloloj

Pravigita

Safaro kaj respondemaj pravigitaj navigacioj

Malŝaltitaj ligiloj

Ligfunkcio ne tuŝita

Uzante falmenuojn

Langetoj kun falmenuoj

Piloloj kun falmenuoj

Navbaro

Defaŭlta navbaro

Superflua enhavo

Postulas JavaScript-kromaĵon

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

Faru navbarojn alireblaj

Marka bildo

Formoj

Avertoj pri poŝtelefonoj

Ĉiam aldonu etikedojn

Butonoj

Kuntekst-specifa uzado

Teksto

Ne-nav-ligiloj

Komponento vicigo

Dekstre vicigante plurajn komponantojn

Riparita supre

Korpa remburaĵo necesas

Fiksita malsupre

Malrekomendita `.pull-right`vicigo

Certigu korekta `role`kaj provizi etikedon

Kun `<a>`elementoj

Kun `<button>`elementoj

Nur tekstaj `<input>`s