Razpoložljivi glifi

Vključuje več kot 250 glifov v obliki pisave iz kompleta Glyphicon Halflings. Glyphicons Halflings običajno niso na voljo brezplačno, vendar jih je njihov ustvarjalec dal brezplačno na voljo za Bootstrap. V zahvalo vas prosimo, da vključite povezavo nazaj do Glyphicons , kadar koli je to mogoče.

glifikon glifikon-zvezdica
glifikon glifikon-plus
glifikon glifikon-evro
glifikon glifikon-eur
glifikon glifikon-minus
glifikon glifikon-oblak
glifikon glifikon-ovojnica
glifikon glifikon-svinčnik
glifikon glifikon-steklo
glyphicon glyphicon-glasba
glyphicon glyphicon-iskanje
glifikon glifikon-srce
glifikon glifikon-zvezda
glifikon glifikon-zvezda-prazen
glyphicon uporabnik-glyphicon
glifikon glifikon-film
glifikon glifikon-th-velik
glifikon glifikon-th
glyphicon glyphicon-th-list
glifikon glifikon-ok
glyphicon glyphicon-odstrani
glyphicon glyphicon-zoom-in
glyphicon glyphicon-pomanjšava
glifikon glyphicon-off
glifikon glifikon-signal
glifikon glifikon-zobnik
glyphicon glyphicon-smeti
glyphicon glyphicon-home
glyphicon datoteka-glyphicon
glifikon glifikon-čas
glifikon glifikon-cesta
glyphicon glyphicon-download-alt
Glyphicon Glyphicon-prenos
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-ponovitev
glyphicon glyphicon-osveži
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glifikon glifikon-zastava
glyphicon glyphicon-slušalke
glyphicon glyphicon-volume-off
glyphicon glyphicon-zmanjšanje glasnosti
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
črtna koda glyphicon glyphicon
glifikon glifikon-oznaka
glifikon glifikon oznake
glifikon glifikon-knjiga
glifikon glifikon-zaznamek
glifikon glifikon-tisk
glyphicon glyphicon-camera
glifikon glifikonska pisava
glifikon glifikon-krepko
glifikon glifikon-ležeče
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-seznam
glifikon glyphicon-indent-left
glyphicon glyphicon-indent-desno
glyphicon glyphicon-facetime-video
glifikon glifikon-slika
glyphicon glyphicon-map marker
glyphicon glyphicon-adjust
glifikon glifikon-tint
glyphicon glyphicon-urejanje
glifikon glifikon-deliti
glifikon glifikon-preveriti
glifikon glifikon-premakniti
glyphicon glyphicon-korak-nazaj
glifikon glifikon-hitro-nazaj
glifikon glifikon-nazaj
glyphicon glyphicon-play
glifikon glifikon-pavza
glyphicon glyphicon-stop
glifikon glifikon-naprej
glyphicon glyphicon-hitro naprej
glyphicon glyphicon-korak-naprej
glifikon glifikon-izmet
glifikon glifikon-ševron-levo
glifikon glyphicon-chevron-desno
glifikon glifikon-znak-plus
glifikon glifikon-znak-minus
glifikon glifikon-odstrani-znak
glifikon glifikon-ok-znak
glifikon glifikon-vprašalni znak
glyphicon glyphicon-info-sign
Posnetek zaslona glyphicon
glyphicon glyphicon-odstrani krog
glyphicon glyphicon-ok-krog
glyphicon glyphicon-ban-krog
glyphicon glyphicon-puščica-levo
glyphicon glyphicon-puščica-desno
glyphicon glyphicon-puščica-gor
glyphicon glyphicon-puščica-dol
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glifikon glifikon-klicaj-znak
glifikon glifikon-darilo
glifikon glifikon-list
glifikon glifikon-ogenj
glifikon glifikon-odprto oko
glyphicon glyphicon-eye-close
glifikon glifikon-opozorilni-znak
glifikon glifikonska ravnina
glifikon glifikon-koledar
glyphicon glyphicon-naključno
glyphicon glyphicon-komentar
glifikon glifikon-magnet
glyphicon glyphicon-chevron-up
glifikon glifikon-ševron-dol
glyphicon glyphicon-retweet
glyphicon glyphicon-nakupovalni voziček
glyphicon glyphicon-mapa-zapri
glyphicon glyphicon-mapa-odprta
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glifikon glifikon-zvonec
glifikon glifikon-certifikat
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-palec-dol
glifikon glifikon-roka-desna
glifikon glifikon-ročno-levo
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-krog-puščica-desno
glifikon glifikon-krog-puščica-levo
glyphicon glyphicon-krog-puščica-gor
glyphicon glyphicon-krog-puščica-dol
glifikon glifikon-globus
glyphicon glyphicon-ključ
glyphicon glyphicon-naloge
glifikon glifikon-filter
glyphicon glyphicon-aktovka
glyphicon glyphicon-celozaslonski
glyphicon glyphicon-nadzorna plošča
glyphicon glyphicon-sponka
glyphicon glyphicon-srce-prazno
glifikon glifikon-povezava
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glifikon glifikon-vrsta
glyphicon glyphicon-razvrsti-po-abecedi
glyphicon glyphicon-razvrsti-po-abecedi-alt
glifikon glifikon-razvrsti-po-vrstnem redu
glyphicon glyphicon-razvrsti-po-vrstnem redu-alt
glyphicon glyphicon-razvrsti-po-atributih
glyphicon glyphicon-razvrsti-po-atributih-alt
glyphicon glyphicon-nepreverjeno
glifikon glifikon-širi
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon prijava-glyphicon
glifikon glifikon-blisk
glyphicon glyphicon-log-out
glyphicon glyphicon-novo-okno
glifikon glifikon-zapis
glyphicon glyphicon-save
glifikon glifikon-odprt
glyphicon glyphicon-shranjen
glifikon glifikon-uvoz
glyphicon glyphicon-izvoz
glifikon glifikon-pošlji
glyphicon glyphicon-disketa
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-kreditna-kartica
glifikon glifikon-prenos
glyphicon glyphicon-jedilni pribor
glyphicon glyphicon-header
glyphicon glyphicon-stisnjen
glyphicon glyphicon-slušalke
glyphicon glyphicon-phone-alt
glifikon glifikon-stolp
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-podnapisi
glyphicon glyphicon-zvok-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glifikon registrska-oznaka-glifikona
glyphicon prenos v oblaku glyphicon
glyphicon nalaganje v oblak glyphicon
glifikon glifikon-drevo-iglavec
glifikon glifikon-drevo-listavac
glifikon glifikon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-odprta-datoteka
glifikon glifikon-višja raven
glyphicon glyphicon-copy
glifikon glifikon-pasta
glyphicon glyphicon-opozorilo
glyphicon glyphicon-equalizer
glifikon glifikon-kralj
glyphicon glyphicon-kraljica
glifikon glifikon-pešček
glifikon glifikon-škof
glifikon glifikon-vitez
glyphicon glyphicon-otroška formula
glifikon glifikon-šotor
glifikon glifikon-tabla
glifikon glifikon-postelja
glifikon glifikon-jabolko
glifikon glifikon-izbriši
glifikon glifikon-peščena ura
glifikon glifikonska svetilka
glifikon glifikon-dvojnik
glifikon glifikon-svinček
glifikon glifikon-škarje
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glifikon glifikon-jen
glyphicon glyphicon-jpy
glifikon glifikon-rubelj
glifikon glifikon-rub
glifikon glifikonska lestvica
glifikon glifikon-ledena lizika
glyphicon glyphicon-ice-lolly-tasted
glifikon glifikon-izobraževanje
glyphicon glyphicon-možnost-vodoravno
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glifikon glifikon-olje
glifikon glifikon-zrno
sončna očala glyphicon glyphicon
glifikon velikost-besedila glifikona
glifikon barva-besedila-glifikona
glyphicon glyphicon-besedilo-ozadje
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glifikon glifikon-predmet-poravnaj-levo
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-desno
glifikon glifikon-trikotnik-desno
glifikon glifikon-trikotnik-levo
glifikon glifikon-trikotnik-dno
glifikon glifikon-trikotnik-vrh
glyphicon glyphicon-console
glifikon glifikon-nadpis
glifikon glifikon-podpis
glyphicon glyphicon-meni-levo
glyphicon glyphicon-menu-desno
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Kako uporabiti

