Dostupni glifovi

Uključuje više od 250 glifa u formatu fonta iz Glyphicon Halflings skupa. Glyphicons Halflings obično nisu dostupni besplatno, ali njihov tvorac ih je učinio dostupnima za Bootstrap besplatno. Kao zahvalu, samo vas molimo da vratite poveznicu na Glyphicons kad god je to moguće.

glifikon glifikon-zvjezdica
glifikon glifikon-plus
glifikon glifikon-euro
glifikon glifikon-eur
glifikon glifikon-minus
glifikon glifikon-oblak
glifikon glifikon-omotnica
glifikon glifikon-olovka
glifikon glifikon-staklo
glifikon glifikon-glazba
glifikon glifikon-pretraga
glifikon glifikon-srce
glifikon glifikon-zvijezda
glifikon glifikon-zvijezda-prazan
glifikon glifikon-korisnik
glifikon glifikon-film
glifikon glifikon-th-velik
glifikon glifikon-th
glifikon glifikon-th-list
glifikon glifikon-ok
glifikon glifikon-ukloniti
glifikon uvećanje glifikona
glifikon glyphicon-zum-out
glifikon glifikon-isključen
glifikon glifikon-signal
glifikon glifikon-zupčanik
glifikon glifikon-smeće
glifikon glifikon-dom
glifikon glifikonska datoteka
glifikon glifikon-vrijeme
glifikon glifikon-put
glifikon glyphicon-download-alt
glifikon preuzimanje glifikona
glifikon glifikon-upload
glifikon glyphicon-inbox
glifikon glifikon-igranje-krug
glifikon glifikon-ponoviti
glifikon glifikon-osvježiti
glifikon glyphicon-list-alt
glifikon glifikon-brava
glifikon glifikon-zastava
glyphicon glyphicon-slušalice
glifikon glyphicon-volume-off
glifikon glyphicon-volume-down
glifikon glyphicon-volume-up
glifikon glyphicon-qrcode
glifikon glifikon-crtični kod
glifikon glifikon-tag
glifikon oznake-glifikona
glifikon glifikon-knjiga
glifikon glifikon-oznaka
glifikon glifikon-tisak
glifikon glifikon-kamera
glifikon glifikon-font
glifikon glifikon-podebljano
glifikon glifikon-kurziv
glifikon visina-teksta-glifikona
glifikon širina-teksta-glifikona
glifikon glifikon-poravnaj-lijevo
glifikon glifikon-poravnaj-centriraj
glifikon glifikon-poravnaj-desno
glifikon glyphicon-align-justify
glifikon glifikon-popis
glifikon glifikon-uvlaka-lijevo
glifikon glifikon-uvlaka-desno
glifikon glyphicon-facetime-video
glifikon glifikon-slika
glifikon glifikon-karta-oznaka
glifikon glifikon-podešavati
glifikon glifikon-nijansirati
glifikon glyphicon-urediti
glifikon glifikon-dijeliti
glifikon glifikon-ček
glifikon glifikon-potez
glifikon glifikon-korak-unazad
glifikon glifikon-brzo-natrag
glifikon glifikon-natrag
glifikon glifikon-igra
glifikon glifikon-stanka
glifikon glifikon-stop
glifikon glifikon-naprijed
glifikon glifikon-fast-forward
glifikon glifikon-korak-naprijed
glifikon glifikon-izbaciti
glifikon glifikon-ševron-lijevo
glifikon glifikon-ševron-desno
glifikon glifikon-znak-plus
glifikon glifikon-znak-minus
glifikon glifikon-ukloni-znak
glifikon glifikon-ok-znak
glifikon glifikon-upitnik
glifikon glifikon-info-znak
glifikon glifikon-snimka zaslona
glifikon glifikon-ukloni-krug
glifikon glifikon-ok-krug
glifikon glifikon-zabrana-krug
glifikon glifikon-strelica-lijevo
glifikon glifikon-strelica-desno
glifikon glifikon-strelica-gore
glifikon glifikon-strelica-dolje
glifikon glyphicon-share-alt
glifikon glyphicon-resize-full
glifikon glyphicon-resize-small
glifikon glifikon-uzvičnik-znak
glifikon glifikon-dar
glifikon glifikon-list
glifikon glifikon-vatra
glifikon glyphicon-eye-open
glifikon glifikon-oko-zatvori
glifikon glifikon-znak-upozorenja
glifikon glifikon-ravnina
glifikon glifikon-kalendar
glifikon glifikon-slučajan
glifikon glifikon-komentar
glifikon glifikon-magnet
glifikon glyphicon-chevron-up
glifikon glifikon-ševron-dolje
glyphicon glyphicon-retweet
glifikon glifikon-košarica
glifikon glifikon-mapa-zatvaranje
glifikon glyphicon-folder-open
glifikon glyphicon-resize-vertical
glifikon glyphicon-resize-horizontal
glifikon glifikon-hdd
glifikon glyphicon-bullhorn
glifikon glifikon-zvono
glifikon glifikon-certifikat
glifikon glifikon-palac gore
glifikon glifikon-palac-dolje
glifikon glifikon-ruka-desna
glifikon glifikon-ruka-lijeva
glifikon glyphicon-hand-up
glifikon glyphicon-hand-down
glifikon glifikon-krug-strelica-desno
glifikon glifikon-krug-strelica-lijevo
glifikon glifikon-krug-strelica-gore
glifikon glifikon-krug-strelica-dolje
glifikon glifikon-globus
glifikon glifikon-ključ
glifikon glifikon-zadaci
glifikon glifikon-filter
glifikon glifikon-aktovka
glifikon glifikon-puni zaslon
glifikon glyphicon-kontrolna ploča
glifikon glifikon-spajalica
glifikon glifikon-srce-prazno
glifikon glifikon-link
glifikon glifikon-telefon
glifikon glifikon-pribadača
glifikon glifikon-usd
glifikon glifikon-gbp
glifikon glifikon-sort
glifikon glifikon-razvrstaj-po-abecedi
glifikon glyphicon-sort-by-alphabet-alt
glifikon glifikon-sort-by-order
glifikon glyphicon-sort-by-order-alt
glifikon sortiranje-po-atributima glifikona
glifikon glifikon-razvrstaj-po-atributima-alt
glifikon glifikon-bez provjere
glifikon glifikon-proširiti
glifikon glifikon-srušiti se
glifikon glifikon-sažimanje
glyphicon prijava-glyphicon
glifikon glifikon-bljesak
glifikon glifikon-odjava
glifikon glyphicon-novi-prozor
glifikon glifikon-zapis
glifikon glifikon-spremiti
glifikon glifikon-otvoren
glifikon glifikon-spremljen
glifikon glifikon-uvoz
glifikon glifikon-izvoz
glifikon glifikon-poslati
glifikon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glifikon glyphicon-floppy-save
glifikon glyphicon-floppy-open
glifikon glifikon-kreditna-kartica
glifikon glifikon-prijenos
glifikon glifikon-pribor za jelo
glifikon glifikon-zaglavlje
glifikon glifikon-stisnut
glyphicon glyphicon-slušalica
glifikon glyphicon-phone-alt
glifikon glifikon-kula
glifikon glifikon-statistika
glifikon glifikon-sd-video
glifikon glifikon-hd-video
glifikon glifikon-titlovi
glifikon glifikon-zvuk-stereo
glifikon glyphicon-sound-dolby
glifikon glifikon-zvuk-5-1
glifikon glifikon-zvuk-6-1
glifikon glifikon-zvuk-7-1
glifikon glyphicon-copyright-mark
glifikon glifikon-registracijski-žig
glifikon preuzimanje-glyphicon-oblaka
glifikon prijenos u oblak glifikona
glifikon glifikon-drvo-četinar
glifikon glyphicon-drvo-listopadno
glifikon glifikon-cd
gliphicon gliphicon-save-file
glifikon glifikon-otvorena-datoteka
glifikon glifikon-nivo gore
glifikon glifikon-kopija
glifikon glifikon-pasta
glifikon glifikon-upozorenje
glifikon glifikon-ekvilajzer
glifikon glifikon-kralj
glifikon glifikon-kraljica
glifikon glifikon-pijun
glifikon glifikon-biskup
glifikon glifikon-vitez
glyphicon glyphicon-baby-formula
glifikon glifikon-šator
glifikon glifikon-ploča
glifikon glifikon-ležaj
glifikon glifikon-jabuka
glifikon glifikon-brisati
glifikon glifikon-pješčani sat
glifikon glifikon-svjetiljka
glifikon glifikon-duplikat
glifikon glifikon-kasica-prasica
glifikon glifikon-škare
glyphicon glyphicon-bitcoin
glifikon glifikon-btc
glifikon glifikon-xbt
glifikon glifikon-jen
glifikon glifikon-jpy
glifikon glifikon-rublja
glifikon glifikon-trljati
glifikon glifikon-ljestvica
glifikon glifikon-ledena lizalica
glifikon glyphicon-ice-lolly-tasted
glifikon glifikon-obrazovanje
glifikon glyphicon-opcija-vodoravno
glifikon glyphicon-opcija-vertikala
glifikon glifikon-meni-hamburger
glifikon glifikon-modalni-prozor
glifikon glifikon-ulje
glifikon glifikon-zrno
glifikon glifikon-sunčane naočale
glifikon veličina-teksta-glifikona
glifikon glifikon-boja-teksta
glifikon glifikon-tekst-pozadina
glifikon glifikon-objekt-poravnaj-top
glifikon glifikon-objekt-poravnaj-dno
glifikon glifikon-objekt-poravnanje-vodoravno
glifikon glifikon-objekt-poravnaj-lijevo
glifikon glifikon-objekt-poravnaj-vertikalno
glifikon glifikon-objekt-poravnaj-desno
glifikon glifikon-trokut-desno
glifikon glifikon-trokut-lijevo
glifikon glifikon-trokut-dno
glifikon glifikon-trokut-vrh
glifikon glifikon-konzola
glifikon glifikon-superskript
glifikon glifikon-subscript
glifikon glifikon-izbornik-lijevo
glifikon glifikon-izbornik-desno
glifikon glyphicon-menu-down
glifikon glyphicon-menu-up

