Manual privind bootstrap twitter - site-ul de design interior și în exterior, make-up site-

Cine dintre web designeri și dezvoltatori o mulțime a spus și scris despre Twitter Bootstrap. Unii un avantaj pentru dezvoltatorii cu zero cunoștințe de web design suna. În timp ce alții îl numesc o binecuvântare pentru designeri. Orice ar fi fost, Twitter Bootstrap face multe lucruri mai ușor și mai rapid.

În multe cazuri, dezvoltatorii web au o idee de-a gata, dar nu se poate ajunge la locul de muncă, deoarece acestea nu pot crea punct de vedere tehnic un proiect pentru care doresc să ia. Ei trebuie să apeleze la designeri web pentru a pune în aplicare partea de client.

Acest proces poate dura un iad de o lungă perioadă de timp și afectează grav dezvoltator, pentru care este foarte important pentru el / ea a realizat o idee cât mai curând posibil. În aceste cazuri, în ajutorul lor ca un super-erou de benzi desenate vine Twitter Bootstrap!

Twitter Bootstrap - acesta este cadrul CSS, care ajută la dezvoltarea de aplicatii web. Aceasta este una dintre cele mai usoare pana in prezent cadre CSS, care sunt utilizate în număr mare. Se presupune că nu poți avea nici un fel de cunoștințe în web design, și tot ce trebuie să faceți este să scrie doar câteva HTML-cod, în conformitate cu specificațiile Bootstrap.

Wow! Nu e grozav? Ai o grămadă de instrumente utile sunt gata pentru utilizare. Tot ce trebuie să faceți este pur și simplu inserați codul HTML corect în locul potrivit.

In acest articol voi explica cum puteți începe să utilizați Twitter Bootstrap. Pentru a face acest lucru, vă voi arăta aspectul paginii demo. Și, de asemenea, să vă spun cum puteți crea un cadru pentru propriile lor nevoi.

În primul rând trebuie să descărcați fișierul oficial bootstrap.zip pagina Twitter Bootstrap pe GitHub. Acesta conține un set de fișiere cu CSS, js și img, pe care vom avea nevoie pentru a începe pentru a crea un site pe Twitter Bootstrap. «Css» dosar conține foi de stil (pentru proiectarea adaptive și non-adaptive), precum și versiunea simplificată.

Vei utiliza versiunea minimizată pentru crearea rapidă site-ului, în cazul în care proiectul a fost finalizat, iar proiectul este gata de lansare. Folder «js» conține un fișier bootstrap.js și versiunea sa redus la minimum.

Ambele seturi sunt aproape identice, iar imaginea pe care diferă numai în schema de culori. Icoanele au fost furnizate glyphicons, care le-a dat cu amabilitate gratuit la dispoziția proiectului Twitter Bootstrap.

template-uri HTML de bază pentru a lucra în Bootstrap

Am stabilit codificarea UTF-8, pentru că în proiectul nostru, vom folosi caractere speciale, iar noi dorim ca browserul să le recunoască în mod corespunzător. Twitter Bootstrap recomandă, de asemenea, să utilizați UTF-8 pentru cea mai bună compatibilitate.

După această operație, ordinare tag-uri HTML: . și . Aceasta este de bază HTML tag-uri. Pagina index.html ar trebui să arate așa cum se arată mai jos.

Acum, avem nevoie pentru a conecta stilurile necesare conținute în fișierul bootstrap.css.

Apoi porniți fișierul Bootstrap.

Din motive de performanță de pagini web, aceste script-uri ar trebui sa fie plasat chiar înainte de închidere .

Acum, toate fișierele necesare sunt incluse. Puteți începe crearea diferitelor componente ale site-ului. Fișierul dvs. index.html ar trebui să arate acest lucru.

Cum funcționează

În primul rând, trebuie să înțelegem că Twitter Bootstrap depinde în mare măsură pe 12 ecrane. Ce fel de grila?

Să presupunem că doriți să creați două secțiuni egale a paginii index.html în interiorul corpului. Ar trebui să întrebați clasa «span6» fiecare bloc din aceste elemente. Acest lucru ar însemna că Bootstrap este de a crea două secțiuni egale, cu șase ecrane din fiecare.

Sper că acest lucru vă oferă o idee despre ceea ce funcționează Bootstrap. El are un set de clase de pre-alocate pentru fiecare element. Dacă este necesar, ar trebui să setați clasa corespunzătoare pentru fiecare dintre ele.

Pentru a face mai clar, ceea ce vom crea azi, aceasta este prima pagină demonstrație. Aruncati o privire la ea și să vină înapoi. Începem să-l construiască.

Compilație pe codul Bootstrap

Să sparge pagina demo în cinci părți principale:

Titlu;
Zona de marketing;
Stânga bara laterală;
Domeniul de conținut;
Crama.

Pentru a încheia într-o coajă tot conținutul site-ului nostru, vom crea o clasă container, care va fi amplasat pe centrul ecranului, și va fi înconjurat pe toate părțile de către alte unități.

