Prije preuzimanja, uvjerite se da imate uređivač koda (preporučujemo Sublime Text 3) i određeno poznavanje HTML-a i CSS-a. Ovdje se nećemo doticati izvornih datoteka, ali ih uvijek možete sami preuzeti i proučiti. Usmjerit ćemo našu pažnju na početak rada sa kompajliranim Bootstrap datotekama.

Učitavanje kompajliranih fajlova

Najbrži način da započnete: nabavite kompajlirane i minimizirane verzije naših CSS, JS i slika. Nema dokumenata ili izvornih datoteka.

2. Struktura fajla

U preuzetim datotekama naći ćete sljedeću strukturu i sadržaj, logički grupiran prema zajedničkim svojstvima i koji sadrži i minimizirane i kompajlirane verzije.

Nakon preuzimanja, raspakirajte komprimiranu mapu da vidite strukturu (prevedenog) Bootstrapa. Trebalo bi biti otprilike ovako:

bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min. js +-- img / ¦ +-- glifikoni - poltroni . png ¦ +-- glifikoni - poltroni - bijeli . png L-- PROČITAJTE ME . md

Ovo je osnovni oblik Bootstrapa: kompajlirane datoteke za brzu i jednostavnu upotrebu u gotovo svakom web projektu. Pružamo vam prevedene CSS i JS (bootstrap.*), kao i kompajlirane i minimizirane CSS i JS (bootstrap.min.*). Datoteke slika se komprimiraju pomoću ImageOptim, Mac aplikacije za komprimiranje slika u PNG.

Imajte na umu da svi JavaScript dodaci zahtijevaju jQuery.

3. Šta je uključeno

Bootstrap je opremljen HTML, CSS i JS za sve vrste rada, svi su navedeni u kategorijama koje možete pronaći na vrhu stranice.

Odjeljci dokumenta Podržani elementi

Uobičajeni stilovi tijela za resetiranje tipa i pozadine, stilova veza, mreže šablona i dva jednostavna elementa za označavanje.

CSS stilovi

Stilovi za uobičajene HTML elemente: dizajn, kod, tabele, forme i dugmad. Također uključuje Glyphicons, odličan set ikona.

Komponente

Osnovni stilovi za jednostavne komponente interfejsa: kartice i dugmad, navigacione trake, poruke, zaglavlja stranica, itd.

Javascript dodaci

Kao i komponente, ovi Javascript dodaci su interaktivne komponente za opise alata, blokove informacija, modalne komponente i još mnogo toga.

Lista komponenti

Javascript komponente i dodaci zajedno sadrže sljedeće elemente interfejsa:

• Grupe dugmadi
• Padajuće liste dugmadi
• Kartice, dugmad i liste za navigaciju
• Traka za navigaciju
• Prečice
• Značke
• Zaglavlja stranica i element heroja
• Minijature
• Poruke
• Indikatori procesa
• Modalni elementi
• Padajuće liste
• Alati
• Informacijski blokovi
• Element "harmonika"
• Carousel element
• Unos sa tastature ispred

4. Osnovni HTML predložak

Nakon kratkog uvoda, fokusirat ćemo se na korištenje Bootstrapa. Da bismo to učinili, koristit ćemo osnovni HTML predložak koji uključuje sve elemente navedene u .

Ovako izgleda tipična HTML datoteka:

Bootstrap 101 predložak

Zdravo svijete!

Da biste napravili Bootstrap predložak poput ovog, jednostavno priložite odgovarajuće CSS i JS datoteke:

Bootstrap 101 predložak

Zdravo svijete!

I sve je spremno! Dodavanjem ove dvije datoteke možete razviti web stranicu ili aplikaciju koristeći Bootstrap.

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 prethodnim člancima. Ovdje je sve jednostavno. Idemo na službenu web stranicu getbootstrap.com, kliknemo na stavku Getting Started i izaberemo prvu opciju. Stoga preuzimamo punu verziju bootstrapa sa svim js i css komponentama.

Bootstrap CDN je prilika da povežete okvir sa 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 bootstrap podrazumevano sadrži mnogo komponenti, a neke od njih jednostavno vam možda neće biti korisne prilikom razvoja određene stranice. Na primjer, dizajnirate online trgovinu. Možda vam neće trebati modali i opisi alata, a možda vam neće trebati 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 tu zapravo ništa ne treba, tako da možete ostaviti samo mrežicu i par najvažnijih komponenti.

