Lay-out een webproject met Bootstrap 2.0

De belangrijkste taak bij het maken van een website is om het ontwerp op te maken om de structuur te creëren met xhtml en css om de inhoudsruimten te definiëren, om ons bij deze taak te helpen zijn er standaardframeworks zoals 960gs of Bootstrap.
In dit geval zie ik Bootstrap die is ontwikkeld en gebruikt door Twitter.
Bootstrap is een raamwerk dat is ontworpen om het proces van het maken van webontwerpen te vereenvoudigen. Hiervoor biedt het een reeks CSS-klassen en Javascript-bestanden die al zijn geprogrammeerd, die de ontwikkeling van taken mogelijk maken zoals:

• Webdesign dat werkt in de huidige browsers, zonder dat je veel wijzigingen hoeft aan te brengen.

• Een webdesign dat op verschillende apparaten en met verschillende schalen en resoluties goed te bekijken is.

• Betere integratie met de meest gebruikte bibliotheken, zoals jQuery.

• Een solide ontwerp gebaseerd op huidige tools en standaarden zoals CSS3 / HTML5

We beginnen met een voorbeeld door het framework te downloaden http://getbootstrap.com/2.3.2/

We pakken het bestand uit en we zien 2 mappen met de bootstrap-componenten
We maken een index.html-bestand dat we zullen uitleggen.
We maken een html met de basiscomponenten:

 Ontwerp met Bootstrap / * Hier komt de inhoud * / 

Bootstrap duikt de 980px-structuur in 12 kolommen van 60 pixels om inhoud te plaatsen. De blokken die kunnen worden gemaakt, gaan van 1 tot 12 met behulp van de spanx-klasse, dus span1 wordt een blok van 60 pixels. Een voorbeeld van alle contentblokken die we kunnen hebben.

We gaan een basisstructuur maken van een webkoptekst, linkerkolom, inhoud, voettekst. Alle lessen komen al in de kaders

// algemeen containerframe// definieer het begin van een rij blokken// 12-kolomsblok gelijk aan 980px voor de kop;// Blok met 2 kolommen gelijk aan 120px voor de kolom;// Blok met 10 kolommen gelijk aan 600px voor inhoud;// 12-kolomsblok gelijk aan 980px voor de voettekst;

VERGROTEN

Onderdelen om een ​​menu te maken
In het kopgedeelte kunt u een lijstmenu met de navigatiebalkklassen invoegen om een ​​menu te maken:

// 12-kolomsblok gelijk aan 980px voor de kop;

Onderwerp 1
Onderwerp 2
Thema 3

Zodat we ons menu klaar kunnen zien zonder met css te maken te hebben.

VERGROTEN

Als je dan bootstrap wilt uitbreiden door onze eigen CSS-regels te maken, maken we een ander default.css-bestand en daar plaatsen we onze code op die manier, dan voegen we onze klasse toe aan de voorbeeldcode:

We maken een inhoud in de inhoudskolom

// Blok met 10 kolommen gelijk aan 600px voor inhoud;
We maken inhoud met Bootstrap om de tutorial uit te leggen
// een lege alinea is hetzelfde als een regel of spatie achterlaten Zie Bootstrap

Het resultaat bij het vernieuwen van ons voorbeeld is:

VERGROTEN

Het voorbeeld is geen complete website of met een merkbare esthetiek, maar zoals we kunnen zien, kunnen we met weinig moeite een demo maken of sjablonen maken zonder meer dan een teksteditor en veel werk besparen met het hele gestandaardiseerde platform.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven

Heeft deze tutorial je geholpen?

Als niet

HELP DEZE TUTORIAL TE VERBETEREN!

Denk je dat je deze tutorial kunt corrigeren of verbeteren? U kunt uw editie opsturen met de wijzigingen die u nuttig acht.
0 gebruikers hebben deze tutorial bewerkt. Bewerk en word een erkende expert!
Deze zelfstudie bewerken

VERGELIJKBARE TUTORIALS

Horizontale balk met zweefeffect in html5, css3 en bootstrapKrijg klantcoördinaten met Google Maps API in JavaScript (HMTL5, CSS3 en Bootstrap)Een responsieve diavoorstelling leren maken met HTML5 + BootstrapBootstrap Framework geavanceerde webinterface-ontwikkelingBootstrap verlengenNetbeans: HTML5-projecten maken met sjablonen en plug-inBootstrap-gebruikersinterfacesDe Bootstrap-componenten gebruiken

Geen reacties, wees de eerste!

Wacht niet langer en ga naar SolveticLaat uw opmerkingen achter en profiteer van het gebruikersaccount Doe mee!

• Maak accountMeld u GRATIS aan om uw Solvetic-account te hebbenRegistreer een account
• IdentificerenHeeft u al een account? Meld je hier aanIdentificeer mij in mijn account