Zaradi zmogljivosti vse ikone zahtevajo osnovni razred in posamezni razred ikon. Za uporabo postavite naslednjo kodo skoraj kamor koli. Med ikono in besedilom ne pozabite pustiti prostora za ustrezno oblazinjenje.

Ne mešajte z drugimi komponentami

Razredov ikon ni mogoče neposredno kombinirati z drugimi komponentami. Ne smejo se uporabljati skupaj z drugimi razredi na istem elementu. Namesto tega dodajte ugnezdene <span>in uporabite razrede ikon za <span>.

Samo za uporabo na praznih elementih

Razrede ikon je treba uporabljati samo za elemente, ki ne vsebujejo besedilne vsebine in nimajo podrejenih elementov.

Spreminjanje lokacije pisave ikone

Bootstrap predvideva, da se bodo datoteke pisav ikon nahajale v ../fonts/imeniku glede na prevedene datoteke CSS. Premikanje ali preimenovanje teh datotek s pisavami pomeni posodobitev CSS na enega od treh načinov:

Spremenite spremenljivke @icon-font-pathin/ali @icon-font-namev izvornih datotekah Less.
Uporabite možnost relativnih URL-jev, ki jih ponuja prevajalnik Less.
Spremenite url()poti v prevedenem CSS.

Uporabite katero koli možnost, ki najbolj ustreza vaši specifični razvojni postavitvi.

Dostopne ikone

Sodobne različice podpornih tehnologij bodo objavile vsebino, ustvarjeno s CSS, in posebne znake Unicode. Da bi se izognili nenamernemu in zmedenemu izpisu v bralnikih zaslona (zlasti kadar so ikone uporabljene zgolj za okras), jih skrijemo z aria-hidden="true"atributom.

Če uporabljate ikono za posredovanje pomena (namesto le kot okrasni element), poskrbite, da bo ta pomen posredovan tudi podpornim tehnologijam – na primer vključite dodatno vsebino, vizualno skrito z .sr-onlyrazredom.

Če ustvarjate kontrolnike brez drugega besedila (na primer, <button>ki vsebuje samo ikono), morate vedno zagotoviti alternativno vsebino za identifikacijo namena kontrolnika, tako da bo smiseln za uporabnike podpornih tehnologij. V tem primeru lahko dodate aria-labelatribut na samem kontrolniku.

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

Primeri

Uporabite jih v gumbih, skupinah gumbov za orodno vrstico, navigacijo ali predpriložene vnose obrazcev.

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

Ikona, uporabljena v opozorilu , ki sporoča, da gre za sporočilo o napaki, z dodatnim .sr-onlybesedilom, ki ta namig sporoča uporabnikom podpornih tehnologij.

Vnesite veljaven e-poštni naslov

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

Preklopni kontekstualni meni za prikaz seznamov povezav. Interaktiven s spustnim vtičnikom JavaScript .

Primer

Zavijte sprožilec spustnega menija in spustni meni znotraj .dropdownali drug element, ki deklarira position: relative;. Nato dodajte HTML menija.

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

