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.

Unesite validnu email 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>

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

Primjer

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>

Poravnanje

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.

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

Zaglavlja

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>

Razdjelnik

Dodajte razdjelnik odvojenim serijama veza u padajućem izborniku.

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

Onemogućene stavke menija

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>

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

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.

lijevo Srednji U redu

lijevo Srednji

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

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>

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.

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

Tabs

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>

Pilule

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>

Opravdano

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>

Onemogućene veze

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>

Korištenje padajućih menija

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>

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:

Smanjite količinu ili širinu stavki navigacijske trake.
Sakrijte određene stavke navigacijske trake na određenim veličinama ekrana koristeći prilagodljive uslužne klase .
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.

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

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>

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.

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>

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

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>

Primjer

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 .

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>

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>

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>

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.

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

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

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>

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.

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

Glavu gore! Ovo upozorenje treba vašu pažnju, ali nije previše važno.

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

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

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 .

Upozorenje! Bolje se provjeri, ne izgledaš baš 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 pravilno ponašanje na svim uređajima

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

Linkovi u upozorenjima

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

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

Glavu gore! Ovo upozorenje treba vašu pažnju , ali nije previše važno.

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

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

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.

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

<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 .activeu .progress-bar-stripedda animirate pruge s desna na lijevo. 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>

Stacked

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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>

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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum u erosu

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

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum u erosu

<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

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.

Naslov stavke grupe

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

Naslov stavke grupe

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

Naslov stavke grupe

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

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>

Panel sa podnožjem

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

Podnožje 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>

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>

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>

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ći meni

Primjer

Poravnanje

Može zahtijevati dodatno pozicioniranje

Zastarjelo .pull-rightporavnanje

Zaglavlja

Razdjelnik

Onemogućene stavke menija

Grupe dugmadi

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

Uvjerite se da je ispravno rolei dajte naljepnicu

Osnovni primjer

Traka sa dugmadima

Određivanje veličine

Nesting

Vertikalna varijacija

Opravdane grupe dugmadi

Rukovanje granicama

IE8 i granice

Sa <a>elementima

Linkovi koji djeluju kao dugmad

Sa <button>elementima

Padajući meni sa dugmetom

Ovisnost o dodacima

Padajući meni sa jednim dugmetom

Padajući meni dugmeta za razdvajanje

Određivanje veličine

Dropup varijacija

Grupe unosa

<input>Samo tekstualni

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

Ne miješati s drugim komponentama

Uvijek dodajte oznake

Osnovni primjer

Određivanje veličine

Potvrdni okviri i radio dodaci

Dodaci za dugme

Dugmad sa padajućim menijima

Segmentirana dugmad

Više dugmadi

Navs

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

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

Tabs

Pilule

Opravdano

Safari i responzivna opravdana navigacija

Onemogućene veze

Nije utjecalo na funkcionalnost veze

Korištenje padajućih menija

Kartice sa padajućim menijima

Tablete sa padajućim menijima

Navbar

Zadana navigacijska traka

Prepun sadržaj

Zahtijeva JavaScript dodatak

Promjena skupljene tačke prekida mobilne navigacijske trake

Učinite navigacijske trake pristupačnim

Imidž brenda

Forms

Upozorenja za mobilne uređaje

Uvijek dodajte oznake

Dugmad

Kontekst-specifična upotreba

Tekst

Ne-navigacijske veze

Poravnanje komponenti

Desno poravnavanje više komponenti

Fiksirano na vrh

Potrebna podstava za tijelo

Fiksirano na dno

Zastarjelo `.pull-right`poravnanje

Uvjerite se da je ispravno `role`i dajte naljepnicu

Sa `<a>`elementima

Sa `<button>`elementima

`<input>`Samo tekstualni