U današnje vrijeme puno web dizajnera i programera govori i piše o Twitter Bootstrapu. Neki ga nazivaju pravim darom za programere s nula znanja o web dizajnu. Dok drugi to nazivaju blagoslovom za dizajnere. Bilo kako bilo, Twitter Bootstrap olakšava i ubrzava mnoge stvari.
U mnogim slučajevima web programeri imaju gotovu ideju, ali ne mogu započeti jer tehnički ne mogu izraditi projekt koji žele preuzeti. Moraju se obratiti web dizajnerima za implementaciju klijentske strane.
Taj se proces može prokleto dugo oduljiti i ozbiljno usporiti developera kojemu je jako bitno da se njegova ideja što prije realizira. U tim slučajevima u pomoć im priskače Twitter Bootstrap, poput superheroja iz stripa!
Twitter Bootstrap je CSS okvir koji pomaže u razvoju web aplikacija. To je jedan od najjednostavnijih CSS okvira koji su danas dostupni i masovno se koristi. Pretpostavlja se da možda nemate nikakvog znanja o web dizajnu i sve što trebate učiniti je samo napisati neke HTML kodove prema Bootstrap specifikacijama.
Ukratko, Twitter Bootstrap već ima gotove liste CSS stilovi, ugrađena JQuery podrška, a ima i nekoliko popularnih JavaScript alata.
Wow! Nije li super? Dobiješ cijelu hrpu korisne alate već spreman za upotrebu. Sve što trebate učiniti je jednostavno zalijepiti ispravan HTML kod na pravo mjesto.
U ovom ću članku objasniti kako možete početi koristiti Twitter Bootstrap. Da biste to učinili, pokazat ću vam izgled demo stranice. Također ću vam reći kako okvir možete prilagoditi svojim potrebama.
ZapočnimoNajprije ćete morati preuzeti datoteku bootstrap.zip s službena stranica Twitter Bootstrap na githubu. Sadrži skup datoteka s ekstenzijama css, js i img koje će nam trebati za početak izrade stranice na Twitter Bootstrapu. Mapa "css" sadrži tablice stilova (za responzivni i neresponzivni dizajn), kao i njihove pojednostavljene verzije.
Koristit ćete umanjene verzije za brzo stvaranje mjesto, kada je dizajn već završen i projekt spreman za pokretanje. Mapa "js" sadrži datoteku bootstrap.js i njezinu umanjenu verziju.
ove JavaScript datoteke sadrže različite JavaScript komponente koje ćemo koristiti u razvoju dizajna naše stranice. Posljednja mapa, "img" sadrži dva skupa ikona.
Oba skupa su gotovo identična, a slike u njima razlikuju se samo u boji. Ikone je osigurao glyphicons, koji ih je ljubazno donirao projektu Twitter Bootstrap.
Dakle, bacimo se na posao. Prije nego što počnemo, otvorite uređivač teksta i kreirajte prvu datoteku "index.html". Spremi u početna mapa vaš projekt.
Osnovni HTML predlošci za rad u BootstrapuKako biste aktivirali Bootstrap okvir, morate uključiti sve relevantne datoteke i izraditi HTML strukturu. Ali prvo ćemo stvoriti strukturu, a zatim vidjeti koje će nam datoteke trebati. Prvo što biste trebali napisati je, kako to zahtijeva HTML5, deklaracija tipa dokumenta na samom vrhu:
Postavili smo kodiranje na UTF-8 jer ćemo u našem projektu koristiti Posebni simboli, a preglednik nam treba da ih ispravno prepozna. Twitter Bootstrap također preporučuje korištenje UTF-8 za bolju kompatibilnost.
Nakon toga postavite uobičajene HTML oznake: , i . Ovo su osnovne HTML oznake. Vaša stranica index.html trebala bi izgledati kao na slici ispod.
Sada moramo uključiti potrebne stilove sadržane u datoteci bootstrap.css.
Kada su stilovi povezani, mi se povezujemo potrebne datoteke JavaScript. Prvo morate uključiti JQuery datoteku, za to predlažem da ih povežete s JQuery CDN-a kao što je prikazano u nastavku.
Zatim uključujemo Bootstrap.
Zbog performansi na vašoj web-stranici, sve te skripte trebale bi biti postavljene neposredno ispred završne oznake.
Sada su uključene sve potrebne datoteke. Možete početi stvarati različite komponente svoje web stranice. Vaša datoteka index.html trebala bi izgledati ovako.
Prvo, moramo shvatiti da se Twitter Bootstrap uvelike oslanja na 12 mreža. Kakve su ovo mreže?
Recimo da želite stvoriti dva jednaka odjeljka unutar tijela vaše stranice index.html. Svakom bloku ovih elemenata morate dodijeliti klasu "span6". To će značiti da Bootstrap mora stvoriti dva jednaka odjeljka, svaki sa šest mreža.
Nadam se da vam ovo daje neku ideju o tome kako radi Bootstrap. Ima skup unaprijed dodijeljenih klasa za svaki element. Ako je potrebno, svakom od njih morate dodijeliti odgovarajuće klase.
Kodiranje s BootstrapomPodijelimo demo stranicu na pet glavnih dijelova:
- Titula;
- Marketinško područje;
- Lijeva bočna traka;
- Područje sadržaja;
- Podrum.
Kako bismo omotali sav sadržaj našeg web-mjesta, stvorit ćemo klasu spremnika koja će biti u središtu zaslona i također okružena različite strane drugi blokovi.
U tu svrhu Bootstrap ima posebnu klasu koja se zove "kontejner". Koristit ćemo ga kao matičnu školjku. Dakle, prijeđimo na pisanje kodova:
Sada ćemo unutar DIV spremnika napisati naslov stranice. Za to koristimo oznaku naslova h1.
Bootstrap stranica
Provjerite svoju stranicu index.html u pregledniku da vidite jesu li elementi lijepo raspoređeni. Sada je vrijeme za rad na navigacijskoj traci. Twitter Bootstrap definira oznaku za navigacijsku traku na sljedeći način:
"navbar" mora biti klasa definirana u glavnoj navbar DIV. Trebali biste se pridržavati gornjeg označavanja navigacijskog izbornika kako biste odgovarali stilovima Twitter Bootstrapa.
Postavite ovaj kod malo ispod oznake h1. Provjerite jesu li svi elementi unutar naše nadređene klase omotača, tj. "container" Otvorite stranicu u pregledniku i provjerite je li navigacijski izbornik lijepo postavljen.
Očito je da želite da se vaš naslov razlikuje od standardnog. Na kraju ovog vodiča, pogledat ćemo kako dodati vlastite stilove postojećim Bootstrap stilovima i dodajte CSS za redizajn područja zaglavlja. Sada prijeđimo na stvaranje drugog dijela, koji smo nazvali "Marketinško područje".
Twitter Bootstrap ima prekrasnu unaprijed dodijeljenu klasu posebno za domenu marketinga. Zove se "heroj-jedinica". Kopirajte donji kod i zalijepite ga ispod bloka navigacijskog izbornika.
Marketinške stvari!
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
ZapočniteProvjerite svoju stranicu u pregledniku, trebala bi izgledati ovako:
Pa, nije li divno? Bez pisanja ijednog CSS-a, dobit ćete ovo: prekrasan blok područja marketinga. U redu, pogledajmo ovaj kod.
“hero-unit” ima CSS koji je namijenjen za h1 tag. Dakle, ono što napišete unutar h1 oznaka bit će ispisano podebljano i biti malo odvojen od ostalih elemenata bloka. Zatim preko taga trebamo kreirati odlomak u kojem će biti prikazana naša reklama ili opis našeg proizvoda.
A ovdje je zabavni dio: poveznice i gumbi. Možete pretvoriti bilo koju poveznicu u gumb dodavanjem klase "btn", a zatim prilagođavanjem njezine veličine dodavanjem još nekoliko dodatnih klasa, kao što je btn-large/btn-small/btn-mini.
Da biste promijenili boju gumba, dodajte klase btn-success (zeleno), btn-info (plavo), btn-warning (žuto) i btn-danger (crveno). Više informacija o gumbima i stiliziranju veza možete pronaći u odjeljku CSS Base. Ove se klase mogu primijeniti na elemente HTML gumba.
Nadam se da vam je priča do sada bila zanimljiva. Twitter Bootstrap je toliko jednostavan da čak ne morate ništa raditi unutar CSS listova stilova. Jednostavno koristite alate koje sustav nudi. To je ono što čini Bootstrap jednim od najmoćnijih CSS okvira.
Sada prijeđimo na sljedeće odjeljke: lijevu bočnu traku i odjeljak sadržaja. Vidjet ćete kako sam podijelio područje na dva nejednaka okomita dijela i kako možete napraviti još više tih segmenata. Kao što je ranije navedeno, Twitter Bootstrap je sustav s 12 mreža.
Ovo uvijek morate zapamtiti. To znači da možete stvoriti najviše 12 okomitih rešetki unutar bilo kojeg nadređenog elementa.
Trenutačno radimo unutar "spremnika" naše roditeljske klase omotača. Podijelit ćemo ga na dva nejednaka dijela pomoću 12 rešetki. Za lijevu bočnu traku koristit ćemo klasu "span4", a za dio sadržaja koji će se nalaziti desno koristit ćemo klasu "span8".
Imena klasa odražavaju suštinu: lijeva bočna traka zauzet će do četiri mreže, i Desna strana treba rasporediti na preostalih osam mreža.
Vaša bi stranica sada trebala izgledati ovako:
Trebao bi imati dva odvojena stupca, jedan do drugog. Sada je vrijedno razmisliti o stvaranju dodatnog bloka omotača koji sam dodao gore putem klase "row". Razlog je taj što su prema zadanim postavkama klase span* poravnate lijevo.
Kako bismo oba stupca pozicionirali ispod cjelokupnog sadržaja, dodali smo blok "redak". Djeluje kao obični separator
Zatim ispunite lijevu bočnu traku popisom navigacijskih stavki.
Navigacijski popis treba imati sljedeće oznake:
Uz klasu "nav", morate dodati klasu "nav-list" koja će ispisati stavke navigacijskog izbornika. Ako dodate klasu "nav-header" bilo kojem "li" elementu klase "nav", to će izgledati kao zaglavlje odjeljka veze. Idemo dalje, da vidimo kako naša stranica sada izgleda u pregledniku.
Prelazeći na područje sadržaja, jednostavno ćemo ga ispuniti korištenjem općih h3 oznaka i oznaka odlomaka. Ovdje nema potrebe instalirati dodatne razrede. Uostalom, želimo da se odlomci teksta prikazuju jedan ispod drugog. Ispod je kod koji sam stavio unutar "span8".
Kako smo počeli?
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Kako se plasiramo na tržište?Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Osvježite stranicu u pregledniku i trebala bi izgledati ovako:
Kao što vidite, već smo vrlo blizu krajnje točke. Sve što trebamo učiniti je popuniti podnožje stranice.
Za podnožje, ponovno ćemo podijeliti "red" na tri dijela. Kao što je prikazano u demo verziji. Ovaj put dijelimo područje na tri jednaka dijela, odnosno koristimo "span4".
Ovo će stvoriti još jedan blok "redak", odmah ispod "redka" koji smo ranije stvorili za bočnu traku i područje sadržaja.
Zapišite sebi sljedeći kod:
Upoznajte naše klijente
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Naši klijenti poznaju naše zaposlenikeDonec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Naši zaposlenici dolaze do nasDonec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Kontaktirajte nasDovoljno jednostavno! Crtu smo podijelili na tri jednaka dijela koristeći klasu "span4", a zatim ispunili svaki od segmenata pomoću h4 oznaka, oznaka odlomaka i poveznica koje izgledaju kao gumbi. Provjerite što imamo u vašem pregledniku.
Trebali biste imati male slike klijenata i zaposlenika unutar gumba. Koristite oznaku za dodavanje odgovarajućih klasa slika kao što su ikona-korisnik, ikona-zvijezda, ikona-staklo itd.
Da bi ikone bile bijele, koristite klasu icon-white s klasama icon-user i icon-star. Kompletan popis klasa ikona može se pronaći na Bootstrap dokumentacija, koji se nalazi ovdje.
Kako bismo malo odvojili podnožje stranice od područja sadržaja, dodat ćemo oznaku između blokova "redak". Nakon što smo dodali oznaku, da vidimo što smo dobili.
Sada smo potpuno stvorili jednostavan, ali prilično naočit odredišna stranica. A pritom smo koristili isključivo alate Twitter Bootstrap frameworka.
Dodavanje prilagođenih stilova u Twitter BootstrapAko imate neko znanje o CSS-u i želite promijeniti zadane Twitter Bootstrap stilove, onda je najbolje da napravite vlastiti list stilova, uvezete Bootstrap stilove i zatim ih prepišete u svoj vlastitu datoteku CSS. Provjerite je li veza na vaše stilove, a ne na Bootstrap CSS datoteke.
Ako su vam zadani Twitter Bootstrap stilovi dovoljni, onda očito nema potrebe za stvaranjem lista stilova. Ali budući da mnoga web-mjesta koriste isti okvir, ovi će stilovi postati uobičajeni i moći će se vidjeti na mnogim drugim web-mjestima napravljenim pomoću Bootstrapa. Stoga će biti bolje ako dodate svoje vlastite stilove na Twitter Bootstrap CSS.
@import url("bootstrap.min.css");
Još nekoliko važnih komponenti istaknutih stavki Twitter BootstrapaDa biste istaknuli neke fragmente u tijelu dugačkog dokumenta, možete im dodati klasu "lead". Time će fontovi tog određenog odlomka biti malo veći od onih u ostatku dokumenta.
Oznake odabiraTakođer možete koristiti osnovne HTML oznake za isticanje na svojoj stranici, kao što su i . Također možete koristiti oznake i .
Poravnanje tekstaPoravnanje teksta unutar bilo kojeg odlomka ili div bloka može se postaviti korištenjem klasa: “text-left”, “text-center” i “text-right”.
Boja tekstaMožete postaviti zadane boje za tekst odlomka koristeći različite klase isticanja boja, kao što su "muted" - siva, "text-warning" - crvena, "text-error" - kestenjasta, "text-info" - svijetloplava i "text- uspjeh” - zelena.
Stilovi stolovaTwitter Bootstrap također podržava raspored tablice prema zadanim postavkama. Za to se koristi sljedeći kod:
Slike možete dodavati pomoću obične oznake . Kako bi vaš dizajn izgledao zanimljivije, možete dodati klase "img-rounded" za slike sa zaobljenim kutovima, "img-circle" za slike koje se pomiču i "img-polaroid" za stvaranje sjene i obruba po obodu slike. .
Da biste dodali padajući izbornik na postojeću navigacijsku traku (kao što je prikazano na demo stranici), morate dodati sljedeće oznake unutar elementa "li".
Da biste stvorili padajući popis, morate omotati nadređeni element pomoću klase "padajući" i zatim upotrijebiti oznaku "a" da biste ga umetnuli. Zatim postavite stavku popisa u ovaj element.
Pokazao sam vam osnovne principe korištenja Twitter Bootstrapa i kako započeti sa sustavom. Sada kada znate kako radi, nadam se da će vam biti puno lakše raditi s opisom elemenata okvira iz izvorne dokumentacije.
Nakon što ga proučite, sigurno ćete pronaći mnoge nove primjene za sebe.
U sljedećem članku ispričat ću vam o izradi responzivnih web stranica pomoću Twitter Bootstrapa.
Prijevod članka “Twitter Bootstrap Tutorial – Handling Complex Designs” pripremio je prijateljski projektni tim.
Dobar loš
Prednost korištenja CSS okvira je u tome što dizajner izgleda ne mora razmišljati o mnogim nijansama izgleda koje su kreatori okvira već smislili za njega. Takve nijanse uključuju kompatibilnost s više preglednika, podršku za različite razlučivosti zaslona i još mnogo toga. Dizajner izgleda samo označava što, kako i kada prikazati, ostalo radi okvir sam. Ovaj pristup može uvelike ubrzati izgled web stranice. Prednosti Bootstrapa uključuju njegovu popularnost. To znači da će drugom dizajneru koda biti lakše održavati vaš kod.
Nedostatak korištenja okvira je taj što će stranica morati nositi dodatne stilove cijelog okvira, čak i ako koristi samo mali dio njih. Framework je izvrstan alat za izradu prototipova i kreiranje stranica kojima je dizajn sekundaran, kao što su administratorske stranice. Ako imate vrlo specifičan dizajn, postavljanje okvira može biti teže od korištenja izvornih alata. Međutim, i to je moguće.
O korištenju Bootstrapa Trenutno postoji nekoliko načina za rad sa Bootstrap stilovima bez korištenja LESS-a Za početnike, Bootstrap sam preporučuje sljedeći pristup: morate preuzeti kompilirani Bootstrap sa stranice i staviti ga u svoj projekt bez ikakvih promjena. Zatim trebate stvoriti vlastitu praznu CSS datoteku i uključiti je nakon bootstrap.css.
Nakon toga, da biste promijenili Bootstrap stilove, trebate ih promijeniti u styles.css nešto poput ovoga:
A ( boja: #beceda; )
Očigledni nedostatak ovaj pristup je da ćete morati ručno tražiti potrebne stilove koje želite prekinuti, a to neće uvijek biti trivijalno, jer Neke opcije Bootstrapa primjenjuju se na mnoge selektore u modificiranom obliku, kao što su formule. Alat za prilagodbu ovdje može biti od pomoći; pomoći će vam da pravilno kompilirate svoje promjene, ali samo jednom. Ako u budućnosti želite promijeniti neki parametar, morat ćete ponovno unijeti promijenjene vrijednosti za sva polja kako biste kompilirali svoje stilove.
postoji veliki broj načina za kompajliranje MANJE datoteka i Bootstrap to ostavlja na volju razvojnog programera. Sam Bootstrap koristi Grunt za kompilaciju, vi možda preferirate dodatak za JetBrains proizvode, a mi ćemo, budući da je članak namijenjen početnicima, gledati prema jednostavnijim rješenjima. Takva rješenja su WinLess za Windows, SimpLESS za Mac ili Koala za Linux. Svi ti programi rade približno istu stvar: primaju mapu s MANJE datoteka kao ulaz i slušaju promjene u njima. Čim napravite izmjene u bilo kojoj datoteci, ona se odmah kompajlira u navedeni CSS datoteka. Na ovaj način ne morate pokretati ručnu kompilaciju nakon svake promjene. Promijenite LESS datoteku, spremite je i odmah vidite promjene na stranici u već kompajliranom, komprimiranom obliku.
Stvaranje projekta Prvi korak je stvaranje jednostavne strukture datoteke za naš projekt.
Preliminarni pregled Nakon stvaranja strukture datoteke, otvorite psd datoteku u Photoshopu. Važno je pažljivo ispitati predložak i ocijeniti ga. Moramo razumjeti sljedeće stvari: - Kako će se slike rezati?
- Koje komponente će se koristiti?
- Koji će biti glavni stilovi?
- Kakav ćemo izgled stranice dobiti?
Spremite sliku karte:
Spremimo logotipe na sljedeći način:
Slike/logo.png
slike/footer-logo.png
Ponavljajuće pozadinske slike mora se izrezati na minimalni komad dovoljan za oblikovanje puna slika ponavljanje okomito i vodoravno.
/images/bg.png
/images/h1-bg.png
Praktično je spremiti ikone društvenih mreža iste veličine u jednu datoteku i koristiti ih kao spriteove za brže učitavanje. Više detalja o lijepljenju slika opisano je u prvom dijelu. Rezultat će biti dvije datoteke:
/images/social.png
/images/social-small.png
Ako pogledate naš predložak, vidjet ćete da će nam trebati sljedeće komponente:
Prije svega, morate dodati varijable koje nisu u postavkama Bootstrapa kako biste ih mogli koristiti u budućnosti. Za nas je ovo samo specifičan dizajn fonta.
@brand-font: "Oswald", bez serifa;
Ako želite koristiti predložak za ruske stranice, onda možete pokušati zamijeniti font Oswald najbližim Cuprumom, koji podržava ćirilicu.
Sada zamijenimo Bootstrap postavke našima:
Sada kada smo završili s varijablama, počnimo stilizirati naš dizajn u datoteci styles.less. Prvo povežimo sam Bootstrap i naše varijable:
@import "bootstrap/bootstrap.less"; @import "varijable.less";
Ne mogu se svi zadani stilovi Bootstrapa mijenjati pomoću varijabli, pa učinimo to ručno:
P (margina: 20px 0;) .form-control (box-shadow: ništa;) .btn (font-family: @brand-font;)
Ovdje smo uklonili sjenu s elemenata obrasca i odredili određeni font stranice za tekst u gumbima.
Zatim opisujemo pozadinu stranice i gornju traku:
Tijelo ( border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); )
Dalje u tekstu neće biti naznačeno u kojoj su datoteci zapisani stilovi. Samo zapamtite da sve varijable spremamo u datoteku variables.less, a CSS stilovi bit će pohranjeni u styles.less.
Bijeli kvadrat
Ovaj blok stvara strukturu HTML5 dokumenta. U naslovu navodimo naziv naše stranice – Whitesquare. Meta oznakom vidnog polja označavamo da je širina stranice Mobilni uredaji ax će biti jednaka širini zaslona, a početna skala bit će 100%. Zatim je uključena datoteka stilova. I za verzije Internet Explorer manje od devet, povezujemo skripte koje nam omogućuju ispravan prikaz našeg izgleda.
Dodajmo sljedeći kod u tijelo:
Ovdje nailazimo na prvu Bootstrap komponentu – stupce. Nadređeni element stupaca dobiva klasu "row", a klase stupaca počinju prefiksom "col-", zatim veličinom zaslona (xs, sm, md, lg) i završavaju relativnom širinom stupca. .
Stupcu se mogu dodijeliti istovremeno različite klase s vrijednostima za zaslone, na primjer class="col-xs-12 col-md-8". Ove klase jednostavno postavljaju širinu stupca kao postotak za određenu veličinu zaslona. Ako stupcu nije dodijeljena određena klasa zaslona, primijenit će se klasa za minimalni specifični zaslon, a ako nije navedena, tada se neće primijeniti širina i blok će zauzeti najveću moguću širinu.
Naše klase "col-md-7" i "col-md-17" pokazuju da su blokovi stupci širine 7 i 17 u odnosu na nadređeni spremnik. Prema zadanim postavkama, zbroj širina stupaca u Bootstrapu je 12, ali smo udvostručili taj broj kako bismo postigli potrebnu fleksibilnost.
Tijelo ( … .wrapper ( padding: 0 0 50px 0; ) header ( padding: 20px 0; ) )
Postavili smo ovu strukturu unutar tijela. Sintaksa LESS omogućuje ugniježđivanje pravila jedno u drugo, koja se zatim kompajliraju u sljedeće konstrukcije:
Body .wrapper (…) body header (…)
Ovaj pristup vam omogućuje da vidite HTML struktura unutar CSS-a i daje neku vrstu "opsega" pravilima.
Umetnite logotip u oznaku zaglavlja:
Nisu potrebni dodatni stilovi.
tražiKako bismo kreirali pretraživanje, trebat će nam sljedeće Bootstrap komponente: inline obrazac, grupirane kontrole i gumb.
U oznaci zaglavlja stvaramo inline obrazac, poravnat udesno. Polja takvog obrasca moraju imati klasu "kontrola obrasca" i oznaku.
Postavljamo komponentu "grupiranih kontrola" u obrazac. Grupiranje kontrola omogućuje vam uklanjanje razmaka između unosa teksta i gumba i, takoreći, njihovo spajanje u jedan element.
To je div s klasom i poljima “input-group”, a gumb takve komponente nalazi se u bloku s klasom “input-group-btn”.
Budući da ne moramo prikazati oznaku za polje za pretraživanje, sakrit ćemo je klasom "samo sr". Ovo je potrebno za namjenske čitače zaslona.
Klasa “btn-primary” je dodana gumbu, što znači da je ovo primarni gumb ovog obrasca.
…Traži KRENI
Ostalo nam je samo postaviti širinu obrasca za pretraživanje u stilovima.
Tijelo ( … .wrapper ( … zaglavlje ( … .form-search ( width: 200px; ) ) ) )
JelovnikZa prikaz izbornika uzmite komponentu "navigacijska ploča" i postavite u nju komponentu "navigacija", koja je popis s vezama. Za navigaciju je dodana klasa "navbar-nav" koja primjenjuje posebne stilove navigacije unutar navbara.
Kako bismo ovaj jelovnik doveli do našeg dizajna, postavimo sljedeće vrijednosti varijable:
/*visina navigacijske trake*/ @navbar-height: 37px; /*postavite više vodoravnih ispuna*/ @nav-link-padding: 10px 30px; /*pozadina za stavke izbornika*/ @navbar-default-bg: @panel-bg; /*boja teksta u stavkama izbornika*/ @navbar-default-link-color: #b2b2b2; /*i kada lebdite mišem - isto*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*pozadina aktivne stavke izbornika je naša specifična plava boja*/ @navbar-default-link-active-bg: @brand-primary; /*boja teksta aktivne stavke izbornika*/ @navbar-default-link-active-color: #fff;
Osim prilagodljivih parametara, opisat ćemo dodatne u stilovima - ovo je tekst velikim slovima i naš specifični font:
Tijelo ( … .wrapper ( … .navbar a (transformacija teksta: velika slova; font: 14px @brand-font; ) ) )
Naslov straniceNaslov stranice nalazi se u divu s klasom "heading".
O nama
I ima sljedeće stilove:
Body ( … .wrapper ( … .heading ( visina: 40px; pozadina: transparentni url(../images/h1-bg.png); margina: 30px 0; padding-left: 20px; h1 ( display: inline-block; boja: #7e7e7e; font: normal 40px/40px "Oswald", pozadina: url(../images/bg.png); padding: 0 10px )
Ovdje crtamo sivu traku kao pozadinu na divu i u nju umećemo h1 sa željenim fontom i pozadinom stranice kako bismo stvorili dojam prozirne pozadine za h1.
Prilikom izrade podizbornika nećemo koristiti komponentu "navigacija", jer nam stilski nije baš prikladna; komponenta "grupirani popis" je mnogo prikladnija za nas. Svaki element takve komponente ima klasu "list-group-item".
Podizbornik bi trebao biti smješten u bočnu oznaku. Popis poveznica stvaramo na isti način kao i glavni izbornik.
U postavkama komponente ukazujemo da bi svi grupirani popisi trebali biti prikazani s pozadinom i okvirom komponente "ploče":
@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
I primijenite sljedeće stilove na podizbornik:
Body ( … .wrapper ( … .submenu ( margin-bottom: 30px; li ( display: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding) : 10px; text-transform: velika slova; &.active (boja: @brand-primary; ) a (boja: @text-color; text-decoration: none; &:hover (color: @text-color; ) ) ) )
Prvo vraćamo standardne stilove na elemente popisa, jer ih je Bootstrap zamijenio svojima. Dodajte ispunu na dno. Podizbornici koriste tanje fontove i kvadratne oznake. A za poveznice postavljamo boje, velika slova i uklanjamo podcrtavanje. Znak & u kodu "&.active" bit će zamijenjen roditeljskim selektorom u vrijeme kompajliranja koristeći LESS sintaksu: ".submenu li.active".
Da bismo ga prikazali, koristit ćemo komponentu “panel”, odnosno njenu varijaciju “panel-primary” za bojanje naslova. Ova komponenta sadrži blok zaglavlja (zaglavlje ploče) i blok sadržaja ploče (tijelo ploče). Dodajemo klasu "img-responsive" na sliku karte, koja će omogućiti smanjivanje slike kada je širina zaslona mala.
… Naši uredi 
U Bootstrap varijablama već smo postavili boju za pozadinu panela (panel-bg), a sada ćemo naznačiti da će "primarni" panel imati sivi rub zadanog panela, umjesto zadanog plavog:
@primarni-border-ploče: @unutarnji-border-ploče;
Sada u stilovima web mjesta trebate promijeniti standardne postavke ploče, koje se ne mijenjaju kroz varijable:
Panel (box-shadow: ništa; .panel-heading (font: 14px @brand-font; text-transform: uppercase; padding: 10px; ) .panel-body (padding: 10px; ) )
Ovdje smo uklonili sjenu s ploča, dodali vlastite uvlake i postavili vlastiti font naslova.
Ovaj element stranice najsličniji je Jumbotron komponenti. Dodajmo ga u stupac sadržaja:
“Quisque in enim velit, at dignissim est.” nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”
John Doe, Lorem IpsumKoristeći varijable za jumbotron komponentu, postavit ćemo boju teksta na bijelu i označenu plavu pozadinu:
@jumbotron-bg: @brand-primarni; @jumbotron-boja: #fff;
Opišimo naše stilove:
Body ( … .wrapper ( … .jumbotron ( border-radius: 0; padding: 0; margin: 0; blockquote ( border-left: none; p ( font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0;) small (text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before (content: ""; ) ) )
U njima uklanjamo zaokruživanje kutova, ispunu komponenti i ukrase navodnika koje je Bootstrap postavio prema zadanim postavkama. Također ćemo dodati stilove za naše fontove.
Lorem ipsum dolor sit amet…
Donec vel nisl nibh…
Donec vel nisl nibh…
Sljedeći korak je dodavanje dvije slike koje se nalaze na kraju teksta sadržaja. To se radi pomoću dva stupca:
Klasa "thumbnail" pretvara slike u komponentu "thumbnail". On će umjesto nas obaviti sav posao oko stiliziranja slika. Jedina stvar koja nam preostaje je da postavimo boju ruba i ruba u varijablama za ovu komponentu:
@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;
Blokiraj "Naš tim"
Kada postavljamo ovaj blok, prvo dodajmo naslov:
Naš tim
sa stilom:
Tijelo ( … .wrapper ( … h2 ( pozadina: nema ponavljanja pomicanja 0 0 #29C5E6; boja: #fff; font: 300 30px @brand-font; padding: 0 10px; transformacija teksta: velika slova; ) ) )
Zatim ćemo dodati blok s klasom "tim", koji se sastoji od dva retka s karticama zaposlenika. Svaka kartica je stupac. Kartica ima širinu jednaku četiri stupca naše mreže. Sve kartice osim prve u retku imaju lijevu uvlaku, koju stvara klasa "col-md-offset-1". Sadržaj kartice sastoji se od slike i opisa (.caption)
John Doe 
Saundra Pittsley
vođa tima
…
Ericka Nobriga umjetnički direktor
Codyja Russellea viši dizajner korisničkog sučelja
…Nakon što izradimo oznake, dajmo ovim elementima sljedeće stilove:
Tijelo ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( white-space: nowrap; .thumbnail ( margin-bottom: 5px; )) .col-md-offset-1 ( margin- lijevo: 3,7%; ) .caption ( h3 ( font: 300 16px @brand-font; margin: 0; ) p ( font: 300 14px @brand-font; color: @brand-primary; margin: 0; ) ) ) )
Osim uvlaka i stilova fonta koji su ovdje postavljeni, promijenili smo klasu "col-md-offset-1". Morao je postaviti uvlaku na 3,7% jer... standardno uvlačenje bilo je preveliko.
Prvo, stvorimo spremnik podnožja s ovim blokovima:
I primijenite dizajn na njega:
Podnožje (pozadina: #7e7e7e; boja: #dbdbdb; veličina fonta: 11px; .container (visina: 110px; ispuna: 10px 0; ))
Oznaka podnožja definira sivo područje preko cijele širine zaslona, a spremnik unutar njega prikazuje središnje područje na većim zaslonima i određuje visinu i ispunu podnožja. Koristimo stupce za poravnavanje blokova unutar podnožja.
Twitter feed 23. listopada
U ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
Stilovi:
Body ( ... podnožje ( ... .container ( ... h3 ( border-bottom: 1px solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand) -font; margina: 0 0 10px; text-transform: uppercase; ) p ( margina: 5px 0; ) .twitter ( p (padding-right: 15px; ) time a (color: #b4aeae; text-decoration: underline; ) ) )
Za sve naslove podnožja postavljamo fontove i uvlake, a također stvaramo podcrtavanje kroz donji okvir. Za odlomke označite uvlaku. Za vezu koja prikazuje datum postavite boju i podcrtajte.
Sitemap Dom
Oko
Usluge
Partneri
podrška
Kontakt
Veze postavljamo na boju, font i razmak između njih.
Tijelo ( ... podnožje ( ... .kontejner ( ... a ( boja: #dbdbdb; ) . sitemap a ( prikaz: blok; veličina fonta: 12 px; margin-dno: 5 px; ) ) )
Društvene veze
Umetnemo skup veza u blok s klasom "društveno".
Društvene mreže
I stilizirajte ih:
Body ( … podnožje ( … .container ( … .social ( .social-icon ( width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin) -desno: 10px; .social-icon-small (width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0;) .twitter (pozadinska pozicija: 0 0; ) .facebook ( pozadinska pozicija: -30px 0; ) .google-plus ( pozadinska pozicija: -60px 0; ) .vimeo ( pozadinska pozicija: 0 0 ; ) .youtube (pozadina-položaj: -16px 0; ) .flickr (pozadina-pozicija: -32px 0; ) .instagram (pozadina-pozicija: -48px 0; ) .rss (pozadina-pozicija: -64px 0; ) ) ) ) )
Ovdje smo koristili tehniku spritea - kada se jedna slikovna datoteka koristi za različite slike. Sve veze su podijeljene na velike ikone (.social-icon) i male (.social-icon-small). Postavljamo te klase da se prikazuju kao umetnuti blok s fiksne veličine i ista pozadina. A onda sa koristeći CSS Premjestili smo ovu pozadinu tako da se odgovarajuća slika prikazuje na svakoj vezi.
![](/uploads/" alt=)
Copyright 2012 Whitesquare. Izrada pcklaba
Stilovi se rade slično prethodnim blokovima, s jedinom razlikom što je blok prikovan za desni rub i poravnanje unutar njega također je desno:
Tijelo ( … .footer ( … .container ( … .footer-logo ( float: desno; margin-top: 20px; font-size: 10px; text-align: right; a ( text-decoration: underline; ) ) ) ) )
Ovo dovršava izgled. Gotov projekt se može preuzeti
I sada većina dizajnera izgleda koristi Bootstrap mrežu, koliko sam ja shvatio, jer s njom možete značajno ubrzati proces prilagodbe i izgleda općenito.Općenito, da, moguće je. Kao da zarađujete za sebe dodatni problemi. Također se često koristi jer to drugačije ne mogu dobro izvesti bootstrap rešetka, ali "ovo" nije dopušteno. Sve je moguće, pitanje je broja izmjena koje će se tu morati napraviti. Remen ima skup dopuštenja, ako odgovaraju, onda je to moguće. Pitanje se odnosi na skaliranje elemenata, a ne mreže. Dakle, otvorite izgled, što prvo pogledate? Obično na ekranu telefona, čekajući odgovor dizajnera da izrazim sve što mislim o njemu. I u isto vrijeme razjasnite kako bi se "ovo", po njegovom mišljenju, trebalo nacrtati na razini preglednika... Kao što razumijete, recimo da je izgled širok 1920 piksela, s 12 stupaca, a ako elementu date širina “col-lg-*” koju zauzima u rasporedu, tada će element stati točno tamo gdje je potreban? U tu svrhu, izgled ima oznake, uklj. po stupcima, uklj. Možete ga primijeniti sami ako to stvarno želite. Pretragom “Photoshop grid 12 columns” ili nekim drugim sličnim možete pronaći puno zanimljivih stvari. Pogledajte rešetku i shvatite što će gdje stati. To je slučaj ako ga iznenada iz nekog razloga nema ili dodate neku vrstu pedding margina svakom elementu koji se ne uklapa točno + morate izračunati sve, pogledati uvlaku u izgledu, izračunati koliko u bootstrapu. uvuci, a zatim dodaj/ukloni. Raspored je ili nacrtan kako bi odgovarao remenu, ili je kupac spreman prihvatiti da će sve biti malo drugačije od rasporeda, ili se radi bez remena, jer „uklopi ga da pristaje. To je često teže nego uopće raditi bez toga, iz perspektive u kojoj ste to opisali, pokušavam shvatiti što radim krivo 333 puta koristiti okvir koji su stvorili ljudi za ljude i ubrzati proces izgleda, ali u stvarnosti se pokazalo da trošim 3 puta više vremena, neću vam dati nikakve savjete o tome. t znate što radite općenito da biste razumjeli što "općenito" može biti "pogrešno" s ovim. Možda postoje neki izvori koji jasno objašnjavaju takve zamorne i glupe pogreške? Ili možda objašnjavaju kako to učiniti ispravno, a kako ne? . I molim vas, nema potrebe da kažete "pročitajte dokumentaciju na stranici." Čini mi se da je prerano čitati dokumentaciju na stranici. Za početak bih savjetovao da pročitate nešto apstraktnije, ne znam ni što bi konkretno moglo biti... Možda biste trebali pogledati neke videe ala "kako zakovati web stranicu na remen u 15 minuta", ili nešto slično u tom duhu. Audio-vizualnu kompoziciju obično je lakše percipirati od teksta. 2 glasa
Dobro došli na stranice bloga start-luck. Sreća počinje ovdje. Ako pokušavate što lakše napraviti dobru, kompetentnu web stranicu, ali još ne razumijete u potpunosti programe, sve uvjete i kod, onda je ovaj članak za vas.
Adaptivni Bootstrap izgled - kako je sve to međusobno povezano? Zašto vam treba okvir, što je to, kako pomaže i olakšava li život doista? Također ću vam reći kako maksimalno koristiti program bez štete budućem projektu i gdje pronaći dobre lekcije. Pa, hoćemo li početi?
Malo o BootstrapuPretpostavljam da svi moji čitatelji ne razumiju dobro što je framework i da su ga već uspjeli sami preuzeti i shvatiti. Počet ću s informacijama posebno za njih. Nedavno sam pisao o prilagodljivom izgledu i nazvao Bootstrap programom. Učinio sam to da pojednostavim percepciju, iako okvir uopće nije takav.
Ovo je skup aplikacija, skripti ili dodataka, da tako kažemo, koji olakšavaju stvaranje posebnih obrazaca na stranici, vrtuljaka sa slikama, prikazivanje stranice na mobilnim uređajima ili ne, i tako dalje.
Kao što vjerojatno već znate, za svaku od ovih radnji programer mora osmisliti i napisati kod. Ako koristite Bootstrap, ne morate to učiniti. Jednostavno uzmete gotov predložak i mijenjate ga po želji. Kao rezultat toga, radno vrijeme se značajno smanjuje.
Osim ubrzanja, prioriteti ovog okvira su i smanjenje zahtjeva za webmastera. U idealnom slučaju, stranicu kreira osoba koja vrlo dobro poznaje JavaScript i može sve sama napisati. Ako radite s Bootstrapom, tada vaše znanje možda nije toliko duboko. Osnovna razina bit će sasvim dovoljno.
MogućnostiMožete vidjeti za što je Bootstrap 3 sposoban na web stranici s ruskom dokumentacijom u odjeljcima css, JavaScript i komponente. Nakon klika na željenu karticu, s desne strane se pojavljuje vrlo zgodan izbornik koji vam omogućuje da odete na željeno mjesto u dokumentu.
Konkretni primjeri ovdje pokazuju kako izgleda dio koda odgovoran za određenu akciju, kao i rezultat. Možete postaviti vidljivost sadržaja za bilo koji mobilni uređaj. Dopuštenja i druge postavke već su dovršene.
Sam tečaj Vježbajte od A do Ž"traje oko 17 sati. Za to vrijeme stječete važna teorijska znanja, a potom i vježbate kako pravilno koristiti određene elemente: koje elemente ukloniti iz koda, što je potrebno da stranica radi brže, što je to i još mnogo toga.
Pa, još jedan bonus tečaj, TOP 4 dodatka za Bootstrap koji će pomoći da framework radi učinkovitije.
Pa, čini se da je to sve. Pretplatite se na newsletter i saznajte više o jednostavnim rješenjima složenih problema i pravom pristupu u radu s ne baš pravim proizvodima.