În acest scop, există o clasă specială Bootstrap, care se numește „container“. O vom folosi ca părintele shell. Deci, du-te la codul:

Acum, în interiorul DIV container, prescriem titlul site-ului. Pentru aceasta vom folosi tag-ul antet H1.

Verificați pagina index.html într-un browser, fie frumos situat pe elementele pe care le. Acum este timpul pentru a face bara de navigare. Twitter Bootstrap definește markup pentru bara de navigare, după cum urmează:

«Navbar» ar trebui să fie de clasă specificată în principal de navigare unitatea de DIV. Trebuie să adere la marcajul de mai sus meniul de navigare pentru a se potrivi cu stilurile Twitter Bootstrap.

Plasați acest cod ușor sub tag-ul H1. Asigurați-vă că toate elementele sunt în clasa noastră coajă de bază, și anume „Container“ Deschideți browser-ul și verificați dacă meniul de navigare frumos situat.

Evident, vrei antetul diferă de standard. La sfârșitul acestei lecții, vom vedea cum vă puteți adăuga propriul stil la stilurile existente și să adăugați CSS Bootstrap, pentru a schimba designul zonei antet. Și acum trece la crearea celei de a doua parte, pe care am numit „de marketing.“

În Twitter Bootstrap are o clasă frumoasă de pre-alocate în mod specific pentru comercializare. Acesta este numit „erou-unitate“. Copiați codul de mai jos și inserați-l sub blocul de meniu de navigare.

Verificați pagina într-un browser, acesta trebuie să arate astfel:

Ei bine, nu e minunat? Fără a scrie un singur CSS nu este un fragment, ai un bloc frumos de marketing. Ei bine, să ne uităm la acest cod.

Și aici este cel mai interesant. link-uri și butoane. Puteți face oricare dintre link-urile în formă de butoane, adăugați clasa „BTN“, și apoi fixați-l la dimensiunea, adăugând câteva clase suplimentare, cum ar fi-BTN mare / BTN-mici / BTN-mini.

Pentru a schimba culorile butoanelor, se adaugă clase BTN-succes (verde), BTN-info (albastru), BTN-avertizare (galben) și BTN-pericol (roșu). Pentru mai multe informații despre butoanele și link-urile de styling puteți găsi în secțiunea Baza CSS. Aceste clase pot fi aplicate la HTML butoane elemente.

Speranța este în continuare povestea a fost interesant pentru tine. Twitter Bootstrap este atât de simplu că, chiar vă permite să nu facă nimic în interiorul CSS foile de stil. Utilizați pur și simplu instrumentele oferite de sistem. Aceasta este ceea ce face Bootstrap una dintre cele mai puternice CSS-cadre.

Acum vom merge la următoarele secțiuni. panoul din partea stângă și secțiunea de conținut. Vei vedea cum am împărțit zona în două părți inegale pe verticală, și modul în care puteți face mai multe dintre aceste segmente. După cum sa menționat mai devreme, Twitter Bootstrap reprezintă un sistem de 12 ochiuri.

Ar trebui să ne amintim întotdeauna acest lucru. Acest lucru înseamnă că puteți crea până la 12 grilă verticală în cadrul oricărui element părinte.

În acest moment, lucrăm în cadrul aceleiași clase shell nostru părinte „container“. Am împărți în două părți inegale, folosind 12 mesh. Pentru panoul din partea stângă, vom folosi clasa «span4», și pentru secțiunea de conținut, care se află la dreapta, vom folosi clasa «span8».

nume de clase reflectă esența: bara laterală din stânga va dura până la patru ecrane, iar pe partea dreapta este de a fi distribuit pe cele opt grile rămase.

Pagina ta ar trebui să arate astfel:

Ar trebui să fie două coloane separate, dispuse unele lângă altele. Acum este necesar să se gândească, în scopul de a crea plic de putere suplimentară, pe care am adăugat în sus, prin clasa «rând». Motivul este că, în mod implicit, clasele SPAN * aliniat la stânga.

Pentru a se adapta coloanele de mai jos am adăugat întregul conținut al blocului «rând». Acesta acționează ca un separator convențional în tabele. Acum trebuie să eliminați elemente stubs paragrafe din codul.

Apoi completați panoul din partea stângă o listă de elemente de navigare.

Listă de navigare ar trebui să aibă următorul marcaj:

În plus față de «nav» clasa, trebuie să adăugați o clasă «nav-list», prin care elementele de meniu de navigare va fi afișată lista. Dacă adăugați o clasă «nav-header» la orice element de «li» clasa «nav», acesta va apărea ca link-uri din titlu secțiune. Trecând mai departe, să vedem cum acum pagina noastră arată într-un browser.