Odabir samo onoga što vam je potrebno je profesionalni pristup kreiranju web stranica i korištenju Bootstrapa. Podrazumevano, nekomprimovana verzija CSS stilova okvira u najnovijoj verziji teži 143 kilobajta. A skripte su veće od 60 kilobajta. Da, ako komprimirate kod, možete smanjiti težinu za 20-40%, ali datoteke ipak 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, au komprimiranom obliku još par kilobajta manje. Na taj način ćete postići maksimalnu brzinu i optimizaciju 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

Prvi korak je da konfigurišete koje komponente želite da uključite u svoju verziju Bootstrapa. Počnimo sa CSS-om:

Stilovi medija za štampanje – medijski upiti za štampanje. Ako ne planirate da štampate stranice sajta, možete to onemogućiti.

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

Grid sistem je zapravo mreža. Ne vidim smisla 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. Ne isključujemo ga ni pod kojim okolnostima.

Responzivni uslužni programi – prilagodljivi uslužni programi, također preporučujem da ih nikada ne onemogućite. O adaptivnim uslužnim programima ćemo govoriti u sljedećem članku, gdje ćemo detaljno 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 s gumbima, ikone, ploče, upozorenja, paginacija, krušne mrvice itd. Takođe možete onemogućiti font ikone. To vrijedi učiniti u slučaju kada vam ikone na web mjestu uopće nisu potrebne ili povezujete 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 svaki sajt ima drugačiji dizajn i funkcionalnost.

Javascript komponente

To su padajući meniji, opisi alata, modalni prozori i klizači. Ako vam ništa od ovoga ne treba, isključite ga. U nekim slučajevima, sve komponente mogu zaista biti korisne kada vaša stranica ima padajući meni, klizač na glavnoj stranici i modalne prozore. U nekim slučajevima, najviše 1-2 komponente mogu biti korisne, tada nema potrebe za produžavanjem koda, onemogućavanjem nepotrebnih komponenti.

Jquery dodaci

Ovdje možete onemogućiti dodatke jquery biblioteke koji pomažu da javascript komponente 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. I tako dalje. Dobro pogledajte š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, uvlake itd.

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

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 mjestu. 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 u kojem je zadana veličina fonta 20 piksela. U skladu s tim, možete odmah prilagoditi veličinu naslova 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 uvlaka između njih za nekoliko sekundi. Varijabla 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 već na širini od 991 piksela ili manje doći do kolapsa. Također možete ukloniti ovu varijablu i napisati vrijednost u pikselima. Na primjer, 520 piksela. Tada će se sažimanje menija dogoditi samo na pametnim telefonima i mobilnim telefonima.

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

Koristite stranicu Prilagodi kada trebate napraviti 2-10 promjena u okviru ili jednostavno onemogućiti potrebne komponente. Ako ćete promijeniti mnogo više vrijednosti, morate koristiti drugu metodu.

Zapravo, kada konfigurišete svoju verziju okvira, kliknite na veliko dugme na samom dnu stranice. On će sastaviti verziju Bootstrapa za vas i preuzeti je na vaš računar. Tada sve što treba da uradite je da se povežete i koristite. Već sam govorio o povezivanju u prethodnim člancima (uključujući kako to učiniti na WordPress-u).

Preuzimanje manjih izvora i njihovo uređivanje

Kao što sam već rekao, ako trebate napraviti mnogo izmjena u izvornom kodu okvira i želite vidjeti promjene 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 detaljno zadržavati na prilagođavanju kroz manje izvora, ali ovo je najbolja metoda, jer nećete morati 100 puta ići na stranicu Customize i sastavljati sve više i više novih verzija okvira.

Bootstrap tematiziranje ili promjena izgleda elemenata

Podrazumevano, u punoj verziji okvira, takođe možete pronaći datoteku bootstrap-theme.css u fascikli css. Nije potrebno da ga povežete sa sajtom. Koje funkcije obavlja? Datoteka je potrebna isključivo za, ako je potrebno, promjenu stilova za elemente koji su vam potrebni.

Ovu istu ulogu može ispuniti vaš vlastiti style.css, u kojem također možete nadjačati stilove. Bootstrap-tema nije obavezan fajl, već se koristi za red. Na primjer, imate 3 fajla:

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

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

style.css – napišite stilove za svoje elemente u ovoj datoteci.

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

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

Primjer kako funkcionira tematiziranje

