Bootstrap 2.3.2: Erste Schritte

Bootstrap ist ein CSS-Framework das ist im ganzen Netzwerk sehr beliebt geworden. Ihre Stile ansprechbar werden in sozialen Netzwerken gesehen Tuenti y Twitter. Die Verwendung dieser Option spart uns viel Zeit bei der Entwicklung einer Webanwendung, da wir uns die Arbeit und den Aufwand sparen, die mit der Erstellung eines sauberen Seitenstils für alle Geräte verbunden sind. Wenn wir uns die in diesem Framework verwendeten Stile ansehen, werden wir feststellen, dass sie uns vertraut sind, da sie heute von vielen Websites implementiert wurden.

Die Struktur

Damit unsere Website von Handys und Tablets aus zugänglich ist, müssen wir die flüssige Struktur verwenden, die Bootstrap uns bietet. Die Verwendung dieser Struktur ist sehr einfach, alles basiert auf Elementen Spannweite das wird uns helfen Layout unser Webdesign. Später, wenn wir von a auf dieses Design zugreifen Smartphone o TabletteDies passt sich automatisch an das Gerät an und verbessert die Navigationsqualität erheblich. Wir werden die verwenden Spannweite mit Klassen in logischen Unterteilungen innerhalb der Fluidstruktur, d.h.

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

Wobei die Zahl 2 die Größe der Spanne darstellt. Jede Zeile enthält genügend Platz für 12 Bereiche der Größe 1 oder 2 der Größe 6, die nach Belieben verteilt werden können. Sobald der Abstand einer Zeile überschritten wird, wird automatisch zur nächsten übergegangen, sodass wir a verwenden können Spannweite Größe 12, um einen Zeilenumbruch zu erstellen. Wenn wir etwas überspringen wollten Spannweite Wenn Sie eine erstellen, beginnen Sie mit 4 Spannweiteund wenden Sie eine Größe von 3 an, wir würden diesen Code verwenden:

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

Dadurch kann die Division vier springen überspannt vor dem Anzeigen des Inhalts. Wir können dies nach freiem Willen verwenden und mit unserem Code überspringen, was wir wollen.

Unterschiedliches Design für jedes Gerät

Um für jeden Gerätetyp ein anderes Design anzuwenden, teilen wir jeder logischen Unterteilung anhand der folgenden Klassen mit, für welches Gerät sie ausgerichtet ist:

Auf diese Weise können wir für jedes Gerät mit derselben URL ein völlig anderes Design anzeigen.

Tasten

Bootstrap bietet uns ein sauberes Repertoire an farbigen Knöpfen, seine Verwendung ist sehr einfach:

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

Wo btn btn-success bezieht sich auf die Farbe der Schaltfläche. Um sie zu ändern, müssen wir sie nur durch die im vorherigen Bild gezeigten Klassen ersetzen.

Bootstrap installieren

Für die Installation dieses CSS-Frameworks laden wir die Zip-Datei von dem Link herunter, den ich am Ende des Beitrags hinterlassen werde, und schreiben den folgenden Code im Kopf unserer HTML-Datei.

<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>

Sobald wir sichergestellt haben, dass sich die CSS- und JS-Dateien im selben Ordner wie unsere HTML-Datei befinden, können wir mit dem Entwurf unserer reaktionsfähigen Website beginnen.

Mehr Informationen - Formularvalidierung

Herunterladen - Bootstrap: CSS Framework