Preuzmite i instalirajte bootstrap potpisan. Korisnički interfejs zasnovan na Twitteru za početnike

Ljudi, mislim da je Bootstrap vrlo kul stvar. Zašto je tako, pokušat ću objasniti u ovom članku. Pa idemo.Odmah se izvinjavam što je skoro cijela prva polovina članka napisana bez slika, postoji samo teorija, objašnjenje kako grid radi. Ali ovo je veoma važno! Kome od vas treba, uzeće je u ruke, pročitati i, nadam se, razumeti. Druga polovina članka već se doživljava jednostavnijom, ima više primjera sa snimkama ekrana.

Bootstrap - šta je to?

Počnimo sa važnim pitanjem. Bootstrap je css i js framework, u stvari, skup datoteka sa već napisanim kodom. Cilj programera gotovo svakog okvira je pojednostaviti razvoj stranice za sebe i druge koji će imati pristup alatu. U slučaju Bootstrapa, potpuno je besplatan, tako da ga možete koristiti na bilo koji način, uređivati izvor i kako želite da prepravite okvir za sebe. Savršeno je.

Instaliranje Bootstrapa

Ako samo trebate povezati datoteke okvira sa html dokumentom (na primjer, za praksu), samo preuzmite framework sa službene stranice getbootstrap.com, kopirajte njegove datoteke u projekt i uključite one koje su vam potrebne. ja ću uraditi kratka recenzija ovi fajlovi:

  1. bootstrap.css i bootstrap.min.css su nekomprimirane i komprimirane verzije css koda okvira. Preporučuje se povezivanje na radni projekat komprimovani fajl, tako malo poboljšavate brzinu preuzimanja. Ali ako planirate da vidite kod u datoteci, uključite nekomprimovanu verziju.
  2. bootstrap.js i bootstrap.min.js - datoteka skripte
  3. folder fontovi i datoteke glifikona u njemu su font ikone Bootstrap. Sadrži oko 200 ikona. U većini slučajeva oni će vam biti dovoljni, ponekad trebate povezati druge. Kasnije ćemo razgovarati više o fontovima ikona.

Ovo je standardni set okvira. U stvari, možete ga lako prilagoditi i promijeniti za sebe. Na primjer, ne koristite skripte uopće ili povežite samo jednu mrežu. Uopšteno govoreći, takođe ćemo razgovarati o ovome.

Ruska dokumentacija Bootstrap

Idem na getbootstrap Verovatno ste primetili da je sve ovde na engleskom. Trebala bi nam i ruska pomoć oko okvira. Lako je pronaći. Da biste to učinili, idite s glavne stranice na odjeljak Počinjemo. Skrolujte do samog dna, bit će link do prijevoda. Potražite tamo ruski i kliknite na njega. To je to, sada ste na ruskoj verziji stranice. Istina, ovdje nije sve prevedeno, ali negdje oko 70-80% je tačno, tako da ćete sve razumjeti.

Bootstrap mreža

Sviđalo vam se to ili ne, glavni element Bootstrapa je responzivna mreža. Općenito, bez njega bi okvir izgubio gotovo svu svoju vrijednost, jer zahvaljujući mreži možete brzo kreirati prilagodljive predloške. U isto vrijeme, možda uopće niste upoznati s medijskim upitima, nisu vam potrebni, jer okvir preuzima implementaciju prilagodljivosti, samo trebate postaviti ispravne klase za blokove.

Šta su ovo časovi? Idemo na dokumentaciju, mnogo će nam pomoći. Idi na odjeljak CSS - Grid sistem. Opća pravila za rad sa mrežom su jednostavna, sada ću ih navesti.

Kako raditi sa mrežom?

Zamislite to kao html tabelu. Ako ste ikada pisali html kod za tabele, onda znate da je sav sadržaj smešten u oznaku tabele, jedan red je smešten u tr tag, a ćelije su već smeštene u njega - td.

Dakle, u mreži je sve isto. Klasa kontejnera služi kao generički kontejner za mrežu. Postoje 2 opcije za bootstrap mrežu - potpuno gumena i još uvijek ima konačnu maksimalnu širinu. Dakle, na pitanje zajednički blok klase kontejnera, stranica će imati maksimalnu širinu od 1170 piksela. Neće se dalje širiti. Naravno, sadržaj će biti centriran.

Ako postavite klasu kontejner-fluid, tada će mreža biti potpuno gumena, odnosno neće biti ograničenja veličine. Na primjer, ako osoba otvori web stranicu na monitoru širine 1920 piksela, vidjet će je u cijeloj širini.

U skladu s tim, prva stvar kada razvijate web stranicu, morate odlučiti koji će predložak biti - potpuno gumeni, ili njegova širina još uvijek treba biti ograničena.

Odlično, u blok kontejnera, trebali biste postaviti red mreže. U njega morate staviti sve blokove koji su na istoj liniji. Odnosno, ako uzmemo najtipičniji predložak: zaglavlje, tijelo, desna kolona i podnožje, onda postoje 3 kolone. Prvi će imati samo zaglavlje, drugi će imati sadržaj i bočnu traku, a posljednji će imati podnožje. Oznake za takvu stranicu bi bile otprilike ovako:

Kapa
Sadržaj... i bočna traka
Podnožje

Ali za sada, ovo je pogrešna oznaka, jer nedostaje...šta? Tako je, ćelije! U slučaju Bootstrapa, oni se takođe nazivaju kolonama. Bootstrap mreža se sastoji od 12 kolona. Može se ugraditi u bilo koji blok bilo koje širine, najmanje 1200 piksela, najmanje 100. Sve je to zato što širina kolona nije postavljena u pikselima, već u procentima.

Kako funkcioniše ovaj sistem sa 12 kolona?

Dakle, dolazimo do najvažnijeg pitanja vezanog za okvir. Vjerujte mi, ako ovo razumijete, sve ostalo su gluposti. Glavna stvar je razumjeti kako mreža funkcionira, a put do brzog prilagodljivog rasporeda bit će vam otvoren.

Da biste to učinili, skrolujte kroz dokumentaciju ispod, tamo ćete pronaći tabelu koja sadrži važna svojstva mreže.

Inače, same kolone su označene klasom col- u Bootstrapu, ali ovo je kompozitna klasa, tako da se samo col- nikada ne piše. Bootstrap ima 4 posebne klase koje su dizajnirane za kontrolu veličine blokova različitih širina, evo ih:

  1. ld - za velike ekrane, širine više od 1200 piksela (stoni računari);
  2. md - za srednje ekrane, širine od 992 do 1199 (računari, netbookovi);
  3. sm - za male ekrane, širine od 768 do 991 piksela (tableti);
  4. xs - izuzetno mali ekrani, širine manje od 768px.

Evo 4 klase, ali za kontrolu veličine elemenata koriste se brojevi od 1 do 12, jer, kao što se sjećate, u mreži ima tačno 12 stupaca.

Kapa
Sadržaj
Bočni stupac
Podnožje

Razumijevanje je prilično jednostavno. Prije svega, kreiramo zaglavlje, ono se uopće ne može postaviti u mrežu, jer će ionako (obično) zauzimati 100% širine. Ali svejedno ćemo ga staviti. Šta je ovo col-md-12 klasa? Kao što sam vam već rekao, niko ne piše samo col-, sa ovom klasom mi, u stvari, govorimo pretraživaču:
Ovo je ćelija | kolona
Na srednjim uređajima (klasa md), njegova širina treba biti 12 kolona od 12, odnosno 100% širine reda (reda).
Ali šta je sa širinom na drugim uređajima? Na velikim (lg) ekranima će također biti 100%, jer se vrijednosti za velike ekrane nasljeđuju, ali ne i za manje. Jednostavno je: ako ste napisali col-xs-4 , tada bi širina kolone bila 33% na svim uređajima, a ako col-lg-4 , onda samo na velikim. Evo jedne karakteristike, zapamtite je.

Pa, ako vrijednost širine nije sačuvana na manjim ekranima, šta se onda događa? Odbacuje se. Evo kako to ide:
col-sm-4 - na malim ekranima blok će zauzimati 33% širine, isto će biti i na md i lg ekranima, ali na xs, odnosno najmanjim, širina će biti resetirana na 100% . Dakle, zapamtite još jedno jednostavno pravilo: Ako ništa nije podešeno za manje ekrane, tada će blok biti prikazan na 100% širine na njima.

Sadržaj
Bočni stupac

