Glifikoni

Dostupni glifovi

Uključuje preko 250 glifova u formatu fonta iz seta Glyphicon Halflings. Glyphicons Halflings obično nisu dostupni besplatno, ali ih je njihov kreator učinio dostupnim za Bootstrap besplatno. Kao zahvalnost, samo vas molimo da uključite vezu natrag na Glyphicons kad god je to moguće.

  • glifikon glifikon-zvjezdica
  • glyphicon glyphicon-plus
  • glifikon glifikon-euro
  • glyphicon glyphicon-eur
  • glifikon glifikon-minus
  • glifikon glifikon-oblak
  • glifikon glifikon-koverta
  • glifikon glifikon-olovka
  • glifikon glifikon-staklo
  • glifikon glifikon-muzika
  • glifikon glifikon-pretraga
  • glifikon glifikon-srce
  • glifikon glifikon-zvijezda
  • glifikon glifikon-zvijezda-prazno
  • glyphicon glyphicon-user
  • glifikon glifikon-film
  • glifikon glyphicon-th-large
  • glyphicon glyphicon-th
  • glifikon glyphicon-th-list
  • glifikon glifikon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glifikon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glifikon glifikon-signal
  • glifikon glyphicon-cog
  • glifikon glifikon-smeće
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glifikon glifikon-vrijeme
  • glifikon glifikon-put
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glifikon glifikon-igra-krug
  • glifikon glifikon-ponavljanje
  • glyphicon glyphicon-refresh
  • glifikon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glifikon glifikon-zastava
  • glyphicon glyphicon-slušalice
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glifikon glifikon-barkod
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon Glyphicon-book
  • glifikon glyphicon-bookmark
  • glifikon glyphicon-print
  • glifikon glifikon-kamera
  • glyphicon glyphicon-font
  • glifikon glifikon-bold
  • glifikon glifikon-kurziv
  • glifikon glyphicon-text-height
  • glifikon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glifikon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glifikon glyphicon-align-justify
  • glifikon glyphicon-list
  • glifikon glifikon-uvlačenje-lijevo
  • glifikon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glifikon glifikon-slika
  • glifikon glyphicon-map-marker
  • glyphicon glyphicon-podesi
  • glifikon glifikon-boja
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glifikon glifikon-provjera
  • glyphicon glyphicon-move
  • glifikon glifikon-korak-nazad
  • glifikon glifikon-brzo-nazad
  • glifikon glifikon-nazad
  • glyphicon glyphicon-play
  • glifikon glifikon-pauza
  • glyphicon glyphicon-stop
  • glifikon glifikon-naprijed
  • glifikon glifikon-premotavanje naprijed
  • glifikon glifikon-korak naprijed
  • glifikon glifikon-izbacivanje
  • glifikon glifikon-ševron-lijevo
  • glifikon glifikon-ševron-desno
  • glifikon glifikon-plus-znak
  • glifikon glifikon-minus-znak
  • glifikon glifikon-ukloni-znak
  • glifikon glifikon-ok-znak
  • glifikon glifikon-znak-pitanje
  • glifikon glifikon-info-znak
  • glyphicon glifikon-snimka zaslona
  • glifikon glifikon-ukloni-krug
  • glifikon glifikon-ok-krug
  • glifikon glifikon-zabran-krug
  • glifikon glifikon-strelica-levo
  • glifikon glifikon-strelica-desno
  • glifikon glifikon-strelica-gore
  • glifikon glifikon-strelica-dole
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glifikon glifikon-znak uzvika
  • glifikon glifikon-dar
  • glifikon glifikon-list
  • glifikon glifikon-vatra
  • glifikon glifikon-otvoreno oko
  • glifikon glifikon-oko-zatvori
  • glifikon glifikon-znak-upozorenje
  • glifikon glifikon-ravnina
  • glifikon glifikon-kalendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glifikon glifikon-magnet
  • glyphicon glyphicon-chevron-up
  • glifikon glifikon-ševron-dole
  • glyphicon glyphicon-retweet
  • glifikon glifikon-kolica za kupovinu
  • glifikon glyphicon-folder-close
  • glifikon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glifikon glyphicon-bullhorn
  • glifikon glifikon-zvono
  • glifikon glifikon-sertifikat
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glifikon glifikon-ruka-desno
  • glifikon glifikon-ruka-lijevo
  • glifikon glifikon-ruka gore
  • glifikon glifikon-dolje
  • glifikon glifikon-krug-strelica-desno
  • glifikon glifikon-krug-strelica-levo
  • glifikon glifikon-krug-strelica-gore
  • glifikon glifikon-krug-strelica-dole
  • glifikon glifikon-globus
  • glifikon glifikon-ključ
  • glifikon glifikon-zadaci
  • glifikon glifikon-filter
  • glifikon glifikon-aktovka
  • glyphicon glyphicon-fullscreen
  • glifikon glifikon-kontrolna tabla
  • glifikon glifikon-spojnica
  • glifikon glifikon-srce-prazno
  • glifikon glyphicon-link
  • glifikon glifikon-telefon
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glifikon glyphicon-sort
  • glifikon glifikon sortiraj po abecedi
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-red
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glifikon glifikon-neoznačen
  • glifikon glifikon-proširi
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-odjava
  • glifikon glifikon-novi-prozor
  • glifikon glifikon-zapis
  • glyphicon glyphicon-save
  • glifikon glyphicon-open
  • glifikon glifikon sačuvan
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glifikon glifikon-kreditna-kartica
  • glifikon glifikon-prijenos
  • glifikon glifikon-pribor za jelo
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glifikon glifikon-slušalica
  • glifikon glifikon-telefon-alt
  • glifikon glifikon-kula
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • Glyphicon Glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glifikon glifikon-zvuk-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glifikon glifikon-registracioni-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glifikon glifikon-drvo-četinar
  • glifikon glifikon-drvo-listopadni
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level up
  • glifikon glifikon-kopija
  • glifikon glifikon pasta
  • glyphicon glyphicon-alert
  • glifikon glifikon-ekvilajzer
  • glifikon glifikon-kralj
  • glifikon glifikon-kraljica
  • glifikon glifikon-pešak
  • glifikon glifikon-biskup
  • glifikon glifikon-vitez
  • glyphicon glyphicon-baby-formula
  • glifikon glifikon-šator
  • glifikon glifikon-tabla
  • glifikon glifikon-krevet
  • glifikon glifikon-jabuka
  • glifikon glifikon-brisanje
  • glifikon glifikon-pješčani sat
  • glifikon glifikon-lampa
  • glifikon glifikon-dvojnik
  • glifikon glifikon-kasica-prasica
  • glifikon glifikon-makaze
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glifikon glifikon-jen
  • glyphicon glyphicon-jpy
  • glifikon glifikon-rublja
  • glyphicon glyphicon-rub
  • glifikon glifikon-skala
  • glyphicon glyphicon-ice-lizalica
  • glyphicon glyphicon-ice-lilly-tasted
  • glifikon glifikon-edukacija
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glifikon glifikon-modalni-prozor
  • glifikon glifikon-ulje
  • glifikon glifikon-zrno
  • glifikon glifikon-naočare za sunce
  • glifikon veličina-glyphicon-text
  • glifikon glifikon-boja teksta
  • glifikon glifikon-tekst-pozadina
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glifikon glyphicon-object-align-left
  • glifikon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glifikon glifikon-trokut-desno
  • glifikon glifikon-trokut-lijevo
  • glifikon glifikon-trokut-dno
  • glifikon glifikon-trokut-vrh
  • glyphicon glyphicon-konzola
  • glifikon glifikon-superscript
  • glifikon glifikon-subscript
  • glifikon glifikon-meni-levo
  • glyphicon glyphicon-menu-desno
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

