✅ Išdėstykite žiniatinklio projektą naudodami „Bootstrap 2.0“

Turinys

Ar ši pamoka jums padėjo?

Pagrindinė užduotis kuriant svetainę yra išdėstyti dizainą, kad būtų sukurta struktūra su „xhtml“ ir „css“, kad būtų apibrėžtos turinio erdvės, kad padėtų mums atlikti šią užduotį, yra standartinių sistemų, tokių kaip 960gs arba „Bootstrap“.
Šiuo atveju pamatysiu „Bootstrap“, kurį sukūrė ir naudojo „Twitter“.
„Bootstrap“ yra sistema, skirta supaprastinti žiniatinklio dizaino kūrimo procesą. Tam jis siūlo jau užprogramuotą CSS klasių ir „Javascript“ failų rinkinį, kuris leidžia kurti tokias užduotis kaip:

Tinklalapio dizainas, veikiantis dabartinėse naršyklėse, nereikalaujantis daug pakeitimų.

Tinklalapio dizainas, kurį galima teisingai peržiūrėti skirtingais įrenginiais ir skirtingais masteliais bei raiška.

Geresnė integracija su dažniausiai naudojamomis bibliotekomis, pvz., „JQuery“.

Tvirtas dizainas, pagrįstas dabartiniais įrankiais ir standartais, tokiais kaip CSS3 / HTML5

Pradėsime pavyzdį atsisiųsdami sistemą http://getbootstrap.com/2.3.2/

Išpakuosime failą ir pamatysime 2 katalogus su įkrovos komponentais
Mes sukuriame failą index.html, kurį paaiškinsime.
Mes sukuriame html su pagrindiniais komponentais:

 Dizainas naudojant „Bootstrap“ / * Čia bus turinys * /

„Bootstrap“, norėdami įdėti turinį, nardykite 980 pikselių struktūrą į 12 stulpelių po 60 pikselių. Blokai, kuriuos galima sukurti, yra nuo 1 iki 12, naudojant spanx klasę, taigi span1 bus 60 pikselių blokas. Visų turimų blokų, kuriuos galime turėti, pavyzdys.

Mes sukursime pagrindinę žiniatinklio antraštės, kairiojo stulpelio, turinio, poraštės struktūrą. Visos klasės jau yra įtrauktos į rėmus

// bendras konteinerio rėmas// apibrėžti blokų eilės pradžią// 12 stulpelių blokas lygus 980 pikselių antraštei;// 2 stulpelio blokas lygus 120 pikselių stulpeliui;// 10 stulpelių blokas, lygus 600 pikselių turiniui;// 12 stulpelių blokas lygus 980 pikselių poraštėje;

DIDELIS

Meniu kūrimo komponentai
Antraštės dalyje galite įterpti sąrašo meniu su naršymo juostos klasėmis, kad sukurtumėte meniu:

// 12 stulpelių blokas lygus 980 pikselių antraštei;

1 tema
2 tema
3 tema

Taigi mes galime pamatyti, kad mūsų meniu yra paruoštas, nesusidūrus su css.

DIDELIS

Tada, jei norite išplėsti „bootstrap“, sukurdami savo „css“ taisykles, sukuriame kitą numatytąjį .css failą ir ten įdedame savo kodą, tada į pavyzdinį kodą įtraukiame savo klasę:

Turinį kuriame turinio stulpelyje

// 10 stulpelių blokas, lygus 600 pikselių turiniui;

Kuriame turinį naudodami „Bootstrap“, kad paaiškintume vadovėlį

// tuščia pastraipa yra tas pats, kas palikti eilutę ar tarpą Žr. „Bootstrap“

Gaivinant mūsų pavyzdį rezultatas bus toks:

DIDELIS

Pavyzdys nėra pilnai parengta svetainė ar pastebima estetika, tačiau, kaip matome, su nedidelėmis pastangomis galime padaryti demonstracinę versiją arba sukurti šablonus, kuriems nereikia daugiau nei teksto redaktoriaus, ir sutaupyti daug darbo su visa standartizuota platforma.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką

Ar ši pamoka jums padėjo?

Jei ne

PADĖKITE TOBULINTI PAMOKĄ!

Ar manote, kad galite pataisyti ar patobulinti šią mokymo programą? Galite išsiųsti leidimą su pakeitimais, kurie, jūsų nuomone, yra naudingi.
0 vartotojų redagavo šią mokymo programą. Redaguokite ir tapkite pripažinta eksperte!
Redaguokite šią mokymo programą

PANAŠŪS PAMOKOS

Horizontali juosta su užvedimo efektu html5, css3 ir įkrovos juostojeGaukite klientų koordinates naudodami „Google“ žemėlapių API „JavaScript“ (HMTL5, CSS3 ir „Bootstrap“)Mokymasis sukurti reaguojančią skaidrių demonstraciją naudojant HTML5 + „Bootstrap“„Bootstrap Framework“ pažangios žiniatinklio sąsajos kūrimas„Bootstrap“ pratęsimas„Netbeans“: kurkite HTML5 projektus naudodami šablonus ir papildinį„Bootstrap“ vartotojo sąsajos„Bootstrap“ komponentų naudojimas

Be komentarų, būk pirmas!

Nelaukite ilgiau ir įeikite į „Solvetic“Palikite savo komentarus ir pasinaudokite vartotojo abonementu Prisijunkite prie mūsų!

Sukurti paskyrąUžsiregistruokite NEMOKAMAI, kad gautumėte „Solvetic“ paskyrąUžregistruokite paskyrą
NustatykiteAr jau turite paskyrą? Prisijunk čiaNustatykite mane savo paskyroje