Bootstrap 2.3.2: Guide de démarrage

Bootstrap est un Cadre CSS qui est devenu très populaire dans tout le réseau. Leurs styles sensible sont vus sur les réseaux sociaux Tuenti y Twitter. L'utilisation de cela nous fait gagner beaucoup de temps lors du développement d'une application Web, car elle nous évite tout le travail et les efforts nécessaires pour créer un style de page propre adapté à tous les appareils. En consultant les styles utilisés dans ce cadre, nous nous rendrons compte qu'ils nous sont familiers, car aujourd'hui de nombreux sites Web l'ont implémenté.

La structure

Pour que notre site Web soit accessible à partir de mobiles et de tablettes, nous devrons utiliser la structure fluide que Bootstrap nous offre. L'utilisation de cette structure est très simple, tout est basé sur des éléments envergure cela nous aidera agencement notre conception Web. Plus tard, lorsque nous accédons à cette conception à partir d'un smartphone o tablettes, celui-ci s'adaptera automatiquement audit appareil améliorant considérablement la qualité de la navigation. Nous utiliserons le envergure avec des classes en divisions logiques au sein de la structure fluide, c'est-à-dire:

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

Où le nombre 2 représente la taille de la travée. Chaque rangée contient suffisamment d'espace pour 12 travées de taille 1 ou 2 de taille 6, cela peut être réparti comme vous le souhaitez. Une fois que l'espace d'une ligne est dépassé, il passera automatiquement à la suivante, nous permettant d'utiliser un envergure taille 12 pour créer un saut de ligne. Si nous voulions en sauter envergure lors de la création, c'est-à-dire à partir de 4 envergure, et appliquer une taille de 3, nous utiliserions ce code:

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

Cela permet à la division de sauter quatre travées avant d'afficher le contenu. Nous pouvons l'utiliser à notre gré, en sautant ce que nous voulons avec notre code.

Conception différente pour chaque appareil

Pour appliquer une conception différente pour chaque type de périphérique, nous indiquerons à chaque division logique pour quel périphérique il est orienté, en utilisant les classes suivantes:

De cette façon, nous pouvons montrer un design totalement différent pour chaque appareil avec la même URL.

Boutons

Bootstrap nous offre un répertoire propre de boutons colorés, son utilisation est très simple:

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

où btn btn-success se réfère à la couleur du bouton, pour le changer, il suffira de le remplacer par les classes montrées dans l'image précédente.

Installation de Bootstrap

Pour l'installation de ce framework CSS, nous téléchargerons le zip à partir du lien que je laisserai à la fin du post, et nous écrirons le code suivant dans la tête de notre fichier HTML.

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

Une fois que nous nous sommes assurés que les fichiers CSS et JS sont dans le même dossier que notre fichier HTML, nous pouvons commencer à concevoir notre site Web réactif.

Plus d'informations - Validation du formulaire

Télécharger - Bootstrap : cadre CSS