Kako koristiti

Iz razloga performansi, sve ikone zahtijevaju osnovnu klasu i pojedinačnu klasu ikona. Za korištenje, postavite sljedeći kod bilo gdje. Obavezno ostavite razmak između ikone i teksta za ispravan padding.

Ne miješati s drugim komponentama

Klase ikona se ne mogu direktno kombinovati sa drugim komponentama. Ne treba ih koristiti zajedno s drugim klasama na istom elementu. Umjesto toga, dodajte ugniježđeni <span>i primijenite klase ikona na <span>.

Samo za upotrebu na praznim elementima

Klase ikona bi se trebale 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 fontova 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.
  • Iskoristite opciju relativnih URL-ova koju daje Less kompajler.
  • Promijenite url()putanje u prevedenom CSS-u.

Koristite bilo koju opciju koja najbolje odgovara vašim specifičnim razvojnim postavkama.

Dostupne ikone

Moderne verzije pomoćnih tehnologija će najaviti CSS generisan sadržaj, kao i specifične Unicode znakove. Da bismo izbjegli nenamjeran i zbunjujući izlaz u čitačima ekrana (posebno kada se ikone koriste isključivo za dekoraciju), sakrivamo ih aria-hidden="true"atributom.

Ako koristite ikonu za prenošenje značenja (a ne samo kao dekorativni element), osigurajte da se ovo značenje prenese i na pomoćne tehnologije – na primjer, uključite dodatni sadržaj, vizuelno skriven .sr-onlyklasom.

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

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

Primjeri

Koristite ih u dugmadima, grupama dugmadi za traku sa alatkama, navigaciju ili unose u prethodnom obrascu.

