Bootstrap 2.3.2: Aan de slag-gids

Bootstrap is een CSS-framework dat in het hele netwerk erg populair is geworden. Hun stijlen responsive worden gezien op sociale netwerken Tuenti y Twitter​ Het gebruik hiervan bespaart ons veel tijd bij het ontwikkelen van een webtoepassing, omdat het ons al het werk en de moeite bespaart die nodig is om een ​​schoon pagina-opmaakprofiel te creëren dat geschikt is voor alle apparaten. Als we de stijlen raadplegen die in dit raamwerk worden gebruikt, zullen we ons realiseren dat ze ons bekend voorkomen, aangezien veel websites het tegenwoordig hebben geïmplementeerd.

De structuur

Om onze website toegankelijk te maken vanaf mobiele telefoons en tablets, zullen we de vloeiende structuur moeten gebruiken die Bootstrap ons biedt. Het gebruik van deze structuur is heel eenvoudig, alles is gebaseerd op elementen span dat zal ons helpen indeling ons webdesign. Later, wanneer we toegang krijgen tot dit ontwerp vanuit een smartphone o tablet, dit zal zich automatisch aanpassen aan het genoemde apparaat en de kwaliteit van de navigatie aanzienlijk verbeteren. We zullen de span met klassen in logische indelingen binnen de vloeiende structuur, d.w.z.:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Waar het cijfer 2 de grootte van de overspanning vertegenwoordigt. Elke rij heeft genoeg ruimte voor 12 overspanningen van maat 1, of 2 van maat 6, deze kan naar eigen wens worden verdeeld. Zodra de ruimte van een rij wordt overschreden, gaat deze automatisch naar de volgende rij, waardoor we een span maat 12 om een ​​regeleinde te maken. Als we wat wilden overslaan span bij het maken van een, dat wil zeggen, begin bij 4 span, en een maat van 3 toepassen, zouden we deze code gebruiken:

<div class="span2 offset4">Contenido</div>

Hierdoor kan de divisie vier springen overspanningen voordat u de inhoud weergeeft. We kunnen dit naar eigen goeddunken gebruiken en met onze code overslaan wat we willen.

Ander ontwerp voor elk apparaat

Om voor elk type apparaat een ander ontwerp toe te passen, zullen we elke logische indeling vertellen voor welk apparaat het is gericht, met behulp van de volgende klassen:

Op deze manier kunnen we voor elk apparaat een totaal ander ontwerp laten zien met dezelfde URL.

knoppen

Bootstrap biedt ons een duidelijk repertoire van gekleurde knoppen, het gebruik ervan is heel eenvoudig:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

waarin btn btn-success verwijst naar de kleur van de knop, om deze te wijzigen, hoeven we deze alleen te vervangen door de klassen die in de vorige afbeelding worden getoond.

Bootstrap installeren

Voor de installatie van dit CSS-framework zullen we de zip downloaden van de link die ik aan het einde van het bericht achterlaat, en we zullen de volgende code schrijven in het hoofd van ons HTML-bestand.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Zodra we ervoor hebben gezorgd dat de CSS- en JS-bestanden in dezelfde map staan ​​als ons HTML-bestand, kunnen we beginnen met het ontwerpen van onze responsieve website.

Meer informatie - Formulier validatie

Downloaden - Bootstrap: CSS Framework