Spustne menije je mogoče spremeniti tako, da se razširijo navzgor (namesto navzdol) z dodajanjem .dropupnadrejenemu.

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

Poravnava

Privzeto je spustni meni samodejno postavljen 100 % od vrha in vzdolž leve strani nadrejenega. Dodajte .dropdown-menu-righta .dropdown-menuza poravnavo spustnega menija v desno.

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

Glave

Dodajte glavo, da označite razdelke dejanj v katerem koli spustnem meniju.

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

Razdelilnik

V spustnem meniju dodajte ločilo, da ločite niz povezav.

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

Onemogočeni elementi menija

Dodajte .disabledv <li>spustni meni, da onemogočite povezavo.

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

Združite vrsto gumbov v eno vrstico s skupino gumbov. Z našim vtičnikom za gumbe dodajte izbirni radio JavaScript in vedenje sloga potrditvenega polja .

Namigi orodij in pojavni elementi v skupinah gumbov zahtevajo posebno nastavitev

Pri uporabi namigov orodij ali pojavnih vogalov na elementih znotraj .btn-group, boste morali določiti možnost, container: 'body'da se izognete neželenim stranskim učinkom (kot je element, ki postane širši in/ali izguba zaobljenih vogalov, ko se sproži namig orodij ali pojavni element).

Zagotovite pravilnost `role`in zagotovite oznako

Da bi podporne tehnologije – kot so bralniki zaslona – sporočile, da je vrsta gumbov združena, je treba zagotoviti ustrezen roleatribut. Za skupine gumbov bi bilo to role="group", orodne vrstice pa bi morale imeti role="toolbar".

Ena izjema so skupine, ki vsebujejo samo en kontrolnik (na primer poravnane skupine gumbov z <button>elementi) ali spustni meni.

Poleg tega morajo biti skupine in orodne vrstice izrecno označene, saj jih večina podpornih tehnologij sicer ne bo objavila, kljub prisotnosti pravilnega roleatributa. V tukaj navedenih primerih uporabljamo , lahko pa se uporabijo tudi aria-labelalternative, kot je.aria-labelledby

Osnovni primer

Zavijte niz gumbov .btnz .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>

Združite nize <div class="btn-group">v <div class="btn-toolbar">za bolj zapletene komponente.

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

Dimenzioniranje

Namesto da uporabite razrede velikosti gumbov za vsak gumb v skupini, preprosto dodajte .btn-group-*vsakemu .btn-group, tudi pri gnezdenju več skupin.

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

Gnezdenje

Postavite a .btn-groupznotraj drugega .btn-group, če želite, da so spustni meniji pomešani z nizom gumbov.

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

Navpična variacija

Naj bo niz gumbov videti navpično zložen namesto vodoravno. Spustni meniji razdeljenih gumbov tukaj niso podprti.

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

Poravnane skupine gumbov

Naj se skupina gumbov raztegne v enakih velikostih, da se raztezajo po celotni širini nadrejenega. Deluje tudi s spustnimi meniji gumbov v skupini gumbov.

Ravnanje z mejami

Zaradi posebnega HTML in CSS, ki se uporabljata za poravnavo gumbov (namreč display: table-cell), so meje med njimi podvojene. V običajnih skupinah gumbov margin-left: -1pxse uporablja za zlaganje obrob namesto za njihovo odstranjevanje. Vendar marginne deluje z display: table-cell. Posledično boste morda želeli odstraniti ali prebarvati obrobe, odvisno od vaših prilagoditev za Bootstrap.

IE8 in meje

Internet Explorer 8 ne upodablja obrob na gumbih v poravnani skupini gumbov, ne glede na to, ali je vklopljen <a>ali <button>element. Če se želite temu izogniti, zavijte vsak gumb v drugega .btn-group.

Glejte #12476 za več informacij.

Z `<a>`elementi

Samo zavijte niz .btns v .btn-group.btn-group-justified.

levo Sredina Prav

levo Sredina

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

Povezave, ki delujejo kot gumbi

Če se <a>elementi uporabljajo kot gumbi – sprožijo funkcionalnost na strani, namesto da bi se pomaknili do drugega dokumenta ali odseka na trenutni strani – jim je treba dodeliti tudi ustrezen role="button".

Z `<button>`elementi

Če želite uporabiti poravnane skupine gumbov z <button>elementi, morate vsak gumb zaviti v skupino gumbov . Večina brskalnikov ne uporablja pravilno našega CSS za utemeljitev <button>elementov, a ker podpiramo spustne menije gumbov, se lahko temu izognemo.

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

Uporabite kateri koli gumb, da sprožite spustni meni, tako da ga postavite znotraj .btn-groupin zagotovite ustrezno oznako menija.

Odvisnost od vtičnika

Spustni meniji gumbov zahtevajo, da je spustni vtičnik vključen v vašo različico Bootstrapa.

Spustni meni z enim gumbom

Spremenite gumb v spustni preklop z nekaj osnovnimi spremembami oznak.

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

Spustni meni razdeljenih gumbov

Podobno ustvarite spustne menije z razdeljenimi gumbi z enakimi spremembami oznak, le z ločenim gumbom.

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

Dimenzioniranje

Spustni meniji gumbov delujejo z gumbi vseh velikosti.

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

Različica spuščanja

Sproži spustne menije nad elementi z dodajanjem .dropupnadrejenemu.

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

Razširite kontrolnike obrazca z dodajanjem besedila ali gumbov pred, za ali na obeh straneh katere koli besedilne datoteke <input>. Uporabite .input-groupz .input-group-addonali .input-group-btnza dodajanje elementov pred ali na eno samo .form-control.

`<input>`Samo besedilni

Izogibajte se uporabi <select>elementov tukaj, saj jih v brskalnikih WebKit ni mogoče v celoti oblikovati.