<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 prenijelo da se radi o poruci o grešci, s dodatnim .sr-onlytekstom za prenošenje ovog savjeta korisnicima pomoćnih tehnologija.

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

Padajući meni

Preklopni, kontekstualni meni za prikaz lista veza. Interaktivan s padajućim JavaScript dodatkom .

Zamotajte okidač padajućeg menija i padajući meni unutar .dropdownili u drugi element koji deklariše position: relative;. Zatim 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>

Padajući meniji se mogu promijeniti tako da se proširuju prema gore (umjesto prema dolje) dodavanjem .dropupu nadređeni.

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

Podrazumevano, padajući meni se automatski pozicionira 100% od vrha i duž leve strane svog nadređenog. Dodajte .dropdown-menu-rightna .dropdown-menudesno poravnajte padajući meni.

Može zahtijevati dodatno pozicioniranje

Padajući meni se automatski pozicionira preko CSS-a unutar normalnog toka dokumenta. To znači da roditelji mogu izrezati padajuće menije sa određenim overflowsvojstvima ili se pojaviti izvan granica okvira za prikaz. Sami riješite ove probleme čim se pojave.

Zastarjelo .pull-rightporavnanje

Od verzije 3.1.0, zastarjeli smo .pull-rightna padajućim menijima. Za desno poravnavanje menija koristite .dropdown-menu-right. Desno poravnate navigacijske komponente u navigacijskoj traci koriste mixin verziju ove klase za automatsko poravnavanje menija. Da biste ga nadjačali, koristite .dropdown-menu-left.

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

Dodajte zaglavlje da označite dijelove radnji u bilo kojem padajućem izborniku.

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

Dodajte razdjelnik odvojenim serijama veza u padajućem izborniku.

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

Dodajte .disabledu a <li>u padajućem izborniku da onemogućite 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>

Grupe dugmadi

Grupirajte niz dugmadi zajedno u jednom redu sa grupom dugmadi. Dodajte opcioni JavaScript radio i ponašanje u stilu checkbox-a pomoću našeg dodatka za dugmad .

Objašnjenje alata i iskačući prikazi u grupama dugmadi zahtevaju posebnu postavku

Kada koristite opise alata ili iskačuće elemente na elementima unutar .btn-group, morat ćete navesti opciju container: 'body'kako biste izbjegli neželjene nuspojave (kao što je element koji raste širi i/ili gubi svoje zaobljene uglove kada se pokrene opis alata ili skočni prozor).

Uvjerite se da je ispravno rolei dajte naljepnicu

Da bi pomoćne tehnologije – kao što su čitači ekrana – prenijele da je niz dugmadi grupiran, rolepotrebno je osigurati odgovarajući atribut. Za grupe dugmadi, ovo bi bilo role="group", dok bi trake sa alatkama trebale imati role="toolbar".

Jedan izuzetak su grupe koje sadrže samo jednu kontrolu (na primjer, grupe s opravdanim gumbima s <button>elementima) ili padajući meni.

Pored toga, grupama i alatnim trakama treba dati eksplicitnu oznaku, jer ih većina pomoćnih tehnologija inače neće najaviti, uprkos prisutnosti ispravnog roleatributa. U ovdje navedenim primjerima koristimo , ali se mogu koristiti aria-labeli alternative kao što su.aria-labelledby

Osnovni primjer

Zamotajte niz dugmadi .btnu .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>

Traka sa dugmadima

Kombinirajte skupove <div class="btn-group">u a <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>

Određivanje veličine

Umjesto da primjenjujete klase veličine gumba na svako dugme u grupi, samo dodajte .btn-group-*svakom .btn-group, uključujući 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>

Nesting

Postavite a .btn-groupunutar drugog .btn-groupkada želite padajuće menije pomešane sa nizom dugmadi.

<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 dugmadi izgleda vertikalno naslagano, a ne horizontalno. Padajući meni dugmeta za razdvajanje ovde nije podržan.

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

Opravdane grupe dugmadi

Učinite da se grupa dugmadi rasteže u jednakim veličinama kako bi obuhvatila cijelu širinu svog roditelja. Takođe radi sa padajućim menijima dugmadi unutar grupe dugmadi.

Rukovanje granicama

Zbog specifičnog HTML-a i CSS-a koji se koriste za pravljenje dugmadi (naime display: table-cell), granice između njih su udvostručene. U regularnim grupama dugmadi, margin-left: -1pxkoristi se za slaganje granica umjesto za njihovo uklanjanje. Međutim, marginne radi sa display: table-cell. Kao rezultat toga, ovisno o vašim prilagodbama za Bootstrap, možda ćete poželjeti ukloniti ili ponovo obojiti ivice.

IE8 i granice

