Prije preuzimanja provjerite imate li uređivač koda (preporučamo Sublime Text 3) i nešto znanja o HTML-u i CSS-u. Ovdje se nećemo doticati izvornih datoteka, ali uvijek ih možete sami preuzeti i proučiti. Usmjerit ćemo pozornost na početak rada s kompajliranim Bootstrap datotekama.

Učitavanje kompiliranih datoteka

Najbrži način za početak: nabavite kompilirane i umanjene verzije našeg CSS-a, JS-a i slika. Nema dokumenata ili izvornih datoteka.

2. Struktura datoteke

U preuzetim datotekama pronaći ćete sljedeću strukturu i sadržaj, logički grupirane prema zajedničkim svojstvima i koje sadrže i umanjene i kompajlirane verzije.

Nakon preuzimanja, raspakirajte komprimiranu mapu da vidite strukturu (kompiliranog) Bootstrapa. Trebalo bi biti nešto ovako:

bootstrap / +-- css / ¦ +-- bootstrap. css ¦ +-- bootstrap. min. css +-- js / ¦ +-- bootstrap. js ¦ +-- bootstrap. min. js +-- img / ¦ +-- glifikoni - poluljudi . png ¦ +-- glifikoni - poluljudi - bijeli. png L-- PROČITAJ ME. doktor medicine

Ovo je osnovni oblik Bootstrapa: kompajlirane datoteke za brzu i jednostavnu upotrebu u gotovo svim web projektima. Pružamo vam kompilirani CSS i JS (bootstrap.*), kao i kompajlirani i umanjeni CSS i JS (bootstrap.min.*). Slikovne datoteke su komprimirane pomoću ImageOptima, Mac aplikacije za komprimiranje slika u PNG.

Imajte na umu da svi JavaScript dodaci zahtijevaju jQuery.

3. Što je uključeno

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

Odjeljci dokumenta Podržani elementi

Uobičajeni stilovi tijela za poništavanje vrste i pozadine, stilovi veza, rešetka predloška i dva jednostavna elementa označavanja.

CSS stilovi

Stilovi za uobičajene HTML elemente: dizajn, kod, tablice, obrasci i gumbi. Također uključuje Glyphicons, odličan skup ikona.

Komponente

Osnovni stilovi za jednostavne komponente sučelja: kartice i gumbi, navigacijske trake, poruke, zaglavlja stranica itd.

Javascript dodaci

Poput komponenti, ovi Javascript dodaci su interaktivne komponente za opise alata, informacijske blokove, modalne komponente i još mnogo toga.

Popis komponenti

Javascript komponente i dodaci zajedno sadrže sljedeće elemente sučelja:

• Grupe gumba
• Popisi padajućih gumba
• Navigacijske kartice, gumbi i popisi
• Navigacijska traka
• Prečaci
• Značke
• Zaglavlja stranice i hero element
• Minijature
• Poruke
• Indikatori procesa
• Modalni elementi
• Padajući popisi
• Opisi alata
• Informacijski blokovi
• Element "Harmonika"
• Element vrtuljka
• Unos s tipkovnice naprijed

4. Osnovni HTML predložak

Nakon kratkog uvoda, usredotočit ć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:

Predložak Bootstrap 101

Pozdrav svijete!

Za izradu Bootstrap predloška kao što je ovaj, jednostavno priložite odgovarajuće CSS i JS datoteke:

Predložak Bootstrap 101

Pozdrav svijete!

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

Zdravo! U ovom ću vam članku reći kako instalirati i povezati Bootstrap okvir. Možete pročitati o tome što je Bootstrap.

Standardna instalacija okvira

Već sam dosta 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 odaberemo prvu opciju. Dakle, preuzimamo punu verziju bootstrapa sa svim js i css komponentama.

Bootstrap CDN je prilika za povezivanje okvira iz CDN pohrane bez preuzimanja njegovih datoteka na vaše računalo. Naravno, u ovom slučaju ne može biti govora o bilo kakvoj prilagodbi.

Prilagodba okvira

Ali činjenica je da bootstrap prema zadanim postavkama sadrži mnoge komponente, a neke od njih jednostavno vam možda neće biti korisne pri razvoju određene stranice. Na primjer, dizajnirate internetsku trgovinu. Možda vam neće trebati modali i opisi alata i možda vam neće trebati mnogo CSS komponenti. U ovom slučaju, bilo bi mudro ne uključiti te komponente u okvir.

Ili stvarate jednostavan blog. Recimo, tu vam zapravo ne treba ništa, pa možete ostaviti samo mrežicu i par najvažnijih komponenti.

Odabir samo onoga što vam treba je profesionalni pristup izradi web stranica i korištenju Bootstrapa. Prema zadanim postavkama, nekomprimirana 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 svejedno datoteke neće biti najlakše.

Ako, na primjer, onemogućite sve komponente i ostavite samo mrežu (to se vrlo često radi), tada će težina css-a biti samo 15-20 kilobajta, au komprimiranom obliku još nekoliko kilobajta manje. Na taj način ćete postići maksimalnu brzinu i optimizaciju vašeg projekta.

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

Odabir potrebnih komponenti

Prvi korak ovdje je konfigurirati koje komponente želite uključiti u svoju verziju Bootstrapa. Počnimo s CSS-om:

Print Media Styles – medijski upiti za ispis. Ako ne planirate ispisivati ​​stranice stranice, možete ga onemogućiti.

Tipografija, kod, tablice, obrasci i gumbi sve su to stvari koje možete sami stilizirati u CSS-u ako stvarno želite. Naravno, to će potrajati, ali ako se dizajn vaših elemenata jako razlikuje od onoga što okvir nudi prema zadanim postavkama, možete onemogućiti sve te CSS stilove i napisati ih sami.

Grid System je zapravo grid. Ne vidim smisla da ga ikada onemogućim, jer je to glavna moć okvira. Upravo zahvaljujući gridu možete lako prilagoditi predloške svakom uređaju, a danas u doba mobilnog prometa to je iznimno važno. Ne gasimo ga ni pod kojim uvjetima.

Responzivni uslužni programi – prilagodljivi uslužni programi, također preporučujem da ih nikad ne onemogućite. O adaptivnim uslužnim programima govorit ćemo u sljedećem članku, gdje ćemo detaljno pogledati grid sustav. To su klase koje vam omogućuju da sakrijete element ili ga učinite vidljivim na određenoj širini zaslona. Vrlo zgodno i korisno.

To su, na primjer, stvari kao što su grupe popisa, trake s gumbima, ikone, ploče, upozorenja, označavanje stranica, putevi, itd. Također možete onemogućiti font ikone. To vrijedi učiniti u slučaju kada uopće ne trebate ikone na web mjestu ili povezujete drugi skup. Zapravo, trebali biste sjesti i razmisliti što vam je potrebno od svih predstavljenih komponenti, a što ne. Svaka pojedinačna stranica će imati svoj set, jer svaka stranica ima drugačiji dizajn i funkcionalnost.

Javascript komponente

To su padajući izbornici, opisi alata, modalni prozori i klizači. Ako vam ništa od ovoga ne treba, isključite. U nekim slučajevima, sve komponente mogu stvarno biti korisne kada vaša stranica ima padajući izbornik, klizač na glavnoj stranici i modalne prozore. U nekim slučajevima, najviše 1-2 komponente mogu biti korisne, tada nema potrebe produžiti kod, onemogućiti nepotrebne komponente.

Jquery dodaci

Ovdje možete onemogućiti dodatke jquery knjižnice koji pomažu da komponente javascripta rade ispravno. Sukladno tome, ako ne koristite klizač na svojoj stranici, onda vam ne treba dodatak za kreiranje karusela, ako vam ne trebaju tooltips, onda onemogućite tooltips.js itd.

Scrollspy dodatak prati položaj teksta i, ovisno o tome, ističe jednu ili drugu stavku izbornika. Obično je takva značajka potrebna na odredišnim stranicama; praktički je nikad nisam vidio na običnim stranicama. I tako dalje. Dobro pogledajte što vam treba, a što ne.

Manje varijabli

Zatim će se ispred vas otvoriti ogromna stavka u kojoj će biti puno podstavaka s postavkama za Less varijable. Ovdje možete promijeniti gotovo sve: boje, veličinu fonta, prijelomne točke, broj stupaca u mreži, uvlake itd.

Naravno, da biste to učinili, morate poznavati barem osnove Lessa ili se barem intuitivno kretati tim obrascima.

Na primjer, ako vidite varijablu @font-family-base, tada 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. Prema zadanim postavkama u bootstrapu je 14 piksela.

Sva ova polja možete urediti. Samo promijenite 14 u 20 i sada možete preuzeti framework u kojem je zadana veličina fonta 20 piksela. U skladu s tim, možete odmah prilagoditi veličinu naslova itd.

Postavljanje rešetke

Postavke grid sustava su nam također vrlo zanimljive, evo ih:

Kao što vidite, možete promijeniti broj stupaca i širinu uvlaka između njih u nekoliko sekundi. Varijabla grid-float-breakpoint postavlja točku na kojoj se mobilni izbornik 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 sužavanje izbornika dogoditi samo na pametnim telefonima i mobilnim telefonima.

Zapravo, stranica za prilagodbu Bootstrapa ima mnogo postavki, ali općenito ova metoda prilagodbe (pomoću stranice Prilagodi na službenoj web stranici) nije najbrža i najprikladnija. Zatim ću vam pokazati najbrži način.

Koristite stranicu Customize kada trebate napraviti 2-10 promjena okvira ili jednostavno onemogućite potrebne komponente. Ako namjeravate promijeniti mnogo više vrijednosti, trebate koristiti drugu metodu.

Zapravo, kada konfigurirate svoju verziju okvira, kliknite veliki gumb na samom dnu stranice. Sastavit će verziju Bootstrapa za vas i preuzeti je na vaše računalo. Zatim se sve što trebate učiniti je povezati i koristiti. Već sam govorio o povezivanju u prethodnim člancima (uključujući kako to učiniti na WordPressu).

Preuzimanje Less izvora i njihovo uređivanje

Kao što sam već rekao, ako trebate napraviti mnogo izmjena u izvornom kodu okvira i želite vidjeti promjene odmah, tada ć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 Less izvorima i njihovo uređivanje trebate:

Barem malo znanja o css-u i manje ili neki drugi pretprocesor

Less kompajler (može se besplatno preuzeti)

Zapravo, neću se detaljno zadržavati na prilagodbi kroz manje izvora, ali ovo je najbolja metoda, jer nećete morati ići na stranicu Prilagodba 100 puta i kompajlirati sve više i više novih verzija okvira.