Izogibajte se uporabi <textarea>elementov tukaj, saj njihov rowsatribut v nekaterih primerih ne bo upoštevan.

Namigi orodij in pojavni elementi v vnosnih skupinah zahtevajo posebno nastavitev

Pri uporabi namigov orodij ali pojavnih elementov na elementih znotraj .input-group, boste morali določiti možnost, container: 'body'da se izognete neželenim stranskim učinkom (kot je element, ki postane širši in/ali izguba zaobljenih vogalov, ko se sproži namig orodij ali pojavni element).

Ne mešajte z drugimi komponentami

Ne mešajte skupin obrazcev ali razredov stolpcev mreže neposredno z vnosnimi skupinami. Namesto tega ugnezdite vnosno skupino znotraj skupine obrazcev ali elementa, povezanega z mrežo.

Vedno dodajte oznake

Bralniki zaslona bodo imeli težave z vašimi obrazci, če ne vključite oznake za vsak vnos. Za te vnosne skupine zagotovite, da se vse dodatne oznake ali funkcije prenesejo na podporne tehnologije.

Natančna tehnika, ki jo je treba uporabiti (vidni <label>elementi, <label>elementi, skriti z uporabo .sr-onlyrazreda ali uporaba atributa aria-label, aria-labelledby, aria-describedby, titleali placeholder) in katere dodatne informacije bodo morale biti posredovane, se razlikujejo glede na točno vrsto gradnika vmesnika, ki ga izvajate. Primeri v tem razdelku ponujajo nekaj predlaganih pristopov za posamezne primere.

Osnovni primer

Po en dodatek ali gumb postavite na obe strani vhoda. Enega lahko postavite tudi na obe strani vhoda.

Ne podpiramo več dodatkov ( .input-group-addonali .input-group-btn) na eni strani.

Ne podpiramo več kontrolnikov obrazcev v eni vnosni skupini.

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

Dimenzioniranje

Dodajte relativne razrede velikosti obrazca .input-groupin vsebina znotraj se bo samodejno spremenila v velikost – ni potrebe po ponavljanju razredov velikosti nadzora obrazca na vsakem elementu.

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

Potrditvena polja in radijski dodatki

Namesto besedila v dodatek vnosne skupine postavite poljubno potrditveno polje ali radijsko možnost.

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

Dodatki za gumbe

Gumbi v vnosnih skupinah so nekoliko drugačni in zahtevajo eno dodatno raven ugnezdenja. Namesto .input-group-addon, boste morali uporabiti .input-group-btnza zavijanje gumbov. To je potrebno zaradi privzetih slogov brskalnika, ki jih ni mogoče preglasiti.

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

Gumbi s spustnimi meniji

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

Segmentirani gumbi

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

Več gumbov

Medtem ko imate lahko samo en dodatek na stran, imate lahko več gumbov znotraj enega .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>

Navigacije, ki so na voljo v Bootstrapu, imajo skupno oznako, začenši z osnovnim .navrazredom, kot tudi skupna stanja. Zamenjajte razrede modifikatorjev za preklapljanje med posameznimi slogi.

Uporaba navs za plošče z zavihki zahteva vtičnik za zavihke JavaScript

Za zavihke z območji, ki jih je mogoče zavihati, morate uporabiti vtičnik JavaScript za zavihke . Oznaka bo zahtevala tudi dodatne roleatribute in atribute ARIA – za nadaljnje podrobnosti glejte primer oznake vtičnika.

Omogoči dostop do navigacije, ki se uporablja kot navigacija

Če uporabljate nav za zagotavljanje navigacijske vrstice, ne pozabite dodati role="navigation"najbolj logičnemu nadrejenemu vsebniku <ul>ali ovijte <nav>element okoli celotne navigacije. Ne dodajajte vloge <ul>samemu, saj bi to preprečilo, da bi jo podporne tehnologije objavile kot dejanski seznam.

Zavihki

Upoštevajte, da .nav-tabsrazred zahteva .navosnovni razred.

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

Tablete

Vzemite isti HTML, vendar .nav-pillsnamesto tega uporabite:

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

Tablete je mogoče zlagati tudi navpično. Samo dodajte .nav-stacked.

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

Upravičeno

Preprosto naredite zavihke ali tabletke enake širine svojih nadrejenih na zaslonih, širših od 768 slikovnih pik, z .nav-justified. Na manjših zaslonih so navigacijske povezave zložene.

Poravnane navigacijske povezave v vrstici za krmarjenje trenutno niso podprte.

Safari in odzivna upravičena navigacija

Od različice 9.1.2 naprej Safari kaže napako, pri kateri horizontalno spreminjanje velikosti vašega brskalnika povzroči napake pri upodabljanju v upravičenem krmarjenju, ki se počistijo ob osveževanju. Ta napaka je prikazana tudi v primeru poravnane navigacije .

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

Onemogočene povezave

.disabledZa katero koli komponento navigacije (zavihke ali tabletke) dodajte sive povezave in brez učinkov lebdenja .

Funkcionalnost povezave ni prizadeta

Ta razred bo spremenil le <a>videz, ne pa njegove funkcionalnosti. Uporabite JavaScript po meri, da tukaj onemogočite povezave.

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

Uporaba spustnih menijev

Dodajte spustne menije z malo dodatnega HTML-ja in spustnega vtičnika JavaScript .

Zavihki s spustnimi meniji

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

Tablete s spustnimi listi

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

Navbars so odzivne meta komponente, ki služijo kot navigacijske glave za vašo aplikacijo ali spletno mesto. Začnejo se strnjeni (in jih je mogoče preklapljati) v mobilnih pogledih in postanejo vodoravni, ko se razpoložljiva širina vidnega polja poveča.