Kako koristiti

Zbog performansi, sve ikone zahtijevaju osnovnu klasu i individualnu klasu ikona. Za korištenje, postavite sljedeći kod bilo gdje. Pazite da ostavite razmak između ikone i teksta za pravilno ispunjavanje.

Ne miješati s drugim komponentama

Klase ikona ne mogu se izravno kombinirati s drugim komponentama. Ne smiju se koristiti zajedno s drugim klasama na istom elementu. Umjesto toga dodajte ugniježđene <span>i primijenite klase ikona na <span>.

Samo za upotrebu na praznim elementima

Klase ikona trebale bi se koristiti samo na elementima koji ne sadrže tekstualni sadržaj i nemaju podređene elemente.

Promjena lokacije fonta ikone

Bootstrap pretpostavlja da će se datoteke fonta ikona nalaziti u ../fonts/direktoriju, u odnosu na kompajlirane CSS datoteke. Premještanje ili preimenovanje tih datoteka fontova znači ažuriranje CSS-a na jedan od tri načina:

Promijenite @icon-font-pathi/ili @icon-font-namevarijable u izvornim datotekama Less.
Upotrijebite opciju relativnih URL-ova koju nudi Less kompilator.
Promijenite url()staze u kompajliranom CSS-u.

Upotrijebite bilo koju opciju koja najbolje odgovara vašoj specifičnoj postavci razvoja.

Dostupne ikone

