Počinjemo
Pregled Bootstrapa, kako preuzeti i koristiti, osnovne predloške i primjere i još mnogo toga.
Pregled Bootstrapa, kako preuzeti i koristiti, osnovne predloške i primjere i još mnogo toga.
Bootstrap (trenutno v3.3.7) ima nekoliko jednostavnih načina da brzo započnete, od kojih je svaki privlačan za različit nivo vještine i slučaj upotrebe. Pročitajte da vidite šta odgovara vašim posebnim potrebama.
Preveden i minimiziran CSS, JavaScript i fontovi. Nisu uključeni nikakvi dokumenti ili originalni izvorni fajlovi.
Source Less, JavaScript i datoteke fontova, zajedno s našim dokumentima. Zahtijeva manje kompajler i neke postavke.
Bootstrap prenet sa Less na Sass za lako uključivanje u projekte Rails, Compass ili samo za Sass.
Ljudi iz jsDelivr-a ljubazno pružaju CDN podršku za Bootstrap-ov CSS i JavaScript. Samo koristite ove Bootstrap CDN veze.
Također možete instalirati i upravljati Bootstrapom Less, CSS, JavaScript i fontovima koristeći Bower :
Također možete instalirati Bootstrap koristeći npm :
require('bootstrap')
će učitati sve jQuery dodatke Bootstrapa na jQuery objekt. Sam bootstrap
modul ne izvozi ništa. Možete ručno učitati Bootstrapove jQuery dodatke pojedinačno tako što ćete učitati /js/*.js
datoteke u direktoriju najvišeg nivoa paketa.
Bootstrap package.json
sadrži neke dodatne metapodatke pod sljedećim tipkama:
less
- putanja do glavne izvorne datoteke Bootstrapa Lessstyle
- put do Bootstrap-ovog neminimiziranog CSS-a koji je unaprijed kompajliran korištenjem zadanih postavki (bez prilagođavanja)Također možete instalirati i upravljati Bootstrapom Less, CSS, JavaScript i fontovima koristeći Composer :
Bootstrap koristi Autoprefixer za rad sa CSS prefiksima dobavljača . Ako kompajlirate Bootstrap iz njegovog Less/Sass izvora i ne koristite naš Gruntfile, morat ćete sami integrirati Autoprefixer u svoj proces izgradnje. Ako koristite unaprijed kompajlirani Bootstrap ili koristite naš Gruntfile, ne morate brinuti o tome jer je Autoprefixer već integriran u naš Gruntfile.
Bootstrap se može preuzeti u dva oblika, unutar kojih ćete pronaći sljedeće direktorije i datoteke, logički grupisajući uobičajene resurse i pružajući kompajlirane i minimizirane varijacije.
Imajte na umu da svi JavaScript dodaci zahtijevaju da jQuery bude uključen, kao što je prikazano u starter šablonu . Posavjetujte se s našimbower.json
da vidite koje su verzije jQueryja podržane.
Nakon preuzimanja, raspakirajte komprimirani folder da vidite strukturu (prevedenog) Bootstrapa. Vidjet ćete nešto poput ovoga:
Ovo je najosnovniji oblik Bootstrapa: unaprijed kompajlirane datoteke za brzu upotrebu u gotovo svakom web projektu. Pružamo kompajlirane CSS i JS ( bootstrap.*
), kao i kompajlirane i minimizirane CSS i JS ( bootstrap.min.*
). CSS izvorne mape ( bootstrap.*.map
) dostupne su za korištenje sa programskim alatima određenih pretraživača. Fontovi iz Glyphicons su uključeni, kao i opciona Bootstrap tema.
Preuzimanje izvornog koda za Bootstrap uključuje unaprijed kompajlirane CSS, JavaScript i fontove, zajedno sa izvornim Lessom, JavaScript-om i dokumentacijom. Konkretnije, uključuje sljedeće i više:
, less/
, js/
i fonts/
su izvorni kod za naše CSS, JS i fontove ikona (respektivno). Fascikla uključuje sve što je dist/
navedeno u prethodno kompajliranom odjeljku za preuzimanje iznad. docs/
Fascikla uključuje izvorni kod za našu dokumentaciju i korištenje examples/
Bootstrapa. Osim toga, bilo koja druga uključena datoteka pruža podršku za pakete, informacije o licenci i razvoj.
Bootstrap koristi Grunt za svoj sistem izgradnje, sa pogodnim metodama za rad sa okvirom. Tako kompajliramo naš kod, pokrećemo testove i još mnogo toga.
Da biste instalirali Grunt, prvo morate preuzeti i instalirati node.js (koji uključuje npm). npm je skraćenica za module upakovane u čvorovima i način je upravljanja razvojnim ovisnostima putem node.js.
Zatim, iz komandne linije:grunt-cli
globalno sa npm install -g grunt-cli
./bootstrap/
direktorija, a zatim pokrenite npm install
. npm će pogledati package.json
datoteku i automatski instalirati potrebne lokalne zavisnosti navedene tamo.Kada završite, moći ćete da pokrenete različite Grunt komande koje ste dobili iz komandne linije.
grunt dist
(Samo kompajlirajte CSS i JavaScript)Regenerira /dist/
direktorij sa kompajliranim i minimiziranim CSS i JavaScript datotekama. Kao korisnik Bootstrapa, ovo je obično komanda koju želite.
grunt watch
(Gledajte)Gleda izvorne datoteke Less-a i automatski ih ponovo kompajlira u CSS kad god sačuvate promjenu.
grunt test
(Pokreni testove)Pokreće JSHint i pokreće QUnit testove bez glave u PhantomJS- u .
grunt docs
(Izgradite i testirajte materijale dokumenata)Gradi i testira CSS, JavaScript i druga sredstva koja se koriste kada se dokumentacija pokreće lokalno preko bundle exec jekyll serve
.
grunt
(Napravi apsolutno sve i pokreni testove)Kompajlira i minimizira CSS i JavaScript, pravi veb lokaciju za dokumentaciju, pokreće HTML5 validator u odnosu na dokumente, regeneriše sredstva za prilagođavanje i još mnogo toga. Potreban je Jekyll . Obično je potrebno samo ako hakujete sam Bootstrap.
Ako naiđete na probleme sa instaliranjem zavisnosti ili pokretanjem Grunt komandi, prvo obrišite /node_modules/
direktorijum koji je generisao npm. Zatim, ponovite npm install
.
Počnite s ovim osnovnim HTML predloškom ili modificirajte ove primjere . Nadamo se da ćete prilagoditi naše predloške i primjere, prilagođavajući ih svojim potrebama.
Kopirajte HTML ispod da biste počeli raditi s minimalnim Bootstrap dokumentom.
Nadogradite osnovni predložak iznad s mnogim komponentama Bootstrapa. Preporučujemo vam da prilagodite i prilagodite Bootstrap kako bi odgovarao potrebama vašeg individualnog projekta.
Preuzmite izvorni kod za svaki primjer ispod preuzimanjem Bootstrap spremišta . Primjeri se mogu naći u docs/examples/
imeniku.
Super osnovni predložak koji uključuje navigacijsku traku zajedno sa nekim dodatnim sadržajem.
Osnovna struktura za administrativnu kontrolnu tablu sa fiksnom bočnom trakom i navigacionom trakom.
Kreirajte prilagođenu navigacijsku traku s opravdanim vezama. Glavu gore! Nije previše prilagođeno Safariju.
Bootlint je službeni Bootstrap alat za HTML linter . Automatski provjerava nekoliko uobičajenih HTML grešaka na web stranicama koje koriste Bootstrap na prilično "vanilin" način. Komponente/widgeti Vanilla Bootstrapa zahtijevaju da njihovi dijelovi DOM-a budu u skladu sa određenim strukturama. Bootlint provjerava da li instance Bootstrap komponenti imaju ispravno strukturiran HTML. Razmislite o dodavanju Bootlint-a u svoj Bootstrap lanac alata za web razvoj tako da nijedna od uobičajenih grešaka ne uspori razvoj vašeg projekta.
Budite u toku sa razvojem Bootstrapa i obratite se zajednici pomoću ovih korisnih resursa.
irc.freenode.net
serveru, na ##bootstrap kanalu .twitter-bootstrap-3
.bootstrap
na paketima koji modificiraju ili dodaju funkcionalnost Bootstrapa prilikom distribucije putem npm- a ili sličnih mehanizama isporuke radi maksimalne vidljivosti.Također možete pratiti @getbootstrap na Twitteru za najnovije tračeve i sjajne muzičke spotove.
Bootstrap automatski prilagođava vaše stranice različitim veličinama ekrana. Evo kako onemogućiti ovu funkciju da vaša stranica radi kao ovaj primjer koji ne reagira .
<meta>
koji se spominje u CSS dokumentimawidth
on .container
za svaki sloj mreže sa jednom širinom, na primjer width: 970px !important;
Budite sigurni da ovo dolazi nakon zadanog Bootstrap CSS-a. Opciono možete izbjeći !important
s medijskim upitima ili nekim selektorom-fu..col-xs-*
klase pored ili umjesto srednjih/velikih. Ne brinite, izuzetno mala mreža uređaja prilagođava se na sve rezolucije.I dalje će vam trebati Respond.js za IE8 (pošto su naši medijski upiti još uvijek tu i treba ih obraditi). Ovo onemogućava aspekte "mobilnog sajta" Bootstrapa.
Ove korake smo primijenili na primjer. Pročitajte njegov izvorni kod da vidite implementirane specifične promjene.
Želite da pređete sa starije verzije Bootstrapa na v3.x? Pogledajte naš vodič za migraciju .
Bootstrap je napravljen da najbolje radi u najnovijim desktop i mobilnim pretraživačima, što znači da stariji pretraživači mogu prikazivati drugačije stilizovane, iako potpuno funkcionalne, prikaze određenih komponenti.
Konkretno, podržavamo najnovije verzije sljedećih pretraživača i platformi.
Alternativni pretraživači koji koriste najnoviju verziju WebKit-a, Blink-a ili Gecko-a, bilo direktno ili preko API-ja za web prikaz platforme, nisu eksplicitno podržani. Međutim, Bootstrap bi (u većini slučajeva) trebao da se prikazuje i ispravno funkcioniše i u ovim pretraživačima. Konkretnije informacije o podršci date su u nastavku.
Uopšteno govoreći, Bootstrap podržava najnovije verzije zadanih pretraživača svake glavne platforme. Imajte na umu da proxy pretraživači (kao što su Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) nisu podržani.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Podržano | Podržano | N / A |
iOS | Podržano | Podržano | Podržano |
Slično, podržane su najnovije verzije većine desktop pretraživača.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Podržano | Podržano | N / A | Podržano | Podržano |
Windows | Podržano | Podržano | Podržano | Podržano | Nije podržan |
Na Windows -u podržavamo Internet Explorer 8-11 .
Za Firefox, pored najnovijeg normalnog stabilnog izdanja, podržavamo i najnoviju verziju Firefoxa s proširenom podrškom (ESR) .
Nezvanično, Bootstrap bi trebao izgledati i ponašati se dovoljno dobro u Chromiumu i Chromeu za Linux, Firefoxu za Linux i Internet Explorer 7, kao iu Microsoft Edgeu, iako nisu službeno podržani.
Za listu nekih grešaka pretraživača sa kojima se Bootstrap mora boriti, pogledajte naš Zid grešaka pretraživača .
Internet Explorer 8 i 9 su takođe podržani, međutim, imajte na umu da neka CSS3 svojstva i HTML5 elementi nisu u potpunosti podržani od strane ovih pretraživača. Osim toga, Internet Explorer 8 zahtijeva korištenje Respond.js da omogući podršku za medijske upite.
Feature | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Nije podržan | Podržano |
box-shadow |
Nije podržan | Podržano |
transform |
Nije podržan | Podržano, sa -ms prefiksom |
transition |
Nije podržan | |
placeholder |
Nije podržan |
Posetite Mogu li da koristim... za detalje o podršci pretraživača za CSS3 i HTML5 funkcije.
Pazite na sljedeća upozorenja kada koristite Respond.js u svojim razvojnim i proizvodnim okruženjima za Internet Explorer 8.
Upotreba Respond.js-a sa CSS-om koji se nalazi na drugoj (pod)domeni (na primjer, na CDN-u) zahtijeva dodatno podešavanje. Pogledajte Respond.js dokumente za detalje.
file://
Zbog sigurnosnih pravila pretraživača, Respond.js ne radi sa stranicama koje se pregledaju putem file://
protokola (kao kada se otvara lokalni HTML fajl). Da biste testirali responzivne funkcije u IE8, pregledajte svoje stranice preko HTTP(S). Pogledajte Respond.js dokumente za detalje.
@import
Respond.js ne radi sa CSS-om na koji se upućuje preko @import
. Konkretno, poznato je da neke Drupal konfiguracije koriste @import
. Pogledajte Respond.js dokumente za detalje.
IE8 ne podržava u potpunosti box-sizing: border-box;
u kombinaciji sa min-width
, max-width
, min-height
ili max-height
. Iz tog razloga, od v3.0.1, više ne koristimo max-width
na .container
s.
IE8 ima nekih problema sa @font-face
kada se kombinuje sa :before
. Bootstrap koristi tu kombinaciju sa svojim Glifikonima. Ako je stranica keširana i učitana bez prelaska miša preko prozora (tj. pritisnite dugme za osvježavanje ili učitajte nešto u iframe) tada se stranica prikazuje prije nego što se font učita. Prelazak pokazivača miša preko stranice (telo) će prikazati neke od ikona, a prelazak miša preko preostalih ikona će prikazati i one. Vidite problem #13863 za detalje.
Bootstrap nije podržan u starim režimima kompatibilnosti sa Internet Explorerom. Da biste bili sigurni da koristite najnoviji način prikazivanja za IE, razmislite o uključivanju odgovarajuće <meta>
oznake na svoje stranice:
Potvrdite režim dokumenta otvaranjem alata za otklanjanje grešaka: pritisnite F12i označite "Režim dokumenta".
Ova oznaka je uključena u svu Bootstrap dokumentaciju i primjere kako bi se osiguralo najbolje moguće prikazivanje u svakoj podržanoj verziji Internet Explorera.
Pogledajte ovo StackOverflow pitanje za više informacija.
Internet Explorer 10 ne razlikuje širinu uređaja od širine okvira za prikaz i stoga ne primjenjuje pravilno medijske upite u Bootstrap-ovom CSS-u. Obično biste samo dodali brzi isječak CSS-a da ovo popravite:
Međutim, ovo ne radi za uređaje koji koriste Windows Phone 8 verzije starije od ažuriranja 3 (aka GDR3) , jer uzrokuje da takvi uređaji prikazuju uglavnom prikaz radne površine umjesto uskog prikaza "telefona". Da biste ovo riješili, morat ćete uključiti sljedeće CSS i JavaScript da biste zaobišli grešku .
Za više informacija i uputstva za upotrebu pročitajte Windows Phone 8 i Device-Width .
Kao predodžbu, ovo uključujemo u svu Bootstrapovu dokumentaciju i primjere kao demonstraciju.
Mašina za renderiranje verzija Safarija prije v7.1 za OS X i Safari za iOS v8.0 imala je problema s brojem decimalnih mjesta korištenih u našim .col-*-1
grid klasama. Dakle, ako imate 12 pojedinačnih kolona mreže, primijetili biste da su oni bili kratki u odnosu na druge redove kolona. Osim nadogradnje Safari/iOS-a, imate neke opcije za zaobilaženje:
.pull-right
u svoju posljednju kolonu mreže da dobijete poravnanje tvrdo udesnoPodrška za overflow: hidden
element <body>
je prilično ograničena u iOS-u i Androidu. U tu svrhu, kada skrolujete pored vrha ili dna modalnog u pretraživaču bilo kojeg od tih uređaja, <body>
sadržaj će početi da se pomera. Pogledajte Chrome grešku #175502 (popravljeno u Chromeu v40) i WebKit grešku #153852 .
Od iOS 9.3, dok je modal otvoren, ako je početni dodir geste pomicanja unutar granice tekstualnog <input>
ili <textarea>
, <body>
sadržaj ispod modalnog će se pomicati umjesto samog modalnog. Pogledajte WebKit grešku #153856 .
Također, imajte na umu da ako koristite fiksnu navigacijsku traku ili koristite unose unutar modalnog, iOS ima grešku u renderiranju koja ne ažurira poziciju fiksnih elemenata kada se pokrene virtualna tastatura. Nekoliko zaobilaznih rješenja za ovo uključuje transformaciju vaših elemenata u position: absolute
ili pozivanje tajmera u fokusu kako biste pokušali ručno ispraviti pozicioniranje. Bootstrap to ne rješava, tako da je na vama da odlučite koje je rješenje najbolje za vašu aplikaciju.
Element .dropdown-backdrop
se ne koristi na iOS-u u navigaciji zbog složenosti z-indeksiranja. Stoga, da biste zatvorili padajuće menije u navigacijskim trakama, morate direktno kliknuti na padajući element (ili bilo koji drugi element koji će pokrenuti događaj klika u iOS-u ).
Zumiranje stranice neizbježno predstavlja artefakte renderiranja u nekim komponentama, kako u Bootstrapu, tako iu ostatku weba. Ovisno o problemu, možda ćemo ga moći riješiti (prvo pretražite, a zatim otvorite problem ako je potrebno). Međutim, mi smo skloni da ih ignorišemo jer često nemaju direktno rešenje osim hakovačkih rešenja.
:hover
/ :focus
na mobilnomIako pravo lebdenje nije moguće na većini ekrana osetljivih na dodir, većina mobilnih pretraživača oponaša podršku za lebdenje i čini ih :hover
"lepljivim". Drugim riječima, :hover
stilovi se počinju primjenjivati nakon dodirivanja elementa i prestaju primjenjivati tek nakon što korisnik dodirne neki drugi element. Ovo može uzrokovati da se Bootstrapova :hover
stanja nepoželjno "zaglave" na takvim pretraživačima. Neki mobilni pretraživači takođe čine :focus
slično ljepljivim. Trenutno ne postoji jednostavno rješenje za ove probleme osim potpunog uklanjanja takvih stilova.
Čak i u nekim modernim pretraživačima, štampanje može biti neobično.
Konkretno, od Chrome v32 i bez obzira na postavke margina, Chrome koristi širinu okvira za prikaz znatno užu od fizičke veličine papira kada rješava medijske upite dok ispisuje web stranicu. Ovo može dovesti do toga da se Bootstrap-ova ekstra mala mreža neočekivano aktivira prilikom štampanja. Pogledajte problem #12078 i Chrome grešku #273306 za neke detalje. Predložena rješenja:
@screen-*
varijabli Manje tako da se papir vašeg pisača smatra većim nego ekstra malim.Također, od Safarija v8.0, fiksna širina .container
s može uzrokovati da Safari koristi neobično malu veličinu fonta prilikom ispisa. Pogledajte #14868 i WebKit grešku #138192 za više detalja. Jedno moguće rješenje za ovo je dodavanje sljedećeg CSS-a:
Izvan kutije, Android 4.1 (pa čak i neka novija izdanja očigledno) se isporučuju s aplikacijom Browser kao zadanim web pretraživačem po izboru (za razliku od Chromea). Nažalost, aplikacija Browser ima puno grešaka i nedosljednosti sa CSS-om općenito.
Na <select>
elementima, Android pretraživač neće prikazati bočne kontrole ako postoji border-radius
i/ili border
primijenjeno. (Pogledajte ovo StackOverflow pitanje za detalje.) Koristite isječak koda ispod da biste uklonili uvredljivi CSS i <select>
prikazali kao element bez stila na Android pretraživaču. Korisnički agent njuškanje izbjegava smetnje u preglednicima Chrome, Safari i Mozilla.
Želite li vidjeti primjer? Pogledajte ovaj JS Bin demo.
Kako bi pružio najbolje moguće iskustvo starim pretraživačima i pretraživačima s greškama, Bootstrap koristi hakove CSS pretraživača na nekoliko mjesta kako bi ciljao poseban CSS na određene verzije pretraživača kako bi zaobišao greške u samim pretraživačima. Ovi hakovi razumljivo uzrokuju da se CSS validatori žale da su nevažeći. Na nekoliko mjesta koristimo i vrhunske CSS karakteristike koje još nisu u potpunosti standardizirane, ali se one koriste isključivo za progresivno poboljšanje.
Ova upozorenja o validaciji nisu bitna u praksi jer dio našeg CSS-a koji nije hakovan u potpunosti potvrđuje valjanost, a dijelovi koji nisu hakovani ne ometaju pravilno funkcioniranje dijela koji nije hakiran, stoga namjerno ignorišemo ova posebna upozorenja.
Naši HTML dokumenti također imaju neka trivijalna i beznačajna upozorenja o validaciji HTML-a zbog toga što smo uključili zaobilazno rješenje za određenu Firefox grešku .
Iako službeno ne podržavamo dodatke ili dodatke trećih strana, nudimo neke korisne savjete kako bismo izbjegli potencijalne probleme u vašim projektima.
Neki softver trećih strana, uključujući Google Maps i Google Custom Search Engine, sukobljavaju se s Bootstrapom zbog * { box-sizing: border-box; }
, pravilo koje to čini da padding
ne utječe na konačnu izračunatu širinu elementa. Saznajte više o modelu kutije i veličini na CSS Tricks .
U zavisnosti od konteksta, možete nadjačati po potrebi (opcija 1) ili resetovati veličinu kutije za čitave regione (opcija 2).
Bootstrap prati uobičajene web standarde i – uz minimalan dodatni napor – može se koristiti za kreiranje web lokacija koje su dostupne onima koji koriste AT .
Ako vaša navigacija sadrži mnogo veza i dolazi ispred glavnog sadržaja u DOM-u, dodajte Skip to main content
vezu prije navigacije (za jednostavno objašnjenje pogledajte ovaj članak projekta A11Y o preskakanju navigacijskih veza ). Korišćenje .sr-only
klase će vizuelno sakriti vezu za preskakanje, a .sr-only-focusable
klasa će osigurati da veza postane vidljiva kada se fokusira (za videće korisnike tastature).
Zbog dugotrajnih nedostataka/bugova u Chromeu (pogledajte broj 262171 u Chromium alatu za praćenje grešaka ) i Internet Exploreru (pogledajte ovaj članak o vezama na stranici i redoslijedu fokusa ), morat ćete biti sigurni da je cilj vaše veze za preskakanje je barem programski fokusiran dodavanjem tabindex="-1"
.
Osim toga, možda ćete htjeti eksplicitno potisnuti vidljivu indikaciju fokusa na cilju (posebno jer Chrome trenutno također postavlja fokus na elemente sa tabindex="-1"
kada se kliknu mišem) pomoću #content:focus { outline: none; }
.
Imajte na umu da će ova greška također utjecati na sve druge linkove unutar stranice koje vaša stranica možda koristi, čineći ih beskorisnim za korisnike tipkovnice. Možete razmisliti o dodavanju slične ispravke zastoja svim drugim imenovanim sidrima / identifikatorima fragmenta koji djeluju kao ciljevi veze.
Prilikom ugniježđenja naslova ( <h1>
- <h6>
), vaše primarno zaglavlje dokumenta treba biti <h1>
. Naredni naslovi bi trebali logično koristiti <h2>
- <h6>
tako da čitači ekrana mogu sastaviti sadržaj za vaše stranice.
Saznajte više na HTML CodeSniffer i Penn State's AccessAbility .
Trenutno, neke od zadanih kombinacija boja koje su dostupne u Bootstrapu (kao što su različite stilizirane klase dugmadi, neke od boja za isticanje koda koje se koriste za osnovne blokove koda , .bg-primary
kontekstualna pomoćna klasa pozadine i zadana boja veze kada se koristi na bijeloj pozadini) imaju nizak omjer kontrasta (ispod preporučenog omjera od 4,5:1 ). Ovo može uzrokovati probleme korisnicima sa slabim vidom ili koji su slijepi za boje. Ove zadane boje će možda morati biti izmijenjene kako bi se povećao njihov kontrast i čitljivost.
Bootstrap je objavljen pod MIT licencom i zaštićen je autorskim pravom Twitter-a 2016. Svedeno na manje komade, može se opisati sledećim uslovima.
Puna Bootstrap licenca se nalazi u repozitoriju projekta za više informacija.
Članovi zajednice su preveli Bootstrapovu dokumentaciju na različite jezike. Nijedan nije zvanično podržan i možda nije uvijek ažuran.
Mi ne pomažemo u organizaciji ili hostingu prijevoda, mi samo povezujemo sa njima.
Završili ste novi ili bolji prijevod? Otvorite zahtjev za povlačenjem da ga dodate na našu listu.