Poravnane navigacijske povezave v vrstici za krmarjenje trenutno niso podprte.

Prepolna vsebina

Ker Bootstrap ne ve, koliko prostora potrebuje vsebina v vaši vrstici za krmarjenje, lahko naletite na težave z zavijanjem vsebine v drugo vrstico. Če želite to rešiti, lahko:

Zmanjšajte količino ali širino elementov vrstice za krmarjenje.
Skrij določene elemente navbara pri določenih velikostih zaslona z uporabo odzivnih razredov pripomočkov .
Spremenite točko, na kateri vaša vrstica za krmarjenje preklopi med strnjenim in vodoravnim načinom. Prilagodite @grid-float-breakpointspremenljivko ali dodajte lastno medijsko poizvedbo.

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

Zamenjajte blagovno znamko vrstice za krmarjenje s svojo sliko, tako da besedilo zamenjate z <img>. Ker .navbar-brandima lastno oblazinjenje in višino, boste morda morali preglasiti nekaj CSS, odvisno od vaše slike.

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

Vsebino obrazca postavite znotraj .navbar-formza pravilno navpično poravnavo in strnjeno obnašanje v ozkih pogledih. Z možnostmi poravnave se odločite, kje se bo nahajal v vsebini navbara.

Kot opozorilo si .navbar-formdeli večino svoje kode .form-inlineprek mixina. Nekateri kontrolniki obrazcev, kot so vnosne skupine, lahko zahtevajo fiksne širine, da so pravilno prikazane v vrstici za krmarjenje.

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

Vedno dodajte oznake

Bralniki zaslona bodo imeli težave z vašimi obrazci, če ne vključite oznake za vsak vnos. Za te vgrajene obrazce lahko skrijete oznake z uporabo .sr-onlyrazreda. Obstajajo še drugi alternativni načini zagotavljanja oznake za podporne tehnologije, kot je aria-labelatribut ali aria-labelledby. titleČe nobeden od teh ni prisoten, lahko bralniki zaslona uporabijo placeholderatribut, če je prisoten, vendar upoštevajte, da uporaba placeholderkot nadomestilo za druge metode označevanja ni priporočljiva.

Dodajte .navbar-btnrazred <button>elementom, ki niso v a <form>, da jih navpično centrirate v vrstici za krmarjenje.

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

Zavijte nize besedila v element z .navbar-text, običajno na <p>oznaki za pravilno vodilo in barvo.

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

Za ljudi, ki uporabljajo standardne povezave, ki niso v običajni navigacijski komponenti vrstice za krmarjenje, uporabite .navbar-linkrazred, da dodate ustrezne barve za privzete in inverzne možnosti vrstice za krmarjenje.

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

Poravnajte povezave za krmarjenje, obrazce, gumbe ali besedilo z uporabo razredov .navbar-leftor . .navbar-rightOba razreda bosta dodala lebdeči CSS v navedeni smeri. Če želite na primer poravnati navigacijske povezave, jih postavite ločeno <ul>z ustreznim uporabnim razredom.

Ti razredi so mešane različice .pull-leftin .pull-right, vendar so omejeni na medijske poizvedbe za lažje ravnanje s komponentami navbara v različnih velikostih naprav.

Dodajte .navbar-fixed-topin vključite .containerali .container-fluidna sredino in vtisnite vsebino vrstice za krmarjenje.

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

Oblazinjenje telesa je potrebno

Fiksna vrstica za krmarjenje bo prekrila vašo drugo vsebino, razen če dodate paddingna vrh <body>. Preizkusite svoje vrednosti ali uporabite naš spodnji delček. Nasvet: privzeto je vrstica za krmarjenje visoka 50 slikovnih pik.

body { padding-top: 70px; }

Prepričajte se, da ste to vključili za osnovnim CSS Bootstrap.

Dodajte .navbar-fixed-bottomin vključite .containerali .container-fluidna sredino in vtisnite vsebino vrstice za krmarjenje.

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

Oblazinjenje telesa je potrebno

Fiksna vrstica za krmarjenje bo prekrila vašo drugo vsebino, razen če dodate paddingna dno <body>. Preizkusite svoje vrednosti ali uporabite naš spodnji delček. Nasvet: privzeto je vrstica za krmarjenje visoka 50 slikovnih pik.

body { padding-bottom: 70px; }

Prepričajte se, da ste to vključili za osnovnim CSS Bootstrap.

Ustvarite navbar polne širine, ki se pomika stran s stranjo, tako da dodate .navbar-static-topin vključite .containerali .container-fluidza sredino in podlago vsebine navbara.

Za razliko od .navbar-fixed-*razredov vam ni treba spreminjati nobenih oblazinjenj na body.

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

Spremenite videz vrstice za krmarjenje tako, da dodate .navbar-inverse.

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

Krušne drobtine

Označite lokacijo trenutne strani znotraj navigacijske hierarhije.

Ločila so samodejno dodana v CSS prek :beforein content.

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

Paginacija

Zagotovite povezave za označevanje strani za vaše spletno mesto ali aplikacijo s komponento označevanja strani za več strani ali enostavnejšo alternativo pozivnika .

Privzeta paginacija

Preprosto označevanje strani po navdihu Rdio, odlično za aplikacije in rezultate iskanja. Velik blok je težko zgrešiti, zlahka ga je mogoče povečati in nudi velika območja klikanja.

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

Označevanje komponente paginacije

Komponenta za označevanje strani mora biti ovita v <nav>element, ki jo prepozna kot navigacijski del za bralnike zaslona in druge podporne tehnologije. Poleg tega, ker ima stran verjetno že več kot en takšen navigacijski razdelek (kot je primarna navigacija v glavi ali stranska navigacija), je priporočljivo zagotoviti opis aria-label, <nav>ki odraža njen namen. Na primer, če se komponenta paginacije uporablja za krmarjenje med nizom rezultatov iskanja, bi lahko bila ustrezna oznaka aria-label="Search results pages".