Kao što sam već rekao, Bootstrap podrazumevano uključuje datoteku sa temom za pokretanje sistema. Pokušajte ga povezati. Napominjem, spojite se nakon glavnog fajla.

Po defaultu, dugmad u Bootstrapu izgledaju ovako:

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

Kao što vidite, pojavljuje se blagi gradijent. U skladu s tim, možete ponovo napisati kod u datoteci bootstrap-theme i dobiti vlastite stilove za dugmad. Ali možda ćete se zapitati, zašto ove promjene ne napravite direktno u bootstrap.css? Pa, činjenica je da se nove verzije okvira stalno objavljuju, a ako se odlučite za nadogradnju, biće teško implementirati vaše promjene u novu verziju. Smatra se da je dobar oblik da programer ne dira izvorni kod kada možete kreirati zasebnu datoteku i tamo opisati promjene. Mnogo je pametnije i praktičnije.

Kako instalirati nove Bootstrap teme preuzete sa interneta?

Postoji dosta stranica, uglavnom stranih, na kojima možete besplatno preuzeti gomilu tema i šablona. Da bismo izbjegli zabunu, razmotrimo web stranicu dizajniranu koristeći Bootstrap kao predložak, a temu kao skup CSS pravila koja nadjačavaju standardni izgled elemenata.

Takve teme se mogu preuzeti, na primjer, sa 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 ga možete preuzeti u formatu bootstrap teme, odlično, preuzmite ga i povežite. Na bootswatchu, na primjer, morate preuzeti bootstrap.css i zamijeniti svoj standardni framework stilski fajl njime. Postoji i opcija sa manje izvora.

Počevši od ovog članka, počet ćemo proučavati Twetter Bootstrap 3 framework, koji se najčešće koristi za kreiranje web stranica, admin panela, odredišnih stranica i web aplikacija, jer osigurava lakoću razvoja, jasnu strukturu i prilagodljivost stranica.

Instaliranje osnovnog Bootstrap 3 predloška

Da biste koristili Bootstrap 3 alate i metode, morate otići na http://getbootstrap.com i preuzeti arhivu sa css, fontovima, js folderima i odgovarajućim datotekama unutar njih.

Ako ne znate kako povezati CSS stilove i js skripte, preporučujem da pogledate ovaj i ovaj članak, a u našem slučaju CSS stilovi su povezani u sekcije

i skripte prije završne oznake

na dnu stranice.

Također bih želio napomenuti da će korištenje datoteka bootstrap.min.css i bootstrap.min.js koristiti vašoj web-lokaciji, jer su ove datoteke manje veličine i pozitivno će uticati na brzinu učitavanja.

Povezivanje fontova fontova može se izvršiti na dva načina:

Direktno u odjeljku HEAD prije završne oznake

U zasebnoj CSS datoteci koja se nalazi u fascikli css

Druga opcija je poželjnija, ali bez obzira koju metodu odaberete, veza će se nastaviti ovako

@font-face( font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings- regular.ttf); ) h2 (familija fontova: glyphicons-halflings-regular,sans-serif; )

ili bolje rečeno u style tag za prvu metodu, i ubacite sav tekst unutar nje u css datoteku za drugu.

jquery instalacija

Da bi Bootstrap 3 ispravno radio, morat ćete dodatno preuzeti datoteku jquery biblioteke sa službene web stranice jquery.com putem veze i smjestiti je u js mapu svoje stranice.

jquery veza se dešava prije završne oznake

Kolačići nam olakšavaju pružanje naših usluga. Korištenjem naših usluga dozvoljavate nam korištenje kolačića.

, ali prije datoteke bootstrap.js

pošto jquery treba da se učita pre pokretanja.

Bootstrap 3 mreže i veličine ekrana

Osnova Bootstrapa je skup klasa na kojima je izgrađena mreža od 12 kolona (col-). Unutar mreže je podržano 5 tipova ekrana -xs- -sm- -md- -lg- -xl-.

• -xs- veličina ekrana manja od 575px;
• -sm- veličina ekrana veća od 576px i ne veća od 767 px;
• -md- veličina ekrana veća od 768px i ne veća od 991 px;
• -lg- veličina ekrana veća od 992 px i ne veća od 1199 px;
• -xl- veličina ekrana veća od 1200px;

Dakle, div sa klasom col-lg-12 znači da će na velikom ekranu kolona div zauzimati 12 kolona ili 100% širine, slično div col-sm-6 na ekranu pametnog telefona će zauzimati 6 kolona ili 50% širine.