Bootstrap tematiziranje ili mijenjanje izgleda elemenata

Prema zadanim postavkama, u punoj verziji okvira također možete pronaći datoteku bootstrap-theme.css u mapi css. Nije potrebno povezivati ​​ga sa web mjestom. Koje funkcije obavlja? Datoteka je potrebna isključivo da, ako je potrebno, promijenite stilove za elemente koji su vam potrebni.

Tu istu ulogu može ispuniti vaš vlastiti style.css, u kojem također možete nadjačati stilove. Bootstrap-theme nije obvezna datoteka, već se koristi radi reda. Na primjer, imate 3 datoteke:

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 ovu datoteku.

Tada ćete imati red u kodu i strukturi projekta. Ali nitko vam ne brani da sve operacije izvodite u jednoj datoteci - style.css i da uopće ne koristite datoteku teme.

Najvažnije je da datoteku teme i vlastiti css uključite u html markup kasnije od datoteke s okvirnim kodom, tako da se stilovi uspješno nadjačaju.

Primjer kako tematizacija funkcionira

Kao što sam već rekao, prema zadanim postavkama Bootstrap uključuje datoteku bootstrap-theme. Pokušajte ga spojiti. Napominjem, spojite se nakon glavne datoteke.

Prema zadanim postavkama, gumbi u Bootstrapu izgledaju ovako:

A evo kako se njihov izgled mijenja nakon povezivanja datoteke s temom:

Kao što vidite, pojavljuje se blagi gradijent. U skladu s tim, možete prepisati kod u datoteci bootstrap-theme i dobiti vlastite stilove za gumbe. Ali možete se zapitati zašto ne izvršiti ove promjene izravno u bootstrap.css? Pa, činjenica je da se stalno objavljuju nove verzije okvira i ako se odlučite za nadogradnju, bit će teško implementirati vaše promjene u novu verziju. Smatra se dobrim oblikom za programera da ne dira izvorni kod kada možete stvoriti zasebnu datoteku i tamo opisati promjene. Mnogo je pametnije i praktičnije.

Kako instalirati nove Bootstrap teme preuzete s interneta?

Postoji dosta stranica, uglavnom stranih, gdje možete besplatno preuzeti hrpu tema i predložaka. Kako bismo izbjegli zabunu, razmotrimo web stranicu dizajniranu korištenjem Bootstrapa kao predloška, ​​a temu kao skup CSS pravila koja nadjačavaju standardni izgled elemenata.

Takve teme možete preuzeti, primjerice, s bootswatch.com/, a pomoću tražilice možete pronaći desetke drugih.

Općenito načelo instaliranja takvih tema ovisi o mjestu na kojem ih preuzimate. Ako ga možete preuzeti u formatu bootstrap-theme, super, preuzmite ga i povežite. Na primjer, na bootswatchu morate preuzeti bootstrap.css i njime zamijeniti svoju standardnu ​​datoteku stila okvira. Postoji i opcija s manje izvora.

Počevši s ovim člankom, počet ćemo proučavati okvir Twetter Bootstrap 3, koji se najčešće koristi za izradu web stranica, admin panela, odredišnih stranica i web aplikacija, jer osigurava jednostavnost razvoja, jasnu strukturu i prilagodljivost stranica.

Instaliranje osnovnog predloška Bootstrap 3

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

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

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 biti od koristi vašoj web stranici, budući da su te datoteke manje veličine i pozitivno će utjecati na brzinu učitavanja.

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

Izravno u odjeljku HEAD prije završne oznake

U zasebnoj CSS datoteci koja se nalazi u mapi css

Druga opcija je poželjnija, ali bez obzira koju metodu odaberete, veza će se odvijati 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( font-family: glyphicons-halflings-regular,sans-serif; )

odnosno u oznaku stila za prvu metodu, a sav tekst unutar nje umetnite u css datoteku za drugu.

jquery instalacija

Za ispravan rad Bootstrapa 3 potrebno je dodatno preuzeti datoteku jquery biblioteke sa službene web stranice jquery.com putem poveznice i smjestiti je u js folder vaše stranice.

jquery veza se događa prije završne oznake

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

, ali prije datoteke bootstrap.js

budući da bi se jquery trebao učitati prije pokretanja.

Bootstrap 3 rešetka i veličine zaslona

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

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

Dakle, div s klasom col-lg-12 znači da će na velikom zaslonu div stupac zauzeti 12 stupaca ili 100% širine, slično će div col-sm-6 na zaslonu pametnog telefona zauzeti 6 stupaca ili 50% širine.

Vrste mrežastih spremnika. Izgled gumenog rasporeda

Glavne vrste spremnika za rešetku su spremnik i klase spremnika-tekućine.

Kada se koristi unutar spremnika, vaša će mreža vizualno zauzimati trećinu zaslona u sredini, sa svih 12 stupaca smještenih u ovom području.

Postavljanjem rešetke u klasu kontejner-tekućina, svi elementi rasporeda će se nalaziti preko cijelog ekrana, poput gumenog, a sa smanjenjem širine će se pomicati jedni prema drugima.

Ne postoji posebna preporuka za korištenje kontejnera i kontejner-fluida, budući da sve ovisi o izgledu dizajna i namjeni izgleda, međutim, prikladno je koristiti kontejner-fluid za administratorsku ploču stranice i kontejner.

