Komponente
Preko desetak komponenti za višekratnu upotrebu napravljenih da obezbede ikonografiju, padajuće menije, grupe unosa, navigaciju, upozorenja i još mnogo toga.
Preko desetak komponenti za višekratnu upotrebu napravljenih da obezbede ikonografiju, padajuće menije, grupe unosa, navigaciju, upozorenja i još mnogo toga.
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.
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.
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>
.
Klase ikona bi se trebale koristiti samo na elementima koji ne sadrže tekstualni sadržaj i nemaju podređene elemente.
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:
@icon-font-path
i/ili @icon-font-name
varijable u izvornim datotekama Less.url()
putanje u prevedenom CSS-u.Koristite bilo koju opciju koja najbolje odgovara vašim specifičnim razvojnim postavkama.
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-only
klasom.
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-label
atribut na samoj kontroli.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
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-only
tekstom 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>
Preklopni, kontekstualni meni za prikaz lista veza. Interaktivan s padajućim JavaScript dodatkom .
Zamotajte okidač padajućeg menija i padajući meni unutar .dropdown
ili 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 .dropup
u 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-right
na .dropdown-menu
desno poravnajte padajući meni.
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 overflow
svojstvima ili se pojaviti izvan granica okvira za prikaz. Sami riješite ove probleme čim se pojave.
.pull-right
poravnanjeOd verzije 3.1.0, zastarjeli smo .pull-right
na 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 .disabled
u 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 .
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).
role
i dajte naljepnicuDa bi pomoćne tehnologije – kao što su čitači ekrana – prenijele da je niz dugmadi grupiran, role
potrebno 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 role
atributa. U ovdje navedenim primjerima koristimo , ali se mogu koristiti aria-label
i alternative kao što su.aria-labelledby
Zamotajte niz dugmadi .btn
u .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>
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>
Postavite a .btn-group
unutar drugog .btn-group
kada ž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>
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>
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.
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: -1px
koristi se za slaganje granica umjesto za njihovo uklanjanje. Međutim, margin
ne 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.
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.
<a>
elementimaSamo umotajte niz .btn
s u .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
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"
.
<button>
elementimaDa 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-group
i obezbediti odgovarajuću oznaku menija.
Padajući meni s gumbima zahtijeva da padajući dodatak bude uključen u vašu verziju Bootstrapa.
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>
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>
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>
Aktivirajte padajuće menije iznad elemenata dodavanjem .dropup
u 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-group
sa .input-group-addon
ili .input-group-btn
za dodavanje ili dodavanje elemenata jednom .form-control
.
<input>
Samo tekstualniIzbjegavajte 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 rows
atribut u nekim slučajevima neće poštovati.
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).
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.
Č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-only
klase ili korištenje atributa aria-label
, aria-labelledby
, aria-describedby
, title
ili placeholder
atributa) 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.
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-addon
ili .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>
Dodajte relativne klase veličine obrasca u .input-group
samu 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>
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 -->
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-btn
za 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 -->
<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 -->
<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>
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 .nav
klase, kao i deljena stanja. Zamijenite klase modifikatora za prebacivanje između svakog stila.
Imajte na umu da .nav-tabs
klasa zahtijeva .nav
osnovnu 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-pills
umjesto 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.
<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 .disabled
za sive veze i bez efekata lebdenja .
<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 .
<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>
<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.
<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-brand
ima 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-form
za 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-form
dijeli veći dio svog koda sa .form-inline
preko 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>
Dodajte .navbar-btn
klasu <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-link
klasu 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-left
ili .navbar-right
usluž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-left
i .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-top
i uključite .container
ili .container-fluid
u centar i sadržaj navigacijske trake.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Dodajte .navbar-fixed-bottom
i uključite .container
ili .container-fluid
u centar i sadržaj navigacijske trake.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Kreirajte navigacijsku traku pune širine koja se pomiče sa stranice dodavanjem .navbar-static-top
i uključivanjem .container
ili .container-fluid
u 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>
Označite lokaciju trenutne stranice unutar navigacijske hijerarhije.
Separatori se automatski dodaju u CSS kroz :before
i content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Navedite veze za paginaciju za svoju web-lokaciju ili aplikaciju s komponentom paginacije na više stranica ili jednostavnijom alternativom pejdžerom .
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">«</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">»</span>
</a>
</li>
</ul>
</nav>
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-label
za <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"
.
Linkovi su prilagodljivi različitim okolnostima. Koristi .disabled
se za veze na koje se ne može kliknuti i .active
za označavanje trenutne stranice.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Želite veću ili manju paginaciju? Dodati .pagination-lg
ili .pagination-sm
za 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>
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.
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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Veze pejdžera takođe koriste opštu .disabled
uslužnu klasu iz paginacije.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Dodajte bilo koju od dole navedenih klasa modifikatora da promijenite izgled oznake.
<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>
Problemi s renderiranjem mogu nastati kada imate desetine inline etiketa unutar uskog kontejnera, od kojih svaka sadrži svoj inline-block
element (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.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Kada nema novih ili nepročitanih stavki, značke će se jednostavno srušiti (preko CSS-ovog :empty
selektora) pod uslovom da u njima nema sadržaja.
Značke se neće sami srušiti u Internet Explorer-u 8 jer mu nedostaje podrška za :empty
birač.
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.
Ovo je jednostavna jedinica heroja, jednostavna komponenta u stilu jumbotrona za privlačenje dodatne pažnje na istaknuti sadržaj ili informacije.
<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 .container
s i umjesto toga dodajte a .container
unutar.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Jednostavna ljuska za h1
odgovarajući prostor i segmentiranje dijelova sadržaja na stranici. Može koristiti h1
's default small
element, 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 .
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>
Uz malo dodatne oznake, moguće je dodati bilo koju vrstu HTML sadržaja poput naslova, pasusa ili dugmadi u sličice.
<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.
Zamotajte bilo koji tekst i opciono dugme za odbacivanje .alert
i jednu od četiri kontekstualne klase (npr. .alert-success
) za osnovne poruke upozorenja.
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>
Nadogradite bilo koje upozorenje dodavanjem opcionog .alert-dismissible
dugmeta i dugmeta za zatvaranje.
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">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Obavezno koristite <button>
element s data-dismiss="alert"
atributom podataka.
Koristite .alert-link
usluž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>
Omogućite ažurirane povratne informacije o napretku toka posla ili radnje pomoću jednostavnih, ali fleksibilnih traka napretka.
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.
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 style
atribute 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.
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>
Uklonite klasu <span>
with .sr-only
unutar trake napretka da prikažete vidljivi postotak.
<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-width
na traku napretka.
<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>
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>
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>
Dodajte .active
u .progress-bar-striped
da 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>
Stavite više šipki u iste .progress
da 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 prikazuje medijski objekt (slike, video, audio) lijevo ili desno od bloka sadržaja.
<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-left
i .pull-right
takođ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-left
i .media-right
, osim što .media-right
bi trebalo biti postavljeno iza .media-body
oznake u html-u.
Slike ili drugi mediji mogu biti poravnati odozgo, po sredini ili dolje. Podrazumevano je poravnato odozgo.
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.
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.
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>
Uz malo dodatne oznake, možete koristiti medije unutar liste (korisno za teme komentara ili liste članaka).
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.
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.
<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>
Dodajte komponentu značke bilo kojoj grupi liste i ona će automatski biti pozicionirana na desnoj strani.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
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 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 .btn
klase 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>
Dodajte .disabled
u a .list-group-item
da 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>
Koristite kontekstualne klase da stilizujete stavke liste, podrazumevane ili povezane. Također uključuje .active
državu.
<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>
Dodajte gotovo bilo koji HTML unutar, čak i za grupe povezanih lista poput one ispod.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
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.
Prema zadanim postavkama, sve što .panel
treba učiniti je primijeniti neke osnovne ivice i padding kako bi sadržavali neki sadržaj.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Lako dodajte spremnik naslova na panel pomoću .panel-heading
. Takođe možete uključiti bilo koji <h1>
- <h6>
sa .panel-title
klasom 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
.
<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.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Kao i druge komponente, lako učinite panel smislenijim za određeni kontekst dodavanjem bilo koje od kontekstualnih klasa stanja.
<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>
Dodajte sve bez ivica .table
unutar panela za besprijekoran dizajn. Ako postoji .panel-body
, dodajemo dodatni okvir na vrh tabele radi razdvajanja.
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 |
<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.
# | Ime | Prezime | Korisničko ime |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @debeo |
3 | Larry | ptica |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Lako uključite grupe liste pune širine unutar bilo kojeg 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.
<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-item
kada ž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>
Koristite bunar kao jednostavan efekat na elementu da mu date umetnuti efekat.
<div class="well">...</div>
Kontrolirajte padding i zaobljene uglove s dvije opcione klase modifikatora.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>