U suštini, mi govorimo pretraživaču:
Neka blok sadržaja bude širok 8 od 12 kolona i ova situacija će biti na malim, srednjim i veliki ekrani(dovoljno je navesti za male ekrane, za velike ekrane, kao što se sećate, vrednost se nasleđuje). Ali na najmanjim ekranima, blok će biti zauzet 100%. Tako je, obično mobilnih uređaja Sajtovi idu tačno u 1 kolonu.
Neka bočna kolona bude jedna trećina širine reda na svim istim malim, srednjim i velikim ekranima.Pa, na najmanjem, kao što ste već shvatili, njegova širina je također resetirana na 100%. To je tako jednostavno.

Pa, nema se šta baviti podnožjem. pa, osnovni principi Analizirali smo rad mreže, ali tek treba da vidimo kako funkcioniše...

Bootstrap ugniježđena mreža

Činjenica je da smo sada predložak razbili samo na glavne blokove, ali oni mogu imati i podjelu na stupce unutra. Na primjer, sadržaj može prikazati proizvode u više kolona. Kako biti? Vrlo jednostavno - kreiramo potpuno istu mrežu unutra. Biće ugniježđen, ali također sadrži 12 stupaca. Ako sve ovo sumiramo, onda dolazimo do sljedećeg zaključka:
Unutar bilo kojeg bloka može postojati neograničen broj mreža. Na primjer, u bloku s proizvodima, mreži za odvajanje robe, u bloku sa samim proizvodom, možete kreirati drugu mrežu, na primjer, za razdvajanje cijena, informacija o dostupnosti i dodatnih informacija. informacije.

Sada ćemo pokušati napraviti još jednu mrežu unutar bloka sa sadržajem kako bismo poređali proizvode u 3 kolone. Dakle, uzimamo blok u kojem imamo sadržaj:

Sadržaj

I pišemo mu:

Katalog:

ime proizvoda

Opis proizvoda

Kao što vidite, kreirali smo novu mrežu unutar sadržaja - stavili smo red unutra i već će biti 3 bloka sa proizvodima u redu. Samo kopirajte blok col-sm-4 sa karticom proizvoda i zalijepite ga još 2 puta, izgledat će ovako (možete snimiti bilo koju sliku proizvoda, ja sam napravio odličnu):

Promašio sam još jednu važnu tačku, tako da se slike prilagođavaju blokovima u kojima se nalaze, svakoj od njih treba dati img-responsive klasu. Ja, ako i vi, kao i ja, mislite da je ovo nezgodno raditi, onda samo napišite u svom stilu.css ovako:

Img (maksimalna širina: 100%; visina: automatski; ekran: blok; )

To je to, sačuvajte ovaj kod i uključite svoju css datoteku u projekat. Sada će slike po defaultu odgovarati.

Pa, da li je ispalo sasvim glatko? Da, i bez bootstrapa, morali biste duže da patite. Jedina stvar je da kada kreirate mrežu unutar bilo kojeg bloka, više ne morate kreirati blok sa klasom kontejnera u njemu. Zašto ovo nije potrebno? Da, jer blok u kojem se kreira mreža služi kao kontejner.

Tako možete kreirati onoliko kolona koliko želite u bilo kojem bloku i napraviti predložak bilo koje složenosti. I sve je to mnogo brže nego bez Bootstrapa, jer morate pisati sav css od nule.

Responsive utilities

Ovo je još jedna sjajna karakteristika bootstrapa. Sastoji se od činjenice da možete sakriti ili učiniti vidljivim sve blokove željene širine. Na primjer, potpuno sakrijte bočnu traku na uskim ekranima, dodajte neke nove elemente na mobilnim uređajima, dodajte kolonu na široke ekrane itd.

Postoji mnogo opcija aplikacija, ali nisam vam rekao o najvažnijoj stvari, kako koristiti ove uslužne programe? Da biste to učinili, samo dodajte klase u željeni blok. Ako ga trebate sakriti, samo navedite sljedeću klasu:

Šta će klasa hidden-xs učiniti u ovom slučaju? To će sakriti podnožje na izuzetno malim uređajima. Na svim ostalim, blok će biti vidljiv.

Ako, naprotiv, trebate da ga prikazujete samo na najmanjim ekranima, trebate koristiti klasu visible-xs-block. U ovom slučaju, blok će biti skriven na svim ekranima osim na najužim. Dakle, klase adaptivnih uslužnih programa su napisane ovako:

  1. Riječ skrivena ili vidljiva, ovisno o tome šta vam je potrebno
  2. Skraćenica xs, sm, md ili lg koja određuje na kojim ekranima treba sakriti ili prikazati blok.
  3. Za vidljivo, također morate dodati jednu od tri vrijednosti: block - prikaz elementa kao bloka, inline-block - kao inline-block, inline - inline.

Pa, par primjera da bude jasno:

  1. hidden-xs hidden-lg - sakriti će element na najmanjim i najvećim ekranima. Kao što vidite, možete navesti više klasa odvojenih razmacima.
  2. visible-xs-inline visible-md-block — element se uopšte neće prikazivati ​​na malim i velikim ekranima. Na ekstra-malim to će biti mala slova, a na srednjem će biti blok.
  3. visible-lg-block - element će biti vidljiv samo na najvećim ekranima, na svim ostalim će biti skriven

Ovako sve funkcionira. Upravo ovako i ništa drugo. Nadam se da razumete. Hajde da to primenimo u praksi. Imamo testni šablon, iako vrlo primitivan.

zadatak: učinite da bočna traka nestane na malim ekranima, a još jedan proizvod na najmanjim ekranima. I tako da je na xs-uređajima roba već bila u 2 kolone, a ne u 3.

Pokušajte to učiniti sami uređujući samo html kod. Šta treba učiniti? Prvo, hajde da se pozabavimo kolonom, da bismo je sakrili na sm ekranima, samo treba da joj dodamo klasu hidden-sm.

Odlično, sada trebamo dodati klasu hidden-xs trećem proizvodu i ona će nestati na najmanjim ekranima. Pa, klase preostale dvije robe će biti sljedeće:

Odnosno, na srednjim uređajima blok će zauzeti 4 stupca od 12, što se može prevesti u 33,33% širine, a na ekstra malim uređajima - 50%. A budući da će jedan blok proizvoda nestati na ovoj širini, oba bloka proizvoda će uredno stati u 1 red, ovako:

Odlično! Razumijevajući ovo, već možete manipulirati blokovima na web stranici na bilo koji način. Pokušajte sami smisliti zadatke i implementirati ih.

Pomeri me potpuno

Zatim ću pokazati još 1 vrlo dobar trik - mogućnost pomicanja bloka udesno ili ulijevo. Recimo da nemamo 3 proizvoda u nizu, već 1. I to ne zauzima cijelu širinu. A vaš zadatak je da ga poravnate u sredini. Ovo je lako učiniti ako imate na umu da radite sa sistemom od 12 kolona.

Ostavimo jedan blok sa proizvodom:

Dovoljno je napraviti jednostavne proračune da biste shvatili koliko je potrebno pomjeriti blok da biste ga centrirali. Potrebno ga je pomjeriti 4 kolone ulijevo na srednjim i velikim ekranima i 3 kolone na malim. Ovako to izgleda:

Klasa col-md-offset-4 kaže: na srednjim i velikim ekranima, pomaknite okvir ulijevo za 33% širine roditeljskog kontejnera (1/3 padding lijevo, 1/3 širine okvira, ⅓ padding desno, centrirajte se).
Klasa col-xs-offset-6: Na izuzetno malim i malim ekranima, pomaknite lijevo za 25% (lijevo dopuna ¼, širina bloka ¼, desna dopuna ¼).

Nadam se da razumete suštinu, i ako je potrebno, primenite ove časove.

Bootstrap komponente i primjeri njihove upotrebe

Čestitam ti. Upravo smo prošli najviše važna tema, povezan sa okvirom. Važna je mreža i rad sa njom. Rad sa komponentama se već sastoji u tome da jednostavno odete u dokumentaciju, tamo kopirate kod željene komponente i, ako je potrebno, promijenite ga za sebe. Ali ipak ću dati dodatne primjere kako koristiti komponente.

Brzo pluta i otpušta

Klase povuci-levo i povuci-desno omogućavaju vam da brzo naterate bilo koji blok da pluta tako što ćete ga gurnuti levo ili desno. Ne zaboravite da otkažete omot. Za ovo možete koristiti klasu clearfix.