Vrste mrežastih kontejnera. Raspored gume

Glavni tipovi kontejnera za mrežu su kontejner i klasa kontejner-fluid.

Kada se koristi unutar kontejnera, vaša će mreža vizualno zauzeti trećinu ekrana u sredini, sa svih 12 kolona smještenih u ovoj oblasti.

Postavljanjem mreže u klasu kontejner-fluid, svi elementi rasporeda će se nalaziti po celom ekranu, poput gumenog, a kako se širina smanji, pomeraće se jedan prema drugom.

Ne postoji posebna preporuka za korištenje kontejnera i kontejner-fluida, jer sve ovisi o dizajnu izgleda i namjeni izgleda, međutim, prikladno je koristiti kontejner-fluid za admin panel stranice i kontejner.

Osim toga, klasa -fluid se može primijeniti ne samo na klasu kontejnera, već i na niz reda, kako bi se elementi rasporedili u red. Međutim, ako stavite tekućinu u redove u običnu posudu, nećete primijetiti razliku. Ovu kombinaciju najbolje je koristiti izvan div.container-a, ovako:

Zdravo, ja sam šablon za Bootstrap 3

Moja posuda nije tečna!

A ja sam tečan!

Linije za postavljanje elemenata

Klasa reda se koristi za postavljanje elemenata mreže u jedan red, što vam omogućava da ih rasporedite vodoravno, ali morate uzeti u obzir da zbir indeksa u redu ne smije biti veći od 12, inače će posljednji element biti prebačen u drugi red.

Naslov 1 Naslov 2 Naslov 3

Ako smanjite veličinu stranice pretraživača, naslovi će se poredati u vertikalnu listu iz horizontalnog reda.

Klase vidljivosti elemenata

Bootstrap 3 sistem izgleda pruža dodatne klase za prikazivanje ili skrivanje elemenata na različitim uređajima i ekranima. Oni su označeni kao vidljivi-*-* i skriveni-*.

Klasa za prikaz vidljivo-*-* iza prve crtice obično se nalazi identifikator tipa ekrana (xs, sm, md, lg, xl), a nakon druge crtice veličina kolone (1-12). Na primjer, visible-lg-6 - element je vidljiv na velikom ekranu, širine 6 stupaca.

Sakrivanje klase hidden-* Nakon crtice nalazi se identifikator tipa ekrana (xs,sm,md,lg,xl), na primjer, element za označavanje sa klasom hidden-xs neće biti vidljiv na malim uređajima (veličina ekrana manja od 575px).

Kombinovanje ovih elemenata će vam omogućiti da prikažete ili sakrijete div kontejnere:

Naslov 1 Naslov 2

Prvi naslov će biti vidljiv na velikim uređajima, dok će drugi nestati na malim ekranima. Da biste to učinili, smanjite veličinu prozora preglednika tako da veličina bude slična širini ekranu mobilnog uređaja.

Također u div kontejneru u klasi, navedite show ili hidden, ali u ovom slučaju svojstva prikaza se neće promijeniti kada se ekran promijeni: ako je vidljiv, onda je vidljiv, ako je skriven, tada će samo uklanjanje riječi skrivene iz klase omogućavaju vam da vidite željeni element.

Medijski upiti u Bootstrapu 3

Da biste koristili CSS medijske upite, morate navesti poseban simbol @media u css datoteci i minimalnu i/ili maksimalnu širinu ekrana u zagradama. Ako u regularnom css markupu trebate napisati veličine ekrana u pikselima, u bootstrapu 3 možete napisati sljedeću konstrukciju:

@media(min-width: @screen-sm-min)( ... ) @media(min-width: @screen-md-min)( ... ) @media(min-width: @screen-lg- min)( ... )

Promena redosleda elemenata

Još jedna zanimljiva klasa koja vam omogućava da premještate blokove unutar kontejnera, push klasa će pomjeriti element udesno, a pull klasa ulijevo.

Kada kombinujete iz susjednih kontejnera, možete promijeniti redoslijed potonjeg prilikom promjene veličine ekrana. U ovom primjeru, na velikom ekranu (-lg-) Naslov 2 se nalazi na lijevoj, a Naslov 1 na desnoj strani, kada se širina ekrana smanji na srednju veličinu (-md-), elementi će se pomjeriti i redoslijed će se postati sekvencijalni.

Naslov 1 Naslov 2

