Bootstrap 3 - cadru receptiv pentru crearea rapidă a design-ului site-urilor moderne
Este posibil să se lucreze cu HTML statice convenționale folosind oportunități Butstripa, și puteți încerca, de exemplu, creați cu un șablon unic pentru site-ul dvs. care rulează pe CMS (mai târziu vom vorbi despre crearea de template-uri pentru baza Joomla 3 Bootstrap). Cu toate acestea, nu aveți nevoie de cunoștințe speciale despre Html și CSS.
Caracteristicile Bootstrap 3 și ce este designul receptiv?
A creat acest inginer cadru și designer de la compania Twitter, deci foarte des folosiți numele "Twitter Bootstrap". Este foarte popular acum în lume, exemple de site-uri create pe acesta pot fi găsite aici. Ei bine, pe site-ul oficial al cadrului, de asemenea, există un portofoliu.
Acum vi se oferă să descărcați Bootstrap 3. care are o serie de diferențe față de versiunile anterioare:
- Acesta a fost inițial creat pentru dispozitive mobile, vizite la site-urile cu care devin tot mai frecvente. Grila noului cadru este proiectată astfel încât să personalizați mai întâi designul pentru ecrane mici și numai să-l scalați pentru mai multe dispozitive cu ecran lat.
În Buttrap 3 există doar un singur sistem de grid - receptiv (erau două: reactive și adaptive, dar funcționalitatea sa a fost semnificativ extinsă datorită unui număr mai mare de rețele de dimensiuni diferite.
Ce este designul receptiv. Faptul este că momentele în care utilizatorii au vizitat site-uri doar de la calculatoare staționare și laptop-uri, au căzut în uitare. Acum, în funcție de subiect, traficul de la dispozitive mobile poate fi de la unu la zeci de procente din total. Este deja imposibil să ignorați confortul acestor vizitatori.
Ar trebui să lucrez cu design receptiv (folosind Bootstrap sau concurenții săi)? Când ambele. Totul depinde de ce fel de problemă veți rezolva. În principiu, problema de proiectare a părții client a site-ului poate fi rezolvată în mai multe moduri:
- Cumpărați un șablon sau temă gata pentru CMS, schimbați ceva mic în el (cap, logo, culoare) și obțineți imediat rezultatul de care aveți nevoie
- Puteți angaja un designer care vă va desena un design unic și trageți-l pe site-ul dvs. Adevărat, această acțiune merită o mulțime de bani. De exemplu, am aplicat la un studio de nivel mediu, unde aproape 100 de mii de ruble au fost rugate să actualizeze design-ul blogului meu. Înțeleg că persoanele independente pot fi găsite și cu un preț mai mic, dar totul depinde de raportul preț / calitate.
Ei bine, a treia opțiune, care este un compromis între cele descrise mai sus, va fi un cadru receptiv (în special, Bootstrap). Adevărul este că, prin utilizarea sa, o parte din muncă se va face deja pentru tine. Nu va trebui să vă gândiți la anumite aspecte ale designului. Va exista deja o grilă suficient de flexibilă pentru aspectul paginii (folosind LESS CSS - un limbaj de stil dinamic).
Aspect Bootstrap puteți personaliza după gustul dvs. Acest lucru nu este adevărat atunci când spun că site-urile făcute pe acest cadru arată la fel. Totul depinde de tine - posibilitățile de a da mării o individualitate, dar mulți pur și simplu nu te deranjează cu ea.
Când se utilizează un design receptiv, codul de stil va fi cu mult mai mare și mai complex decât fără el, deoarece este necesar să se asigure multe situații diferite, cu un design diferit al stilului. În plus, va trebui să înveți principiile de lucru cu cadrul însuși. dar apoi puteți face rapid ceea ce aveți nevoie (inclusiv punerea procesului în flux). Așa cum sa spus în binecunoscutul desen animat: este mai bine să pierzi o oră și apoi să zbori în cinci minute (picioare, labele, coada). Proiectul va fi de înaltă calitate.
Acest cadru permite adăugarea simplă de clase (citiți despre atributele de clasă și id) elementelor din codul HTML pentru a le aplica un design foarte eficient. De exemplu, acesta va arăta tabelul dvs. atunci când adăugați o tabelă de tabelă în tabel:
Stilurile pentru această clasă nu trebuie prescrise, deoarece sunt deja înregistrate în fișiere de stiluri ale bootstrap-ului. Foarte convenabil și rapid. Astfel, de exemplu, puteți crea butoane în două file din etichetele de legătură normale sau folosind butoanele butoanelor, adăugând clasele necesare acestora:
Puteți folosind clase este foarte ușor de a crea un HTML listează diversele meniuri (Comenzi de navigare), liste drop-down, paginare (paginare), pop-up-uri, precum și sfaturi și multe altele pe care le puteți pe această pagină a site-ului oficial pe bază de etichete:
Ei bine, și, bineînțeles, aspectul paginilor site-ului cu un număr diferit de coloane cu ajutorul acestui cadru este literalmente jucaus - din nou, prin adăugarea obișnuită de containere a clasei necesare.
Descărcați bootstrap și examinați structura sa de fișiere
Deci, descărcați framework-ul Bootstrap 3 poate fi pe site-ul oficial - GetBootstrap.com (există, de asemenea, o oglindă neoficială rusă mybootstrap.ru unde puteți găsi o introducere detaliată în lucrul cu acest cadru).
Doar specifică faptul că fila «Personalizare» (versiunea rusă este „Change și descărcare“) puteți selecta ce componente și plugin-uri jQuery aveți nevoie, precum și pentru a schimba variabilele responsabile pentru culori, fonturi, forme, etc. lucruri. Apoi puteți să salvați toate și să descărcați Bootstrap folosind butonul de mai jos.
Cu toate acestea, cea mai bună opțiune, după părerea mea, este de a înțelege activitatea acestui cadru și de a schimba câțiva parametri în cursul lucrului. În plus, începem studiul de la zero, așa că vom avea nevoie de tot ce este disponibil în Buttrix. Deci, du-te la pagina de descărcare a pachetului standard (fila "Noțiuni de bază") și faceți clic pe butonul "Descărcare Bootstrap":
Să vedem ce se află în dosarul CSS de bootstrap. Acum există șase fișiere, deși recent au existat patru. De fapt, acestea sunt două seturi de câte trei fișiere fiecare. De exemplu, fișierul bootstrap.css și bootstrap.min.css conțin același cod CSS, dar diferă prin faptul că codul din fișierul bootstrap.css este ușor de citit, deoarece este formatat corespunzător:
Astfel, fișierul bootstrap.min.css devine un sfert din fișierul bootstrap.css fără pierderea funcționalității. Ei bine, fișierul bootstrap.css.map a apărut destul de recent în distribuția Bootstrap 3. În măsura în care îmi pot înțelege scopul, creierul meu creier - permite dezvoltatorilor să lucreze cu codul CSS comprimat în instrumentele de dezvoltare (de exemplu, Chrome sau Firefox încorporat), ca și cum nu ar fi fost comprimate. În general, un lucru noroios pe care încă nu l-am înțeles.
Același lucru se poate spune despre fișierele bootstrap-theme.css și bootstrap-theme.min.css. În cea de-a doua versiune a Buttream nu au fost. Faptul este că Bootstrap 3 vine cu așa-numitul "design plat" (fără gradienți, umbre etc.). Prin urmare, aici ați adăugat propria temă ca foi de stil suplimentare, pe care le puteți conecta separat și puteți adăuga elemente suplimentare pe site-ul dvs.
În dosarul JS există două bootstrap.min.js java script-ul de fișiere și bootstrap.js, care diferă doar prin faptul că acestea din urmă sunt eliminate din toate spațiile și sfârșiturile de linie, care este motivul pentru care codul a devenit aproape că nu poate fi citit din punct de vedere uman, dar Nu am pierdut nimic din punctul de vedere al browserului (mașină). Și, desigur, a devenit mai ușor. În plus, am ne-a găsit la locul de muncă cu Bootstrap va avea probabil să utilizeze câteva js de fișiere, dar mai mult pe care mai târziu.
Conectați fișierele de bootstrap CSS și JS la fișierul Html
Așadar, am revizuit toate fișierele care vin cu acest cadru. Acum puteți începe să o utilizați pentru a crea prima pagină HTML pentru a înțelege frumusețea acestui proces. Să luăm de exemplu un document web obișnuit, gol, cu marcaj de bază (așa-numitul "pește").
Să sperăm că, cu această structură ați experimentat deja și să înțeleagă că! Doctype ajută browser-ul pentru a înțelege modul de a interpreta codul înregistrat de mai jos și tag-uri cap și forma corpului, respectiv, „cap“ oficial (care nu este afișată pe pagina de web) și „organism“ (ce va fi afișat direct pe pagină).
Acum, în "pește" numit index.html, adăugați următoarea metatichetă (între etichetele head, de exemplu, în zona meta charset):
Mesajul de vizualizare a meta-tag-urilor include, de obicei, întotdeauna când lucrați cu un design receptiv. De ce este nevoie? Pentru a scala corect ecranul. În acest caz, nu contează ce tip de dispozitiv a venit site-ul dvs. (cu un ecran mare sau unul mic) - pagina web se va schimba în funcție de dispozitiv.
Conectați foaia de stil din dosarul Bootstrap
Apoi se va conecta la document HTML CSS fișierul nostru de la Bootstrap arsenalul prin tag-ul de serviciu hyperlink-uri Link indicând faptul că o cale în raport cu bootstrap.min.css fișierului (dimensiunea lui este mai mică).
În plus față de fișierul bootstrap disponibil în distribuția de bootstrap, vom crea un altul cu propriile noastre stiluri, care pot fi conectate imediat și înregistrate în "header" index.html.
De fapt, merită să creați un fișier manual.css gol și să îl copiați în dosarul CSS al cadrului nostru.
Ca rezultat, index.html va arăta astfel:
Conectarea bibliotecii jQuery
Acum puteți începe să vă conectați la fișierele noastre de java-script webcam. Avem nevoie de ele să aibă index.html fișier de lucru cu Bootstrap 3. Unul dintre aceste fișiere va fi JS din cadru în sine, iar celălalt va fi biblioteca jQuery. Să începem cu asta. În felul său, acesta este, de asemenea, un cadru care este folosit peste tot (în CMS, cadre de proiectare receptive și multe site-uri internet).
JQuery bibliotecă pentru a se conecta la documentul nostru HTML poate fi două moduri - fie pentru a încărca biblioteca în sine și se referă la ea sau utilizează rețeaua de livrare biblioteca jQuery (CDN). În primul caz, veți obține o garanție că funcționează site-ul dvs. până când această bibliotecă va fi întotdeauna de încărcare (nu sunt dependente de surse externe, care pot deveni potențial inaccesibile la momentul respectiv).
Avantajul conectării jQuery prin rețeaua CDN este că utilizatorul din memoria cache a browserului poate să stocheze deja fișierul acestei biblioteci. pentru că jQuery cântărește foarte decent, va permite proiectul dvs. să se deschidă mult mai rapid în browserele unor astfel de utilizatori. Rețeaua de difuzare a bibliotecii este rareori offline, astfel că probabilitatea unor probleme datorate utilizării metodei de conectare prin CDN este extrem de scăzută.
Cum pot fi implementate toate acestea în practică? Accesați pagina oficială a bibliotecii jQuery - jquery.com. Deci, dacă doriți să descărcați această bibliotecă, faceți clic pe butonul mare din partea dreaptă a ecranului.
JQuery are două versiuni - 1.x și 2.x. Pe baza browserelor acceptate acum, este probabil mai bine să folosiți prima versiune (suportă IE 8, care este încă destul de comună pe computerele utilizatorilor de rețea).
Codul pentru a apela fișierele java-script este de obicei introdus între etichetele capului. Dar acest lucru nu este complet corect. Este mai bine să apelați scripturi înainte de eticheta de închidere a corpului. De ce? Problema este că, de exemplu, apelul de fișiere de marcaj stil trebuie făcut chiar înainte sau simultan cu încărcarea de conținut care a fost afișat corect. Dar fișierele JS sunt responsabile pentru funcționalitatea paginii și nu pentru aspectul acesteia. Deci, înainte de încărcarea completă a documentului, această funcționalitate nu va fi necesară, deci nu este nevoie să împingeți apelul fișierelor de script-uri Java între etichetele Head.
Dacă, totuși, apelul JS este încă introdus în "cap", atunci va trebui să așteptați o încărcare completă a acestora pentru a vedea pagina. Va exista un sentiment de încărcare lentă a site-ului, ceea ce îi va reduce atractivitatea vizitatorilor. Dar dacă introduceți un apel jQuery în partea de jos a documentului (înainte de eticheta de închidere a corpului), toate celelalte informații vor fi încărcate în această bibliotecă. Va exista un sentiment al unui site mai rapid și mai receptiv.
Codul de apel jQuery universal (fără a descărca această bibliotecă pe serverul dvs.) folosind rețeaua de livrare bibliotecă jQuery descrisă mai sus (CDN) va arăta astfel:
Conectăm fișierul JS de bootstrap și fișierul reply.js
Ei bine, așa cum va trebui să se conecteze la JS nostru index.html un fișier din Bootstrap 3 (mai bună decât cea în care codul este comprimat pentru a reduce dimensiunea, adică cuvântul min în titlu). Acesta va arata astfel:
Probabil, este clar că, dacă doriți să încărcați biblioteca jQuery de la serverul dvs., va trebui să-l descărcați, a pus în dosarul JS și înregistra același cod exact pentru a apela pentru ea ca și pentru bootstrap.min.js. Dar, totuși, sfătuiesc să o iau de la CDN, așa cum sa arătat mai sus.
Rețineți că codul de apel bootstrap.min.js va trebui să fie plasat după apelul jQuery, deoarece depinde de această bibliotecă și trebuie încărcat înainte de aceasta.
Deci, încă mai trebuie să conectăm answer.js. Ce este? Acest script este conceput pentru a ajuta versiunile mai vechi ale Internet Explorer să înțeleagă Html 5 și să rezolve alte probleme de compatibilitate cu acest browser "ciudat". Puteți descărca acest fișier de aici - este din nou o versiune comprimată și obișnuită (ușor de citit de ochi).
Doar faceți clic pe answer.min.js și copiați codul în fereastra care se deschide. Pentru a face acest lucru, cu toate acestea, nu este atât de ușor, pentru că este o linie lungă. După părerea mea, va fi mai ușor să faceți clic pe butonul "Raw". În acest caz, pagina se va deschide numai cu codul fișierului answer.min.js, care poate fi ușor selectat și copiat apăsând pe tastatură Ctrl + A:
În fișierul index.html, conexiunea answer.min.js va arăta astfel:
Dar există o nuanță. Acest cod va trebui introdus deja în "capul" documentului, adică între capul etichetelor. pentru ca dezvoltatorii sai recomanda. În caz contrar, unele versiuni mai vechi ale Explorer, până la respond.min.js de boot, utilizatorii pot vedea în acest moment nu este conținutul stilizat (doar neformatat text și RAW). Adică să-l evite și a pus podgruzku respond.min.js înainte de a încărca o pagină web.
Ca rezultat, fișierul index.html rezultat în folderul Bootstrap 3 va arăta astfel:
Acum avem totul pentru a construi un site pe bootstrap. Avem toate scripturile și stilurile de java necesare pe care le-am conectat. Puteți începe să construiți un site.
Și aici este continuarea stânga: Sistem Grid Bootstrap 3 și cum să lucrați cu ea - Partea 2 (dar vă puteți înscrie în continuare - vor fi multe interesante și utile).
Mult noroc pentru tine! Ne vedem în curând pe paginile blogului KtoNaNovenkogo.ru
Articole similare
Trimiteți-le prietenilor: