Preko desetak komponenti za višekratnu upotrebu napravljenih da obezbede ikonografiju, padajuće menije, grupe unosa, navigaciju, upozorenja i još mnogo toga.
Glifikoni
Dostupni glifovi
Uključuje preko 250 glifova u formatu fonta iz seta Glyphicon Halflings. Glyphicons Halflings obično nisu dostupni besplatno, ali ih je njihov kreator učinio dostupnim za Bootstrap besplatno. Kao zahvalnost, samo vas molimo da uključite vezu natrag na Glyphicons kad god je to moguće.
glifikon glifikon-zvjezdica
glyphicon glyphicon-plus
glifikon glifikon-euro
glyphicon glyphicon-eur
glifikon glifikon-minus
glifikon glifikon-oblak
glifikon glifikon-koverta
glifikon glifikon-olovka
glifikon glifikon-staklo
glifikon glifikon-muzika
glifikon glifikon-pretraga
glifikon glifikon-srce
glifikon glifikon-zvijezda
glifikon glifikon-zvijezda-prazno
glyphicon glyphicon-user
glifikon glifikon-film
glifikon glyphicon-th-large
glyphicon glyphicon-th
glifikon glyphicon-th-list
glifikon glifikon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glifikon glyphicon-zoom-out
glyphicon glyphicon-off
glifikon glifikon-signal
glifikon glyphicon-cog
glifikon glifikon-smeće
glyphicon glyphicon-home
glyphicon glyphicon-file
glifikon glifikon-vrijeme
glifikon glifikon-put
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glifikon glifikon-igra-krug
glifikon glifikon-ponavljanje
glyphicon glyphicon-refresh
glifikon glyphicon-list-alt
glyphicon glyphicon-lock
glifikon glifikon-zastava
glyphicon glyphicon-slušalice
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glifikon glifikon-barkod
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon Glyphicon-book
glifikon glyphicon-bookmark
glifikon glyphicon-print
glifikon glifikon-kamera
glyphicon glyphicon-font
glifikon glifikon-bold
glifikon glifikon-kurziv
glifikon glyphicon-text-height
glifikon glyphicon-text-width
glyphicon glyphicon-align-left
glifikon glyphicon-align-center
glyphicon glyphicon-align-right
glifikon glyphicon-align-justify
glifikon glyphicon-list
glifikon glifikon-uvlačenje-lijevo
glifikon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glifikon glifikon-slika
glifikon glyphicon-map-marker
glyphicon glyphicon-podesi
glifikon glifikon-boja
glyphicon glyphicon-edit
glyphicon glyphicon-share
glifikon glifikon-provjera
glyphicon glyphicon-move
glifikon glifikon-korak-nazad
glifikon glifikon-brzo-nazad
glifikon glifikon-nazad
glyphicon glyphicon-play
glifikon glifikon-pauza
glyphicon glyphicon-stop
glifikon glifikon-naprijed
glifikon glifikon-premotavanje naprijed
glifikon glifikon-korak naprijed
glifikon glifikon-izbacivanje
glifikon glifikon-ševron-lijevo
glifikon glifikon-ševron-desno
glifikon glifikon-plus-znak
glifikon glifikon-minus-znak
glifikon glifikon-ukloni-znak
glifikon glifikon-ok-znak
glifikon glifikon-znak-pitanje
glifikon glifikon-info-znak
glyphicon glifikon-snimka zaslona
glifikon glifikon-ukloni-krug
glifikon glifikon-ok-krug
glifikon glifikon-zabran-krug
glifikon glifikon-strelica-levo
glifikon glifikon-strelica-desno
glifikon glifikon-strelica-gore
glifikon glifikon-strelica-dole
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glifikon glifikon-znak uzvika
glifikon glifikon-dar
glifikon glifikon-list
glifikon glifikon-vatra
glifikon glifikon-otvoreno oko
glifikon glifikon-oko-zatvori
glifikon glifikon-znak-upozorenje
glifikon glifikon-ravnina
glifikon glifikon-kalendar
glyphicon glyphicon-random
glyphicon glyphicon-comment
glifikon glifikon-magnet
glyphicon glyphicon-chevron-up
glifikon glifikon-ševron-dole
glyphicon glyphicon-retweet
glifikon glifikon-kolica za kupovinu
glifikon glyphicon-folder-close
glifikon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glifikon glyphicon-bullhorn
glifikon glifikon-zvono
glifikon glifikon-sertifikat
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glifikon glifikon-ruka-desno
glifikon glifikon-ruka-lijevo
glifikon glifikon-ruka gore
glifikon glifikon-dolje
glifikon glifikon-krug-strelica-desno
glifikon glifikon-krug-strelica-levo
glifikon glifikon-krug-strelica-gore
glifikon glifikon-krug-strelica-dole
glifikon glifikon-globus
glifikon glifikon-ključ
glifikon glifikon-zadaci
glifikon glifikon-filter
glifikon glifikon-aktovka
glyphicon glyphicon-fullscreen
glifikon glifikon-kontrolna tabla
glifikon glifikon-spojnica
glifikon glifikon-srce-prazno
glifikon glyphicon-link
glifikon glifikon-telefon
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glifikon glyphicon-sort
glifikon glifikon sortiraj po abecedi
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-red
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glifikon glifikon-neoznačen
glifikon glifikon-proširi
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-odjava
glifikon glifikon-novi-prozor
glifikon glifikon-zapis
glyphicon glyphicon-save
glifikon glyphicon-open
glifikon glifikon sačuvan
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glifikon glifikon-kreditna-kartica
glifikon glifikon-prijenos
glifikon glifikon-pribor za jelo
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glifikon glifikon-slušalica
glifikon glifikon-telefon-alt
glifikon glifikon-kula
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
Glyphicon Glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glifikon glifikon-zvuk-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glifikon glifikon-registracioni-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glifikon glifikon-drvo-četinar
glifikon glifikon-drvo-listopadni
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level up
glifikon glifikon-kopija
glifikon glifikon pasta
glyphicon glyphicon-alert
glifikon glifikon-ekvilajzer
glifikon glifikon-kralj
glifikon glifikon-kraljica
glifikon glifikon-pešak
glifikon glifikon-biskup
glifikon glifikon-vitez
glyphicon glyphicon-baby-formula
glifikon glifikon-šator
glifikon glifikon-tabla
glifikon glifikon-krevet
glifikon glifikon-jabuka
glifikon glifikon-brisanje
glifikon glifikon-pješčani sat
glifikon glifikon-lampa
glifikon glifikon-dvojnik
glifikon glifikon-kasica-prasica
glifikon glifikon-makaze
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glifikon glifikon-jen
glyphicon glyphicon-jpy
glifikon glifikon-rublja
glyphicon glyphicon-rub
glifikon glifikon-skala
glyphicon glyphicon-ice-lizalica
glyphicon glyphicon-ice-lilly-tasted
glifikon glifikon-edukacija
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glifikon glifikon-modalni-prozor
glifikon glifikon-ulje
glifikon glifikon-zrno
glifikon glifikon-naočare za sunce
glifikon veličina-glyphicon-text
glifikon glifikon-boja teksta
glifikon glifikon-tekst-pozadina
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glifikon glyphicon-object-align-left
glifikon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glifikon glifikon-trokut-desno
glifikon glifikon-trokut-lijevo
glifikon glifikon-trokut-dno
glifikon glifikon-trokut-vrh
glyphicon glyphicon-konzola
glifikon glifikon-superscript
glifikon glifikon-subscript
glifikon glifikon-meni-levo
glyphicon glyphicon-menu-desno
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Kako koristiti
Iz razloga performansi, sve ikone zahtijevaju osnovnu klasu i pojedinačnu klasu ikona. Za korištenje, postavite sljedeći kod bilo gdje. Obavezno ostavite razmak između ikone i teksta za ispravan padding.
Ne miješati s drugim komponentama
Klase ikona se ne mogu direktno kombinovati sa drugim komponentama. Ne treba ih koristiti zajedno s drugim klasama na istom elementu. Umjesto toga, dodajte ugniježđeni <span>i primijenite klase ikona na <span>.
Samo za upotrebu na praznim elementima
Klase ikona bi se trebale koristiti samo na elementima koji ne sadrže tekstualni sadržaj i nemaju podređene elemente.
Promjena lokacije fonta ikone
Bootstrap pretpostavlja da će se datoteke fontova ikona nalaziti u ../fonts/direktoriju, u odnosu na kompajlirane CSS datoteke. Premještanje ili preimenovanje tih datoteka fontova znači ažuriranje CSS-a na jedan od tri načina:
Promijenite @icon-font-pathi/ili @icon-font-namevarijable u izvornim datotekama Less.
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.
Primjeri
Koristite ih u dugmadima, grupama dugmadi za traku sa alatkama, navigaciju ili unose u prethodnom obrascu.
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.
Podrazumevano, padajući meni se automatski pozicionira 100% od vrha i duž leve strane svog nadređenog. Dodajte .dropdown-menu-rightna .dropdown-menudesno poravnajte padajući meni.
Može zahtijevati dodatno pozicioniranje
Padajući meni se automatski pozicionira preko CSS-a unutar normalnog toka dokumenta. To znači da roditelji mogu izrezati padajuće menije sa određenim overflowsvojstvima ili se pojaviti izvan granica okvira za prikaz. Sami riješite ove probleme čim se pojave.
Zastarjelo .pull-rightporavnanje
Od verzije 3.1.0, zastarjeli smo .pull-rightna padajućim menijima. Za desno poravnavanje menija koristite .dropdown-menu-right. Desno poravnate navigacijske komponente u navigacijskoj traci koriste mixin verziju ove klase za automatsko poravnavanje menija. Da biste ga nadjačali, koristite .dropdown-menu-left.
Zaglavlja
Dodajte zaglavlje da označite dijelove radnji u bilo kojem padajućem izborniku.
Grupirajte niz dugmadi zajedno u jednom redu sa grupom dugmadi. Dodajte opcioni JavaScript radio i ponašanje u stilu checkbox-a pomoću našeg dodatka za dugmad .
Objašnjenje alata i iskačući prikazi u grupama dugmadi zahtevaju posebnu postavku
Kada koristite opise alata ili iskačuće elemente na elementima unutar .btn-group, morat ćete navesti opciju container: 'body'kako biste izbjegli neželjene nuspojave (kao što je element koji raste širi i/ili gubi svoje zaobljene uglove kada se pokrene opis alata ili skočni prozor).
Uvjerite se da je ispravno rolei dajte naljepnicu
Da bi pomoćne tehnologije – kao što su čitači ekrana – prenijele da je niz dugmadi grupiran, rolepotrebno je osigurati odgovarajući atribut. Za grupe dugmadi, ovo bi bilo role="group", dok bi trake sa alatkama trebale imati role="toolbar".
Jedan izuzetak su grupe koje sadrže samo jednu kontrolu (na primjer, grupe s opravdanim gumbima s <button>elementima) ili padajući meni.
Pored toga, grupama i alatnim trakama treba dati eksplicitnu oznaku, jer ih većina pomoćnih tehnologija inače neće najaviti, uprkos prisutnosti ispravnog roleatributa. U ovdje navedenim primjerima koristimo , ali se mogu koristiti aria-labeli alternative kao što su.aria-labelledby
Osnovni primjer
Zamotajte niz dugmadi .btnu .btn-group.
Traka sa dugmadima
Kombinirajte skupove <div class="btn-group">u a <div class="btn-toolbar">za složenije komponente.
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.
Nesting
Postavite a .btn-groupunutar drugog .btn-groupkada želite padajuće menije pomešane sa nizom 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.
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.
Padajući meni sa dugmetom
Koristite bilo koje dugme da pokrenete padajući meni tako što ćete ga postaviti unutar a .btn-groupi obezbediti odgovarajuću oznaku menija.
Ovisnost o dodacima
Padajući meni s gumbima zahtijeva da padajući dodatak bude uključen u vašu verziju Bootstrapa.
Padajući meni sa jednim dugmetom
Pretvorite dugme u padajući prekidač sa nekim osnovnim promenama oznake.
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.
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.
Potvrdni okviri i radio dodaci
Postavite bilo koji okvir za potvrdu ili radio opciju unutar dodatka grupe za unos umjesto teksta.
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.
Dugmad sa padajućim menijima
Segmentirana dugmad
Više dugmadi
Iako možete imati samo jedan dodatak po strani, možete imati više dugmadi unutar jednog .input-group-btn.
Navs
Navs dostupni u Bootstrapu imaju zajedničku oznaku, počevši od osnovne .navklase, kao i deljena stanja. Zamijenite klase modifikatora za prebacivanje između svakog stila.
Korištenje navs-a za tabele zahtijeva JavaScript dodatak za kartice
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.
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 .
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.
Zahtijeva JavaScript dodatak
Ako je JavaScript onemogućen, a okvir za pregled dovoljno uzak da se navigacijska traka sruši, biće nemoguće proširiti navigacijsku traku i pogledati sadržaj unutar .navbar-collapse.
Reaktivna navigacijska traka zahtijeva da dodatak za kolaps bude uključen u vašu verziju Bootstrapa.
Promjena skupljene tačke prekida mobilne navigacijske trake
Navbar se sažima u svoj vertikalni mobilni prikaz kada je okvir za prikaz uži od @grid-float-breakpoint, i širi se u svoj horizontalni nemobilni prikaz kada je okvir za prikaz najmanje @grid-float-breakpointširine. Podesite ovu varijablu u izvoru Manje da kontrolišete kada se navigaciona traka skupi/proširi. Zadana vrijednost je 768px(najmanji "mali" ili "tablet" ekran).
Učinite navigacijske trake pristupačnim
Obavezno koristite <nav>element ili, ako koristite generičniji element kao što je <div>, dodajte a role="navigation"na svaku navigacijsku traku da biste je eksplicitno identificirali kao orijentirnu regiju za korisnike pomoćnih tehnologija.
Imidž brenda
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.
Forms
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.
Č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.
Dugmad
Dodajte .navbar-btnklasu <button>elementima koji se ne nalaze u a <form>da biste ih okomito centrirali na navigacijskoj traci.
Kontekst-specifična upotreba
Kao i standardne klase dugmadi , .navbar-btnmogu se koristiti na elementima <a>i . <input>Međutim, ni .navbar-btnstandardne klase dugmadi ne bi se trebale koristiti na <a>elementima unutar .navbar-nav.
Tekst
Zamotajte nizove teksta u element sa .navbar-text, obično na <p>oznaci za ispravan početak i boju.
Ne-navigacijske veze
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.
Poravnanje komponenti
Poravnajte navigacijske veze, obrasce, dugmad ili tekst koristeći .navbar-leftili .navbar-rightuslužne klase. Obje klase će dodati CSS float u navedenom smjeru. Na primjer, da biste poravnali navigacijske veze, stavite ih u zasebno <ul>s primijenjenom odgovarajućom klasom korisnosti.
Ove klase su pomiješane verzije .pull-lefti .pull-right, ali su ograničene na medijske upite za lakše rukovanje komponentama navigacijske trake u različitim veličinama uređaja.
Desno poravnavanje više komponenti
Navbari trenutno imaju ograničenje s više .navbar-rightklasa. Da bismo pravilno razmaknuli sadržaj, koristimo negativnu marginu na zadnjem .navbar-rightelementu. Kada postoji više elemenata koji koriste tu klasu, ove margine ne rade kako je predviđeno.
Ponovo ćemo ovo razmotriti kada budemo mogli da prepišemo tu komponentu u v4.
Fiksirano na vrh
Dodajte .navbar-fixed-topi uključite .containerili .container-fluidu centar i sadržaj navigacijske trake.
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.
Obavezno uključite ovo nakon osnovnog Bootstrap CSS-a.
Fiksirano na dno
Dodajte .navbar-fixed-bottomi uključite .containerili .container-fluidu centar i sadržaj navigacijske trake.
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.
Obavezno uključite ovo nakon osnovnog Bootstrap CSS-a.
Statički vrh
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.
Invertirana navigacijska traka
Izmijenite izgled navigacijske trake dodavanjem .navbar-inverse.
Mrvice hljeba
Označite lokaciju trenutne stranice unutar navigacijske hijerarhije.
Separatori se automatski dodaju u CSS kroz :beforei content.
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.
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.
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.
Određivanje veličine
Želite veću ili manju paginaciju? Dodati .pagination-lgili .pagination-smza dodatne veličine.
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.
Poravnane veze
Alternativno, svaku vezu možete poravnati sa strane:
Opciono onemogućeno stanje
Veze pejdžera takođe koriste opštu .disableduslužnu klasu iz paginacije.
Etikete
Primjer
Primjer naslova Novo
Primjer naslova Novo
Primjer naslova Novo
Primjer naslova Novo
Primjer naslova Novo
Primjer naslova Novo
Dostupne varijacije
Dodajte bilo koju od dole navedenih klasa modifikatora da promijenite izgled oznake.
Zadani primarni podaci o uspjehu Upozorenje Opasnost
Imate tone etiketa?
Problemi s renderiranjem mogu nastati kada imate desetine inline etiketa unutar uskog kontejnera, od kojih svaka sadrži svoj inline-blockelement (poput ikone). Način zaobilaženja ovoga je postavljanje display: inline-block;. Za kontekst i primjer, pogledajte #13219 .
Značke
Lako istaknite nove ili nepročitane stavke dodavanjem a <span class="badge">na veze, Bootstrap navigaciju i još mnogo toga.
Da bi jumbotron bio pune širine i bez zaobljenih uglova, postavite ga izvan svih .containers i umjesto toga dodajte a .containerunutar.
Zaglavlje stranice
Jednostavna ljuska za h1odgovarajući prostor i segmentiranje dijelova sadržaja na stranici. Može koristiti h1's default smallelement, kao i većinu drugih komponenti (sa dodatnim stilovima).
Primjer zaglavlja stranice Podtekst za zaglavlje
Thumbnails
Proširite Bootstrap-ov sistem mreže pomoću komponente sličica da lako prikažete mreže slika, video zapisa, teksta i još mnogo toga.
Ako tražite prezentaciju sličica nalik Pinterestu različitih visina i/ili širina, morat ćete koristiti dodatak treće strane kao što su Masonry , Isotop ili Salvattore .
Zadani primjer
Prema zadanim postavkama, sličice Bootstrapa su dizajnirane da prikazuju povezane slike sa minimalnim potrebnim oznakama.
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.
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.
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.
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.
Odbaciti upozorenja
Nadogradite bilo koje upozorenje dodavanjem opcionog .alert-dismissibledugmeta i dugmeta za zatvaranje.
Omogućite ažurirane povratne informacije o napretku toka posla ili radnje pomoću jednostavnih, ali fleksibilnih traka napretka.
Kompatibilnost među pretraživačima
Trake napretka koriste CSS3 prelaze i animacije da bi postigli neke od svojih efekata. Ove funkcije nisu podržane u Internet Exploreru 9 i starijim verzijama Firefoxa. Opera 12 ne podržava animacije.
Kompatibilnost politike sigurnosti sadržaja (CSP).
Ako vaša web stranica ima Politiku sigurnosti sadržaja (CSP) koja ne dozvoljava style-src 'unsafe-inline', tada nećete moći koristiti inline styleatribute za postavljanje širine trake napretka kao što je prikazano u našim primjerima ispod. Alternativne metode za postavljanje širina koje su kompatibilne sa strogim CSP-ovima uključuju korištenje malo prilagođenog JavaScripta (koji postavlja element.style.width) ili korištenje prilagođenih CSS klasa.
Osnovni primjer
Zadana traka napretka.
60% završeno
Sa etiketom
Uklonite klasu <span>with .sr-onlyunutar trake napretka da prikažete vidljivi postotak.
60%
Kako biste osigurali da tekst oznake ostane čitljiv čak i za male postotke, razmislite o dodavanju a min-widthna traku napretka.
0%
2%
Kontekstualne alternative
Trake napretka koriste neke od istih tipki i klasa upozorenja za dosljedne stilove.
40% završeno (uspjeh)
20% završeno
60% završeno (upozorenje)
80% završeno (opasnost)
Prugasta
Koristi gradijent za stvaranje prugastog efekta. Nije dostupno u IE9 i starijim verzijama.
40% završeno (uspjeh)
20% završeno
60% završeno (upozorenje)
80% završeno (opasnost)
Animirani
Dodajte .activeu .progress-bar-stripedda animirate pruge s desna na lijevo. Nije dostupno u IE9 i starijim verzijama.
45% završeno
Stacked
Stavite više šipki u iste .progressda ih složite.
35% završeno (uspjeh)
20% završeno (upozorenje)
10% završeno (opasnost)
Medijski objekat
Stilovi apstraktnih objekata za pravljenje različitih tipova komponenti (kao što su komentari na blogu, tvitovi, itd.) koje sadrže sliku poravnatu lijevo ili desno uz tekstualni sadržaj.
Zadani medij
Zadani medij prikazuje medijski objekt (slike, video, audio) lijevo ili desno od bloka sadržaja.
Naslov medija
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Naslov medija
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Ugniježđeni medijski naslov
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Naslov medija
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Naslov medija
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
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.
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.
Grupa liste
Grupe lista su fleksibilna i moćna komponenta za prikazivanje ne samo jednostavnih lista elemenata, već i složenih sa prilagođenim sadržajem.
Osnovni primjer
Najosnovnija grupa lista je jednostavno neuređena lista sa stavkama liste i odgovarajućim klasama. Nadogradite ga s opcijama koje slijede ili vlastitim CSS-om po potrebi.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum u erosu
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
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.
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.
Onemogućene stavke
Dodajte .disabledu a .list-group-itemda biste ga zasivili da izgleda onemogućeno.
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
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
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
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
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
Ako nema tijela panela, komponenta se kreće od zaglavlja panela do stola bez prekida.
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
Responsive embed
Dozvolite pretraživačima da odrede dimenzije videa ili projekcije slajdova na osnovu širine bloka koji sadrži stvaranjem unutrašnjeg omjera koji će se pravilno skalirati na bilo kojem uređaju.
Pravila se direktno primjenjuju na <iframe>, <embed>, <video>, i <object>elemente; opciono koristite eksplicitnu klasu potomka .embed-responsive-itemkada želite da uskladite stil za druge atribute.
Pro-Tip! Ne morate uključiti frameborder="0"svoje <iframe>s jer mi to zamjenjujemo umjesto vas.
Wells
Default well
Koristite bunar kao jednostavan efekat na elementu da mu date umetnuti efekat.
Vidi, ja sam u bunaru!
Izborna nastava
Kontrolirajte padding i zaobljene uglove s dvije opcione klase modifikatora.