Izkārtojiet tīmekļa projektu, izmantojot Bootstrap 2.0

Galvenais uzdevums, veidojot vietni, ir izkārtot dizainu, lai izveidotu struktūru ar xhtml un css, lai definētu satura telpas, lai palīdzētu mums šajā uzdevumā izmantot standarta ietvarus, piemēram, 960gs vai Bootstrap.
Šajā gadījumā es redzēšu Bootstrap, kuru ir izstrādājis un izmantojis Twitter.
Bootstrap ir ietvars, kas paredzēts, lai vienkāršotu tīmekļa dizaina izveidošanas procesu. Šim nolūkam tas piedāvā jau ieprogrammētu CSS klašu un Javascript failu kopu, kas ļauj izstrādāt tādus uzdevumus kā:

• Tīmekļa dizains, kas darbojas pašreizējās pārlūkprogrammās, neveicot daudzas izmaiņas.

• Tīmekļa dizains, ko var pareizi apskatīt dažādās ierīcēs un dažādos mērogos un izšķirtspējā.

• Labāka integrācija ar visbiežāk izmantotajām bibliotēkām, piemēram, jQuery.

• Ciets dizains, kura pamatā ir pašreizējie rīki un standarti, piemēram, CSS3 / HTML5

Mēs sāksim piemēru, lejupielādējot sistēmu http://getbootstrap.com/2.3.2/

Mēs izpakojam failu un mēs redzēsim 2 direktorijus ar bootstrap komponentiem
Mēs izveidojam failu index.html, ko mēs izskaidrosim.
Mēs izveidojam html ar pamata sastāvdaļām:

 Dizains ar Bootstrap / * Šeit būs saturs * / 

Bootstrap iegremdējiet 980 pikseļu struktūru 12 kolonnās pa 60 pikseļiem, lai ievietotu saturu. Bloki, kurus var izveidot, mainās no 1 līdz 12, izmantojot spanx klasi, tāpēc span1 būs 60 pikseļu bloks. Visu iespējamo satura bloku piemērs.

Mēs izveidosim tīmekļa galvenes, kreisās kolonnas, satura, kājenes pamatstruktūru. Visas klases jau ir iekļautas ietvaros

// vispārējais konteinera rāmis// definējiet bloku rindas sākumu// 12 kolonnu bloks galvenei ir vienāds ar 980 pikseļiem;// 2 kolonnu bloks vienāds ar kolonnu 120 pikseļi;// 10 kolonnu bloks vienāds ar 600 pikseļiem saturam;// 12 kolonnu bloks kājenes vienāds ar 980 pikseļiem;

PALIELINĀT

Sastāvdaļas izvēlnes izveidošanai
Galvenes daļā varat ievietot saraksta izvēlni ar navigācijas joslas klasēm, lai izveidotu izvēlni:

// 12 kolonnu bloks galvenei ir vienāds ar 980 pikseļiem;

1. tēma
2. tēma
3. tēma

Tātad mēs varam redzēt savu ēdienkarti gatavu, nesaskaroties ar css.

PALIELINĀT

Tad, ja vēlaties paplašināt sāknēšanas sistēmu, izveidojot savus css noteikumus, mēs izveidojam vēl vienu noklusējuma failu.

Mēs izveidojam saturu satura slejā

// 10 kolonnu bloks vienāds ar 600 pikseļiem saturam;
Mēs veidojam saturu, izmantojot Bootstrap, lai izskaidrotu apmācību
// tukša rindkopa ir tas pats, kas atstāt rindu vai atstarpi Skatīt Bootstrap

Atsvaidzinot mūsu piemēru, rezultāts būs šāds:

PALIELINĀT

Piemērs nav pilnīga vietne vai ar ievērojamu estētiku, taču, kā redzam ar nelielu piepūli, mēs varam izveidot demonstrāciju vai izveidot veidnes, kurām nav nepieciešams vairāk par teksta redaktoru, un ietaupīt daudz darba ar visu standartizēto platformu.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu

Vai šī apmācība jums palīdzēja?

Ja nē

PALĪDZIET UZLABOT ŠO PAMĀCĪBU!

Vai jūs domājat, ka varat labot vai uzlabot šo apmācību? Jūs varat nosūtīt izdevumu ar izmaiņām, kuras uzskatāt par noderīgām.
0 lietotāji ir rediģējuši šo apmācību. Rediģējiet un kļūstiet par atzītu ekspertu!
Rediģēt šo pamācību

LĪDZĪGAS PAMĀCĪBAS

Horizontāla josla ar kursora efektu html5, css3 un bootstrapIegūstiet klientu koordinātas, izmantojot Google Maps API JavaScript (HMTL5, CSS3 un Bootstrap)Mācīties veidot atsaucīgu slaidrādi, izmantojot HTML5 + BootstrapBootstrap Framework uzlabota tīmekļa saskarnes izstrādeBootstrap pagarināšanaNetbeans: izveidojiet HTML5 projektus, izmantojot veidnes un spraudniBootstrap lietotāja saskarnesBootstrap komponentu izmantošana

Bez komentāriem, esiet pirmais!

Negaidiet un dodieties uz SolveticAtstājiet savus komentārus un izmantojiet lietotāja konta priekšrocības Pievienojieties mums!

• Izveidot profiluReģistrējieties BEZMAKSAS, lai iegūtu savu Solvetic kontuReģistrējiet kontu
• IdentificējietVai jums jau ir konts? Pierakstieties šeitIdentificējiet mani savā kontā