Internet Explorer 8 ne prikazuje granice na dugmadima u grupi sa poravnatim dugmadima, bez obzira da li je uključena <a>ili <button>elementi. Da biste to zaobišli, umotajte svako dugme u drugo .btn-group.

Pogledajte #12476 za više informacija.

Sa <a>elementima

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

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

Linkovi koji djeluju kao dugmad

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

Sa <button>elementima

Da biste koristili opravdane grupe dugmadi sa <button>elementima, morate svako dugme umotati u grupu dugmadi . Većina pretraživača ne primjenjuje pravilno naš CSS za pravljenje <button>elemenata, ali pošto podržavamo padajuće menije s gumbima, 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>

Padajući meni sa dugmetom

Koristite bilo koje dugme da pokrenete padajući meni tako što ćete ga postaviti unutar a .btn-groupi obezbediti odgovarajuću oznaku menija.

Ovisnost o dodacima

Padajući meni s gumbima zahtijeva da padajući dodatak bude uključen u vašu verziju Bootstrapa.

Padajući meni sa jednim dugmetom

Pretvorite dugme u padajući prekidač sa nekim osnovnim promenama oznake.

<!-- 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 meni dugmeta za razdvajanje

Slično, kreirajte padajuće menije za podijeljeno dugme sa istim promjenama oznaka, 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>

Određivanje veličine

Padajući meni dugmadi radi sa dugmadima 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

Aktivirajte padajuće menije iznad elemenata dodavanjem .dropupu nadređeni.

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

Grupe unosa

Proširite kontrole obrasca dodavanjem teksta ili dugmadi prije, poslije ili s obje strane bilo kojeg tekstualnog <input>. Koristite .input-groupsa .input-group-addonili .input-group-btnza dodavanje ili dodavanje elemenata jednom .form-control.

<input>Samo tekstualni

Izbjegavajte korištenje <select>elemenata ovdje jer se ne mogu u potpunosti stilizirati u WebKit pretraživačima.

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

Alati i iskačući prikazi u grupama za unos zahtijevaju posebnu postavku

Kada koristite opise alata ili iskačuće elemente na elementima unutar .input-group, morat ćete navesti opciju container: 'body'kako biste izbjegli neželjene nuspojave (kao što je element koji raste širi i/ili gubi svoje zaobljene uglove kada se pokrene opis alata ili skočni prozor).

Ne miješati s drugim komponentama

Nemojte miješati grupe obrazaca ili klase stupaca mreže direktno sa ulaznim grupama. Umjesto toga, ugniježdite ulaznu grupu unutar grupe obrazaca ili elementa koji se odnosi na mrežu.

Uvijek dodajte oznake

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

Tač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 placeholderatributa) i koje dodatne informacije treba prenijeti će se razlikovati ovisno o tačnom tipu widgeta interfejsa koji implementirate. Primjeri u ovom dijelu pružaju nekoliko predloženih pristupa specifičnih za slučaj.

Osnovni primjer

Postavite jedan dodatak ili dugme sa obe strane ulaza. Također možete postaviti jedan na obje strane ulaza.

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

Ne podržavamo višestruke kontrole obrasca u jednoj ulaznoj grupi.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Određivanje veličine

Dodajte relativne klase veličine obrasca u .input-groupsamu sebe 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>

Potvrdni okviri i radio dodaci

Postavite bilo koji okvir za potvrdu ili radio opciju unutar dodatka grupe za unos 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 za dugme

Dugmad u grupama za unos su malo drugačija i zahtijevaju jedan dodatni nivo ugniježđenja. Umjesto .input-group-addon, morat ćete koristiti .input-group-btnza omotavanje dugmadi. Ovo je potrebno zbog podrazumevanih stilova pretraživača koji se ne mogu zameniti.

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

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

Segmentirana dugmad

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

Iako možete imati samo jedan dodatak po strani, možete imati više dugmadi 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>

Navs

Navs dostupni u Bootstrapu imaju zajedničku oznaku, počevši od osnovne .navklase, kao i deljena stanja. Zamijenite klase modifikatora za prebacivanje između svakog stila.

Korištenje navs-a za tabele zahtijeva JavaScript dodatak za kartice

Za kartice sa oblastima za tabulatore morate koristiti JavaScript dodatak za kartice . Označavanje će također zahtijevati dodatne i ARIA atribute – pogledajte primjer oznakerole dodatka za više detalja.

Učinite navigaciju koja se koristi kao navigaciju pristupačnom

Ako koristite navs za pružanje navigacijske trake, obavezno dodajte a role="navigation"u najlogičniji roditeljski kontejner <ul>, ili omotajte <nav>element oko cijele navigacije. Nemojte dodavati ulogu <ul>samoj, jer bi to spriječilo da bude objavljena kao stvarna lista od strane pomoćnih tehnologija.

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>