Moderne verzije pomoćnih tehnologija najavit će sadržaj generiran CSS-om, kao i specifične Unicode znakove. Kako bismo izbjegli nenamjeran i zbunjujući ispis u čitačima zaslona (osobito kada se ikone koriste isključivo za ukrašavanje), skrivamo ih aria-hidden="true"atributom.

Ako koristite ikonu za prenošenje značenja (umjesto samo kao ukrasni element), osigurajte da se to značenje prenosi i na pomoćne tehnologije – na primjer, uključite dodatni sadržaj, vizualno skriven s .sr-onlyrazredom.

Ako kreirate kontrole bez drugog teksta (kao što je <button>ono što sadrži samo ikonu), uvijek biste trebali pružiti alternativni sadržaj za prepoznavanje svrhe kontrole, tako da ima smisla za korisnike pomoćnih tehnologija. U ovom slučaju, možete dodati aria-labelatribut na samu kontrolu.

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

Primjeri

Upotrijebite ih u gumbima, grupama gumba za alatnu traku, navigaciju ili unose obrazaca ispred.

<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 koja se koristi u upozorenju kako bi se poručilo da se radi o poruci pogreške, s dodatnim .sr-onlytekstom za prenošenje ovog savjeta korisnicima pomoćnih tehnologija.

Unesite važeću e-mail adresu

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

Kontekstualni izbornik koji se može mijenjati za prikaz popisa veza. Interaktivan s padajućim JavaScript dodatkom .

Primjer

Zamotajte okidač padajućeg izbornika i padajući izbornik unutar .dropdownili neki drugi element koji deklarira position: relative;. Zatim dodajte HTML izbornika.

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

Padajući izbornici mogu se promijeniti tako da se proširuju prema gore (umjesto prema dolje) dodavanjem .dropuproditelju.

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

Poravnanje

Prema zadanim postavkama, padajući izbornik automatski se postavlja 100% od vrha i duž lijeve strane nadređenog izbornika. Dodaj .dropdown-menu-rightna a .dropdown-menuza desno poravnanje padajućeg izbornika.

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

Zaglavlja

Dodajte zaglavlje za označavanje odjeljaka radnji u bilo kojem padajućem izborniku.

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

Šestar

Dodajte razdjelnik za odvajanje niza veza u padajućem izborniku.

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

Onemogućene stavke izbornika

Dodajte .disabledna <li>padajući izbornik da biste onemogućili vezu.

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

Grupirajte niz gumba zajedno u jednom retku s grupom gumba. Dodajte neobavezni JavaScript radio i ponašanje u stilu okvira s našim dodatkom za gumbe .

Opisi alata i skočni prozori u grupama gumba zahtijevaju posebnu postavku

Kada koristite opise alata ili skočne prozore na elementima unutar .btn-group, morat ćete navesti opciju container: 'body'za izbjegavanje neželjenih nuspojava (kao što je širenje elementa i/ili gubitak zaobljenih kutova kada se aktiviraju opis alata ili skočni prozor).

Provjerite ispravnost `role`i dostavite oznaku

Kako bi pomoćne tehnologije – poput čitača zaslona – mogle prenijeti da je niz gumba grupiran, rolepotrebno je osigurati odgovarajući atribut. Za grupe gumba to bi bilo role="group", dok bi alatne trake trebale imati role="toolbar".

Jedna iznimka su grupe koje sadrže samo jednu kontrolu (na primjer, grupe opravdanih gumba s <button>elementima) ili padajući izbornik.

Osim toga, grupe i alatne trake trebale bi dobiti eksplicitnu oznaku, jer ih većina pomoćnih tehnologija inače neće objaviti, unatoč prisutnosti ispravnog roleatributa. U ovdje navedenim primjerima koristimo , ali mogu se koristiti aria-labeli alternative poput .aria-labelledby

Osnovni primjer

Omotajte niz gumba .btns .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>

Kombinirajte skupove <div class="btn-group">u <div class="btn-toolbar">za složenije 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

Umjesto primjene klasa veličine gumba na svaki gumb u grupi, samo dodajte svakom gumbu .btn-group-*, .btn-groupuključujući kada ugniježdite više grupa.

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

Gniježđenje

Postavite .btn-groupunutar drugog .btn-groupkada želite padajuće izbornike pomiješane s nizom gumba.

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

Vertikalna varijacija

Neka skup gumba izgleda okomito, a ne vodoravno. Padajući izbornici gumba za dijeljenje ovdje nisu podržani.

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

Opravkane grupe gumba

Neka se grupa gumba rasteže u jednakim veličinama kako bi obuhvatila cijelu širinu svog roditelja. Također radi s padajućim izborom gumba unutar grupe gumba.

Rukovanje granicama

Zbog specifičnog HTML-a i CSS-a koji se koriste za opravdavanje gumba (naime display: table-cell), granice između njih su udvostručene. U uobičajenim grupama gumba margin-left: -1pxkoristi se za slaganje obruba umjesto za njihovo uklanjanje. Međutim, marginne radi s display: table-cell. Kao rezultat toga, ovisno o vašim prilagodbama Bootstrapa, možda ćete htjeti ukloniti ili promijeniti boju obruba.

IE8 i granice

Internet Explorer 8 ne renderira obrube na gumbima u opravdanoj grupi gumba, bilo da su uključeni <a>ili <button>elementi. Da biste to izbjegli, zamotajte svaki gumb u drugi .btn-group.

Pogledajte #12476 za više informacija.

S `<a>`elementima

Samo umotajte niz .btns u .btn-group.btn-group-justified.

Lijevo sredina Pravo

Lijevo sredina

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

Veze koje djeluju kao gumbi

Ako se <a>elementi koriste kao gumbi – pokreću funkcionalnost unutar stranice, umjesto navigacije do drugog dokumenta ili odjeljka unutar trenutne stranice – također im treba dati odgovarajući role="button".