Onemogočeno in aktivno stanje

Povezave so prilagodljive različnim okoliščinam. Uporabite .disabledza povezave, ki jih ni mogoče klikniti, in .activeza označevanje trenutne strani.

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

Priporočamo, da zamenjate aktivna ali onemogočena sidra za <span>ali pa izpustite sidro v primeru prejšnjih/naslednjih puščic, da odstranite funkcijo klikanja in obdržite predvidene sloge.

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

Dimenzioniranje

Želite večjo ali manjšo paginacijo? Dodajte .pagination-lgali .pagination-smza dodatne velikosti.

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

Pozivnik

Hitre prejšnje in naslednje povezave za preproste izvedbe označevanja strani z lahkimi oznakami in slogi. Odličen je za preprosta spletna mesta, kot so blogi ali revije.

Privzeti primer

Pozivnik privzeto centrira povezave.

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

Poravnane povezave

Druga možnost je, da vsako povezavo poravnate ob straneh:

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

Izbirno onemogočeno stanje

Povezave pozivnikov uporabljajo tudi splošni .disableduporabni razred iz paginacije.

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

Primer

Primer naslova Novo

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

Razpoložljive različice

Če želite spremeniti videz oznake, dodajte katerega koli od spodaj navedenih razredov modifikatorjev.

Privzeti primarni podatki o uspehu Opozorilo Nevarnost

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

Imate na tone etiket?

Težave z upodabljanjem lahko nastanejo, če imate v ozkem vsebniku na desetine vgrajenih oznak, od katerih vsaka vsebuje svoj inline-blockelement (kot je ikona). Pot okoli tega je nastavitev display: inline-block;. Za kontekst in primer glejte #13219 .

Preprosto označite nove ali neprebrane elemente z dodajanjem <span class="badge">povezavam, navigacijam Bootstrap in več.

Prejeto42

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

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

Samopropadanje

Če ni novih ali neprebranih elementov, se značke preprosto strnejo (prek :emptyizbirnika CSS), če v njih ni vsebine.

Združljivost med brskalniki

Značke se v Internet Explorerju 8 ne bodo same strnile, ker nima podpore za :emptyizbirnik.

Prilagodi se aktivnim stanjem navigacije

Vključeni so vgrajeni slogi za postavitev značk v aktivna stanja v navigacijah tablet.

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

Lahka, prilagodljiva komponenta, ki lahko po želji razširi celotno vidno polje za predstavitev ključne vsebine na vašem spletnem mestu.

Pozdravljen, svet!

To je preprosta junaška enota, preprosta komponenta v slogu jumbotrona za privabljanje dodatne pozornosti na predstavljeno vsebino ali informacije.

Nauči se več

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

Če želite, da bo jumbotron polne širine in brez zaobljenih vogalov, ga postavite zunaj vseh .containers in namesto tega dodajte .containerznotraj.

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

Preprosta lupina za h1ustrezno razporeditev in segmentacijo delov vsebine na strani. Uporablja lahko h1privzeti smallelement 's kot tudi večino drugih komponent (z dodatnimi slogi).

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

Razširite Bootstrapov mrežni sistem s komponento sličic za preprost prikaz mrež slik, videoposnetkov, besedila in drugega.

Če iščete Pinterestu podobno predstavitev sličic različnih višin in/ali širin, boste morali uporabiti vtičnik tretje osebe, kot je Masonry , Isotope ali Salvattore .

Privzeti primer

Sličice Bootstrapa so privzeto oblikovane tako, da prikazujejo povezane slike z minimalno zahtevano oznako.

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

Vsebina po meri

Z nekaj dodatnega označevanja je možno sličicam dodati kakršno koli vsebino HTML, kot so naslovi, odstavki ali gumbi.

Oznaka sličice

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.

Gumb Gumb

Oznaka sličice

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.

Gumb Gumb

Oznaka sličice

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.

Gumb Gumb

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

Zagotovite kontekstualna povratna sporočila za tipična dejanja uporabnikov s peščico razpoložljivih in prilagodljivih opozorilnih sporočil.

Primeri

Zavijte poljubno besedilo in izbirni gumb za opustitev v .alertenega od štirih kontekstualnih razredov (npr. .alert-success) za osnovna opozorilna sporočila.

Ni privzetega razreda

Opozorila nimajo privzetih razredov, ampak samo osnovne in modifikacijske razrede. Privzeto sivo opozorilo nima preveč smisla, zato morate določiti vrsto prek kontekstualnega razreda. Izbirajte med uspehom, informacijami, opozorilom ali nevarnostjo.

Dobro opravljeno! Uspešno ste prebrali to pomembno opozorilno sporočilo.

Glavo pokonci! To opozorilo zahteva vašo pozornost, vendar ni zelo pomembno.

Opozorilo! Raje se poglej, ne izgledaš preveč dobro.

Oh šment! Spremenite nekaj stvari in poskusite znova oddati.

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

Opozorila, ki jih je mogoče opustiti

Nadgradite katero koli opozorilo z dodajanjem izbirnega .alert-dismissiblegumba in gumba za zapiranje.

Potreben je vtičnik za opozorila JavaScript

Za popolnoma delujoča opozorila, ki jih je mogoče opustiti, morate uporabiti vtičnik JavaScript za opozorila .

Opozorilo! Raje se poglej, ne izgledaš preveč dobro.

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

Zagotovite pravilno delovanje v vseh napravah

Ne pozabite uporabiti <button>elementa z data-dismiss="alert"atributom podatkov.

Povezave v opozorilih