Uzmite isti HTML, ali .nav-pillsumjesto toga koristite:

<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 vertikalno slagati. Samo dodajte .nav-stacked.

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

Lako napravite kartice ili tablete jednake širine njihovih roditelja na ekranima širim od 768px sa .nav-justified. Na manjim ekranima, navigacijske veze su naslagane.

Opravdane navigacijske veze za navigaciju trenutno nisu podržane.

Safari i responzivna opravdana navigacija

Od v9.1.2, Safari pokazuje grešku u kojoj horizontalno mijenjanje veličine vašeg pretraživača uzrokuje greške u renderiranju u opravdanoj navigaciji koje se brišu nakon osvježavanja. Ova greška je također prikazana u primjeru opravdane navigacije .

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

Za bilo koju komponentu za navigaciju (tablice ili tablete), dodajte .disabledza sive veze i bez efekata lebdenja .

Nije utjecalo na funkcionalnost veze

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

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

Dodajte padajuće menije sa malo dodatnog HTML-a i padajućim JavaScript dodacima .

Kartice sa padajućim menijima

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

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

Navbar

Navbarovi su brze meta komponente koje služe kao navigacijska zaglavlja za vašu aplikaciju ili web lokaciju. Počinju sažimati (i mogu se mijenjati) u mobilnim prikazima i postaju horizontalni kako se širina raspoloživog okvira za prikaz povećava.

Opravdane navigacijske veze za navigaciju trenutno nisu podržane.

Prepun sadržaj

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

  1. Smanjite količinu ili širinu stavki navigacijske trake.
  2. Sakrijte određene stavke navigacijske trake na određenim veličinama ekrana koristeći prilagodljive uslužne klase .
  3. Promijenite tačku u kojoj se vaša navigacijska traka prebacuje između skupljenog i horizontalnog načina. Prilagodite @grid-float-breakpointvarijablu ili dodajte svoj vlastiti medijski upit.

Zahtijeva JavaScript dodatak

Ako je JavaScript onemogućen, a okvir za pregled dovoljno uzak da se navigacijska traka sruši, biće nemoguće proširiti navigacijsku traku i pogledati sadržaj unutar .navbar-collapse.

Reaktivna navigacijska traka zahtijeva da dodatak za kolaps bude uključen u vašu verziju Bootstrapa.

Promjena skupljene tačke prekida mobilne navigacijske trake

Navbar se sažima u svoj vertikalni mobilni prikaz kada je okvir za prikaz uži od @grid-float-breakpoint, i širi se u svoj horizontalni nemobilni prikaz kada je okvir za prikaz najmanje @grid-float-breakpointširine. Podesite ovu varijablu u izvoru Manje da kontrolišete kada se navigaciona traka skupi/proširi. Zadana vrijednost je 768px(najmanji "mali" ili "tablet" ekran).

Učinite navigacijske trake pristupačnim

Obavezno koristite <nav>element ili, ako koristite generičniji element kao što je <div>, dodajte a role="navigation"na svaku navigacijsku traku da biste je eksplicitno identificirali kao orijentirnu regiju za korisnike pomoćnih tehnologija.

<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 svojom vlastitom slikom zamjenom teksta za <img>. S obzirom da .navbar-brandima svoj pad i visinu, možda ćete morati da zaobiđete neki CSS u zavisnosti 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>

Postavite sadržaj obrasca unutar .navbar-formza pravilno vertikalno poravnanje i skupljeno ponašanje u uskim okvirima za prikaz. Koristite opcije poravnanja da odlučite gdje će se nalaziti unutar sadržaja navigacijske trake.

Kao heads up, .navbar-formdijeli veći dio svog koda sa .form-inlinepreko mixina. Neke kontrole obrasca, poput grupa za unos, mogu zahtijevati fiksne širine da bi se pravilno 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>

Upozorenja za mobilne uređaje

Postoje neka upozorenja u vezi s korištenjem kontrola obrasca unutar fiksnih elemenata na mobilnim uređajima. Pogledajte naše dokumente za podršku pretraživača za detalje.

Uvijek dodajte oznake

Čitači ekrana će imati problema s vašim obrascima ako ne uključite oznaku za svaki unos. Za ove inline obrasce možete sakriti oznake pomoću .sr-onlyklase. Postoje dodatne alternativne metode pružanja oznake za pomoćne tehnologije, kao što je aria-label, aria-labelledbyili titleatribut. Ako ništa od ovoga nije prisutno, čitači ekrana mogu pribjeći korištenju placeholderatributa, ako postoji, ali imajte na umu da se ne preporučuje korištenje placeholderkao zamjene za druge metode označavanja.

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

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

Kontekst-specifična upotreba