S `<button>`elementima

Da biste koristili opravdane grupe gumba s <button>elementima, morate svaki gumb omotati u grupu gumba . Većina preglednika ne primjenjuje ispravno naš CSS za opravdanje <button>elemenata, ali budući da podržavamo padajuće gumbe, možemo to zaobići.

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

Upotrijebite bilo koji gumb za pokretanje padajućeg izbornika tako da ga postavite unutar .btn-groupi date odgovarajuću oznaku izbornika.

Ovisnost o dodacima

Padajući izbornici gumba zahtijevaju da dodatak za padajući izbornik bude uključen u vašu verziju Bootstrapa.

Padajući izbornik s jednim gumbom

Pretvorite gumb u padajući izbornik s nekim osnovnim promjenama označavanja.

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

Padajući izbornici gumba Split

Slično, stvorite podijeljene padajuće izbornike gumba s istim promjenama označavanja, samo s posebnim 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

Padajući izbornik gumba radi s gumbima svih veličina.

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

Pokreni padajuće izbornike iznad elemenata dodavanjem .dropuproditelju.

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

Proširite kontrole obrasca dodavanjem teksta ili gumba prije, poslije ili s obje strane bilo kojeg tekstualnog <input>. Upotrijebite .input-groups .input-group-addonili .input-group-btnza dodavanje elemenata ispred ili u jedan .form-control.

`<input>`Samo tekstualni

Izbjegavajte korištenje <select>elemenata ovdje jer se ne mogu u potpunosti stilizirati u WebKit preglednicima.

Izbjegavajte korištenje <textarea>elemenata ovdje jer se njihov rowsatribut u nekim slučajevima neće poštovati.

Opisi alata i skočni prozori u grupama unosa zahtijevaju posebnu postavku

Kada koristite opise alata ili skočne prozore na elementima unutar .input-group, morat ćete navesti opciju container: 'body'za izbjegavanje neželjenih nuspojava (kao što je širenje elementa i/ili gubitak zaobljenih kutova kada se aktiviraju opis alata ili skočni prozor).

Ne miješati s drugim komponentama

Nemojte miješati grupe obrazaca ili klase stupaca mreže izravno s ulaznim grupama. Umjesto toga, ugniježdite grupu unosa unutar grupe obrazaca ili elementa koji se odnosi na rešetku.

Uvijek dodajte oznake

Čitači zaslona imat će problema s vašim obrascima ako ne uključite oznaku za svaki unos. Za ove grupe unosa osigurajte da se svaka dodatna oznaka ili funkcija prenese na pomoćne tehnologije.

Točna tehnika koja će se koristiti (vidljivi <label>elementi, <label>elementi skriveni korištenjem .sr-onlyklase ili korištenje atributa aria-label, aria-labelledby, aria-describedby, titleili placeholder) i koje će dodatne informacije trebati prenijeti ovisit će o točnom tipu widgeta sučelja koji implementirate. Primjeri u ovom odjeljku daju nekoliko predloženih pristupa specifičnih za slučaj.

Osnovni primjer

Postavite jedan dodatak ili gumb s obje strane ulaza. Također možete postaviti jedan s obje strane ulaza.

Ne podržavamo višestruke dodatke ( .input-group-addonili .input-group-btn) na jednoj strani.

Ne podržavamo višestruke kontrole obrazaca u jednoj grupi unosa.

<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 klase veličine obrasca samom .input-groupsebi i sadržaj unutar će automatski promijeniti veličinu—nema potrebe za ponavljanjem klasa veličine kontrole obrasca na svakom 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>

Polje za potvrdu i dodaci za radio

Postavite bilo koji potvrdni okvir ili radio opciju unutar dodatka ulazne grupe umjesto teksta.

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

Dodaci gumba

Gumbi u grupama unosa malo su drugačiji i zahtijevaju jednu dodatnu razinu ugniježđivanja. Umjesto .input-group-addon, morat ćete koristiti .input-group-btnza omotavanje gumba. Ovo je potrebno zbog zadanih stilova preglednika koji se ne mogu nadjačati.

<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 padajućim menijima

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

Više gumba

Iako možete imati samo jedan dodatak po strani, možete imati više gumba unutar jednog .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 dostupne u Bootstrapu imaju dijeljene oznake, počevši od osnovne .navklase, kao i dijeljena stanja. Zamijenite klase modifikatora za prebacivanje između stilova.

Korištenje navigacija za ploče s karticama zahtijeva JavaScript dodatak za kartice

Za kartice s područjima za kartice morate koristiti JavaScript dodatak za kartice . Oznaka će također zahtijevati dodatne rolei ARIA atribute – pogledajte primjer oznake dodatka za dodatne pojedinosti.

Učini dostupnim navigacije koje se koriste kao navigacija

Ako koristite navs za pružanje navigacijske trake, svakako dodajte role="navigation"u najlogičniji roditeljski spremnik <ul>ili omotajte <nav>element oko cijele navigacije. Nemojte dodavati ulogu <ul>samoj jer bi to spriječilo da je pomoćne tehnologije najave kao stvarni popis.

Kartice

Imajte na umu da .nav-tabsklasa zahtijeva .navosnovnu klasu.

<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

Uzmite isti HTML, ali .nav-pillsumjesto njega upotrijebite:

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

Pilule se također mogu okomito slagati. Samo dodajte .nav-stacked.

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

Opravdano

Lako napravite kartice ili pilule jednake širine roditelju na zaslonima širim od 768 piksela pomoću .nav-justified. Na manjim zaslonima navigacijske veze su složene.

Oprostene navigacijske veze na navigacijskoj traci trenutno nisu podržane.

Safari i responzivna opravdana navigacija

Od verzije 9.1.2, Safari pokazuje grešku u kojoj vodoravna promjena veličine vašeg preglednika uzrokuje pogreške pri prikazivanju u opravdanoj navigaciji koje se brišu nakon osvježavanja. Ovaj bug također je prikazan u primjeru opravdane navigacije .

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