Osim toga, klasa -fluid može se primijeniti ne samo na klasu spremnika, već i na niz reda, za raspored elemenata u nizu. Međutim, ako tekućinu za redove stavite u običnu posudu, nećete primijetiti razliku. Ovu kombinaciju najbolje je koristiti izvan div.containera, ovako:

Bok, ja sam Bootstrap 3 predložak

Moja posuda nije tekućina!

A ja sam tečna!

Linije za postavljanje elemenata

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

Naslov 1 Naslov 2 Naslov 3

Ako smanjite veličinu stranice preglednika, naslovi će se poredati u okomitom popisu iz vodoravnog retka.

Klase vidljivosti elemenata

Sustav rasporeda Bootstrap 3 pruža dodatne klase za prikazivanje ili skrivanje elemenata na različitim uređajima i zaslonima. Označeni su kao vidljivi-*-* i skriveni-*.

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

Skrivanje klase skriveno-* Nakon crtice nalazi se identifikator vrste zaslona (xs,sm,md,lg,xl), na primjer, element označavanja s klasom skriveni-xs neće biti vidljiv na malim uređajima (veličina zaslona manja od 575 px).

Kombinacija ovih elemenata omogućit će vam da prikažete ili sakrijete div spremnike:

Naslov 1 Naslov 2

Prvi će naslov 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 zaslona mobilnog uređaja.

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

Medijski upiti u Bootstrapu 3

Kako biste koristili CSS medijske upite, trebate navesti poseban simbol @media u css datoteci i minimalnu i/ili maksimalnu širinu zaslona u zagradama. Ako u uobičajenom css označavanju trebate napisati veličinu zaslona u pikselima, u bootstrapu 3 možete napisati sljedeću konstrukciju:

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

Promjena redoslijeda elemenata

Još jedna zanimljiva klasa koja vam omogućuje pomicanje blokova unutar spremnika, klasa push će pomaknuti element udesno, a klasa pull ulijevo.

Kada kombinirate iz susjednih spremnika, možete promijeniti redoslijed potonjih kada mijenjate veličinu zaslona. U ovom primjeru, na velikom zaslonu (-lg-) naslov 2 nalazi se s lijeve strane, a naslov 1 s desne strane, kada se širina zaslona smanji na srednju veličinu (-md-), elementi će se pomaknuti i redoslijed će postati sekvencijalan.

Naslov 1 Naslov 2

Dopustite mi da zaključim ovo prvo upoznavanje sa sustavom rasporeda Bootstrap 3; naučili ste kako instalirati stilove predložaka i skripte, osnovne elemente mreže, medijske upite, vrste spremnika itd. U sljedećim člancima ćemo pogledati pomoćne i dodatne elemente: izbornike, gumbe, klizače, ikone i još mnogo toga.

24. veljače 2012. u 21:25 Twitter korisničko sučelje za početnike temeljeno na Bootstrapu

• web dizajn

Sažetak U ovom ću članku pokušati govoriti o tome kako, temeljeno na Twitter Bootstrapu, možete vrlo jednostavno implementirati lijepo korisničko sučelje za malu web aplikaciju (s jednom stranicom), uz samo osnovno znanje 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 zanimljivih naslova vijesti na jednoj stranici. U nekom trenutku osnovna funkcionalnost prototipa bila je spremna, jedino što je nedostajalo je potvrdni okvir pored zadatka “Dizajn” Izjava problema Da biste dobili lijepo korisničko sučelje bez svladavanja magije dizajnera (imate samo osnovne poznavanje paint-a) i programer (samo osnovno znanje html-a i css-a) .
Stranica se sastoji od sljedećih elemenata

• Ime
• Obrazac za slanje linka na vijest
• Obrazac za slanje jedinstvenog koda čitatelja e-mailom
• Jedinstveni obrazac za unos koda čitača
• Popis vijesti grupiran po datumu (datum, vrijeme, naslov-link, broj klikova, vijest se može čitati ili nova)
• Link na rss
• Veza na chrome proširenje
• izdati id
• povratna e-pošta

