Layout et webprojekt med Bootstrap 2.0

Hovedopgaven ved oprettelse af et websted er at layoute designet til at oprette strukturen med xhtml og css for at definere indholdsrummene, for at hjælpe os i denne opgave er der standardrammer som 960gs eller Bootstrap.
I dette tilfælde vil jeg se Bootstrap, der er udviklet og brugt af Twitter.
Bootstrap er en ramme designet til at forenkle processen med at oprette webdesign. Til dette formål tilbyder det et sæt CSS -klasser og Javascript -filer, der allerede er programmeret, hvilket gør det muligt at udvikle opgaver som:

• Webdesign, der fungerer i nuværende browsere, uden at skulle foretage mange ændringer.

• Et webdesign, der kan ses korrekt på forskellige enheder og i forskellige skalaer og opløsninger.

• Bedre integration med de mest almindeligt anvendte biblioteker, f.eks. JQuery.

• Et solidt design baseret på aktuelle værktøjer og standarder som CSS3 / HTML5

Vi starter et eksempel med at downloade rammen http://getbootstrap.com/2.3.2/

Vi pakker filen ud, og vi vil se 2 mapper med bootstrap -komponenterne
Vi opretter en index.html -fil, som vi vil forklare.
Vi opretter en html med de grundlæggende komponenter:

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

Bootstrap dykker 980px -strukturen ned i 12 kolonner med 60 pixels for at sætte indhold. De blokke, der kan oprettes, går fra 1 til 12 ved hjælp af spanx -klassen, så span1 vil være en 60 pixel blok. Et eksempel på alle indholdsblokke, vi kan have.

Vi skal oprette en grundlæggende struktur for et webhoved, venstre kolonne, indhold, sidefod. Alle klasser kommer allerede i rammerne

// generel containerramme// definer begyndelsen på en række blokke// 12 kolonne blok svarende til 980px for overskriften;// 2 kolonne blok svarende til 120px for kolonnen;// 10 kolonne blok svarende til 600px for indhold;// 12 kolonne blok svarende til 980px for sidefoden;

FORSTØRRE

Komponenter til at oprette en menu
I overskriftsdelen kan du indsætte en liste -menu med navigationslinjeklasser for at oprette en menu:

// 12 kolonne blok svarende til 980px for overskriften;

Emne 1
Emne 2
Tema 3

Så vi kan se vores menu klar uden at skulle beskæftige sig med css.

FORSTØRRE

Så hvis du vil udvide bootstrap ved at oprette vores egne css -regler, opretter vi en anden default.css -fil, og der sætter vi vores kode på den måde, så tilføjer vi vores klasse i eksempelkoden:

Vi opretter et indhold i indholdskolonnen

// 10 kolonne blok svarende til 600px for indhold;
Vi opretter indhold med Bootstrap for at forklare selvstudiet
// et tomt afsnit er det samme som at forlade en linje eller et mellemrum Se Bootstrap

Resultatet ved opdatering af vores eksempel vil være:

FORSTØRRE

Eksemplet er ikke et komplet websted eller med en mærkbar æstetik, men som vi kan se med få anstrengelser kan vi lave en demo eller oprette skabeloner uden behov for mere end en tekstredigerer og spare meget arbejde med hele den standardiserede platform.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt

Hjalp denne tutorial dig?

Hvis ikke

HJÆLP FORBEDR DENNE TUTORIAL!

Tror du, at du kan rette eller forbedre denne vejledning? Du kan sende din udgave med de ændringer, du anser for nyttige.
0 brugere har redigeret denne vejledning. Rediger og bliv en anerkendt ekspert!
Rediger denne vejledning

LIGNENDE VEJLEDNINGER

Vandret bjælke med svæveeffekt i html5, css3 og bootstrapFå klientkoordinater med Google Maps API i JavaScript (HMTL5, CSS3 og Bootstrap)Lær at lave et responsivt diasshow med HTML5 + BootstrapBootstrap Framework avanceret webinterfaceudviklingUdvidelse af BootstrapNetbeans: Opret HTML5 -projekter med skabeloner og pluginBootstrap brugergrænsefladerBrug af Bootstrap -komponenter

Ingen kommentarer, vær den første!

Vent ikke længere og indtast SolveticEfterlad dine kommentarer og udnyt brugerkontoen Tilmeld dig!

• Opret kontoTilmeld dig GRATIS for at få din Solvetic -kontoRegistrer en konto
• IdentificereHar du allerede en konto? Log ind herIdentificer mig på min konto