Dozvolite mi da završim ovo prvo upoznavanje sa Bootstrap 3 sistemom izgleda; naučili ste kako da instalirate stilove šablona i skripte, osnovne elemente mreže, medijske upite, tipove kontejnera, itd. U sljedećim člancima ćemo pogledati pomoćne i dodatne elemente: menije, dugmad, klizače, ikone i još mnogo toga.

24. februar 2012. u 21:25 Korisnički interfejs zasnovan na Twitteru za početnike

• Web dizajn

Sažetak 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 poznavanje html-a. Odmah vas upozoravam da stručnjaci neće biti zainteresirani, razgovarat ćemo o osnovnoj standardnoj funkcionalnosti.
Uvod U slobodno vrijeme, iz hobija, razvijam agregator na jednoj stranici zanimljivih naslova vijesti. U nekom trenutku osnovna funkcionalnost prototipa je bila spremna, jedino što je nedostajalo je polje za potvrdu pored zadatka „Dizajn. Iskaz problema Da biste dobili prelijepo korisničko sučelje bez savladavanja magije dizajnera (imate samo osnovne poznavanje paint) i programera (imate samo osnovno znanje html-a i css-a) .
Stranica se sastoji od sljedećih elemenata

• Ime
• Obrazac za slanje linka na novosti
• Obrazac za slanje jedinstvenog koda čitača putem e-maila
• Jedinstveni obrazac za unos 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
• izdanje id
• email povratne informacije

Proces Nakon nekoliko dana opuštene potrage za gotovim šablonom (css šablonom), došao sam do zaključka da ovo nije put pravog Džedaja, 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). A onda sam, gotovo slučajno, otišao u raj. Neću detaljno opisivati ​​Bootstrap, detalje možete vidjeti klikom na link, navest ću glavne elemente za koje postoje gotovi stilovi (ponekad i nekoliko):

Standardni elementi html formatiranja

Liste

Isječci koda

Stolovi

Forms

Dugmad

Navigacijski elementi

Paginacija

Minijature

Informativne poruke

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 raspakujte arhivu sa Bootstrapom u root folder našeg sajta, povežite css:
... ...
Drugi red je potreban za automatsko prilagođavanje interfejsa uređajima koje podržava Bootstrap Korak 2. Dizajnirajte “meso”. Pod "mesom" mislim na listu vijesti. Najlakši način da to uradite je da koristite tabelu sa onemogućenim okvirima. Prva kolona je datum (samo jednom po grupi), druga kolona je vrijeme, treća je naslov i broj prijelaza. Sve ovo, prema Bootstrap pravilima, mora biti upakovano u kontejner:

(Datum)

(vrijeme)

(Naslov) ((Broj prijelaza))

Za pročitane vijesti označavamo posebnu klasu:
(Naslov) Korak 3. Obrazac za slanje linka na vijest. Ovdje je opet sve jednostavno, Bootstrap nudi nekoliko gotovih stilova obrasca: običan obrazac, obrazac u jednom redu, formular za pretragu... Treba nam drugi, dodajte ga u naš kontejner ispred tabele:
Dodati ...
class="span10" - Bootstrap pretpostavlja izgradnju interfejsa zasnovanog na mreži od 12 kolona; naši elementi se mogu poravnati duž nje. Naučnom metodom pokušaja i grešaka došao sam do širine ulaznog polja jednake 10. Korak 4,5,6. Kapa. Moje ideje o tome kako treba da izgleda web stranica prilagođena korisniku sugeriraju minimalistički stil: sve nepotrebno je skriveno, sve što se nije moglo sakriti je blijedo. Sakrivamo obrasce u padajućem izborniku, č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 (kod)
  • Pošaljite emailom
  • Unesite drugi kod

...
Sami obrasci:
... × Pošaljite jedinstveni kod putem e-pošte

Cancel Send × Unesite jedinstveni kod čitača

Omogućava vam da sinhronizujete vijesti koje se čitaju na različitim računarima.

Cancel Send

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

Korak 7. Podnožje. Dodavanje glavnog kontejnera:
...

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

RezultatEpilog Twitter Bootstrap je omogućio, bez mnogo truda i znanja, bez pisanja ijednog reda CSS-a i bez mnogo razbijanja html koda, da dobijete veoma lep prototip interfejsa koji se ne stidite da pokažete ljudima. Ako ste zainteresovani, u sledećem članku ću vam reći kako, bez dubokog poznavanja PHP + MySQL (sa samo osnovnim programskim veštinama), možete implementirati funkcionalnost koja vam omogućava da svoju milionsku ideju pokažete ne samo na papiru, već i u obliku radnog prototipa.
Hvala vam na pažnji!
UPD: Ne želim maknuti temu u "Ja sam PR", uklonio sam sve nepotrebne linkove

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

