Rasporedite web projekt s Bootstrapom 2.0

Glavni zadatak pri izradi web stranice je raspored dizajna kako bi se stvorila struktura s xhtml i css za definiranje prostora sadržaja, kako bi nam pomogli u ovom zadatku postoje standardni okviri poput 960gs ili Bootstrap.
U ovom slučaju, vidjet ću Bootstrap koji je razvio i koristio Twitter.
Bootstrap je okvir osmišljen kako bi pojednostavio proces stvaranja web dizajna. U tu svrhu nudi skup CSS klasa i već programiranih Javascript datoteka koje omogućuju razvoj zadataka kao što su:

• Web dizajn koji radi u trenutnim preglednicima, bez potrebe za mnogo promjena.

• Web dizajn koji se može ispravno pregledavati na različitim uređajima i u različitim mjerilima i rezolucijama.

• Bolja integracija s najčešće korištenim knjižnicama, poput jQueryja.

• Čvrst dizajn temeljen na trenutnim alatima i standardima poput CSS3 / HTML5

Primjer ćemo započeti preuzimanjem okvira http://getbootstrap.com/2.3.2/

Raspakiramo datoteku i vidjet ćemo 2 direktorija s bootstrap komponentama
Izrađujemo datoteku index.html koju ćemo objasniti.
Izrađujemo html s osnovnim komponentama:

 Dizajn s Bootstrapom / * Ovdje će ići sadržaj * / 

Bootstrap je uronio strukturu od 980px u 12 stupaca od 60 piksela kako bi stavio sadržaj. Blokovi koji se mogu stvoriti idu od 1 do 12 pomoću klase spanx pa će span1 biti blok od 60 piksela. Primjer svih blokova sadržaja koje možemo imati.

Napravit ćemo osnovnu strukturu zaglavlja weba, lijevog stupca, sadržaja, podnožja. Svi razredi već dolaze u okvire

// opći okvir kontejnera// definiramo početak niza blokova// 12 stupac blok jednak 980px za zaglavlje;// 2 blok stupca jednak 120px za stupac;// 10 stupac blok jednak 600px za sadržaj;// blok od 12 stupaca jednak 980px za podnožje;

POVEĆAJTE

Komponente za izradu izbornika
U dijelu zaglavlja možete umetnuti popisni izbornik s klasama navigacijske trake za stvaranje izbornika:

// 12 stupac blok jednak 980px za zaglavlje;

Tema 1
Tema 2
Tema 3

Tako možemo vidjeti naš jelovnik spreman, a da se ne moramo baviti css -om.

POVEĆAJTE

Zatim, ako želite proširiti bootstrap stvaranjem vlastitih css pravila, stvaramo drugu datoteku default.css i tamo stavljamo naš kôd, zatim dodajemo našu klasu u primjer koda:

Mi stvaramo sadržaj u stupcu sa sadržajem

// 10 stupac blok jednak 600px za sadržaj;
S Bootstrapom stvaramo sadržaj kako bismo objasnili vodič
// prazan odlomak isto je što i ostavljanje retka ili razmaka Pogledajte Bootstrap

Prilikom osvježavanja našeg primjera rezultat će biti:

POVEĆAJTE

Primjer nije cjelovita web stranica ili s izrazitom estetikom, ali kao što vidimo uz malo truda možemo napraviti demo ili stvoriti predloške bez potrebe za više od uređivača teksta i uštedjeti puno posla sa cijelom standardiziranom platformom.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod

Je li vam ovaj vodič pomogao?

Ako ne

POMOZITE POBOLJŠAJTE OVAJ VODIČ!

Mislite li da možete ispraviti ili poboljšati ovaj vodič? Možete poslati svoje izdanje s promjenama koje smatrate korisnima.
0 korisnika je uredilo ovaj vodič. Uredite i postanite priznati stručnjak!
Uredite ovaj vodič

SLIČNI VODIČI

Vodoravna traka s hover efektom u html5, css3 i bootstrapuNabavite koordinate klijenata s API -jem za Google karte u JavaScriptu (HMTL5, CSS3 i Bootstrap)Učenje stvaranja responzivne prezentacije s HTML5 + BootstrapomBootstrap Framework napredni razvoj web sučeljaProširenje BootstrapaNetbeans: Izradite HTML5 projekte s predlošcima i dodatkomBootstrap korisnička sučeljaKorištenje Bootstrap komponenti

Bez komentara, budite prvi!

Ne čekajte više i uđite u SolveticOstavite svoje komentare i iskoristite korisnički račun Pridružite nam se!

• Stvorite računBESPLATNO se prijavite za svoj Solvetic računRegistrirajte račun
• IdentificiratiImate li već račun? Prijavite se ovdjeIdentificirajte me na svom računu