Onemogućene veze

Za bilo koju navigacijsku komponentu (kartice ili pilule) dodajte sive veze i .disabledbez efekata lebdenja .

Funkcionalnost veze nije pogođena

Ova će klasa promijeniti samo <a>izgled, a ne njegovu funkcionalnost. Koristite prilagođeni JavaScript da biste ovdje onemogućili veze.

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

Korištenje padajućih izbornika

Dodajte padajuće izbornike s malo dodatnog HTML-a i padajućeg JavaScript dodatka .

Kartice s padajućim izbornikom

<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 padajućim izbornikom

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

Navigacijske trake su responzivne meta komponente koje služe kao navigacijska zaglavlja za vašu aplikaciju ili web mjesto. Počinju sažeti (i mogu se mijenjati) u mobilnim prikazima i postaju vodoravni kako se dostupna širina okvira za prikaz povećava.

Oprostene navigacijske veze na navigacijskoj traci trenutno nisu podržane.

Prelivajući sadržaj

Budući da Bootstrap ne zna koliko prostora treba sadržaju na navigacijskoj traci, mogli biste naići na probleme s prelamanjem sadržaja u drugi red. Da biste to riješili, možete:

Smanjite količinu ili širinu stavki navigacijske trake.
Sakrijte određene stavke na navigacijskoj traci na određenim veličinama zaslona pomoću responzivnih uslužnih klasa .
Promijenite točku u kojoj se vaša navigacijska traka prebacuje između sažetog i vodoravnog načina rada. Prilagodite @grid-float-breakpointvarijablu ili dodajte vlastiti medijski upit.

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

Zamijenite marku navigacijske trake vlastitom slikom zamjenom teksta za <img>. Budući da .navbar-brandima vlastitu ispunu i visinu, možda ćete morati nadjačati neki CSS ovisno o vašoj slici.

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

Postavite sadržaj obrasca unutar .navbar-formradi ispravnog okomitog poravnanja i smanjenog ponašanja u uskim prozorima. Pomoću opcija poravnanja odlučite gdje će se nalaziti unutar sadržaja navigacijske trake.

Kao heads up, .navbar-formdijeli velik dio svog koda s .form-inlineputem mixina. Neke kontrole obrazaca, poput ulaznih grupa, mogu zahtijevati fiksne širine da bi se ispravno prikazale unutar navigacijske trake.

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

Uvijek dodajte oznake

Čitači zaslona imat će problema s vašim obrascima ako ne uključite oznaku za svaki unos. Za ove ugrađene obrasce možete sakriti oznake pomoću .sr-onlyklase. Postoje daljnje alternativne metode davanja oznake za pomoćne tehnologije, kao što je aria-labelatribut ili aria-labelledby. titleAko ništa od toga nije prisutno, čitači zaslona mogu pribjeći korištenju placeholderatributa, ako postoji, ali imajte na umu da placeholderse ne preporuča korištenje kao zamjena za druge metode označavanja.

Dodajte .navbar-btnklasu <button>elementima koji se ne nalaze u <form>da biste ih okomito centrirali na navigacijskoj traci.

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

Zamotajte nizove teksta u element s .navbar-text, obično na <p>oznaci za pravilan početak i boju.

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

Za ljude koji koriste standardne veze koje nisu unutar uobičajene navigacijske komponente navigacijske trake, upotrijebite .navbar-linkklasu za dodavanje odgovarajućih boja za zadane i inverzne opcije navigacijske trake.

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

Poravnajte navigacijske veze, obrasce, gumbe ili tekst pomoću klasa pomoćnih programa .navbar-leftili . .navbar-rightObje klase će dodati CSS float u navedenom smjeru. Na primjer, da biste poravnali navigacijske veze, stavite ih odvojeno <ul>s odgovarajućom primijenjenom klasom korisnosti.

Ove klase su miješane verzije .pull-lefti .pull-right, ali su ograničene na medijske upite radi lakšeg rukovanja komponentama navigacijske trake na svim veličinama uređaja.

Dodajte .navbar-fixed-topi uključite .containerili .container-fluidu središte i sadržaj navigacijske trake.

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

Potrebna podstava za tijelo

Fiksna navigacijska traka prekrit će vaš ostali sadržaj, osim ako ne dodate paddingna vrh <body>. Isprobajte vlastite vrijednosti ili upotrijebite naš isječak u nastavku. Savjet: Prema zadanim postavkama navigacijska traka je visoka 50 piksela.

body { padding-top: 70px; }

Obavezno uključite ovo nakon osnovnog Bootstrap CSS-a.

Dodajte .navbar-fixed-bottomi uključite .containerili .container-fluidu središte i sadržaj navigacijske trake.

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

Potrebna podstava za tijelo

Fiksna navigacijska traka prekrit će vaš ostali sadržaj, osim ako ne dodate paddingna dno <body>. Isprobajte vlastite vrijednosti ili upotrijebite naš isječak u nastavku. Savjet: Prema zadanim postavkama navigacijska traka je visoka 50 piksela.

body { padding-bottom: 70px; }

Obavezno uključite ovo nakon osnovnog Bootstrap CSS-a.

Napravite navigacijsku traku pune širine koja se pomiče zajedno sa stranicom dodavanjem .navbar-static-topi uključivanjem .containerili .container-fluidza centriranje i podmetanje sadržaja navigacijske trake.

Za razliku od .navbar-fixed-*klasa, ne morate mijenjati ispune na body.

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

Izmijenite izgled navigacijske trake dodavanjem .navbar-inverse.

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

Krušne mrvice

Označite lokaciju trenutne stranice unutar navigacijske hijerarhije.

Razdjelnici se automatski dodaju u CSS kroz :beforei content.

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

Paginacija