Bootstrap - šta je to?

Počnimo sa važnim pitanjem. Bootstrap je CSS i JS okvir, u suštini skup datoteka sa gotovim napisanim kodom. Cilj programera gotovo svakog okvira je da pojednostave razvoj web stranica 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 ​​izvorni kod i prilagođavati okvir na bilo koji način. Savršeno je.

Instaliranje Bootstrapa

Ako samo trebate povezati datoteke okvira sa HTML dokumentom (na primjer, za praksu), samo preuzmite okvir sa službene web stranice getbootstrap.com, kopirajte njegove datoteke u projekt i povežite one koje su vam potrebne. Dozvolite mi da dam kratak pregled ovih fajlova:

bootstrap.css i bootstrap.min.css - nekomprimirane i komprimirane verzije CSS koda okvira. Preporučuje se da uz radni projekat uključite komprimiranu datoteku, na taj način ćete malo poboljšati brzinu učitavanja. Ali ako planirate da vidite kod u datoteci, povežite nekomprimovanu verziju.

bootstrap.js i bootstrap.min.js - fajl sa skriptama

folder fontovi i datoteke glifikona u njemu su font ikone Bootstrap. Ima oko 200 ikona. U većini slučajeva imat ćete ih dovoljno, ponekad trebate povezati druge. Kasnije ćemo razgovarati o fontu ikona.

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

Russian Bootstrap dokumentacija

Kada posetite getbootstrap, verovatno ste primetili da je sve ovde na engleskom. Mogla bi nam koristiti ruska pomoć oko okvira. Lako je pronaći. Da biste to učinili, idite s glavne stranice na odjeljak Početak rada. 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 grid

Šta god da se kaže, 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; oni vam nisu potrebni, jer se okvir brine o implementaciji prilagodljivosti; samo trebate dodijeliti ispravne klase blokovima.

Šta su ovo časovi? Idemo na dokumentaciju, puno će nam pomoći. Idite na odjeljak CSS - Grid System. Opća pravila za rad s 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, znate da se sav sadržaj stavlja u oznaku tabele, jedan red se stavlja u oznaku tr, a zatim se ćelije stavljaju u nju - td.

Dakle, sve je slično u mreži. Klasa kontejnera služi kao opšti kontejner za mrežu. Postoje 2 opcije za bootstrap mrežu - potpuno gumena i još uvijek ima konačnu maksimalnu širinu. Dakle, kada je opštem bloku data klasa kontejnera, sajt ć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 punoj širini.

U skladu s tim, prva stvar prilikom izrade web stranice je odlučiti kakav će šablon biti - potpuno gumeni, ili njegovu širinu još treba ograničiti.

Odlično, blok kontejnera bi trebao sadržavati red mreže. U njega morate postaviti sve blokove koji se nalaze na jednoj liniji. Odnosno, ako uzmemo najtipičniji predložak: zaglavlje, glavni dio, desni stupac i podnožje, onda postoje 3 stupca. 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:

Sadržaj zaglavlja... i bočna traka podnožja

Ali za sada je ovo 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 navedena 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 izgleda 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 u Bootstrapu označene klasom col-, ali ovo je kompozitna klasa, tako da nikada ne pišu jednostavno col-. Bootstrap ima 4 posebne klase koje su dizajnirane za kontrolu veličine blokova različitih širina, evo ih:

ld - za velike ekrane, širine više od 1200 piksela (stoni računari);

md - za srednje ekrane, širine od 992 do 1199 (računari, netbookovi);

sm - za male ekrane, širine od 768 do 991 piksela (tableti);

xs - izuzetno mali ekrani, širina manja od 768px.

Ovo su 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.

Podnožje bočne trake sadržaja zaglavlja

Prilično je lako razumjeti. Prije svega, kreiramo zaglavlje koje uopće ne mora biti postavljeno u mrežu, jer će u svakom slučaju zauzimati 100% širine (obično). Ali svejedno ćemo ga staviti. Šta je ovo klasa col-md-12? Kao što sam vam već rekao, niko ne piše jednostavno col-, sa ovom klasom mi u suštini kažemo pretraživaču:
Ovo je ćelija | kolona
Na srednjim uređajima (md klasa), njegova širina treba biti 12 od 12 kolona, ​​odnosno 100% širine 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 za manje nisu. 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. Ovo je karakteristika, zapamtite je.

