Aranjați un proiect web cu Bootstrap 2.0

Sarcina principală la crearea unui site web este de a planifica designul pentru a crea structura cu xhtml și css pentru a defini spațiile de conținut, pentru a ne ajuta în această sarcină există cadre standard precum 960gs sau Bootstrap.
În acest caz, voi vedea Bootstrap care a fost dezvoltat și utilizat de Twitter.
Bootstrap este un cadru conceput pentru a simplifica procesul de creare a proiectelor web. Pentru aceasta, oferă un set de clase CSS și fișiere Javascript deja programate, care permit dezvoltarea unor sarcini precum:

• Design web care funcționează în browserele actuale, fără a fi nevoie să faceți multe modificări.

• Un design web care poate fi vizualizat corect pe diferite dispozitive și la diferite scări și rezoluții.

• O mai bună integrare cu cele mai frecvent utilizate biblioteci, cum ar fi jQuery.

• Un design solid bazat pe instrumentele și standardele actuale, cum ar fi CSS3 / HTML5

Vom începe un exemplu prin descărcarea cadrului http://getbootstrap.com/2.3.2/

Dezarhivăm fișierul și vom vedea 2 directoare cu componentele bootstrap
Creăm un fișier index.html pe care îl vom explica.
Creăm un html cu componentele de bază:

 Proiectați cu Bootstrap / * Aici va merge conținutul * / 

Bootstrap scufundă structura de 980px în 12 coloane de 60 de pixeli pentru a pune conținut. Blocurile care pot fi create merg de la 1 la 12 folosind clasa spanx, astfel încât span1 va fi un bloc de 60 de pixeli. Un exemplu al tuturor blocurilor de conținut pe care le putem avea.

Vom crea o structură de bază a unui antet web, coloană stângă, conținut, subsol. Toate clasele vin deja în cadre

// cadrul general al containerului// definește începutul unui rând de blocuri// 12 blocuri de coloane egale cu 980px pentru antet;// 2 blocuri de coloane egale cu 120px pentru coloană;// 10 blocuri de coloane egale cu 600px pentru conținut;// 12 blocuri de coloane egale cu 980px pentru subsol;

MARI

Componente pentru a crea un meniu
În partea de antet puteți introduce un meniu listă cu clasele navbar pentru a crea un meniu:

// 12 blocuri de coloane egale cu 980px pentru antet;

Subiectul 1
Subiectul 2
Tema 3

Deci, putem vedea meniul nostru gata fără a fi nevoie să ne ocupăm de css.

MARI

Apoi, dacă doriți să extindeți bootstrap-ul prin crearea propriilor reguli css, creăm un alt fișier default.css și acolo punem codul nostru în acest fel, apoi adăugăm clasa noastră în codul de exemplu:

Creăm un conținut în coloana de conținut

// 10 blocuri de coloane egale cu 600px pentru conținut;
Creăm conținut cu Bootstrap pentru a explica tutorialul
// un paragraf gol este același cu lăsarea unei linii sau a unui spațiu Vezi Bootstrap

Rezultatul la reîmprospătarea exemplului nostru va fi:

MARI

Exemplul nu este un site web complet sau cu o estetică apreciabilă, dar, după cum putem vedea cu puțin efort, putem face o demonstrație sau putem crea șabloane fără a fi nevoie de mai mult decât un editor de text și să economisim multă muncă cu întreaga platformă standardizată.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv

Te-a ajutat acest tutorial?

Dacă nu

AJUTĂ LA ÎMBUNĂTĂȚIREA ACESTUI TUTORIAL!

Crezi că poți corecta sau îmbunătăți acest tutorial? Puteți trimite ediția cu modificările pe care le considerați utile.
0 utilizatori au editat acest tutorial. Editați și deveniți un expert recunoscut!
Editați acest tutorial

TUTORII SIMILARE

Bara orizontală cu efect de hover în html5, css3 și bootstrapObțineți coordonatele clientului cu API-ul Google Maps în JavaScript (HMTL5, CSS3 și Bootstrap)Învățând să realizăm o prezentare de diapozitive receptivă cu HTML5 + BootstrapDezvoltare avansată a interfeței web Bootstrap FrameworkExtinderea BootstrapNetbeans: creați proiecte HTML5 cu șabloane și pluginInterfețe utilizator bootstrapUtilizarea componentelor Bootstrap

Fără comentarii, fii primul!

Nu mai așteptați și intrați în SolveticLasă-ți comentariile și profită de contul de utilizator Alătură-te nouă!

• Creează contÎnscrieți-vă GRATUIT pentru a avea contul SolveticInregistreaza un cont
• IdentificaAi deja un cont? Conectați-vă aiciIdentifică-mă în contul meu