Navedite veze za paginaciju za svoju web-lokaciju ili aplikaciju s komponentom paginacije za više stranica ili jednostavnijom alternativom straničnika .

Zadana paginacija

Jednostavno označavanje stranica inspirirano Rdioom, izvrsno za aplikacije i rezultate pretraživanja. Veliki blok teško je promašiti, lako ga je prilagoditi i pruža velika područja klika.

<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čavanje komponente paginacije

Komponenta označavanja stranica trebala bi biti omotana u <nav>element da bi se identificirala kao navigacijski odjeljak za čitače zaslona i druge pomoćne tehnologije. Nadalje, budući da stranica vjerojatno već ima više od jednog takvog odjeljka za navigaciju (kao što je primarna navigacija u zaglavlju ili navigacija na bočnoj traci), preporučljivo je pružiti opis aria-labelkoji <nav>odražava njegovu svrhu. Na primjer, ako se komponenta paginacije koristi za navigaciju između niza rezultata pretraživanja, odgovarajuća bi oznaka mogla biti aria-label="Search results pages".

Onesposobljena i aktivna stanja

Veze se mogu prilagoditi različitim okolnostima. Koristite .disabledza poveznice na koje se ne može kliknuti i .activeza označavanje trenutne stranice.

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

Preporučujemo da zamijenite aktivna ili onemogućena sidra za <span>ili da izostavite sidro u slučaju strelica za prethodnu/sljedeću kako biste uklonili funkciju klika uz zadržavanje planiranih stilova.

<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 li veću ili manju paginaciju? Dodajte .pagination-lgili .pagination-smza dodatne veličine.

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

Pager

Brze prethodne i sljedeće veze za jednostavne implementacije paginacije s laganim označavanjem i stilovima. Izvrstan je za jednostavne stranice poput blogova ili časopisa.

Zadani primjer

Prema zadanim postavkama, dojavljivač centrira veze.

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

Usklađene veze

Alternativno, svaku vezu možete poravnati sa strane:

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

Izborno onemogućeno stanje

Pager veze također koriste opću .disabledupotrebnu klasu 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>

Primjer

Primjer naslova Novo

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

Dostupne varijacije

Dodajte bilo koju od niže navedenih klasa modifikatora da promijenite izgled oznake.

Zadana primarna informacija o uspjehu Upozorenje Opasnost

<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 gomilu etiketa?

Problemi s prikazivanjem mogu nastati kada imate desetke ugrađenih oznaka unutar uskog spremnika, od kojih svaka sadrži svoj inline-blockelement (poput ikone). Put oko ovoga je postavljanje display: inline-block;. Za kontekst i primjer pogledajte #13219 .

Jednostavno istaknite nove ili nepročitane stavke dodavanjem <span class="badge">na poveznice, Bootstrap navigacije i više.

Inbox42

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

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

Samourušavanje

Kada nema novih ili nepročitanih stavki, značke će se jednostavno skupiti (putem CSS-ovog :emptyselektora) pod uvjetom da unutar njih ne postoji nikakav sadržaj.

Kompatibilnost s različitim preglednicima

Značke se neće same skupiti u Internet Exploreru 8 jer nema podršku za :emptybirač.

Prilagođava se aktivnim navigacijskim stanjima

Ugrađeni stilovi uključeni su za postavljanje bedževa u aktivna stanja u navigaciji pilula.

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

Lagana, fleksibilna komponenta koja po želji može proširiti cijeli okvir za prikaz kako bi se prikazao ključni sadržaj na vašoj web-lokaciji.

Pozdrav svijete!

Ovo je jednostavna herojska jedinica, jednostavna komponenta u stilu jumbotrona za privlačenje dodatne pozornosti na istaknuti sadržaj ili informacije.

Saznajte više

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

Kako bi jumbotron bio pune širine i bez zaobljenih kutova, postavite ga izvan svih .containers i umjesto toga dodajte .containerunutar.

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

Jednostavna ljuska za h1prikladno raspoređivanje i segmentiranje dijelova sadržaja na stranici. Može koristiti h1zadani smallelement, kao i većinu drugih komponenti (s dodatnim stilovima).

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

Proširite Bootstrapov sustav rešetki s komponentom minijatura za jednostavan prikaz rešetki slika, videozapisa, teksta i više.

Ako tražite prezentaciju sličica različitih visina i/ili širina sličnu Pinterestu, morat ćete upotrijebiti dodatak treće strane kao što je Masonry , Isotope ili Salvattore .

Zadani primjer

Prema zadanim postavkama, Bootstrapove sličice dizajnirane su za prikazivanje povezanih slika s minimalnim potrebnim oznakama.

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

Prilagođeni sadržaj

Uz malo dodatnog označavanja, moguće je sličicama dodati bilo koju vrstu HTML sadržaja poput naslova, odlomaka ili gumba.

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.

Dugme Dugme

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.

Dugme Dugme

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.

Dugme Dugme

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

Omogućite kontekstualne povratne poruke za tipične radnje korisnika s nekoliko dostupnih i fleksibilnih poruka upozorenja.

Primjeri

Zamotajte bilo koji tekst i izborni gumb za odbacivanje u .alertjednu od četiri kontekstualne klase (npr. .alert-success) za osnovne poruke upozorenja.

Nema zadane klase

Upozorenja nemaju zadane klase, samo osnovne i modifikatorske klase. Zadano sivo upozorenje nema previše smisla, pa morate navesti vrstu putem kontekstualne klase. Birajte između uspjeha, informacija, upozorenja ili opasnosti.

Dobro napravljeno! Uspješno ste pročitali ovu važnu poruku upozorenja.

Glavu gore! Ovo upozorenje zahtijeva vašu pozornost, ali nije posebno važno.

Upozorenje! Bolje se provjeri, ne izgledaš dobro.

O jebote! Promijenite nekoliko stvari i pokušajte ponovo poslati.

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