Kao i standardne klase dugmadi , .navbar-btnmogu se koristiti na elementima <a>i . <input>Međutim, ni .navbar-btnstandardne klase dugmadi ne bi se trebale koristiti na <a>elementima unutar .navbar-nav.

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

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

Za ljude koji koriste standardne veze koje nisu unutar standardne komponente navigacijske trake, koristite .navbar-linkklasu da dodate odgovarajuće boje 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, dugmad ili tekst koristeći .navbar-leftili .navbar-rightuslužne klase. Obje klase će dodati CSS float u navedenom smjeru. Na primjer, da biste poravnali navigacijske veze, stavite ih u zasebno <ul>s primijenjenom odgovarajućom klasom korisnosti.

Ove klase su pomiješane verzije .pull-lefti .pull-right, ali su ograničene na medijske upite za lakše rukovanje komponentama navigacijske trake u različitim veličinama uređaja.

Desno poravnavanje više komponenti

Navbari trenutno imaju ograničenje s više .navbar-rightklasa. Da bismo pravilno razmaknuli sadržaj, koristimo negativnu marginu na zadnjem .navbar-rightelementu. Kada postoji više elemenata koji koriste tu klasu, ove margine ne rade kako je predviđeno.

Ponovo ćemo ovo razmotriti kada budemo mogli da prepišemo tu komponentu u v4.

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

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

Potrebna podstava za tijelo

Fiksna navigaciona traka će prekriti vaš drugi sadržaj, osim ako ne dodate paddingna vrh <body>. Isprobajte svoje vrijednosti ili koristite naš isječak ispod. Savjet: Podrazumevano, navigaciona 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 centar i sadržaj navigacijske trake.

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

Potrebna podstava za tijelo

Fiksna navigaciona traka će prekriti vaš drugi sadržaj, osim ako ne dodate paddingna dno <body>. Isprobajte svoje vrijednosti ili koristite naš isječak ispod. Savjet: Podrazumevano, navigaciona traka je visoka 50 piksela.

body { padding-bottom: 70px; }

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

Kreirajte navigacijsku traku pune širine koja se pomiče sa stranice dodavanjem .navbar-static-topi uključivanjem .containerili .container-fluidu centar i sadržaj navigacijske trake.

Za razliku od .navbar-fixed-*klasa, ne morate mijenjati padding 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>

Mrvice hljeba

Označite lokaciju trenutne stranice unutar navigacijske hijerarhije.

Separatori 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 na više stranica ili jednostavnijom alternativom pejdžerom .

Zadana paginacija

Jednostavna paginacija inspirirana Rdio-om, odlična za aplikacije i rezultate pretraživanja. Veliki blok je teško promašiti, lako je skalabilan i pruža velike površine klikova.

<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

Komponentu paginacije treba umotati u <nav>element kako bi se identificirala kao navigacijski odjeljak za čitače ekrana i druge pomoćne tehnologije. Osim toga, budući da stranica vjerovatno 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 dati opis aria-labelza <nav>koji odražava njegovu svrhu. Na primjer, ako se komponenta paginacije koristi za navigaciju između skupa rezultata pretraživanja, odgovarajuća oznaka može biti aria-label="Search results pages".

Onemogućeno i aktivno stanje

Linkovi su prilagodljivi različitim okolnostima. Koristi .disabledse za veze 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 izostavite sidro u slučaju prethodne/sljedeće strelice, kako biste uklonili funkcionalnost klika uz zadržavanje predviđenih 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>

Određivanje veličine

Želite veću ili manju paginaciju? Dodati .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>

Pejdžer

Brze prethodne i sljedeće veze za jednostavne implementacije paginacije s laganim oznakama i stilovima. Odličan je za jednostavne stranice poput blogova ili časopisa.

Zadani primjer

Podrazumevano, pejdžer centrira veze.

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

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>

Opciono onemogućeno stanje

Veze pejdžera takođe koriste opštu .disableduslužnu 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>

Etikete

Primjer

Primjer naslova Novo

Primjer naslova Novo

Primjer naslova Novo

Primjer naslova Novo

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

Dostupne varijacije

Dodajte bilo koju od dole navedenih klasa modifikatora da promijenite izgled oznake.

Zadani primarni podaci 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 tone etiketa?

Problemi s renderiranjem mogu nastati kada imate desetine inline etiketa unutar uskog kontejnera, od kojih svaka sadrži svoj inline-blockelement (poput ikone). Način zaobilaženja ovoga je postavljanje display: inline-block;. Za kontekst i primjer, pogledajte #13219 .

Značke

Lako istaknite nove ili nepročitane stavke dodavanjem a <span class="badge">na veze, Bootstrap navigaciju i još mnogo toga.

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 srušiti (preko CSS-ovog :emptyselektora) pod uslovom da u njima nema sadržaja.

Kompatibilnost među pretraživačima