Uporabite .alert-linkrazred pripomočkov za hitro zagotavljanje ujemajočih se barvnih povezav znotraj katerega koli opozorila.

Dobro opravljeno! Uspešno ste prebrali to pomembno opozorilno sporočilo .

Glavo pokonci! To opozorilo zahteva vašo pozornost , vendar ni zelo pomembno.

Opozorilo! Raje se poglej, ne izgledaš preveč dobro .

Oh šment! Spremenite nekaj stvari in poskusite znova oddati.

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

Zagotovite posodobljene povratne informacije o napredku poteka dela ali dejanja s preprostimi, a prilagodljivimi vrsticami napredka.

Združljivost med brskalniki

Vrstice napredka uporabljajo prehode in animacije CSS3 za doseganje nekaterih svojih učinkov. Te funkcije niso podprte v Internet Explorerju 9 in novejših ali starejših različicah Firefoxa. Opera 12 ne podpira animacij.

Združljivost s politiko varnosti vsebine (CSP).

Če ima vaše spletno mesto pravilnik o varnosti vsebine (CSP) , ki ne dovoljuje style-src 'unsafe-inline', potem ne boste mogli uporabljati styleatributov v vrstici za nastavitev širine vrstice napredka, kot je prikazano v naših primerih spodaj. Alternativne metode za nastavitev širin, ki so združljive s strogimi CSP-ji, vključujejo uporabo majhnega JavaScripta po meri (ki nastavi element.style.width) ali uporabo razredov CSS po meri.

Osnovni primer

Privzeta vrstica napredka.

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

Z etiketo

Odstranite razred <span>z .sr-onlyznotraj vrstice napredka, da prikažete viden odstotek.

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>

Če želite zagotoviti, da bo besedilo oznake ostalo berljivo tudi pri nizkih odstotkih, razmislite o dodajanju min-widthv vrstico napredka.

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>

Kontekstualne alternative

Vrstice napredka uporabljajo nekaj istega gumba in razredov opozoril za dosledne sloge.

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

Črtasto

Uporablja gradient za ustvarjanje črtastega učinka. Ni na voljo v IE9 in starejših.

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

Animirano

Dodajte .activeza .progress-bar-stripedanimacijo črt od desne proti levi. Ni na voljo v IE9 in starejših.

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

Zloženo

Postavite več palic v isto .progress, da jih zložite.

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

Abstraktni slogi predmetov za gradnjo različnih vrst komponent (kot so komentarji v spletnem dnevniku, tviti itd.), ki poleg besedilne vsebine prikazujejo levo ali desno poravnano sliko.

Privzeti medij

Privzeti medij prikazuje medijski predmet (slike, video, zvok) levo ali desno od bloka vsebine.

Medijski naslov

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.

Medijski naslov

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.

Ugnezdeni medijski naslov

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.

Medijski naslov

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.

Medijski naslov

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>

Razredi .pull-leftin .pull-righttudi obstajajo in so bili prej uporabljeni kot del medijske komponente, vendar so za to uporabo opuščeni od različice 3.3.0. So približno enakovredne .media-leftin .media-right, le da .media-rightbi jih bilo treba postaviti za .media-bodyznakom v html.

Usklajevanje medijev

Slike ali druge medije je mogoče poravnati zgoraj, na sredino ali spodaj. Privzeto je poravnano zgoraj.

Zgoraj poravnani mediji

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.

Srednje poravnani mediji

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.

Spodaj poravnan medij

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>

Seznam medijev

Z nekaj dodatnega označevanja lahko uporabite notranji seznam medijev (uporabno za niti komentarjev ali sezname člankov).

Medijski naslov

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.

Ugnezdeni medijski naslov
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.

Ugnezdeni medijski naslov
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.

Ugnezdeni medijski naslov
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>

Skupine seznamov so prilagodljiva in zmogljiva komponenta za prikazovanje ne le preprostih seznamov elementov, ampak tudi kompleksnih z vsebino po meri.

Osnovni primer

Najosnovnejša skupina seznamov je preprosto neurejen seznam s postavkami seznama in ustreznimi razredi. Nadgradite ga z možnostmi, ki sledijo, ali po potrebi s svojim lastnim CSS.

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

Značke

Komponento značk dodajte kateremu koli elementu skupine seznama in samodejno bo postavljena na desno.

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>

Povezani elementi

Povežite elemente skupine seznamov z uporabo sidrnih oznak namesto elementov seznama (to pomeni tudi nadrejenega elementa <div>namesto <ul>). Ni potrebe po posameznih starših okoli vsakega elementa.

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

Elementi gumbov

Elementi skupine seznamov so lahko gumbi namesto elementov seznama (kar pomeni tudi nadrejenega elementa namesto elementa <div>) <ul>. Ni potrebe po posameznih starših okoli vsakega elementa. Tukaj ne uporabljajte standardnih .btnrazredov.

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

Onemogočeni predmeti

Dodajte .disabledv a .list-group-item, da ga obarvate sivo, da bo videti onemogočen.

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

Kontekstualni razredi

Uporabite kontekstualne razrede za oblikovanje elementov seznama, privzetih ali povezanih. Vključuje tudi .activestanje.

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

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum in 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>

Vsebina po meri

Znotraj dodajte skoraj kateri koli HTML, tudi za skupine povezanih seznamov, kot je spodnja.

Naslov elementa skupine seznama

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

Naslov elementa skupine seznama

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

Naslov elementa skupine seznama

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

Čeprav ni vedno potrebno, morate včasih svoj DOM dati v škatlo. V teh primerih poskusite komponento plošče.

Osnovni primer

Privzeto je vse, kar se .panelnaredi, uporaba osnovne obrobe in oblazinjenja, da vsebuje nekaj vsebine.