Pa, ako vrijednost širine nije sačuvana na manjim ekranima, šta se onda događa? Resetuje se. Evo kako se to dešava:
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 navedeno za manje ekrane, onda će na njima blok biti prikazan na 100% širine.

Bočna traka sadržaja

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 velikim ekranima (dovoljno je navesti za male, za velike ekrane, kao što se sjećate, vrijednost se nasljeđuje). Ali na najmanjim ekranima blok će biti zauzet 100%. Ovo je tačno; obično se na mobilnim uređajima stranice pojavljuju u jednoj koloni.
Neka bočna kolona bude jedna trećina širine reda na istim malim, srednjim i velikim ekranima.Pa, na najmanjim, kao što ste već shvatili, njegova širina se takođe resetuje na 100%. To je tako jednostavno.

Pa, nema se šta baviti podnožjem. Pa, pokrili smo osnovne principe kako mreža radi, ali još uvijek moramo vidjeti kako funkcionira...

Bootstrap ugniježđena mreža

Činjenica je da smo sada predložak podijelili samo na glavne blokove, ali unutar njih se mogu podijeliti i na stupce. Na primjer, sadržaj može prikazati proizvode u nekoliko kolona. Sta da radim? Vrlo je 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 ovog zaključka:
Unutar bilo kojeg bloka može biti neograničen broj mreža. Na primjer, u bloku s proizvodima nalazi se mreža za odvajanje proizvoda; 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 sadržaja kako bismo proizvode rasporedili u 3 kolone. Dakle, uzmimo blok u kojem imamo sadržaj:

Sadržaj

I u njemu pišemo:

Katalog proizvoda: Naziv proizvoda

Opis proizvoda

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

Promašio sam još jednu važnu stvar: da bi se slike prilagodile blokovima u kojima se nalaze, svakom od njih treba dati img-responsive klasu. Ako i vi, poput mene, mislite da je ovo nezgodno, 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 povežite svoju css datoteku sa projektom. Sada će slike po defaultu biti prilagodljive.

Pa, da li je ispalo sasvim glatko? Da, ali 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čni stupac na uskim ekranima, dodajte neke nove elemente na mobilnim uređajima, dodajte kolonu na široke ekrane itd.

Postoji mnogo opcija za aplikacije, 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:

Podnožje

Šta će klasa hidden-xs učiniti u ovom slučaju? To će sakriti podnožje na ekstra 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, adaptivne uslužne klase su napisane ovako:

Riječ skrivena ili vidljiva, ovisno o tome šta vam je potrebno

Skraćenica xs, sm, md ili lg koja označava na kojim ekranima sakriti ili prikazati blok.

Za vidljivo također morate dodati jednu od tri vrijednosti: block - prikaz elementa kao blok elementa, inline-block - kao inline-block element, inline - inline.

Pa, par primjera da bude jasno:

hidden-xs hidden-lg - sakriti će element na najmanjim i najvećim ekranima. Kao što vidite, možete navesti više klasa odvojenih razmakom.

visible-xs-inline visible-md-block - na malim i velikim ekranima element se uopće neće prikazati. Na ekstra malim će to biti mala slova, a na srednjim će biti blok.

visible-lg-block - element će biti vidljiv samo na najvećim ekranima, na svim ostalim će biti skriven

Ovako sve funkcionira. Upravo to je to i nikako drugačije. Nadam se da razumete ovo. Hajde da to primenimo u praksi. Imamo testni šablon, iako vrlo primitivan.

Zadatak: da na malim ekranima nestane bočna kolona, ​​a na najmanjim ekranima i jedan proizvod. I tako da su na xs uređajima proizvodi već u 2 kolone, a ne u 3.

Pokušajte to učiniti sami, uređujući samo html kod. Šta treba učiniti? Prvo, pogledajmo kolonu, da biste je sakrili na sm ekranima, potrebno je samo da joj dodate klasu hidden-sm.

Odlično, sada treći proizvod treba da doda klasu hidden-xs i nestat će 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 pošto će jedan blok s proizvodom nestati na ovoj širini, oba bloka s proizvodima će biti uredno poređana u 1 red, ovako:

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

Pomeri me do kraja