Bootstrap: Horizontalni responzivni (mobilni) meni

Sljedeće komponente ćemo dodati direktno u šablon, tako da ako želite raditi s kodom, a ne samo čitati, slijedite sve korake umjesto mene.

Zapravo, na Bootstrapu je vrlo lako napraviti ne samo adaptivni meni, već i takozvani mobilni, koji je na malim ekranima potpuno srušen i krije se pod jednim dugmetom. Ovaj pristup se može vidjeti kod mnogih adaptivne šablone i zapravo je vrlo lako implementirati. Primjer koda mobilnog menija je u dokumentaciji, uzeću ga odatle i malo ponoviti.

Dakle, prvo što ću učiniti je ukloniti blok zaglavlja, jer će naš meni, u stvari, biti zaglavlje u slučaju mog šablona. Kod menija se mora postaviti ispred cijelog sadržaja stranice, čak i prije bloka kontejnera. Zašto? Da, sada ćete sami vidjeti da je mreža već ugrađena u navigacijsku traku. Dakle, evo koda:

Činjenica da postoji mnogo koda, ne bojte se ovoga. Ovako stranica izgleda sada:

Ali ako vaš meni neće zauzeti cijelu širinu ekrana, ima smisla da ga centrirate. Da biste to učinili, trebali biste kreirati dodatni omotač za meni, koji bi trebao biti postavljen iza bloka s klasom kontejner-fluid. Ne zaboravite zatvoriti ovaj blok. Dao sam mu klasu navbar-wrap. Evo stilova za to:

Odnosno, možete jednostavno ograničiti širinu i centar. Ili u početku zamijenite posudu-tečnost sa kontejnerom.

Kao što vidite, dodali smo logo u meni, dvije jednostavne stavke, padajuću stavku i obrazac za pretragu. Odnosno, ima mnogo elemenata. Možete lako prilagoditi meni za sebe dodavanjem vlastitih klasa u njega. Ali za sada, moj cilj je samo da vam pokažem ovu komponentu.

Ovako će meni izgledati na uređajima sa širinom ekrana manjom od 768 piksela:

Kao što vidite, meni se srušio. Otvara se kada kliknete na dugme u gornjem desnom uglu. Na ekranu je ostao samo logo.

Padajući meni