Primer osnovne plošče

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

Plošča z naslovom

Preprosto dodajte vsebnik naslova na svojo ploščo z .panel-heading. Vključite lahko tudi katerega koli <h1>- <h6>z .panel-titlerazredom, da dodate vnaprej oblikovan naslov. Vendar pa velikosti pisave <h1>- <h6>preglasi .panel-heading.

Za pravilno barvanje povezav se prepričajte, da postavite povezave v naslove znotraj .panel-title.

Naslov plošče brez naslova

Vsebina panela

Naslov plošče

Vsebina panela

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

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

Panel z nogo

Prelomi gumbe ali sekundarno besedilo v .panel-footer. Upoštevajte, da noge podokna ne podedujejo barv in obrob pri uporabi kontekstualnih različic, saj naj ne bi bile v ospredju.

Vsebina panela

Noga plošče

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

Kontekstualne alternative

Tako kot druge komponente lahko preprosto naredite ploščo bolj smiselno za določen kontekst z dodajanjem katerega koli od kontekstualnih razredov stanja.

Naslov plošče

Vsebina panela

Naslov plošče

Vsebina panela

Naslov plošče

Vsebina panela

Naslov plošče

Vsebina panela

Naslov plošče

Vsebina panela

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

Z mizami

Znotraj plošče dodajte vse neobrobljene .tableza brezšivno zasnovo. Če obstaja .panel-body, dodamo dodatno obrobo na vrh tabele za ločevanje.

Naslov plošče

Tukaj je nekaj privzete vsebine plošče. 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.

#	Ime	Priimek	Uporabniško ime
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@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>

Če telesa plošče ni, se komponenta brez prekinitve premakne iz glave plošče v tabelo.

Naslov plošče

#	Ime	Priimek	Uporabniško ime
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter

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

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

S skupinami seznamov

Preprosto vključite skupine seznamov polne širine v katero koli ploščo.

Naslov plošče

Tukaj je nekaj privzete vsebine plošče. 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
Vestibulum in 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>

Omogočite brskalnikom, da določijo dimenzije videa ali diaprojekcije glede na širino vsebovalnega bloka, tako da ustvarijo lastno razmerje, ki bo ustrezno merilo v kateri koli napravi.

Pravila se uporabljajo neposredno za elemente <iframe>, <embed>, <video>in ; <object>po želji uporabite eksplicitni razred potomca, .embed-responsive-itemko želite uskladiti slog za druge atribute.

Pro-Nasvet! Ni vam treba vključiti frameborder="0"v svoj <iframe>s, saj to preglasimo namesto vas.

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

Privzeto dobro

Uporabite vodnjak kot preprost učinek na elementu, da mu zagotovite vstavljeni učinek.

Glej, v vodnjaku sem!

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

Izbirni pouk

Kontrolirajte oblazinjenje in zaobljene vogale z dvema izbirnima razredoma modifikatorjev.

Glej, v velikem vodnjaku sem!

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

Glej, v majhnem vodnjaku sem!

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

Komponente

Glifikoni

Razpoložljivi glifi

Kako uporabiti

Ne mešajte z drugimi komponentami

Samo za uporabo na praznih elementih

Spreminjanje lokacije pisave ikone

Dostopne ikone

Primeri

Spustni meniji

Primer

Poravnava

Morda bo potrebno dodatno pozicioniranje

Zastarela .pull-rightporavnava

Glave

Razdelilnik

Onemogočeni elementi menija

Skupine gumbov

Namigi orodij in pojavni elementi v skupinah gumbov zahtevajo posebno nastavitev

Zagotovite pravilnost rolein zagotovite oznako

Osnovni primer

Orodna vrstica z gumbi

Dimenzioniranje

Gnezdenje

Navpična variacija

Poravnane skupine gumbov

Ravnanje z mejami

IE8 in meje

Z <a>elementi

Povezave, ki delujejo kot gumbi

Z <button>elementi

Spustni meniji gumbov

Odvisnost od vtičnika

Spustni meni z enim gumbom

Spustni meni razdeljenih gumbov

Dimenzioniranje

Različica spuščanja

Vhodne skupine

<input>Samo besedilni

Namigi orodij in pojavni elementi v vnosnih skupinah zahtevajo posebno nastavitev

Ne mešajte z drugimi komponentami

Vedno dodajte oznake

Osnovni primer

Dimenzioniranje

Potrditvena polja in radijski dodatki

Dodatki za gumbe

Gumbi s spustnimi meniji

Segmentirani gumbi

Več gumbov

Navs

Uporaba navs za plošče z zavihki zahteva vtičnik za zavihke JavaScript

Omogoči dostop do navigacije, ki se uporablja kot navigacija

Zavihki

Tablete

Upravičeno

Safari in odzivna upravičena navigacija

Onemogočene povezave

Funkcionalnost povezave ni prizadeta

Uporaba spustnih menijev

Zavihki s spustnimi meniji

Tablete s spustnimi listi

Navbar

Privzeta vrstica za krmarjenje

Prepolna vsebina

Potreben je vtičnik JavaScript

Spreminjanje prelomne točke strnjene mobilne vrstice za krmarjenje

Naj bodo navbarji dostopni

Podoba blagovne znamke

Obrazci

Opozorila glede mobilnih naprav

Vedno dodajte oznake

Gumbi

Uporaba glede na kontekst

Besedilo

Nenavigacijske povezave

Poravnava komponent

Desna poravnava več komponent

Pritrjen na vrh

Oblazinjenje telesa je potrebno

Pritrjen na dno

Zastarela `.pull-right`poravnava

Zagotovite pravilnost `role`in zagotovite oznako

Z `<a>`elementi

Z `<button>`elementi

`<input>`Samo besedilni