Sljedeće ću vam pokazati još jedan 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 blok ulijevo za 33% širine roditeljskog kontejnera (1/3 lijevog pomaka, 1/3 širine bloka, ⅓ desnog pomaka, što rezultira centriranjem).
Class col-xs-offset-6: Na izuzetno malim i malim ekranima, pomaknite lijevo za 25% (¼ padding lijevo, ½ širina bloka, ¼ padding desno).

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

Bootstrap komponente i primjeri njihove upotrebe

Čestitam ti. Upravo smo pokrili najvažniju temu vezanu za okvir. Važna je mreža i rad sa njom. Rad sa komponentama već znači da jednostavno odete u dokumentaciju, tamo kopirate kod željene komponente i po potrebi ga promijenite kako bi odgovarao vašim potrebama. Ali u nastavku ću ipak dati nekoliko primjera kako koristiti komponente.

Brzo plutanje i otkazivanje omota

Klase povuci-levo i povuci-desno omogućavaju vam da brzo naterate bilo koji blok da pluta tako što ćete ga poslati ulevo ili udesno. Ne zaboravite na otkazivanje protoka. 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 nakon mene.

Zapravo, sa Bootstrapom možete vrlo lako napraviti ne samo adaptivni meni, već takozvani mobilni, koji je potpuno skupljen na malim ekranima i sakriven pod jednim dugmetom. Ova tehnika se može vidjeti u mnogim responzivnim šablonima i zapravo je vrlo jednostavna za implementaciju. Primjer koda mobilnog menija nalazi se u dokumentaciji, uzeću ga odatle i malo ponoviti.

Dakle, prvo što ću učiniti je ukloniti blok sa zaglavljem, jer će naš meni, u stvari, biti zaglavlje u slučaju mog šablona. Kôd menija mora biti postavljen prije svih sadržaja web mjesta, č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:

Logotip/ime dugmeta za prebacivanje

• Biciklizam
• Motorsports
• Oprema za vježbanje
  • Trake za trčanje
  • Eliptični trenažeri
  • Klupe

Traži

Nemojte biti uznemireni činjenicom da postoji mnogo koda. Ovako stranica izgleda sada:

Ali ako vaš meni ne zauzima 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 centrirati je. Ili u početku zamijenite posudu-tečnost sa kontejnerom.

Kao što vidite, u meni smo dodali logo, dvije jednostavne stavke, padajuću stavku i obrazac za pretragu. Odnosno, bilo je mnogo elemenata. Možete lako prilagoditi meni za sebe dodavanjem vlastitih klasa u njega. Ali za sada moj cilj je jednostavno 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

U isto vrijeme, iz gornjeg primjera možete razumjeti kako se stavka padajućeg menija kreira u Bootstrapu; hajde da izdvojimo ovaj kod za detaljniji pregled:

Oprema za vježbanje

• Trake za trčanje
• Eliptični trenažeri
• Klupe

Dakle, kontejner za padajuću stavku je obična stavka liste sa padajućom klasom. Unutar njega se nalazi glavna veza, klikom na koju se otvara padajući meni. Vrlo je važno da mu dodijelite atribut podataka, koji vidite u kodu, bez njega ništa neće raditi. Također biste trebali provjeriti da li je datoteka bootstrap.js povezana sa web stranicama.

Raspon s caret klasom nije ništa drugo do strelica, zahvaljujući kojoj možete razumjeti da je stavka padajući izbornik, a 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 (Breadcrumbs) pomoću Bootstrapa

U mnogim trgovinama možete pronaći takozvani blok mrvica kruha, koji sadrži punu putanju do trenutne stranice. Ovo je takođe lako uraditi koristeći okvir, pogledajte kod:

Dom

Katalog

Roba

U stvari, dovoljno je navesti klasu breadcrumb za numerisanu listu 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 nekako promijeniti izgled breadcrumbs, samo koristite .breadcrumb selektor u CSS-u. Na primjer, ovako možete ukloniti boju pozadine:

Breadcrumb (pozadina: prozirna; )

Ovako stranica izgleda sada:

Bootstrap tabele

Podrazumevano, tabela će se protezati preko celog prozora, pa je umotajte u okvir ograničene širine da biste ograničili dimenzije. Podrazumevano izgleda užasno, 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 granice 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 ga neću ponavljati. Jedina stvar je da 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, lako možete napisati svoje vlastite klase u style.css i koristiti ih.

Zaključak

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

Svijet besplatnih programa i korisnih savjeta
2024 whatsappss.ru