Značke se neće sami srušiti u Internet Explorer-u 8 jer mu nedostaje podrška za :emptybirač.

Prilagođava se aktivnim navigacijskim stanjima

Ugrađeni stilovi su uključeni za postavljanje znački u aktivna stanja u navigaciji tableta.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Jumbotron

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

Zdravo svijete!

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

Nauči 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>

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

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

Zaglavlje stranice

Jednostavna ljuska za h1odgovarajući prostor i segmentiranje dijelova sadržaja na stranici. Može koristiti h1's default smallelement, kao i većinu drugih komponenti (sa dodatnim stilovima).

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

Thumbnails

Proširite Bootstrap-ov sistem mreže pomoću komponente sličica da lako prikažete mreže slika, video zapisa, teksta i još mnogo toga.

Ako tražite prezentaciju sličica nalik Pinterestu različitih visina i/ili širina, morat ćete koristiti dodatak treće strane kao što su Masonry , Isotop ili Salvattore .

Zadani primjer

Prema zadanim postavkama, sličice Bootstrapa su dizajnirane da prikazuju povezane slike sa 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 dodatne oznake, moguće je dodati bilo koju vrstu HTML sadržaja poput naslova, pasusa ili dugmadi u sličice.

100%x200

Thumbnail label

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

100%x200

Thumbnail label

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

100%x200

Thumbnail label

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>

Alerts

Obezbedite kontekstualne povratne poruke za tipične radnje korisnika uz pregršt dostupnih i fleksibilnih poruka upozorenja.

Primjeri

Zamotajte bilo koji tekst i opciono dugme za odbacivanje .alerti jednu od četiri kontekstualne klase (npr. .alert-success) za osnovne poruke upozorenja.

Nema zadane klase

Upozorenja nemaju zadane klase, samo osnovne i modifikatorske klase. Podrazumevano sivo upozorenje nema previše smisla, pa se od vas traži da navedete tip preko kontekstualne klase. Odaberite uspjeh, informacije, upozorenje ili opasnost.

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

Odbaciti upozorenja

Nadogradite bilo koje upozorenje dodavanjem opcionog .alert-dismissibledugmeta i dugmeta za zatvaranje.

Zahtijeva JavaScript dodatak za upozorenje

Za potpuno funkcionisanje, odbaciva upozorenja, morate koristiti JavaScript dodatak za upozorenja .

<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 pravilno ponašanje na svim uređajima

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

Koristite .alert-linkuslužnu klasu da brzo pružite odgovarajuće veze u boji unutar bilo kojeg upozorenja.

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

Trake napretka

Omogućite ažurirane povratne informacije o napretku toka posla ili radnje pomoću jednostavnih, ali fleksibilnih traka napretka.

Kompatibilnost među pretraživačima

Trake napretka koriste CSS3 prelaze i animacije da bi postigli neke od svojih efekata. Ove funkcije nisu podržane u Internet Exploreru 9 i starijim verzijama Firefoxa. Opera 12 ne podržava animacije.

Kompatibilnost politike sigurnosti sadržaja (CSP).

Ako vaša web stranica ima Politiku sigurnosti sadržaja (CSP) koja ne dozvoljava style-src 'unsafe-inline', tada nećete moći koristiti inline styleatribute za postavljanje širine trake napretka kao što je prikazano u našim primjerima ispod. 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.

60% završeno
<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>

Sa etiketom

Uklonite klasu <span>with .sr-onlyunutar trake napretka da prikažete vidljivi postotak.

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 male postotke, razmislite o dodavanju a 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.

40% završeno (uspjeh)
20% završeno
60% završeno (upozorenje)
80% završeno (opasnost)
<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.

40% završeno (uspjeh)
20% završeno
60% završeno (upozorenje)
80% završeno (opasnost)
<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 .activeu .progress-bar-stripedda animirate pruge s desna na lijevo. Nije dostupno u IE9 i starijim verzijama.

45% završeno
<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>

Stacked

Stavite više šipki u iste .progressda ih složite.

35% završeno (uspjeh)
20% završeno (upozorenje)
10% završeno (opasnost)
<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>

Medijski objekat

Stilovi apstraktnih objekata za pravljenje različitih tipova komponenti (kao što su komentari na blogu, tvitovi, itd.) koje sadrže sliku poravnatu lijevo ili desno uz tekstualni sadržaj.

Zadani medij

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

Naslov medija

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.

Naslov medija

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.

Naslov medija

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.

Naslov medija

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đe postoje i ranije su korišćene kao deo medijske komponente, ali su zastarele za tu upotrebu od v3.3.0. Oni su približno ekvivalentni .media-lefti .media-right, osim što .media-rightbi trebalo biti postavljeno iza .media-bodyoznake u html-u.

Usklađivanje medija