Istovremeno, iz gornjeg primjera možete razumjeti kako se stavka padajućeg menija pravi u Bootstrapu, izvući ćemo ovaj kod za bliži pregled:

  • simulatori

    • Dakle, kontejner za padajuću stavku je obična stavka liste sa padajućom klasom. Unutar njega se nalazi glavni link, klikom na koji otvara padajući meni. Veoma je važno da joj pišete atribut podataka, koji vidite u kodu, ništa neće raditi bez njega. Također morate biti sigurni da je datoteka bootstrap.js uključena u web stranice.

    Raspon s caret klasom nije ništa drugo do strelica, zahvaljujući kojoj možete razumjeti da je stavka padajući, ali ispod samog izbornika se formira pomoću standardne liste s nabrajanjem. To je to, sve je prilično jednostavno, ovaj kod možete koristiti za implementaciju padajućih stavki.

    Dodavanje krušnih mrvica sa Bootstrap-om (Breadcrumbs)

    U mnogim trgovinama možete pronaći takozvani blok krušnih mrvica, koji sadrži puni put na trenutnu stranicu. Koristeći okvir, ovo je također lako učiniti, pogledajte kod:

    1. Dom
    2. Katalog
    3. Roba

    U stvari, dovoljno je naznačiti klasu breadcrumb na numerisanoj listi i u nju uneti uobičajene stavke liste. Usput, centrirat ću naslove drugog nivoa u šablonu (ovo treba biti napisano u css):

    H2 (poravnanje teksta: centar; )

    Ako želite da se promenite nekako izgled breadcrumbs, dovoljno je da se pozovete na css selector.breadcrumb . Na primjer, možete ukloniti boju pozadine na sljedeći način:

    Breadcrumb (pozadina: prozirna; )

    Ovako stranica izgleda sada:

    Bootstrap tabele

    Podrazumevano, tabela će se rastegnuti da popuni ceo prozor, pa je umotajte u okvir ograničene širine da biste ograničili veličinu. Podrazumevano, to izgleda strašno, ali ako dodate klasu tabele u tabelu, sve će biti mnogo lepše:

    Imajte na umu da u ovoj verziji ćelije imaju jasne granice samo na dnu, ako želite da granice budu na sve četiri strane, morate dodati još jednu klasu:

    U principu, to su sve mogućnosti tabela. Već sam napisao poseban članak o tome kako napraviti adaptivnu tablicu, tako da se neću ponavljati. Jedino što možete dodati i klase kao što su info, uspjeh, upozorenje i druge u redove i ćelije tabele kako biste ih obojili u željenu boju.

    Naravno, možete lako napisati svoje vlastite klase u style.css i koristiti ih.

    Ishod

    Nadam se da je članak bio koristan i da ste uspjeli razumjeti ono najvažnije. Možete postaviti bilo kakva pitanja koristeći komentare.

    Prednost korištenja CSS okvira je u tome što dizajner izgleda ne mora razmišljati o mnogim nijansama izgleda koje su kreatori okvira već osmislili umjesto njega. Takve nijanse uključuju kompatibilnost među pretraživačima, podršku za različite rezolucije ekrana i još mnogo toga. Dizajner izgleda samo ukazuje šta, kako i kada da prikaže, ostalo radi sam okvir. Ovaj pristup može uvelike ubrzati izgled stranice. Prednosti Bootstrapa uključuju njegovu popularnost. To znači da će drugom koderu biti lakše održavati vaš kod.

    Nedostatak korištenja okvira je činjenica da će stranica morati "nositi" cijeli dodatni stil okvira, čak i ako koristi samo mali dio njih. Okvir je odličan alat za izradu prototipova i kreiranje stranica za koje je dizajn sekundaran, kao što su administrativne stranice. Ako imate vrlo specifičan dizajn, onda njegovo postavljanje uz pomoć okvira može biti teže nego s izvornim alatima. Međutim, i to je moguće.

    O korištenju Bootstrapa

    Trenutno postoji nekoliko načina rada sa Bootstrap stilovima.
    Bez korištenja LESS
    Za početnike, sam Bootstrap preporučuje sljedeći pristup: potrebno je da preuzmete kompajlirani Bootstrap sa stranice i stavite ga u svoj projekat bez da ništa mijenjate. Zatim morate kreirati svoju praznu CSS datoteku i uključiti je nakon bootstrap.css.


    Nakon toga, da biste promijenili Bootstrap stilove, morate ih nadjačati u vašem styles.css na sljedeći način:

    A (boja: #beceda; )
    Očigledan nedostatak ovog pristupa je da morate ručno tražiti željeni stilovi, koje treba prekinuti i neće uvijek biti trivijalno, jer neke Bootstrap opcije se primenjuju na mnoge selektore u modifikovanom obliku, na primer kroz formule. Alat za prilagođavanje može malo pomoći ovdje, pomoći će vam da pravilno sastavite svoje promjene, ali samo jednom. Ako u budućnosti želite da promenite neki parametar, moraćete ponovo da unesete izmenjene vrednosti ​​​​za sva polja kako biste kompajlirali svoje stilove.

    Korištenje LESS
    Ova metoda pretpostavlja da su sve Bootstrap varijable pohranjene u .less datotekama. Programer radi sa ovim varijablama i, ako je potrebno, ručno ili automatski ih kompajlira u CSS datoteke, a sam HTML uključuje samo kompajlirane CSS datoteke. Upravo će se ova opcija u članku smatrati najfleksibilnijom.

    Postoji mnogo načina za kompajliranje MANJE datoteka i Bootstrap to prepušta programeru. Sam Bootstrap koristi Grunt za kompajliranje, možda ćete preferirati dodatak za JetBrains proizvode, a mi ćemo, budući da je članak namijenjen početnicima, gledati na više jednostavna rješenja. Takva rješenja su WinLess za Windows, SimpLESS za Mac ili Koala za Linux. Svi ovi programi rade otprilike istu stvar: primaju mapu sa MANJE datoteka kao ulaz i slušaju promjene u njima. Čim unesete izmjene u bilo koji fajl, on se odmah kompajlira u navedeni CSS fajl. Na ovaj način ne morate ručno pokretati kompilaciju nakon svake promjene. Promijenite datoteku LESS, spremite je i odmah vidite promjene na stranici u već kompajliranom, komprimiranom obliku.

    Kreirajte projekat

    Kao prvi korak, napravimo jednostavnu strukturu datoteke za naš projekat.

    Pregled

    Nakon kreiranja strukture datoteke, otvorite psd fajl u Photoshopu. Važno je pažljivo ispitati šablon i procijeniti 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?
    Tek nakon što mentalno odgovorite na ova pitanja za sebe, možete nastaviti sa rasporedom. Pogledajmo ova pitanja redom.

    Opšte slike

    On ovoj fazi potrebno je da izrežete i sačuvate samo opšte slike koje će biti na svim stranicama sajta i koje se ne odnose na sadržaj. U našem slučaju, ovo će biti svijetlo siva pozadina stranice, pozadina zaglavlja, slika karte, dva logotipa i dugmad. društvene mreže.

    Sačuvajte sliku karte:

    Sačuvajmo logotipe ovako:

    images/logo.png
    images/footer-logo.png

    Ponavljajuće pozadinske slike moraju biti izrezane na minimalan komad dovoljan da formira potpunu sliku ponavljanjem okomito i horizontalno.

    /images/bg.png
    /images/h1-bg.png

    Zgodno 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 dva fajla:

    /images/social.png
    /images/social-small.png

    Komponente

    Glavna razlika između izgleda sa Bootstrapom i izgleda sa izvornim alatima je u tome što Bootstrap uvodi koncept komponenti. Komponente su obično korišćeni gotovi HTML blokovi sa unapred definisanim stilovima. Ponekad komponente koriste JavaScript. Dizajner izgleda može koristiti i gotovu komponentu i definirati svoj izgled za nju. Da biste to učinili, često trebate samo promijeniti vrijednost varijabli u Bootstrapu. Ako su potrebne fleksibilnije promjene, dizajner izgleda uvijek može promijeniti HTML i CSS po svom nahođenju.

    Ako pogledate naš predložak, možete vidjeti da su nam potrebne sljedeće komponente:

    1. Za raspored u kolonama - mrežasti sistem (red, kolona)
    2. Za pretragu - inline obrazac (form-inline), grupisane kontrole (input-group), dugme (btn)
    3. Za navigaciju - navigacijska traka (navbar) i sama navigacija (nav)
    4. Za prikaz podmenija - grupisana lista (list-grupa)
    5. Za blok mape - vizuelni panel(panel)
    6. Za prikaz velike centralne jedinice - jumbotron
    7. Za prikaz okvira za fotografije - sličice (sličica)
    Detaljnije ćemo se zadržati na svakoj komponenti kada je upoznamo u izgledu.

    Osnovni stilovi

    U Bootstrapu, svi stilovi su već postavljeni prema zadanim postavkama, samo ih trebamo nadjačati ako se razlikuju od našeg dizajna. Uradimo to u datoteci src/less/variables.css.

    Prije svega, morate dodati varijable koje nisu u Bootstrap postavkama kako biste ih mogli koristiti u budućnosti. Kod nas je ovo samo font specifičnog dizajna.

    @brand-font: "Oswald", sans-serif;
    Ako želite koristiti predložak za ruske stranice, možete pokušati zamijeniti font Oswald najbližim Cuprumom koji podržava ćirilicu.

    Sada zamijenimo Bootstrap postavke našim vlastitim:

    Nakon što završimo s varijablama, počnimo sa stiliziranjem našeg dizajna u datoteci styles.less. Prvo, uključimo sam Bootstrap i naše varijable:

    @import "bootstrap/bootstrap.less"; @import "variables.less";
    Ne mogu se svi Bootstrap zadani stilovi promijeniti pomoću varijabli, uradimo to ručno:

    P ( margina: 20px 0; ) .form-control (box-shadow: none; ) .btn (font-family: @brand-font; )
    Ovdje smo uklonili sjenu sa elemenata obrasca, a tekstovi u dugmadima su specificirani određenim fontom stranice.

    Zatim opisujemo pozadinu stranice i gornju traku:

    Body (bord-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); )
    Dalje u tekstu neće biti naznačeno u kojoj su datoteci stilovi upisani. Samo zapamtite da sve varijable spremamo u datoteku varijabli.less, i CSS stilovi skladištićemo u stilovima.manje.

    HTML okvir

    Izgled sajta tradicionalno počinjemo sa HTML okvirom. Kod najjednostavnijeg šablona sa stranice Početak rada ubacujemo u datoteku index.html, nakon što uklonimo sve nepotrebno:

    Whitesquare


    Ovaj blok kreira HTML5 strukturu dokumenta. U naslovu navodimo naziv naše stranice - Whitesquare. Sa meta tagom viewport-a navodimo da će širina stranice na mobilnim uređajima biti jednaka širini ekrana i da će početna skala biti 100%. Zatim se uključuje stilski fajl. I za verzije Internet Explorer manje od devetog, povezujemo skripte koje nam omogućavaju da ispravno prikažemo naš izgled.

    Layout

    U ovom slučaju vidimo da se stranica sastoji od dva dijela: glavnog kontejnera sa sadržajem, koji je centriran na ekranu, i zadnjeg podnožja. Glavni kontejner se sastoji od dvije kolone: ​​glavnog sadržaja i bočne trake. Iznad njih je zaglavlje (header), navigacija (nav) i naslov stranice (.heading).

    Dodajmo sljedeći kod u tijelo:


    Ovdje se susrećemo s prvom komponentom Bootstrapa - stupcima. Roditeljskom elementu kolona je data klasa "red", a klase stupaca počinju prefiksom "col-" nakon čega slijedi veličina ekrana (xs, sm, md, lg) i završavaju se relativnom širinom kolone.

    Kolona se može dati različitim klasama u isto vrijeme sa vrijednostima za ekrane, na primjer class="col-xs-12 col-md-8". Ove klase jednostavno postavljaju širinu kolone kao procenat za datu veličinu ekrana. Ako koloni nije dodijeljena klasa određeni ekran, tada će se primijeniti klasa za minimalno definirani ekran, a ako nije specificirana, tada se neće primijeniti širina i blok će zauzeti maksimalnu moguću širinu.

    Naše klase "col-md-7" i "col-md-17" pokazuju da su blokovi kolone širine 7 i 17 u odnosu na roditeljski kontejner. Podrazumevano, zbir širina kolona u Bootstrapu je 12, ali smo udvostručili taj broj da bismo postigli fleksibilnost koja nam je potrebna.

    Tijelo ( … .wrapper (odmak: 0 0 50px 0; ) zaglavlje (odmak: 20px 0; ) )
    Smjestili smo ovu strukturu unutar tijela. LESS sintaksa vam omogućava da ugnijezdite pravila jedno u drugo, koja se zatim kompajliraju u takve konstrukcije:

    Body .wrapper(...) body header(...)
    Ovaj pristup vam omogućava da vidite strukturu HTML-a direktno unutar CSS-a i daje neku vrstu "opsega" pravilima.

    Logo

    Zalijepite logo u oznaku zaglavlja:

    Nije potreban dodatni stil.

    Traži

    Da bismo kreirali pretragu, potrebne su nam sledeće komponente Bootstrapa: inline obrazac, grupisane kontrole i dugme.
    U oznaci zaglavlja kreiramo inline obrazac, poravnat desno. Polja takvog obrasca moraju imati klasu "form-control" i oznaku.

    U formu postavljamo komponentu "grupisane kontrole". Kontrole grupisanja vam omogućavaju da uklonite uvlaku između unosa teksta i dugmeta i, takoreći, spojite ih u jedan element.
    To je div sa klasom "input-group" i poljima, a dugme takve komponente se nalazi u bloku sa klasom "input-group-btn".

    Pošto ne moramo da prikazujemo oznaku za okvir za pretragu, sakrićemo je klasom "samo za sr". Ovo je potrebno za posebne čitače ekrana.

    Klasa “btn-primary” je dodana dugmetu, što znači da je ovo primarno dugme ovog obrasca.

    …

    Sve što nam preostaje je da podesimo širinu obrasca za pretragu u stilovima.

    Tijelo ( … .wrapper ( … header ( … .form-search ( širina: 200px; ) ) ) )

    Meni

    Da bismo prikazali meni, uzmimo komponentu "navigaciona traka" i u nju postavimo komponentu "navigacija", koja je lista sa vezama. Za navigaciju je dodana klasa "navbar-nav", koja primjenjuje posebne stilove navigacije unutar navigacijske trake.


    Da bismo ovaj meni doveli u naš dizajn, postavili smo sljedeće vrijednosti za varijable:

    /*visina navigacijske trake*/ @navbar-height: 37px; /*postavi više horizontalnih paddinga*/ @nav-link-padding: 10px 30px; /*pozadina za stavke menija*/ @navbar-default-bg: @panel-bg; /*boja teksta u stavkama menija*/ @navbar-default-link-color: #b2b2b2; /*i pri lebdenju mišem - isto*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*pozadina aktivne stavke menija je naša specifična plava boja*/ @navbar-default-link-active-bg: @brand-primary; /*boja teksta aktivne stavke menija*/ @navbar-default-link-active-color: #fff;
    Pored prilagodljivih parametara, opisat ćemo i 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 stranice

    Naslov stranice se stavlja u div sa klasom "heading".

    O nama


    I ima sljedeće stilove:

    Telo ( … .wrapper ( … .heading (visina: 40px; pozadina: transparentni url(../images/h1-bg.png); margina: 30px 0; padding-left: 20px; h1 (prikaz: inline-block); boja: #7e7e7e; font: normalan 40px/40px "Oswald", sans-serif; pozadina: url(../images/bg.png); margina: 0; padding: 0 10px; transformacija teksta: velika slova; ) ) ) )
    Ovdje crtamo sivu traku kao pozadinu na div, i ubacujemo je u inline h1 sa željenim fontom i pozadinom u boji stranice kako bismo dali dojam transparentna pozadina za h1.

    Podmeni

    Prilikom kreiranja podmenija nećemo koristiti komponentu „navigacija“, jer nam stilski ne odgovara baš najbolje, komponenta „grupisana lista“ nam mnogo više odgovara. Svaki element takve komponente ima klasu "list-group-item".

    Podmeni se mora postaviti u oznaku sa strane. Kreiramo listu veza slično glavnom meniju.


    U postavkama komponente navedite da se sve grupisane liste prikazuju s pozadinom i okvirom komponente "panel":

    @list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
    I primijenite sljedeće stilove na podmeni:

    Tijelo ( … .wrapper ( … .submeni ( margin-bottom: 30px; li (prikaz: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding : 10px; transformacija teksta: velika slova; &.active ( boja: @brand-primary; ) a ( boja: @text-color; text-decoration: nema; &:hover ( boja: @text-color; ) ) ) ) ) )
    Prvo, vraćamo standardne stilove elementima liste, pošto ih je Bootstrap prekinuo svojim sopstvenim. Dodajte uvlačenje na dnu. Podmeniji koriste tanji font i kvadratne oznake. A za linkove postavljamo boje, velika slova i uklanjamo donju crtu. Ampersand u kodu "&.active" će biti zamijenjen sintaksom LESS u vrijeme kompajliranja s roditeljskim selektorom: ".podmeni li.active".

    Sadržaj bočne trake

    U sadržaju bočne trake, pored podmenija, nalazi se i slika sa lokacijom kancelarija.

    Za njegovo prikazivanje nam je prikladna komponenta “panel”, odnosno njena varijacija “glavni panel” (panel-primary) za bojenje naslova. Ova komponenta sadrži blok zaglavlja (zaglavlje ploče) i blok sadržaja ploče (telo ploče). Dodamo klasu “img-responsive” na sliku karte, što će omogućiti da se slika smanji na maloj širini ekrana.


    U Bootstrap varijablama smo već postavili boju pozadine panela (panel-bg), a sada ćemo navesti da će „primarni“ panel imati sivu zadanu ivicu panela, a ne zadanu plavu ivicu:

    @panel-primary-border: @panel-inner-border;
    Sada, u stilovima stranice, morate promijeniti zadane postavke panela koje se ne mijenjaju kroz varijable:

    Panel (box-shadow: none; .panel-heading (font: 14px @brand-font; text-transform: uppercase; padding: 10px; ) .panel-body (padding: 10px; ) )
    Ovdje smo uklonili sjenu sa panela, postavili vlastite padding i postavili naš font naslova.

    Citat

    Započnimo raspored sadržaja dodavanjem citata.

    Ovaj element stranice je najsličniji Jumbotron komponenti. Dodajmo ga u kolonu 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 Ipsum

    Kroz varijable za jumbotron komponentu postavljamo Bijela boja tekst i markirana plava pozadina:

    @jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
    I hajde da opišemo naše stilove:

    Tijelo ( … .wrapper ( … .jumbotron ( radijus granica: 0; padding: 0; margina: 0; blok citat ( granica lijevo: nema; p ( font: 300 kurziv 33px @brand-font; transformacija teksta: velika slova;); margin-bottom: 0; ) mala (poravnanje teksta: desno; boja: #1D8EA6; font: 300 20px @brand-font; &:before (sadržaj: ""; ) ) ) ) ) )
    U njima uklanjamo zaokruživanje uglova, dopunu komponenti i ukrase navoda koje Bootstrap podrazumevano koristi. Dodajmo i naše stilove fonta.

    Sadržaj


    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 dvije kolone:


    Klasa "sličica" pretvara slike u komponentu "sličica". On će umjesto nas obaviti sav posao oblikovanja slika. Jedino što nam preostaje je da podesimo naš padding i boju granice u varijablama za ovu komponentu:

    @thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

    Blok «Naš tim»


    Kada postavljate ovaj blok, prvo dodajte 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 dodajte blok sa klasom "tim", koji se sastoji od dva reda koji sadrže kartice zaposlenih. Svaka kartica je kolona. Kartica ima širinu jednaku četiri kolone naše mreže. Sve kartice osim prve u redu imaju uvlačenje na lijevoj strani, koje kreira klasa "col-md-offset-1". Sadržaj kartice sastoji se od slike i opisa (.caption)

    John Doe

    Saundra Pittsley

    vođa tima

    …

    Erica Nobriga

    umjetnički direktor

    Cody Rousselle

    viši dizajner korisničkog interfejsa

    …

    Nakon kreiranja markupa, za ove elemente ćemo postaviti 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; boja: @brand-primary; margin: 0; ) )) ) ) )
    Pored uvlaka i stilova fonta koji su ovdje postavljeni, promijenili smo klasu "col-md-offset-1". Morao je podesiti uvlačenje na 3,7%. standardno udubljenje je bilo preveliko.

    Podnožje

    Podnožje se sastoji od četiri velika bloka: Twitter feed-a, mape sajta, društvenih veza i logotipa autorskih prava.

    Prvo, napravimo kontejner podnožja sa ovim blokovima:


    I primijenite dizajn na njega:

    Podnožje (pozadina: #7e7e7e; boja: #dbdbdb; veličina fonta: 11px; .kontejner (visina: 110px; padding: 10px 0; ) )
    Oznaka podnožja definira sivu oblast po širini ekrana, a kontejner unutar nje prikazuje područje u središtu na velikim ekranima i postavlja visinu i dopunu podnožja. Koristimo stupce da poravnamo blokove unutar podnožja.

    Twitter feed

    Postavljanje sadržaja Twitter feeda:


    Stilovi:

    Tijelo ( … podnožje ( … .kontejner ( … h3 ( granica-dno: 1px čvrsta #919191; boja: #ffffff; veličina fonta: 14px; visina linije: 21px; porodica fontova: @brand-font; margina: 0 0 10px; transformacija teksta: velika slova; ) p ( margina: 5px 0; ) .twitter ( p ( padding-desno: 15px; ) vrijeme a ( boja: #b4aeae; dekoracija teksta: podcrtavanje; ) ) ) ) )
    Za sva zaglavlja podnožja, postavite fontove i uvlake, a također napravite podvlačenje kroz donji okvir. Uvlaka za paragrafe. Za vezu koja prikazuje datum, postavite boju i podcrtajte.

    Mapa sajta

    Mapa sajta se sastoji od dve jednake kolone sa linkovima:

    Sitemap

    Dom O Usluge
    Partneri Podrška kontakt

    Veze postavljaju boju, font i uvlačenje između njih.

    Tijelo ( … podnožje ( … .kontejner ( … a ( boja: #dbdbdb; ) .sitemap a ( prikaz: blok; veličina fonta: 12px; margin-dno: 5px; ) ) ) )

    Social Links

    Ubacujemo skup linkova u blok sa klasom "social".


    I stilizirajte ih:

    Telo ( … podnožje ( … .social ( .social-icon ( širina: 30px; visina: 30px; pozadina: url(../images/social.png) bez ponavljanja); prikaz: inline-block; margina: margina) -desno: 10px; ) .social-icon-small (širina: 16px; visina: 16px; pozadina: url(../images/social-small.png) bez ponavljanja; prikaz: inline-block; margina: 5px 6px 0 0; ) .twitter ( background-position: 0 0; ) .facebook ( background-position: -30px 0; ) .google-plus ( background-position: -60px 0; ) .vimeo ( background-position: 0 0 ; ) .youtube ( background-position: -16px 0; ) .flickr ( background-position: -32px 0; ) .instagram ( background-position: -48px 0; ) .rss ( background-position: -64px 0; ) ) ) ) )
    Ovdje smo koristili tehniku ​​sprite-a - kada se jedna slikovna datoteka koristi za različite slike. Sve veze su podijeljene na velike ikone (.social-icon) i male (.social-icon-small). Postavili smo ove klase da se prikazuju kao inline blok sa fiksnim veličinama i istom pozadinom. A onda smo uz pomoć CSS-a pomaknuli ovu pozadinu tako da se na svakom linku prikazuje odgovarajuća slika.

    Copyright

    Blok sa autorskim pravom i logom je slika sa vezom i pasus sa tekstom ispod.


    Stilovi se rade slično prethodnim blokovima, sa jedinom razlikom što je blok prikovan za desnu ivicu i poravnanje unutar njega je takođe na desnoj ivici:

    Tijelo ( … .footer ( … .container ( … .footer-logo ( float: desno; margin-top: 20px; veličina fonta: 10px; text-align: desno; a (dekoracija teksta: podcrta; ) )) ) )

    Ovim je kompletan izgled. Gotov projekat se može preuzeti

    24. februar 2012. u 21:25

    Korisnički interfejs zasnovan na Twitteru za početnike

    • Web dizajn

    anotacija

    U ovom članku pokušaću da pričam o tome kako, na osnovu Twitter Bootstrapa, možete vrlo lako implementirati lepo korisničko sučelje za malu (jednostraničnu) web aplikaciju, imajući samo osnovno znanje html-a. Odmah vas upozoravam da stručnjaci neće biti zainteresirani, razgovarat ćemo o osnovnoj standardnoj funkcionalnosti.

    uvodni

    U slobodno vrijeme, kao hobi, razvijam agregator zanimljivih naslova vijesti na jednoj stranici. U nekom trenutku se ispostavilo da je osnovna funkcionalnost prototipa spremna, jedino što je nedostajalo je oznaka nasuprot zadatku "Dizajn".

    Formulacija problema

    Dobijte prelijepo korisničko sučelje bez da morate savladati magiju dizajnera (postoji samo osnovno znanje boje) i programera (postoji samo osnovno znanje html-a i css-a).
    Stranica se sastoji od sljedećih elemenata
    • Ime
    • Newsletter link forma
    • Obrazac za slanje jedinstvenog koda čitača putem e-maila
    • Obrazac za unos jedinstvenog koda čitača
    • Lista vijesti grupiranih po datumu (datum, vrijeme, naslov-link, broj klikova, vijesti koje se mogu čitati ili nove)
    • Link na rss
    • Link do chrome ekstenzije
    • ID izdanja
    • email povratne informacije

    Proces

    Nakon nekoliko dana opuštene potrage za gotovim šablonom (css šablonom), došao sam do zaključka da to nije put pravog Jedaja, jer. sve što je prošlo estetski filter zaglavilo se u tehničkom filteru (vidi opis problema, jednostavno nisam mogao prilagoditi složeni kod svojim potrebama). I tako sam, gotovo slučajno, završio u raju. Neću detaljno opisivati ​​Bootstrap, detalje možete vidjeti klikom na link, navest ću glavne elemente za koje postoje gotovi stilovi (ponekad i nekoliko):
    1. Standardni elementi html formatiranja
    2. Liste
    3. Isječci koda
    4. stolovi
    5. Forms
    6. Dugmad
    7. Navigacijski elementi
    8. Paginacija
    9. Minijature
    10. Informativne poruke
    11. Trake napretka
    Po mom mišljenju, ovo je jako cool. Sve što vam je potrebno za dizajn prototipa. Zatim ću vam reći kako sam koristio elemente 1,4,5 i 7 sa liste.

    Dakle, korak 1. Povežite Bootstrap

    Preuzmite i raspakirajte arhivu sa Bootstrapom u korijenski folder naše stranice, uključite css:
    ... ...
    Drugi red je potreban za automatsko prilagođavanje interfejsa uređajima koji podržavaju Bootstrap

    Korak 2. Izrađujemo "meso".

    Pod "mesom" mislim na listu vesti. po najviše na jednostavan način ovo se može uraditi sa tabelom sa onemogućenim granicama. Prva kolona je datum (samo jednom po grupi), druga kolona je vrijeme, treća je naslov i broj pogodaka. Sve ovo, prema pravilima Bootstrapa, mora biti upakovano u kontejner:
    (Datum) (vrijeme) (Naslov) ((Broj pogodaka))



    Za čitanje vijesti navedite posebnu klasu:
    (naslov)

    Korak 3. Obrazac za slanje linka na vijesti.

    I ovdje je sve jednostavno, Bootstrap nudi nekoliko unapred napravljeni stilovi obrasci: običan formular, formular u jednom redu, formular za pretragu... Treba nam drugi, završavamo ga u našem kontejneru ispred tabele:
    ...

    class="span10"- Bootstrap uključuje izgradnju interfejsa zasnovanog na mreži od 12 kolona, ​​naši elementi se mogu poravnati sa njim. Naučnim pokušajima i greškama došao sam do širine polja za unos od 10.

    Korak 4,5,6. Kapa.

    Moja ideja o tome kako bi stranica trebala izgledati user-friendly je minimalistička: sve što nije potrebno je skriveno, sve što se nije moglo sakriti je blijedo. Sakrivamo obrasce u padajućem meniju, činimo linkove na rss i chrome ekstenziju blijedim. Sve ovo spakujemo u zaglavlje koje zalijepimo na vrh stranice (class = "navbar navbar-fixed-top»):
    ***
    • rss
    • hromirani nastavak
    • Vaš jedinstveni kod čitača (šifra)
      • Pošaljite e-mailom
      • Unesite drugi kod
    ...


    Sami obrasci:
    ...

    Važna tačka. Da bi to funkcioniralo, potrebno je povezati nekoliko skripti:
    ...

    Korak 7. Podnožje.

    Dodavanje glavnog kontejnera:
    ...

    izdanje 2012/02/19 23:49 *****

    Rezultat

    Epilog

    Twitter Bootstrap je omogućio da se, bez mnogo truda i znanja, bez pisanja ijednog reda css-a i bez mnogo razbijanja html koda, dobije veoma lep prototip interfejsa koji se ljudi ne stide da pokažu. Ako ste zainteresovani, u sledećem članku ću vam reći kako, bez dubokog poznavanja PHP + MySQL (imajući samo osnovne veštine programiranja), da implementirate funkcionalnost koja vam omogućava da svoju ideju od milion dolara pokažete ne samo na papiru, već iu oblik radnog prototipa.
    Hvala vam na pažnji!
    UPD: Ne želim maknuti temu u "Ja sam PR", uklonjeni svi nepotrebni linkovi

    Zdravo! U ovom članku ću vam reći kako instalirati i povezati Bootstrap framework. Možete pročitati šta je Bootstrap.

    Standardna instalacija okvira

    Već sam mnogo rekao o standardnoj instalaciji u prošlim člancima. Ovdje je sve jednostavno. Idemo na službenu web stranicu getbootstrap.com, kliknite na stavku Početak rada i odaberite prvu opciju. Stoga preuzimamo punu verziju bootstrapa sa svim js i css komponentama.

    Bootstrap CDN- ovo je mogućnost povezivanja okvira iz CDN skladišta bez preuzimanja njegovih datoteka na vaš računar. Naravno, u ovom slučaju ne može biti govora o bilo kakvom prilagođavanju.

    Prilagodba okvira

    Ali činjenica je da zadani bootstrap sadrži mnogo komponenti, a neke od njih jednostavno vam možda neće biti korisne prilikom razvoja određene stranice. Na primjer, gradite online prodavnicu. Možda vam nisu potrebni modali i opisi alata, a ne trebaju vam ni mnoge css komponente. U ovom slučaju, bilo bi mudro ne uključiti ove komponente u okvir.

    Ili kreirate jednostavan blog. Recimo da vam zapravo ništa ne treba, tako da možete ostaviti samo mrežicu i nekoliko najvažnijih komponenti.

    Odabir samo onoga što vam je potrebno je profesionalni pristup izradi web stranica i korištenju Bootstrapa. Podrazumevano, nekomprimovana verzija css stilova okvira u najnoviju verziju težak je 143 kilobajta. A skripte su veće od 60 kilobajta. Da, ako komprimirate kod, možete postići smanjenje težine od 20-40%, ali i dalje datoteke neće biti najlakše.

    Ako, na primjer, onemogućite sve komponente i ostavite samo grid (to se vrlo često radi), onda će težina css-a biti samo 15-20 kilobajta, a u komprimiranom obliku bit će par kilobajta manje. Tako ćete postići najveća brzina i optimizacija vašeg projekta.

    Ok, to je bila samo teorija. Da biste prilagodili okvir, posjetite istu službenu web stranicu i idite na Prilagodi.

    Odabir potrebnih komponenti

    Prije svega, ovdje možete konfigurirati koje komponente želite uključiti u svoju verziju. Bootstrap. Počnimo sa CSS-om:

    Stilovi medija za štampanje– medijski upiti za štampu. Ako ne planirate da štampate stranice sajta, možete ga isključiti.

    Tipografija, kod, tabele, obrasci i dugmad su sve što možete sami da stilizujete u css-u ako to zaista želite. Naravno, ovo će potrajati, ali ako se dizajn vaših elemenata jako razlikuje od onoga što okvir nudi po defaultu, možete isključiti sve ove css stilove i sami ih napisati.

    Mrežni sistem U stvari, to je mreža. Ne vidim razloga da ga ikada onemogućim, jer je to glavna moć okvira. Zahvaljujući mreži možete lako prilagoditi šablone bilo kojem uređaju, a danas, u doba mobilnog prometa, to je izuzetno važno. Ni pod kojim okolnostima ga nećemo isključiti.

    Responsive utilities- adaptivne uslužne programe, također preporučujem da ih nikada ne isključujete. Govorit ćemo o adaptivnim uslužnim programima u sljedećem članku, gdje ćemo samo pobliže pogledati mrežni sistem. Ovo su klase koje vam omogućavaju da sakrijete element ili ga učinite vidljivim na određenoj širini ekrana. Vrlo zgodno i korisno.

    To su, na primjer, stvari kao što su grupe lista, trake dugmadi, ikone, paneli, upozorenja, paginacija, mrvice hljeba itd. Takođe možete onemogućiti font ikone. To bi trebalo učiniti u slučaju kada vam uopće nisu potrebne ikone na web mjestu ili povežete drugi set. Zapravo, trebali biste sjediti i razmišljati o tome šta vam treba od svih predstavljenih komponenti, a šta ne. Svaki pojedinačni sajt će imati svoj set, jer svuda postoji drugačiji dizajn i funkcionalnost.

    Javascript komponente

    To su padajući meniji, opisi alata, modali, klizači. Ako vam ništa od ovoga ne treba, isključite ga. U nekim slučajevima, sve komponente mogu zaista biti od koristi kada imate padajući meni na vašoj web lokaciji i klizač na početna stranica, i modalni prozori. U nekim slučajevima mogu biti korisne samo 1-2 komponente, tada nema potrebe za produžavanjem koda, onemogućavanjem nepotrebnih komponenti.

    jquery dodaci

    Ovdje možete onemogućiti dodatke jquery biblioteke koji pomažu javascript komponentama da rade ispravno. Shodno tome, ako ne koristite klizač na svojoj web stranici, onda vam ne treba dodatak za kreiranje vrtuljki, ako vam ne trebaju tooltips, onda onemogućite tooltips.js itd.

    Scrollspy dodatak prati poziciju teksta i, u zavisnosti od toga, ističe jednu ili drugu stavku menija. Obično je takva funkcija potrebna na odredišnim stranicama, praktički je nisam vidio na redovnim stranicama. Pa, i tako dalje. Dobro razmislite šta vam treba, a šta ne.

    Manje varijabli

    Zatim će se ispred vas otvoriti ogromna stavka u kojoj će biti puno podstavki s postavkama za Manje varijabli. Ovdje možete promijeniti gotovo sve: boje, veličine fonta, tačke prekida, broj kolona u mreži, padding, itd.

    Naravno, da biste to učinili, morate znati barem osnove Less-a ili barem intuitivno navigirati ovim oblicima.

    Na primjer, ako vidite varijablu @font-family-base, onda morate barem intuitivno shvatiti da je ona odgovorna za naziv fonta koji je osnovni font na web lokaciji. Pa, varijabla @font-size-base postavlja osnovnu veličinu fonta. Podrazumevano u bootstrapu je 14 piksela.

    Sva ova polja možete uređivati. Samo promijenite 14 u 20 i sada možete preuzeti okvir koji ima zadanu veličinu fonta od 20 piksela. U skladu s tim, možete odmah prilagoditi veličinu zaglavlja itd.

    Postavljanje mreže

    Postavke grid sistema su nam takođe veoma zanimljive, evo ih:

    Kao što vidite, možete promijeniti broj kolona i širinu uvlačenja između njih za nekoliko sekundi. Varijabilna grid-float-breakpoint postavlja tačku u kojoj se mobilni meni sažima u ikonu.

    Ako promijenite vrijednost, na primjer, u @screen-md-min, tada će na širini od 991 piksela ili manje doći do presavijanja. Također možete ukloniti ovu varijablu i napisati vrijednost u pikselima. Na primjer, 520 piksela. Tada će se preklapanje menija dogoditi samo na pametnim telefonima i mobilnim telefonima.

    Zapravo, stranica za prilagodbu Bootstrapa ima puno postavki, ali općenito, ovaj način prilagođavanja (pomoću stranice Customize na službenoj web stranici) nije najbrži i najpovoljniji. Zatim ću vam pokazati najbrži način.

    Koristite stranicu Prilagodi kada trebate napraviti 2-10 izmjena okvira ili jednostavno onemogućiti potrebne komponente. Ako ćete mijenjati mnogo više vrijednosti, morat ćete koristiti drugu metodu.

    Zapravo, kada postavite svoju verziju okvira, kliknite na veliko dugme na samom dnu stranice. On će sastaviti Bootstrap verziju za vas i preuzeti je na vaš računar. Tada se samo trebate povezati i koristiti. Već sam govorio o povezivanju u prethodnim člancima (uključujući kako to učiniti na WordPress-u).

    Preuzimanje manje izvora i njihovo uređivanje

    Kao što sam rekao, ako treba da izvršite mnogo izmena u izvornom kodu okvira i želite da vidite promene odmah, onda će vam trebati manje izvora. Možete ih preuzeti na istom mjestu kao i punu verziju okvira - u odjeljku Početak rada.

    Za rad s izvorima Less i njihovo uređivanje potrebno vam je:

    Barem neko poznavanje css-a i manje ili drugog predprocesora

    Manje kompajlera (može se preuzeti besplatno)

    Zapravo, neću se zadržavati na prilagođavanju kroz manje izvora, ali ovo je najviše najbolja metoda, jer nećete morati 100 puta posjetiti stranicu Customize i kompajlirati sve više verzija okvira.

    Bootstrap tematiziranje ili promjena izgleda elemenata

    Podrazumevano u puna verzija framework u folderu css, takođe možete pronaći datoteku bootstrap-theme.css. Nije potrebno spajanje na stranicu. Koje funkcije obavlja? Datoteka je potrebna isključivo da bi se, ako je potrebno, promijenili stilovi za elemente koji su vam potrebni.

    Istu ulogu može imati i vaš vlastiti style.css, u kojem također možete nadjačati stilove. Bootstrap-tema nije obavezna datoteka, više se koristi za naručivanje. Na primjer, imate 3 fajla:

    bootstrap.css- naravno, ovo je kod samog okvira;

    bootstrap-theme.css- ovdje nadjačavate stilove za elemente bootstrapa;

    style.css- i u ovaj fajl upišite stilove za svoje elemente.

    Tada ćete imati red u kodu i strukturi projekta. Ali niko vam ne zabranjuje da izvršite sve operacije u jednom fajlu - style.css i uopšte ne koristite fajl teme.

    Najvažnije je uključiti datoteku teme i svoj vlastiti css u html oznaku kasnije od datoteke koda okvira kako bi se stilovi uspješno nadjačali.

    Primjer temizacije

    Kao što sam rekao, Bootstrap po defaultu povezuje fajl bootstrap-tema. Pokušajte ga povezati. Napominjem, spojite se nakon glavnog fajla.

    Prema zadanim postavkama, dugmad u bootstrapu izgledaju ovako:

    A ovako se mijenja njihov izgled nakon povezivanja datoteke sa temom:

    Kao što vidite, pojavljuje se blagi gradijent. Shodno tome, možete ponovo napisati kod u datoteci bootstrap-tema i nabavite svoje stilove za dugmad. Ali možda se pitate zašto ne napravite ove promjene direktno u bootstrap.css? Pa, činjenica je da se nove verzije okvira stalno objavljuju i ako se odlučite za nadogradnju, vaše izmjene će biti teško implementirati u nova verzija. Dobar je oblik za programera da ne dira izvorni kod kada je moguće kreirati zaseban fajl i opišite tamošnje promjene. Mnogo je pametnije i praktičnije.

    Kako instalirati nove Bootstrap teme preuzete s interneta?

    Postoji dosta stranica, uglavnom stranih, na kojima možete besplatno preuzeti gomilu tema i šablona. Da bismo izbjegli zabunu, uzmimo u obzir stranicu napravljenu s Bootstrapom kao šablonom, a temu kao skup css pravila koja nadjačavaju standardni izgled elemenata.

    Takve teme se mogu preuzeti, na primjer, na bootswatch.com/, a pomoću tražilice možete pronaći desetine drugih.

    Opći princip instaliranja takvih tema ovisi o mjestu na kojem ih preuzimate. Ako možete preuzeti u formatu bootstrap-tema- odlično, preuzmite i povežite se. Na bootswatchu, na primjer, morate preuzeti bootstrap.css i zamijeniti s njim svoj standardni okvir stilova. Postoji i varijanta sa manje izvora.

    » upoznali smo se sa okvirom, analizirali njegove prednosti, ukratko pregledali njegov takozvani grid, sada je vrijeme da vježbamo kako koristiti Bootstrap.

    Bootstrap možete preuzeti sa službene stranice getbootstrap.com. Na glavnoj stranici kliknite na dugme Preuzmite Bootstrap».

    Nakon klika prelazimo na stranicu koja nudi nekoliko vrsta preuzimanja. U ovom članku ćemo razmotriti uobičajeno preuzimanje pune verzije okvira.

    Nakon preuzimanja i raspakivanja arhive, dobijamo tri foldera:

    • css- folder sa stilovima
    • JS- folder sa js skriptama
    • FONTOVI- folder sa fontovima ikona

    Ovo je cijeli okvir. Za dalji rad sa Bootstrapom, napraviću folder sa istim imenom bootstrap , u folderu ću napraviti jednu praznu index.html datoteku i popuniti fasciklu i fajl zajedno sa analizom okvira u ovom članku, a na kraju post ću dati link pa da vidite rezultat. Ako ponavljate za mnom, shvatit ćete da je rad sa okvirom zaista lak.

    Od preuzetog framework-a, potreban nam je cijeli folder fontova, jedna stilska datoteka iz css mape koja se zove bootstrap.css ili bootstrap.min.css i slično jedna skripta iz js mape koja se zove bootstrap.js ili bootstrap.min.js.

    Razlika između datoteka sa ".min." od uobičajenih u tim datotekama sa ".min." optimizirano, odnosno kod je napisan u jednom redu bez prijeloma redaka i razmaka, tako da su manje teški nego inače, a sadržaj fajlova je potpuno isti.

    Sada ću kreirati css folder u svom bootstrap folderu, staviti bootstrap.min.css fajl u njega i kreirati js folder u koji ću staviti bootstrap.min.js. Dodatno, u folderu css, za sada ću kreirati praznu datoteku style.css da dodam svoje stilove.

    Potrebne datoteke okvira su premještene, a sada ćemo raditi samo sa index.html datotekom. Kako ne biste sami pisali kod, okrenimo se dokumentaciji, na stranici za preuzimanje službene stranice ispod nalazi se gotov HTML kostur dokumenta, kopirajte ga i zalijepite u naš indeksni fajl.

    Naš stilski fajl, js skripta i jQuery biblioteka su već uključeni u kostur, ali ako niste na " bootstrap» predložak, ali na nekom svom, trebate između oznaka povežite datoteku stila bootstrap.min.css , a nakon nje kreirani style.css .

    Zatim prije završne oznake Prvo uključujemo jQuery biblioteku.

    I nakon biblioteke, povezujemo js skriptu.

    Općenito, HTML kostur dokumenta ispada ovako.

    Bootstrap

    Pripremni proces je završen, Bootstrap je povezan, možete krenuti i početi puniti našu WEB stranicu komponentama okvira.

    Kako koristiti dokumentaciju

    Dokumentacija okvira je vrlo dobra, što ga čini lakim za korištenje. U glavnom meniju službene web stranice postoji nekoliko odjeljaka: Počinjemo», « css», « Komponente», « JavaScript" i " Prilagodi“, na stranici svakog odjeljka u desnoj koloni nalaze se nazivi različitih komponenti, klikom na koje se prikazuju njihov opis i slučajevi upotrebe u obliku gotovog koda.

    Ako poteškoće sa engleski jezik, zatim postoji nekoliko resursa sa prevedenom dokumentacijom na mreži, evo adrese jednog od ovih sajtova www.oneskyapp.com/ru/docs/bootstrap. Možete koristiti i neki prevodilac za pretraživač, prevod će, naravno, biti kriv, ali bit će jasna suština napisanog. Općenito, samo trebate pročitati dokumentaciju, uzeti uzorke koda i vježbati.

    Rad sa Bootstrap Grid-om

    Kao što sam rekao u prošlom članku, mreža radi kao tabela, uključujući redove .row i kolone .col, može biti najviše dvanaest kolona. Prefiksi (lg , md , sm , xs) se dodaju u .col klasu za označavanje širine data kolona na određenoj rezoluciji ekrana.

    Umotajte redove sa kolonama u blok sa klasom .container ili .container-fluid class. Razlika između njih je u tome što klasa .container ima maksimalnu širinu od 1170 piksela, dok klasa .container-fluid ima neograničenu širinu, odnosno cijelu širinu ekrana, čak i ako je rezolucija ekrana vrlo velika. Pune informacije o Bootstrap mreži, pogledajte odjeljak dokumentacije " css».

    Koristeći mrežni okvir, napravit ćemo klasični izgled naše stranice (zaglavlje, sadržaj, bočni stupac i podnožje), za to ćemo kreirati tri reda i četiri stupca, dobijamo ovaj kod.

    HEADER

    SADRŽAJ

    SIDEBAR

    FOOTER

    Da bih razdvojio blokove, napisao sam dvije dodatne klase: .block , .block2 i dodao im nekoliko pravila u kreiranu datoteku style.css.

    Blok (pozadina: #eee; granica: 1px pun #000; ) .block2( pozadina: #ccc; granica: 1px pun #000; )

    Dodajmo font za ikone našim naslovima. u poglavlju " Komponente» odaberite ikone koje volite, kopirajte tekst ispod slike, ovaj tekst je klasa. Kreirajte oznaku unutar naslovne oznake i zalijepite kopiranu klasu.

    HEADER

    Sada nije škodilo dodati neku vrstu menija. Da biste to učinili, u odjeljku Komponente" idi " Navbar“, odaberite meni koji vam se sviđa, kopirajte kod i nakon uvodne oznake , umetnuti.

    Ostaje da se napuni sadržaja t" i " bočna traka". Sve radimo po istoj shemi: odaberite komponentu u dokumentaciji, pročitajte opis, kopirajte je i zalijepite na pravo mjesto. Dodaću obrazac i dugme, klikom na koje će se otvoriti modalni prozor sa tabelom.

    Upravo tako, u samo 5 minuta, skicirali smo najjednostavniji izgled stranice, prilagodljiv za sve uređaje, a kod praktički nismo sami pisali. Pratite link i pogledajte rezultat.

    Na ovom ću završiti članak. Razmotrili smo samo mali dio funkcionalnosti okvira, ali mislim da razumijete kako raditi s Bootstrapom. Sljedeći korak je promjena stilova okvira kako bi odgovarali vašim potrebama i preuzimanje samo onih komponenti koje su vam potrebne. Sve ćemo to analizirati u članku "



    Učitavanje...
    Top