Upozorenja koja se mogu odbaciti

Nadogradite bilo koje upozorenje dodavanjem neobaveznog .alert-dismissiblegumba za zatvaranje.

Zahtijeva JavaScript dodatak upozorenja

Za potpuno funkcionalna upozorenja koja se mogu odbaciti, morate koristiti JavaScript dodatak za upozorenja .

Upozorenje! Bolje se provjeri, ne izgledaš 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>

Osigurajte ispravno ponašanje na svim uređajima

Obavezno koristite <button>element s data-dismiss="alert"atributom podataka.

Veze u upozorenjima

Upotrijebite .alert-linkklasu pomoćnih programa za brzo pružanje odgovarajućih veza u boji unutar bilo kojeg upozorenja.

Dobro napravljeno! Uspješno ste pročitali ovu važnu poruku upozorenja .

Glavu gore! Ovo upozorenje zahtijeva vašu pozornost , ali nije super važno.

Upozorenje! Bolje se provjeri, ne izgledaš baš dobro .

O jebote! Promijenite nekoliko stvari i pokušajte ponovo poslati.

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

Pružite ažurne povratne informacije o napretku tijeka rada ili radnji pomoću jednostavnih, ali fleksibilnih traka napretka.

Kompatibilnost s različitim preglednicima

Trake napretka koriste CSS3 prijelaze i animacije za postizanje nekih svojih učinaka. Ove značajke nisu podržane u Internet Exploreru 9 i nižim ili starijim verzijama Firefoxa. Opera 12 ne podržava animacije.

Kompatibilnost s Pravilima sigurnosti sadržaja (CSP).

Ako vaša web stranica ima Pravila o sigurnosti sadržaja (CSP) koja ne dopuštaju style-src 'unsafe-inline', tada nećete moći koristiti ugrađene styleatribute za postavljanje širine trake napretka kao što je prikazano u našim primjerima u nastavku. Alternativne metode za postavljanje širina koje su kompatibilne sa strogim CSP-ovima uključuju korištenje malo prilagođenog JavaScripta (koji postavlja element.style.width) ili korištenje prilagođenih CSS klasa.

Osnovni primjer

Zadana traka napretka.

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

S etiketom

Uklonite klasu <span>s .sr-onlyunutar trake napretka za prikaz vidljivog postotka.

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>

Kako biste osigurali da tekst oznake ostane čitljiv čak i za niske postotke, razmislite o dodavanju min-widthna traku napretka.

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

Trake napretka koriste neke od istih tipki i klasa upozorenja za dosljedne stilove.

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

Prugasta

Koristi gradijent za stvaranje prugastog efekta. Nije dostupno u IE9 i starijim verzijama.

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

Animirani

Dodajte .activeza .progress-bar-stripedanimiranje pruga zdesna nalijevo. Nije dostupno u IE9 i starijim verzijama.

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

Složeno

Stavite više šipki u istu .progresskako biste ih složili.

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

Stilovi apstraktnih objekata za izgradnju različitih vrsta komponenti (kao što su komentari na blogu, tweetovi itd.) koji imaju lijevo ili desno poravnanu sliku uz tekstualni sadržaj.

Zadani medij

Zadani medij prikazuje medijski objekt (slike, video, audio) lijevo ili desno od bloka sadržaja.

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.

Ugniježđeni 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>

Klase .pull-lefti .pull-righttakođer postoje i ranije su se koristile kao dio medijske komponente, ali su zastarjele za tu upotrebu od v3.3.0. Oni su približno ekvivalentni .media-lefti .media-right, osim što .media-rightse trebaju staviti nakon .media-bodyu html-u.

Usklađivanje medija

Slike ili drugi mediji mogu se poravnati gore, u sredini ili na dnu. Zadano je poravnato gore.

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

Mediji poravnati s donje strane

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>

Popis medija

Uz malo dodatnog označavanja, možete koristiti unutarnju listu medija (korisno za niti komentara ili popise članaka).

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.

Ugniježđeni 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.

Ugniježđeni 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.

Ugniježđeni 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>

Grupe popisa su fleksibilna i moćna komponenta za prikaz ne samo jednostavnih popisa elemenata, već i onih složenih s prilagođenim sadržajem.

Osnovni primjer

Najosnovnija grupa popisa jednostavno je neuređeni popis sa stavkama popisa i odgovarajućim klasama. Nadogradite ga s opcijama koje slijede ili vlastitim CSS-om po potrebi.

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

Dodajte komponentu bedževa u bilo koju stavku grupe popisa i ona će se automatski postaviti s desne strane.

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>

Povezane stavke

Povežite stavke grupe popisa pomoću oznaka sidra umjesto stavki popisa (to također znači roditelj <div>umjesto <ul>). Nema potrebe za pojedinačnim roditeljima oko svakog elementa.

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

Stavke gumba

Stavke grupe popisa mogu biti gumbi umjesto stavki popisa (što također znači roditelj <div>umjesto <ul>). Nema potrebe za pojedinačnim roditeljima oko svakog elementa. Ovdje nemojte koristiti standardne .btnklase.

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

Onesposobljeni predmeti

Dodajte .disabledu da .list-group-itembiste ga posivili i izgledali onemogućeno.

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

Kontekstualne nastave

Koristite kontekstualne klase za stiliziranje stavki popisa, zadanih ili povezanih. Također uključuje .activestanje.

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

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

Prilagođeni sadržaj

Dodajte gotovo bilo koji HTML unutar, čak i za povezane grupe popisa poput ove u nastavku.

Naslov stavke grupe popisa

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

Naslov stavke grupe popisa

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

Naslov stavke grupe popisa

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

Iako nije uvijek potrebno, ponekad morate svoj DOM staviti u okvir. Za te situacije isprobajte komponentu ploče.

Osnovni primjer