Slike ili drugi mediji mogu biti poravnati odozgo, po sredini ili dolje. Podrazumevano je poravnato odozgo.

Mediji poravnati na vrh

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 orijentisani 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 na dnu

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>

Lista medija

Uz malo dodatne oznake, možete koristiti medije unutar liste (korisno za teme komentara ili liste članaka).

  • Naslov medija

    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>

Grupa liste

Grupe lista su fleksibilna i moćna komponenta za prikazivanje ne samo jednostavnih lista elemenata, već i složenih sa prilagođenim sadržajem.

Osnovni primjer

Najosnovnija grupa lista je jednostavno neuređena lista sa stavkama liste 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 u erosu
<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 značke bilo kojoj grupi liste i ona će automatski biti pozicionirana na desnoj strani.

  • 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 liste koristeći oznake sidra umjesto stavki liste (što također znači roditelj <div>umjesto <ul>). Nema potrebe za pojedinačnim roditeljima oko svakog elementa.

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

Stavke grupe liste mogu biti dugmad umesto stavki liste (to takođe znači roditelj <div>umesto <ul>). Nema potrebe za pojedinačnim roditeljima oko svakog elementa. Ne koristite standardne .btnklase ovdje.

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

Onemogućene stavke

Dodajte .disabledu a .list-group-itemda biste ga zasivili da izgleda onemogućeno.

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

Koristite kontekstualne klase da stilizujete stavke liste, podrazumevane ili povezane. Također uključuje .activedržavu.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum u erosu
<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 grupe povezanih lista poput one ispod.

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

Paneli

Iako nije uvijek potrebno, ponekad morate staviti svoj DOM u kutiju. U takvim situacijama isprobajte komponentu ploče.

Osnovni primjer

Prema zadanim postavkama, sve što .paneltreba učiniti je primijeniti neke osnovne ivice i padding kako bi sadržavali neki sadržaj.

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

Panel sa naslovom

Lako dodajte spremnik naslova na panel pomoću .panel-heading. Takođe možete uključiti bilo koji <h1>- <h6>sa .panel-titleklasom da biste dodali unapred stilizovani naslov. Međutim, veličine fonta <h1>- <h6>su nadjačane sa .panel-heading.

Za pravilno bojenje linkova, obavezno postavite veze u naslove unutar .panel-title.

Naslov panela bez naslova
Sadržaj panela

Naslov panela

Sadržaj 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>

Premotajte dugmad ili sekundarni tekst u .panel-footer. Imajte na umu da podnožja panela ne nasljeđuju boje i ivice kada se koriste kontekstualne varijacije jer nisu predviđene da budu u prvom planu.

Sadržaj panela
<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 učinite panel smislenijim za određeni kontekst dodavanjem bilo koje od kontekstualnih klasa stanja.

Naslov panela

Sadržaj panela

Naslov panela

Sadržaj panela

Naslov panela

Sadržaj panela

Naslov panela

Sadržaj panela

Naslov panela

Sadržaj 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>

Sa stolovima

Dodajte sve bez ivica .tableunutar panela za besprijekoran dizajn. Ako postoji .panel-body, dodajemo dodatni okvir na vrh tabele radi razdvajanja.

Naslov panela

Neki zadani sadržaj panela 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 Mark Otto @mdo
2 Jacob Thornton @debeo
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>

Ako nema tijela panela, komponenta se kreće od zaglavlja panela do stola bez prekida.

Naslov panela
# Ime Prezime Korisničko ime
1 Mark Otto @mdo
2 Jacob Thornton @debeo
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>

Sa listama grupa

Lako uključite grupe liste pune širine unutar bilo kojeg panela.

Naslov panela

Neki zadani sadržaj panela 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 u erosu
<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>

Responsive embed

Dozvolite pretraživačima da odrede dimenzije videa ili projekcije slajdova na osnovu širine bloka koji sadrži stvaranjem unutrašnjeg omjera koji će se pravilno skalirati na bilo kojem uređaju.

Pravila se direktno primjenjuju na <iframe>, <embed>, <video>, i <object>elemente; opciono koristite eksplicitnu klasu potomka .embed-responsive-itemkada želite da uskladite stil za druge atribute.

Pro-Tip! Ne morate uključiti frameborder="0"svoje <iframe>s jer mi to zamjenjujemo umjesto 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>

Wells

Default well

Koristite bunar kao jednostavan efekat na elementu da mu date umetnuti efekat.

Vidi, ja sam u bunaru!
<div class="well">...</div>

Izborna nastava

Kontrolirajte padding i zaobljene uglove s dvije opcione klase modifikatora.

Vidite, ja sam u velikom bunaru!
<div class="well well-lg">...</div>
Vidi, ja sam u malom bunaru!
<div class="well well-sm">...</div>