Proces Nakon nekoliko dana opuštene potrage za gotovim predloškom (css predloškom), došao sam do zaključka da to nije put pravog Jedija, jer... sve što je prošlo estetski filter zapelo je u tehničkom filteru (pogledajte izjavu o problemu, 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 vezu, navest ću glavne elemente za koje postoje gotovi stilovi (ponekad nekoliko):

Standardni elementi html oblikovanja

Popisi

Isječci koda

Stolovi

Obrasci

Gumbi

Elementi navigacije

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 s popisa koristio elemente 1,4,5 i 7. Dakle, korak 1. Povežite Bootstrap. Preuzmite i raspakirajte arhivu s Bootstrapom u korijensku mapu naše stranice, povežite css:
... ...
Drugi redak je potreban za automatsku prilagodbu sučelja uređajima koje podržava Bootstrap Korak 2. Dizajnirajte “meso”. Pod "mesom" mislim na listu vijesti. Najlakši način da to učinite je korištenje tablice s onemogućenim okvirima. Prvi stupac je datum (samo jednom po grupi), drugi stupac je vrijeme, treći je naslov i broj prijelaza. Sve ovo, prema Bootstrap pravilima, treba biti upakirano u kontejner:

(Datum od)

(Vrijeme)

(Naslov) ((Broj prijelaza))

Za pročitane vijesti označavamo posebnu klasu:
(Naslov) Korak 3. Obrazac za slanje linka na vijest. I ovdje je sve jednostavno, Bootstrap nudi nekoliko gotovih stilova obrasca: obični obrazac, jednoredni obrazac, obrazac za pretraživanje... Treba nam drugi, dodajte ga u naš spremnik ispred tablice:
Dodati ...
class="span10" - Bootstrap pretpostavlja izgradnju sučelja temeljenog na mreži od 12 stupaca; naši se elementi mogu poravnati duž nje. Znanstvenom metodom pokušaja i pogreške došao sam do širine polja za unos jednake 10. Korak 4,5,6. Policajac. Moje ideje o tome kako bi trebala izgledati user-friendly web stranica sugeriraju minimalistički stil: sve nepotrebno je skriveno, sve što se nije moglo sakriti je blijedo. Obrasce skrivamo u padajućem izborniku, poveznice na rss i chrome ekstenziju činimo blijedima. Sve to pakiramo u zaglavlje koje lijepimo na vrh stranice (class = “navbar navbar-fixed-top”):
***

• rss
• kromirani nastavak

• Vaš jedinstveni kod čitatelja (Kod)
  • Pošalji e-poštom
  • Unesite drugi kod

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

Odustani od slanja × Unesite jedinstveni kod čitača

Omogućuje sinkronizaciju čitanja vijesti na različitim računalima.

Odustani od slanja

Važna točka. Da bi ovo radilo, morate povezati nekoliko skripti:
...

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

puštanje 2012/02/19 23:49 *****

RezultatEpilog Twitter Bootstrap je omogućio da se bez puno truda i znanja, bez ispisivanja i jedne linije CSS-a i bez puno razbijanja html koda, dobije vrlo lijep prototip sučelja kojeg se ne sramite pokazati ljudima. Ako ste zainteresirani, u sljedećem članku ću vam reći kako, bez dubokog poznavanja PHP + MySQL (samo osnovnim vještinama programiranja), možete implementirati funkcionalnost koja vam omogućuje da svoju ideju od milijun dolara prikažete ne samo na papiru, već u obliku radnog prototipa.
Hvala na pozornosti!
UPD: Ne želim ukloniti temu u "Ja sam PR", uklonio sam sve nepotrebne linkove

Ljudi, mislim da je Bootstrap jako cool stvar. Zašto je to tako pokušat ću objasniti u ovom članku. Pa krenimo, odmah se ispričavam što je gotovo cijela prva polovica članka napisana bez slika, postoji samo teorija, objašnjenje kako grid radi. Ali ovo je jako važno! Tko god od vas treba, uzet će je u ruke, pročitati i, nadam se, razumjeti. Druga polovica članka već se percipira jednostavnije, ima više primjera sa snimkama zaslona.

Bootstrap - što je to?

Pa počnimo s važnim pitanjem. Bootstrap je CSS i JS okvir, u biti skup datoteka s gotovim pisanim kodom. Cilj programera gotovo svakog okvira je pojednostaviti razvoj web stranice za sebe i druge koji će imati pristup alatu. U slučaju Bootstrapa, on je potpuno besplatan, tako da ga možete koristiti na bilo koji način, uređivati ​​izvorni kod i prilagođavati framework kako god želite. Savršeno je.

Instaliranje Bootstrapa

Ako samo trebate povezati datoteke okvira s HTML dokumentom (na primjer, za vježbu), jednostavno preuzmite okvir sa službene web stranice getbootstrap.com, kopirajte njegove datoteke u projekt i povežite one koje trebate. Dopustite mi da dam kratak pregled ovih datoteka:

bootstrap.css i bootstrap.min.css - nekomprimirane i komprimirane verzije CSS koda okvira. Preporučljivo je uključiti komprimiranu datoteku uz vaš radni projekt, na taj način ćete malo poboljšati brzinu učitavanja. Ali ako planirate vidjeti kod u datoteci, povežite nekomprimiranu verziju.

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

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

Ovo je standardni skup okvira. Zapravo, možete ga jednostavno prilagoditi i promijeniti kako vama odgovara. Na primjer, nemojte uopće koristiti skripte ili povezati samo jednu mrežu. Općenito, o tome ćemo također razgovarati.

Ruska Bootstrap dokumentacija

Kada posjetite getbootstrap, vjerojatno ste primijetili da je sve ovdje na engleskom. Dobro bi nam došla ruska pomoć oko okvira. Lako ga je pronaći. Da biste to učinili, idite s glavne stranice na odjeljak Prvi koraci. Pomaknite se do samog dna, bit će poveznica na prijevode. Tamo potražite 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 točno, tako da ćete sve razumjeti.

Bootstrap rešetka

Što god rekli, glavni element Bootstrapa je responsive grid. Općenito, bez njega okvir bi izgubio gotovo svu svoju vrijednost, jer zahvaljujući rešetki možete brzo izraditi prilagodljive predloške. U isto vrijeme, možda uopće niste upoznati s medijskim upitima; ne trebaju vam jer okvir brine o implementaciji prilagodljivosti; samo trebate dodijeliti ispravne klase blokovima.

Kakvi su to razredi? 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 s mrežom?

Zamislite to kao html tablicu. Ako ste ikada pisali HTML kod za tablice, znate da se sav sadržaj nalazi u oznaci tablice, jedan red se stavlja u oznaku tr, a zatim se u njega smještaju ćelije - td .

Dakle, sve je slično u mreži. Klasa spremnika služi kao opći spremnik za mrežu. Postoje 2 opcije za bootstrap rešetku - potpuno gumena i još uvijek ograničene maksimalne širine. Dakle, kada opći blok dobije klasu kontejnera, stranica će imati maksimalnu širinu od 1170 piksela. Neće se dalje širiti. Naravno, sadržaj će biti centriran.

Ako postavite klasu spremnika-tekućine, 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 pri izradi web stranice je odlučiti kakav će predložak biti - potpuno gumeni ili njegovu širinu ipak treba ograničiti.

Sjajno, spremnik bi trebao sadržavati red rešetke. U njega trebate smjestiti sve blokove koji se nalaze na jednoj liniji. To jest, ako uzmemo najtipičniji predložak: zaglavlje, glavni dio, desni stupac i podnožje, tada postoje 3 stupca. Prvi će imati samo zaglavlje, drugi će imati sadržaj i bočnu traku, a posljednji će imati podnožje. Oznaka za takvu stranicu bila bi otprilike ova:

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

Ali za sada je ovo pogrešna oznaka, jer nedostaje... što? Tako je, stanice! U slučaju Bootstrapa, oni se također nazivaju stupcima. Bootstrap rešetka se sastoji od 12 stupaca. Može se ugraditi u bilo koji blok bilo koje širine, najmanje 1200 piksela, najmanje 100. Sve je to zato što širina stupaca nije određena u pikselima, već u postocima.

Kako funkcionira ovaj sustav od 12 stupaca?

Dakle, došli smo do najvažnijeg pitanja vezanog uz okvir. Vjeruj mi, ako ovo razumiješ, sve ostalo je besmislica. Glavna stvar je razumjeti kako mreža funkcionira i put do brzog prilagodljivog izgleda bit će vam otvoren.

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

Usput, sami stupci su u Bootstrapu označeni klasom col-, ali ovo je složena klasa, tako da nikada jednostavno ne pišu col-. Bootstrap ima 4 posebne klase koje su dizajnirane za kontrolu veličine blokova različitih širina, evo ih:

ld - za velike zaslone, širine veće od 1200 piksela (stolna računala);

md - za srednje zaslone, širina od 992 do 1199 (računala, netbook);

sm - za male zaslone, širina od 768 do 991 piksela (tableti);

xs - ekstra mali zasloni, širine manje 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 postoji točno 12 stupaca.

Zaglavlje Sadržaj bočne trake Podnožje

Prilično je lako razumjeti. Prije svega, kreiramo zaglavlje; ono uopće ne mora biti postavljeno u rešetku, jer će u svakom slučaju zauzimati 100% širine (obično). Ali svejedno ćemo ga staviti. Što je ova klasa col-md-12? Kao što sam vam već rekao, nitko ne piše jednostavno col-, ovom klasom u biti govorimo pregledniku:
Ovo je ćelija | stupac
Na srednjim uređajima (md klasa), njegova širina bi trebala biti 12 stupaca od 12, odnosno 100% širine reda.
Ali što je sa širinom na drugim uređajima? Na velikim (lg) ekranima također će biti 100%, jer su vrijednosti za velike ekrane naslijeđene, ali za manje nisu. Jednostavno je: ako ste napisali col-xs-4 , onda bi širina stupca bila 33% na svim uređajima, a ako col-lg-4 , onda samo na velikima. Ovo je značajka, zapamtite je.

Pa, ako vrijednost širine nije spremljena na manjim zaslonima, što se onda događa? Ponovno se postavlja. Evo kako se to događa:
col-sm-4 - na malim ekranima blok će zauzimati 33% širine, tako će biti i na md i lg ekranima, ali na xs, odnosno onim najmanjim, širina će se vratiti na 100%. Dakle, zapamtite još jedno jednostavno pravilo: ako ništa nije određeno za manje zaslone, tada će na njima blok biti prikazan u 100% širini.

Bočna traka sadržaja

Mi u biti govorimo pregledniku:
Neka sadržajni blok bude širok 8 od 12 stupaca 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%. To je točno; obično se na mobilnim uređajima web-mjesta pojavljuju u 1 stupcu.
Neka bočni stupac bude jedna trećina širine retka na istim malim, srednjim i velikim zaslonima. Pa, na najmanjim, kao što ste već shvatili, njegova širina također se vraća na 100%. Tako je jednostavno.

Pa, nema se što baviti podnožjem. Pa, pokrili smo osnovne principe rada mreže, ali još moramo vidjeti kako radi...

Bootstrap ugniježđena mreža

Činjenica je da smo sada predložak podijelili samo na glavne blokove, ali iznutra se mogu podijeliti i na stupce. Na primjer, sadržaj može prikazivati ​​proizvode u nekoliko stupaca. Što da napravim? Vrlo je jednostavno - iznutra stvaramo potpuno istu mrežu. Bit će ugniježđen, ali također sadrži 12 stupaca. Ako sve ovo sumiramo, dolazimo do sljedećeg zaključka:
Unutar svakog bloka može biti neograničen broj rešetki. Na primjer, u bloku s proizvodima postoji rešetka za odvajanje proizvoda, u samom bloku s jednim proizvodom možete napraviti drugu rešetku, na primjer, za odvajanje cijena, informacija o dostupnosti i dodatnih informacija. informacija.

Sada ćemo pokušati napraviti još jednu rešetku unutar bloka sadržaja kako bismo proizvode rasporedili u 3 stupca. Dakle, uzmimo blok u kojem imamo sadržaj:

Sadržaj

I u njemu pišemo:

Katalog proizvoda: Naziv proizvoda

Opis proizvoda

Kao što vidite, stvorili smo novu rešetku unutar sadržaja - unutra smo stavili red, au retku će već biti 3 bloka s proizvodima. Samo kopirajte blok col-sm-4 s karticom proizvoda i zalijepite ga još 2 puta, ovo ćete dobiti (možete uzeti bilo koju sliku proizvoda, ja sam snimio veliku):

Propustio sam još jednu važnu točku: da bi se slike prilagodile blokovima u kojima se nalaze, svakoj od njih treba dati klasu img-responsive. Ako vi, poput mene, mislite da je ovo nezgodno raditi, onda samo napišite u svom stilu.css ovako:

Slika (maks. širina: 100%; visina: automatski; prikaz: blok; )

To je to, spremite ovaj kod i povežite svoju css datoteku s projektom. Sada će slike prema zadanim postavkama biti prilagodljive.

Pa, je li ispalo sasvim glatko? Da, ali bez bootstrapa morali biste dulje patiti. Jedina stvar je da kada stvarate rešetku unutar bilo kojeg bloka, više ne morate stvarati blok s klasom spremnika u njemu. Zašto ovo nije potrebno? Da, jer blok u kojem se stvara grid služi kao spremnik.

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

Responzivni uslužni programi

Ovo je još jedna sjajna značajka bootstrapa. Sastoji se od činjenice da možete sakriti ili učiniti vidljivim sve blokove širine koja vam je potrebna. Na primjer, potpuno sakriti bočni stupac na uskim zaslonima, dodati neke nove elemente na mobilnim uređajima, dodati stupac na širokim zaslonima itd.

Postoji mnogo mogućnosti primjene, ali nisam vam rekao ono najvažnije: kako koristiti te 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

Što će klasa hidden-xs učiniti u ovom slučaju? Sakrit će podnožje na iznimno malim uređajima. Na svim ostalim blok će biti vidljiv.

Ako ga, naprotiv, trebate prikazati samo na najmanjim zaslonima, trebate koristiti klasu visible-xs-block. U tom će slučaju blok biti skriven na svim zaslonima osim na najužim. Dakle, prilagodljive klase korisnosti su napisane ovako:

Riječ skrivena ili vidljiva, ovisno o tome što trebate

Kratica xs, sm, md ili lg koja označava na kojim zaslonima treba sakriti ili prikazati blok.

Za visible također trebate dodati jednu od tri vrijednosti: block - prikazati element kao blok element, inline-block - kao inline-block element, inline - inline.

Pa, par primjera da bude jasnije:

hidden-xs hidden-lg - sakrit će element na najmanjem i najvećem ekranu. 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 posebno malim bit će to mala slova, a na srednjima to će biti blok.

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

Ovako to sve funkcionira. Upravo tako i nikako drugačije. Nadam se da razumiješ ovo. Provedimo to u praksi. Imamo testni predložak, iako vrlo primitivan.

Zadatak: na malim ekranima nestati bočni stupac, a na najmanjim ekranima također jedan proizvod. I tako da su na xs uređajima proizvodi već u 2 stupca, a ne u 3.

Pokušajte to učiniti sami, uređujući samo html kod. Što treba učiniti? Prvo, pogledajmo stupac, da biste ga sakrili na sm ekranima, samo mu trebate dodati skrivenu-sm klasu.

Super, sada treći proizvod treba dodati skrivenu-xs klasu i ona će nestati na najmanjim ekranima. Pa, klase preostala dva dobra bit će kako slijedi:

Odnosno, na srednjim uređajima blok će zauzimati 4 stupca od 12, što se može prevesti u 33,33% širine, a na izuzetno malim uređajima - 50%. A budući da će jedan blok s proizvodom nestati na ovoj širini, oba bloka s proizvodima bit će uredno posložena u 1 red, ovako:

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

Pomakni me do kraja

Zatim ć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 ne zauzima cijelu širinu. A vaš zadatak je poravnati ga u središte. To je lako učiniti ako imate na umu da radite sa sustavom od 12 stupaca.

Ostavimo jedan blok s proizvodom:

Dovoljno je napraviti jednostavne izračune da shvatite koliko trebate pomaknuti blok da biste ga centrirali. Na srednjim i velikim ekranima potrebno ga je pomaknuti 4 stupca ulijevo, a na malim 3 stupca. Ovako to izgleda:

Klasa col-md-offset-4 kaže: na srednjim i velikim zaslonima, pomaknite blok ulijevo za 33% širine nadređenog spremnika (1/3 lijevog pomaka, 1/3 širine bloka, ⅓ desnog pomaka, što rezultira centriranjem).
Klasa col-xs-offset-6: Na iznimno malim i malim zaslonima, pomak ulijevo za 25% (¼ ispuna lijevo, ½ širine bloka, ¼ ispuna desno).

Nadam se da razumijete bit i da koristite ove klase ako je potrebno.

Bootstrap komponente i primjeri njihove uporabe

Čestitam ti. Upravo smo obradili najvažniju temu vezanu uz framework. Važna je mreža i rad s njom. Rad s komponentama već znači da jednostavno odete u dokumentaciju, tamo kopirate kod željene komponente i po potrebi ga promijenite prema svojim potrebama. Ali ipak ću u nastavku dati neke primjere kako koristiti komponente.

Brzo plutanje i otkazivanje omota

Klase povuci-lijevo i povuci-desno omogućuju vam da brzo učinite bilo koji blok plutajući tako da ga pošaljete ulijevo ili udesno. Ne zaboravite na otkazivanje toka. Za ovo možete koristiti klasu clearfix.

Bootstrap: vodoravni responzivni (mobilni) izbornik

Dodat ćemo sljedeće komponente izravno u predložak, pa ako želite raditi s kodom, a ne samo čitati, slijedite sve korake nakon mene.

Zapravo, s Bootstrapom možete vrlo lako napraviti ne samo adaptivni izbornik, već tzv. mobilni, koji je na malim ekranima potpuno sažet i skriven ispod jedne tipke. Ova se tehnika može vidjeti u mnogim responzivnim predlošcima i zapravo ju je vrlo jednostavno implementirati. Primjer koda mobilnog izbornika nalazi se u dokumentaciji, uzet ću ga odande i malo ponoviti.

Dakle, prvo što ću učiniti je ukloniti blok sa zaglavljem, jer će naš izbornik, zapravo, biti zaglavlje u slučaju mog predloška. Kod izbornika mora se postaviti prije cjelokupnog sadržaja stranice, čak i prije bloka spremnika. Zašto? Da, sada ćete sami vidjeti da je mreža već ugrađena u navigacijsku traku. Evo koda:

Logo/naziv gumba za prebacivanje

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

traži

Nemojte se uznemiriti činjenicom da postoji mnogo koda. Ovako stranica sada izgleda:

Ali ako vaš izbornik ne zauzima cijelu širinu zaslona, ​​ima smisla centrirati ga. Da biste to učinili, tada biste trebali izraditi dodatni omotni blok za izbornik, koji bi trebao biti postavljen nakon bloka s klasom kontejner-fluid. Ne zaboravite zatvoriti ovaj blok. Dao sam mu klasu navbar-wrap. Evo stilova za to:

To jest, možete jednostavno ograničiti širinu i centrirati je. Ili prvo zamijenite spremnik-tekućinu s spremnikom .

Kao što vidite, u izbornik smo dodali logotip, dvije jednostavne stavke, padajuću stavku i obrazac za pretraživanje. Odnosno bilo je mnogo elemenata. Izbornik možete jednostavno prilagoditi sebi tako da mu dodate vlastite razrede. Ali za sada mi je cilj jednostavno pokazati vam ovu komponentu.

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

Kao što vidite, jelovnik se srušio. Otvara se klikom na gumb u gornjem desnom kutu. Na ekranu je ostao samo logo.

Padajući izbornik

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

Oprema za vježbanje

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

Dakle, spremnik za padajuću stavku je obična stavka popisa s padajućom klasom. Unutar njega nalazi se glavna poveznica, klikom na koju se otvara padajući izbornik. Vrlo je važno dodijeliti mu data atribut, koji vidite u kodu, bez njega ništa neće raditi. Također biste trebali provjeriti je li datoteka bootstrap.js povezana s web stranicama.

Raspon s klasom umetanja nije ništa više od strelice, zahvaljujući kojoj možete razumjeti da je stavka padajuća stavka, a ispod samog izbornika formira se pomoću standardnog popisa s grafičkim oznakama. To je to, sve je vrlo jednostavno, možete koristiti ovaj kod za implementaciju padajućih stavki.

Dodavanje Breadcrumbs (Breadcrumbs) Koristeći Bootstrap

U mnogim trgovinama možete pronaći takozvani blok krušnih mrvica, koji sadrži puni put do trenutne stranice. Ovo je također lako učiniti pomoću okvira, pogledajte kod:

Dom

Katalog

Roba

Zapravo, dovoljno je navesti klasu putanje za numerirani popis i u njega unijeti uobičajene stavke popisa. Usput, centrirati ću naslove druge razine u predlošku (ovo treba napisati u css):

H2( poravnanje teksta: središte; )

Ako želite nekako promijeniti izgled prelaza, samo upotrijebite selektor .breadcrumb u CSS-u. Na primjer, ovako možete ukloniti boju pozadine:

Breadcrumb (pozadina: prozirna; )

Ovako stranica sada izgleda:

Bootstrap tablice

Prema zadanim postavkama, tablica će se protezati preko cijelog prozora, stoga je zamotajte u okvir s ograničenom širinom kako biste ograničili dimenzije. Po defaultu izgleda užasno, ali ako dodate klasu tablice u oznaku tablice, sve će biti puno ljepš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 stolova. Već sam napisao poseban članak o tome kako napraviti prilagodljivi stol, pa ga neću ponavljati. Jedino što u retke i ćelije tablice možete dodati i klase kao što su info, uspjeh, upozorenje i druge kako biste ih obojali u željenu boju.

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

Poanta

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

Svijet besplatnih programa i korisnih savjeta
2024 whatsappss.ru