Prema zadanim postavkama, sve što se .panelradi je primijeniti neki osnovni obrub i ispunu da sadrži neki sadržaj.

Primjer osnovne ploče

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

Ploča s naslovom

Jednostavno dodajte spremnik naslova na svoju ploču pomoću .panel-heading. Također možete uključiti bilo koji <h1>- <h6>s .panel-titleklasom za dodavanje unaprijed stiliziranog naslova. Međutim, veličine fonta za <h1>- <h6>nadjačavaju se .panel-heading.

Za ispravno bojanje poveznica, svakako postavite poveznice u naslove unutar .panel-title.

Naslov ploče bez naslova

Sadržaj ploče

Naslov ploče

Sadržaj ploče

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

Ploča s podnožjem

Prelomi gumbe ili sekundarni tekst u .panel-footer. Imajte na umu da podnožja panela ne nasljeđuju boje i obrube kada se koriste kontekstualne varijacije jer nisu namijenjene da budu u prvom planu.

Sadržaj ploče

Podnožje ploče

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

Kontekstualne alternative

Kao i druge komponente, lako možete učiniti ploču značajnijom za određeni kontekst dodavanjem bilo koje od klasa kontekstualnog stanja.

Naslov ploče

Sadržaj ploče

Naslov ploče

Sadržaj ploče

Naslov ploče

Sadržaj ploče

Naslov ploče

Sadržaj ploče

Naslov ploče

Sadržaj ploče

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

Sa stolovima

Dodajte sve .tableneobrubljene unutar ploče za besprijekoran dizajn. Ako postoji .panel-body, dodajemo dodatnu granicu na vrh tablice za odvajanje.

Naslov ploče

Neki zadani sadržaj ploče ovdje. 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	Prezime	Korisničko ime
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut

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

Ako nema tijela ploče, komponenta se pomiče iz zaglavlja ploče u tablicu bez prekida.

Naslov ploče

#	Ime	Prezime	Korisničko ime
1	Ocjena	Otto	@mdo
2	Jakovu	Thornton	@mast
3	Larry	ptica	@cvrkut

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

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

S grupama popisa

Jednostavno uključite grupe popisa pune širine unutar bilo koje ploče.

Naslov ploče

Neki zadani sadržaj ploče ovdje. 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 i 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>

Omogućite preglednicima da odrede dimenzije videozapisa ili dijaprojekcije na temelju širine bloka koji ih sadrži stvaranjem unutarnjeg omjera koji će se pravilno mjeriti na bilo kojem uređaju.

Pravila se izravno primjenjuju na <iframe>, <embed>, <video>i <object>elemente; izborno koristite eksplicitnu klasu potomak .embed-responsive-itemkada želite uskladiti stil za druge atribute.

Stručni savjet! Ne morate uključiti frameborder="0"u svoj <iframe>s jer mi to umjesto vas nadjačavamo.

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

Zadano dobro

Upotrijebite bušotinu kao jednostavan učinak na element kako biste mu dali umetnuti učinak.

Gle, ja sam u bunaru!

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

Fakultativna nastava

Kontrolirajte ispunu i zaobljene kutove s dvije opcijske klase modifikatora.

Gle, ja sam u velikom bunaru!

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

Gle, ja sam u malom bunaru!

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

Komponente

Glifikoni

Dostupni glifovi

Kako koristiti

Ne miješati s drugim komponentama

Samo za upotrebu na praznim elementima

Promjena lokacije fonta ikone

Dostupne ikone

Primjeri

padajuće liste

Primjer

Poravnanje

Može zahtijevati dodatno pozicioniranje

Zastarjelo .pull-rightporavnanje

Zaglavlja

Šestar

Onemogućene stavke izbornika

Grupe gumba

Opisi alata i skočni prozori u grupama gumba zahtijevaju posebnu postavku

Provjerite ispravnost rolei dostavite oznaku

Osnovni primjer

Alatna traka gumba

Dimenzioniranje

Gniježđenje

Vertikalna varijacija

Opravkane grupe gumba

Rukovanje granicama

IE8 i granice

S <a>elementima

Veze koje djeluju kao gumbi

S <button>elementima

Padajući izbornik gumba

Ovisnost o dodacima

Padajući izbornik s jednim gumbom

Padajući izbornici gumba Split

Dimenzioniranje

Dropup varijacija

Ulazne grupe

<input>Samo tekstualni

Opisi alata i skočni prozori u grupama unosa zahtijevaju posebnu postavku

Ne miješati s drugim komponentama

Uvijek dodajte oznake

Osnovni primjer

Dimenzioniranje

Polje za potvrdu i dodaci za radio

Dodaci gumba

Gumbi s padajućim menijima

Segmentirani gumbi

Više gumba

Navigacija

Korištenje navigacija za ploče s karticama zahtijeva JavaScript dodatak za kartice

Učini dostupnim navigacije koje se koriste kao navigacija

Kartice

Tablete

Opravdano

Safari i responzivna opravdana navigacija

Onemogućene veze

Funkcionalnost veze nije pogođena

Korištenje padajućih izbornika

Kartice s padajućim izbornikom

Tablete s padajućim izbornikom

Navigacijska traka

Zadana navigacijska traka

Prelivajući sadržaj

Zahtijeva JavaScript dodatak

Promjena prelomne točke sažete mobilne navigacijske trake

Učinite navigacijske trake dostupnima

Slika marke

Obrasci

Upozorenja za mobilne uređaje

Uvijek dodajte oznake

Gumbi

Upotreba specifična za kontekst

Tekst

Veze koje nisu navigacijske

Poravnanje komponenti

Desno poravnanje više komponenti

Fiksiran na vrh

Potrebna podstava za tijelo

Fiksirano na dno

Zastarjelo `.pull-right`poravnanje

Provjerite ispravnost `role`i dostavite oznaku

S `<a>`elementima

S `<button>`elementima

`<input>`Samo tekstualni