Ne întoarcem la zona de conținut, vom doar umple cu ajutorul tag-uri h3 și la punctul tag-uri generale. Nu există clase suplimentare nu sunt necesare. La urma urmei, noi vrem punctele din textul care urmează să fie afișat unul sub altul. Mai jos este codul am postat în «span8».

Actualizează browser-ul dvs., atunci ar trebui să arate astfel:

După cum vedeți, suntem foarte aproape de punctul final. Trebuie doar pentru a termina subsolul paginii.
Pentru subsol, vom împărți din nou «rând» în trei părți. După cum se arată în demo. În acest moment, împărțim zona în trei părți egale, adică, folosiți «span4».

Deci, vom crea un alt bloc de «rând», direct sub «rând», pe care am creat mai devreme pentru bara laterală și zona de conținut.

Înregistrați-vă următorul cod:

Destul de simplu! Am împărțit linia în trei părți egale, cu o clasă de «span4», apoi umple fiecare dintre segmentele care utilizează etichete h4, punctul tag-uri și link-uri care arata ca butoanele. Verificați ce ne-am luat în browser.

Ar trebui să fie o imagine pic de clienții și angajații din interiorul butoanelor. Utilizați eticheta , Pentru a adăuga imagini clase înrudite, cum ar fi icon-utilizator, icon-stele, icon-sticlă, etc.

Pentru pictograme sunt albe, utilizați clasele alb-icon clasă și icon-utilizator icon-stele. Lista de clase icon puteți găsi în documentația Bootstrap, care pot fi găsite aici.

Pentru a separa ușor subsolul din zona de conținutul paginii, vom adăuga o etichetă
«Rând» între blocuri. Dupa ce am adaugat tag-ul
, Să vedem ce avem.

În plus, pentru a crea zona drepturilor de autor, vom adăuga următorul cod:

Deci, acum am creat o pagină cu totul simplu, dar destul de prezentabil de aterizare. Și în timp ce ne-am bucurat de un cadru instrument excepțional Twitter Bootstrap.

Adăugați propriile stiluri la Twitter Bootstrap

În cazul în care stilurile implicite Twitter Bootstrap tine suficient, atunci, în mod evident, necesitatea de a crea o foaie de stil nr. Dar, ca multe site-uri web utilizează aceeași bază, aceste stiluri devin comune, iar acestea pot fi vazute pe multe alte site-uri construite pe Bootstrap. Prin urmare, ar fi mai bine dacă adăugați propriile stiluri pe partea de sus a CSS Twitter Bootstrap.

Câteva componente importante ale Twitter Bootstrap

elementele evidențiate

Pentru a evidenția unele fragmente din corpul unui document lung, aveți posibilitatea să le adăugați la clasa de «plumb». Acest lucru va face fonturile pentru punctul respectiv un pic mai mult decât în restul documentului.

selecție etichete

Puteți folosi, de asemenea, pe etichetele pagina HTML de alocare de bază: cum ar fi. și . Puteți folosi, de asemenea, tag-uri și .

alinierea textului

Alinierea textului în cadrul oricăror blocuri de paragraf sau div pot fi definite folosind clase: «text stânga», «text centrul» și «text dreapta».

culoarea textului

Puteți seta culoarea textului de paragraf în mod implicit, în acest scop, diferite clase subliniind, cum ar fi «dezactivat» - gri, «text de avertizare» - roșu, «text eroare» - cafenie, «text-info» - lumină albastră și «text succes» - verde.

stiluri de tabel

Twitter Bootstrap sprijină, de asemenea, aspectul de tabelă implicit. Pentru a face acest lucru, utilizați următorul cod:

Lucrul cu imagini

Puteți adăuga imagini utilizând o etichetă convențională . Pentru modelele dvs. un aspect mai interesant, puteți adăuga clase «-img rotunjite» pentru imagini cu unghiuri zaokruglennymi, «img-cerc» pentru a defila prin imagini și «img-polaroid», pentru a crea umbră și un cadru în jurul imaginii.

Pop-up meniuri

Pentru a adăuga un meniu drop-down din bara de navigare existente (așa cum este prezentat în pagina demo), trebuie să adăugați următorul marcaj în interiorul unui element de «li».

Pentru a crea o listă verticală, trebuie să împacheteze elementul părinte cu o clasă de „un drop-down“, și apoi utilizate pentru a insera markup „o“. Apoi așezați elementul din lista elementului.

V-am arătat principiile de bază ale utilizării Twitter Bootstrap, cum să începeți cu sistemul. Acum, că știi cum funcționează, sper că va fi mult mai ușor de a lucra cu o descriere a elementelor din cadrul documentației inițiale.

După ce a studiat-o, sunteți sigur de a găsi mai multe caracteristici noi pentru aplicație.

În următorul articol vă voi spune despre crearea de site-uri adaptive, folosind Twitter Bootstrap.

Traducerea articolului «Twitter Bootstrap Tutorial - Manipularea proiectelor complexe» a fost pregătit de o echipă de proiect prietenos Web design de la A la Z.