Lag et webprosjekt med Bootstrap 2.0

Hovedoppgaven når du oppretter et nettsted er å utforme designet for å lage strukturen med xhtml og css for å definere innholdsrommene, for å hjelpe oss i denne oppgaven er det standardrammer som 960gs eller Bootstrap.
I dette tilfellet vil jeg se Bootstrap som er utviklet og brukt av Twitter.
Bootstrap er et rammeverk designet for å forenkle prosessen med å lage webdesign. For dette tilbyr den et sett med CSS -klasser og Javascript -filer som allerede er programmert, som tillater utvikling av oppgaver som:

• Webdesign som fungerer i nåværende nettlesere, uten å måtte gjøre mange endringer.

• Et webdesign som kan sees riktig på forskjellige enheter og i forskjellige skalaer og oppløsninger.

• Bedre integrasjon med de mest brukte bibliotekene, for eksempel jQuery.

• En solid design basert på gjeldende verktøy og standarder som CSS3 / HTML5

Vi starter et eksempel med å laste ned rammeverket http://getbootstrap.com/2.3.2/

Vi pakker ut filen, og vi vil se 2 kataloger med bootstrap -komponentene
Vi lager en index.html -fil som vi vil forklare.
Vi lager en html med de grunnleggende komponentene:

 Design med Bootstrap / * Her går innholdet * / 

Bootstrap dykker 980px -strukturen i 12 kolonner med 60 piksler for å sette innhold. Blokkene som kan opprettes går fra 1 til 12 ved hjelp av spanx -klassen, så span1 vil være en 60 piksler blokk. Et eksempel på alle innholdsblokkene vi kan ha.

Vi skal lage en grunnleggende struktur for en webhodet, venstre kolonne, innhold, bunntekst. Alle klassene kommer allerede i rammene

// generell containerramme// definere begynnelsen på en rad med blokker// 12 kolonneblokker lik 980px for overskriften;// 2 kolonneblokker lik 120px for kolonnen;// 10 kolonneblokker lik 600px for innhold;// 12 kolonneblokk lik 980px for bunntekst;

FORSTØRRE

Komponenter for å lage en meny
I toppteksten kan du sette inn en liste -meny med navigasjonslinjeklassene for å lage en meny:

// 12 kolonneblokker lik 980px for overskriften;

Emne 1
Emne 2
Tema 3

Så vi kan se vår meny klar uten å måtte forholde oss til css.

FORSTØRRE

Hvis du vil utvide bootstrap ved å lage våre egne css -regler, oppretter vi en annen default.css -fil, og der legger vi koden vår slik at vi legger til klassen vår i eksempelkoden:

Vi lager et innhold i innholdskolonnen

// 10 kolonneblokker lik 600px for innhold;
Vi lager innhold med Bootstrap for å forklare opplæringen
// et tomt avsnitt er det samme som å forlate en linje eller et mellomrom Se Bootstrap

Resultatet når vi oppdaterer vårt eksempel vil være:

FORSTØRRE

Eksemplet er ikke et komplett nettsted eller med en merkbar estetikk, men som vi kan se med liten innsats kan vi lage en demo eller lage maler uten behov for mer enn en tekstredigerer og spare mye arbeid med hele den standardiserte plattformen.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng

Hjalp denne opplæringen deg?

Hvis ikke

HJELP FORBEDR DENNE VEILEDNINGEN!

Tror du at du kan korrigere eller forbedre denne opplæringen? Du kan sende utgaven din med endringene du anser som nyttige.
0 brukere har redigert denne opplæringen. Rediger og bli en anerkjent ekspert!
Rediger denne opplæringen

LIKNE VEILEDNINGER

Horisontal stolpe med sveveeffekt i html5, css3 og bootstrapFå klientkoordinater med Google Maps API i JavaScript (HMTL5, CSS3 og Bootstrap)Lære å lage en responsiv lysbildefremvisning med HTML5 + BootstrapBootstrap Framework avansert webgrensesnittutviklingUtvidelse av BootstrapNetbeans: Lag HTML5 -prosjekter med maler og pluginBootstrap brukergrensesnittBruke Bootstrap -komponentene

Ingen kommentarer, vær den første!

Ikke vent lenger og gå inn på SolveticLegg igjen kommentarene dine og dra nytte av brukerkontoen Bli med!

• Opprett kontoRegistrer deg GRATIS for å ha din Solvetic -kontoRegistrer en konto
• IdentifisereHar du allerede en konto? Logg deg på herIdentifiser meg på kontoen min