Layout ett webbprojekt med Bootstrap 2.0

Huvuduppgif.webpten när du skapar en webbplats är att utforma designen för att skapa strukturen med xhtml och css för att definiera innehållsutrymmen, för att hjälpa oss i denna uppgif.webpt finns det standardramar som 960gs eller Bootstrap.
I det här fallet kommer jag att se Bootstrap som har utvecklats och använts av Twitter.
Bootstrap är ett ramverk som är utformat för att förenkla processen att skapa webbdesign. För detta erbjuder den en uppsättning CSS -klasser och Javascript -filer som redan är programmerade, vilket möjliggör utveckling av uppgif.webpter som:

• Webbdesign som fungerar i nuvarande webbläsare, utan att behöva göra många ändringar.

• En webbdesign som kan ses korrekt på olika enheter och i olika skalor och upplösningar.

• Bättre integration med de mest använda biblioteken, till exempel jQuery.

• En gedigen design baserad på nuvarande verktyg och standarder som CSS3 / HTML5

Vi börjar ett exempel genom att ladda ner ramverket http://getbootstrap.com/2.3.2/

Vi packar upp filen och vi kommer att se 2 kataloger med bootstrap -komponenterna
Vi skapar en index.html -fil som vi kommer att förklara.
Vi skapar en html med de grundläggande komponenterna:

 Design med Bootstrap / * Här kommer innehållet * / 

Bootstrap dyker 980px -strukturen i 12 kolumner med 60 pixlar för att lägga innehåll. De block som kan skapas går från 1 till 12 med spanx -klassen så span1 blir ett 60 pixel block. Ett exempel på alla innehållsblock som vi kan ha.

Vi ska skapa en grundläggande struktur för en webbrubrik, vänster kolumn, innehåll, sidfot. Alla klasser kommer redan i ramarna

// allmän behållarram// definiera början på en rad block// 12 kolumnblock lika med 980px för rubriken;// 2 kolumnblock lika med 120px för kolumnen;// 10 kolumnblock lika med 600px för innehåll;// 12 kolumnblock lika med 980px för sidfoten;

FÖRSTORA

Komponenter för att skapa en meny
I rubrikdelen kan du infoga en listmeny med navbar -klasserna för att skapa en meny:

// 12 kolumnblock lika med 980px för rubriken;

Ämne 1
Ämne 2
Tema 3

Så vi kan se vår meny redo utan att behöva hantera css.

FÖRSTORA

Om du vill förlänga bootstrap genom att skapa våra egna css -regler skapar vi en annan default.css -fil och där lägger vi vår kod så lägger vi till vår klass i exempelkoden:

Vi skapar ett innehåll i innehållskolumnen

// 10 kolumnblock lika med 600px för innehåll;
Vi skapar innehåll med Bootstrap för att förklara självstudien
// ett tomt stycke är detsamma som att lämna en rad eller blanksteg Se Bootstrap

Resultatet när vi uppdaterar vårt exempel blir:

FÖRSTORA

Exemplet är inte en komplett webbplats eller med en märkbar estetik, men som vi kan se med liten ansträngning kan vi göra en demo eller skapa mallar utan att behöva mer än en textredigerare och spara mycket arbete med hela den standardiserade plattformen.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng

Hjälpte denna handledning dig?

Om inte

HJÄLP FÖRBÄTTRA DENNA HANDBOK!

Tror du att du kan korrigera eller förbättra den här självstudien? Du kan skicka din utgåva med de ändringar som du anser vara användbara.
0 användare har redigerat den här självstudien. Redigera och bli en erkänd expert!
Redigera denna handledning

Liknande handledning

Horisontell stapel med sveveffekt i html5, css3 och bootstrapFå klientkoordinater med Google Maps API i JavaScript (HMTL5, CSS3 och Bootstrap)Lär dig att göra ett responsivt bildspel med HTML5 + BootstrapBootstrap Framework avancerad webbgränssnittsutvecklingFörlänger BootstrapNetbeans: Skapa HTML5 -projekt med mallar och pluginBootstrap -användargränssnittAnvända Bootstrap -komponenterna

Inga kommentarer, var den första!

Vänta inte längre och gå in på SolveticLämna dina kommentarer och dra nytta av användarkontot Gå med oss!

• Skapa kontoRegistrera dig GRATIS för att få ditt Solvetic -kontoRegistrera ett konto
• IdentifieraHar du redan ett konto? Logga in härIdentifiera mig på mitt konto