Bootstrap Introduction
Objectif
Bootstrap est le framework front-end le plus populaire, et sa troisième version (v3.0.0) est déjà sortie. Ce tutoriel vous permettra de démarrer avec Bootstrap 3.
Vous verrez également comment utiliser la personnalisation pour rendre le framework distinctif, comme créer des mises en page avec des grilles, créer une navigation avec nav, créer des diaporamas avec carousel, et ajouter des plugins tiers comme des plugins sociaux et Google Maps.
Qu'est-ce que Bootstrap
Bootstrap est un framework front-end pour développer rapidement des applications web et des sites web.
Dans le développement web moderne, plusieurs composants sont nécessaires dans presque tous les projets web.
Bootstrap vous fournit tous ces modules de base : grille, typographie, tableaux, formulaires, boutons et réactivité.
De plus, il existe de nombreux autres composants front-end utiles, tels que les menus déroulants, la navigation, les fenêtres modales, Typehead, la pagination, le carrousel, le fil d'Ariane, les onglets, les vignettes, les en-têtes, etc.
Avec ceux-ci, vous pouvez construire un projet web et le mettre en route plus rapidement et plus facilement.
De plus, comme l'ensemble du framework est basé sur des modules, vous pouvez le personnaliser avec votre propre code CSS, ou même en faire une refonte majeure après le démarrage du projet.
Il est basé sur plusieurs bonnes pratiques, et nous pensons que c'est le bon moment pour commencer à apprendre le développement web moderne. Une fois que vous maîtrisez les bases de HTML et de JavaScript/jQuery, vous pouvez appliquer ces connaissances au développement web.
Bien qu'on critique le fait que tous les projets construits avec Bootstrap se ressemblent, et que l'on puisse construire un site web sans trop connaître HTML + CSS, nous devons comprendre que Bootstrap est un framework généraliste. Comme pour toute autre chose généraliste, vous devez le personnaliser pour le rendre unique. Lorsque vous le personnalisez, vous devez approfondir, et sans une solide base en HTML + CSS, ce n'est pas faisable.
Bien sûr, en dehors de Bootstrap, il existe de nombreux autres bons frameworks front-end. Le choix du framework à utiliser revient au développeur, mais Bootstrap vaut vraiment la peine d'être essayé.
Pourquoil'utiliser dans votre projetutiliser Bootstrap ?
Télécharger et comprendre la structure des fichiers
Vous pouvezhttps://github.com/twbs/bootstrap/archive/v3.0.0.zipouhttps://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.ziptélécharger Bootstrap version 3.0.0. Nous utilisons le premier, et vous pouvez également utiliser le second.
De plus, le code que nous fournissons pour le téléchargement contient un dossier de code Bootstrap téléchargé via le premier lien. Il inclut également custom.css, qui contient le CSS original utilisé pour personnaliser Bootstrap.
Après décompression, vous constaterez qu'il y a quelques fichiers et dossiers dans le dossier racine bootstrap-3.0.0.
Le fichier CSS principal - bootstrap.css et sa version minifiée bootstrap-min.css - se trouve dans le dossier 'css' à l'intérieur du dossier 'dist' sous le dossier racine bootstrap-3.0.0.
À l'intérieur de 'dist', il y a un dossier 'js' qui contient le fichier JavaScript principal bootstrap.js et sa version minifiée.
Dans le dossier racine, il y a un dossier 'js' séparé qui contient différents plugins JavaScript dans différents fichiers.
Dans le dossier 'assets' du répertoire racine, vous trouverez un autre dossier 'js'. Ici se trouve html5shiv.js du shim HTML5, utilisé pour obtenir la prise en charge d'IE8. Il y a aussi un fichier respond.min.js, utilisé pour prendre en charge les media queries dans IE8. Ce dossier contient également jquery.js, dont dépendent les plugins js de Bootstrap.
Dans le même dossier, il y a un dossier 'ico', contenant l'icône favicon et diverses icônes d'appareils mobiles.
Le dossier 'css' dans le même chemin contient les fichiers css du document.
Les dossiers '_includes' et '_layouts' contiennent quelques fichiers de structure de mise en page par défaut, qui peuvent être utiles pour le prototypage rapide.
Le dossier 'less' dans le dossier racine contient quelques fichiers .less. Ces fichiers seront utiles si vous développez en vous basant sur LESS.
Dans le dossier racine, il y a quelques fichiers. Certains sont des fichiers HTML pour le prototypage de base, et certains sont bower.json et browserstack.json pour la compilation basée sur Bower. En outre, il y a composer.json et un fichier YAML _config.yml.
En plus de télécharger depuis le lien donné, vous pouvez également utiliser la commande suivante pour compiler tous les fichiers CSS et JS -
$ bower install bootstrap
Vous pouvez cloner le dépôt Git de Bootstrap.
git clone git://github.com/twbs/bootstrap.git
Dans ce tutoriel, nous avons uniquement téléchargé le fichier Zip et ne l'utiliserons pas.
Une fois que vous avez appris ce tutoriel, nous vous encourageons à installer le framework via bower pour comprendre comment il fonctionne.
NetDNA prend en charge les versions compilées et minifiées de Bootstrap CSS, JS et d'autres CSS de thème. Vous pouvez y faire référence avec les instructions suivantes.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Développement avec Bootstrap v3.0.0
HTML de base
Ce qui suit est la structure HTML de base qui sera utilisée pour notre projet.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap-3.0.0/assets/js/html5shiv.js.html"></script>
<script src="bootstrap-3.0.0/assets/js/respond.min.js.html"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js.html"></script>
</body>
</html>
Veuillez noter que le modèle ajoutehtml5shiv.js et respond.min.js, qui sont utilisés pour obtenir la prise en charge d'IE8. Ces fichiers ont été ajoutés dans la version 3 de Bootstrap.
Nous avons placé le dossier bootstrap-3.0.0 dans le dossier twitter-bootstrap, lui-même dans le dossier racine du serveur web. Tous les fichiers HTML que nous créons seront placés dans twitter-bootstrap. Nous le mentionnons pour simplifier notre processus de développement.
Personnalisation
Nous allonspersonnaliser un style de boîte CSS distinctif. Par conséquent, sans casser les fichiers CSS originaux (situés dans le dossier dist de bootstrap-3.0.0), dans le même dossier, nous créerons un fichier CSS séparé nommé custom.css. Ensuite, dans le fichier HTML, nous référençons ce fichier CSS juste après le fichier CSS original. Ainsi, nous pouvons remplacer les styles par défaut que nous voulons modifier, mais si Bootstrap est mis à niveau, les fichiers CSS originaux seront également mis à jour sans casser nos personnalisations. Nous vous recommandons de suivre cette approche pendant le développement.
Création de la navigation
Pour créer la navigation, ajoutez le code suivant dans le fichier HTML, juste après la balise body d'ouverture.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand">
<img src="logo.png.html"></a></li>
<li class="active"><a href="../index.html">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="../index.html" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
<li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
</ul>
</li>
</ul>
</nav>
Pour la navigation, Bootstrap utilise la classe 'navbar' au niveau du conteneur. Ainsi, elle est attribuée à l'élément nav qui contient toute la navigation.
Nous avons utilisé la classe 'navbar-inverse' pour modifier les couleurs par défaut de la barre de navigation, en utilisant une couleur sombre au lieu du précédent défaut clair. La classe 'navbar-fixed-top' garantit que la barre de navigation reste fixe en haut lorsque nous faisons défiler la page HTML vers le bas.
Dans Bootstrap V3.0.0, l'utilisation de role="navigation" lors de la création de la navigation est un nouvel ajout.Bootstrap recommande cet usage afin que la barre de navigationsoit facilement accessible.。
À ce stade, nous avons ajouté 'padding-top: 80px;' au body dans le fichier custom.css. Les pixels que vous ajoutez comme padding supérieur au body peuvent varier, mais si vous ne le faites pas, la partie supérieure du contenu après la barre de navigation sera masquée.
À l'intérieur du conteneur nav, nous avons une liste non ordonnée avec les classes 'nav' et 'navbar-nav'. Dans cette liste non ordonnée, chaque élément de liste contient un lien de la navigation.
La classe 'navbar-brand' est utilisée pour afficher le nom de la marque. Nous avons utilisé une image. Comme la hauteur de l'image est supérieure à la hauteur de référence de la barre de navigation, nous effectuons ici quelques personnalisations. Augmentez la propriété 'line-height' de '.navbar-nav>li>a' de sa valeur par défaut d'origine de 20px à 50px, et remplacez la taille de police par 16px.
Pour le lien le plus à droite, nous avons ajouté un menu déroulant. Pour la classe 'dropdown' ajoutée au li concerné, ajoutez immédiatement après celle-ci une ancre avec les deux classes 'dropdown-toggle' et 'caret'. Cette ancre contient en fait le texte d'ancre "social" de notre projet. Ce li contient ensuite une liste non ordonnée, et chaque élément de liste imbriqué dans la liste contient les liens affichés dans le menu déroulant.
Dans le menu déroulant, nous avons ajouté des plugins sociaux. Le premier li contient le balisage Google Plus, le deuxième li contient le balisage Facebook, et le troisième li contient le balisage permettant d'afficher le bouton Twitter et quelques scripts JS.
De plus, vous devez ajouter le balisage et le script suivants après la balise d'ouverture du body pour que le bouton Facebook fonctionne.
<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Pour que le bouton Twitter fonctionne, nous ajoutons le script suivant avant la balise de fermeture du body.
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
Nous utilisons les styles suivants pour ajouter un style supplémentaire aux boutons sociaux avec la classe 'socials'.
.socials {
padding: 10px;
}
Ceci termine notre navigation.
Créer des diaporamas avec Carousel
Pour créer un diaporama sous la barre de navigation sur la page d'accueil du projet, nous utiliserons le balisage suivant.
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="computer.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="mobile.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="cloud1.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="../index.html" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="../index.html" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Il y a quatre sections dans le Carousel. Le conteneur principal est défini à l'aide d'une balise div avec la classe 'carousel slide'.
Ensuite, il y a une liste ordonnée avec la classe 'carousel-indicators'. Chaque élément de liste dans le ol représente une diapositive. Lorsque la page se charge, la diapositive chargée par défaut possède la classe 'active'. Lors du rendu, vous les verrez sous forme de petits cercles sous la légende.
Ensuite, chaque diapositive (image) est placée dans une balise div avec la classe 'item'. Chaque élément est imbriqué dans un div avec la classe 'carousel-caption'. Le carousel-caption contient un balisage affiché comme légende avec l'image. Le paragraphe contient un h1 et un bouton ; vous pouvez également inclure d'autres balises de votre choix.
La dernière partie sert à contrôler la diapositive suivante/précédente. Elle utilise les classes 'left' et 'carousel-control' pour définir la précédente, et les classes 'right' et 'carousel-control' pour définir la suivante.
Les classes 'icon-prev' et 'icon-next' sont utilisées pour les icônes suivante et précédente.
Nous avonsapporté quelques personnalisations au carrousel par défaut.Nous voulons que les légendes, les indicateurs et les icônes suivante/précédente soient rendus quelques pixels au-dessus de leurs positions par défaut.
Pour ce faire, nous ajoutons les styles suivants dans le fichier custom.css.
.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}
Nous avons également personnalisé le h1, en lui ajoutant une marge inférieure de 30 pixels.
h1 {
margin-bottom: 30px
}
Images responsives
Vous avez peut-être remarqué que pour chaque image du diaporama, nous avons utilisé la classe 'img-responsive'. C'est une nouvelle fonctionnalité de Bootstrap v3.0.0.En utilisant la classe 'img-responsive' dans la balise img, Bootstrap rend l'image responsive.。
Création de grilles
Sous le diaporama, nous utilisons une grille pour placer le contenu. Commencez une grille avec un div ayant la classe 'container'. Notez que nous allons développer un site web responsive, et contrairement aux versions précédentes de Bootstrap, ici le conteneur a une seule classe et est responsive par défaut.
Le div conteneur imbrique plusieurs divs avec la classe 'row' (trois dans la première ligne, six dans la deuxième ligne) pour créer des lignes dans la grille Bootstrap.
Chaque ligne possède une div avec une classe 'col-x-y' pour créer des colonnes. La valeur de x peut être : xs pour les appareils mobiles, sm pour les tablettes, md pour les ordinateurs portables et les écrans de bureau plus petits, et lg pour les grands écrans de bureau. C'est la première approche. La valeur de y peut être n'importe quel entier positif, mais le nombre total de colonnes dans une grille ne doit pas dépasser 12. Dans notre projet, pour simplifier, nous avons utilisé lg, mais comme nous l'avons fait, vous voudrez peut-être consulter le site du projet sur un téléphone ou une tablette pour comparer.
Dans un prochain tutoriel, nous aurons un tutoriel complet sur le système de grille Bootstrap pour explorer ses fonctionnalités responsives fascinantes.
Dans cet exemple, nous voulons que les trois colonnes de la première ligne aient des largeurs égales, donc nous utilisons 'col-lg-4' pour toutes les colonnes. Dans la deuxième ligne, nous voulons que les six colonnes aient des largeurs égales, donc nous utilisons 'col-lg-2' pour toutes les colonnes.
Ci-dessous se trouve le balisage d'une grille contenant deux lignes, la première ligne a trois colonnes, et la deuxième ligne a six colonnes.
<div class="row barone"> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/php.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/mysql-logo.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/javascript-logo.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/java.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/postgresql.png"></p> </div> </div>
Nous terminons la grille par un hr et un pied de page avec le balisage suivant.
<hr> <p>Copyright@2013-14 by ToDo App.</p>
Utilisation des tableaux
Dans la page price.html de notre projet, nous avons utilisé un tableau pour présenter une liste de prix, avec le balisage indiqué ci-dessous.
<table class="table table-bordered">
<thead>
<tr>
<th>Features</th>
<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>No. Of users</h3></td>
<td><span class="badge">One</span></td>
<td><span class="badge">Five</span></td>
<td><span class="badge">Fifteen</span></td>
<td><span class="badge">Unlimited</span></td>
</tr>
<tr>
<td><h3>Pro training</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>In person support</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Weekly webinars</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
</tr>
</tbody>
</table>
Nous utilisons les classes 'table' et 'table-bordered' du fichier CSS Bootstrap d'origine. Cependant, nous l'avons personnalisé en ajoutant le CSS suivant dans le fichier customize.csspour effectuer quelques personnalisations afin que le tableau ait un aspect différent.
th {
background-color: #428BCA;
color: #EC8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Utilisation des badges
Nous utilisons la classe 'badge' pour afficher du texte dans le tableau. Nous avons une classe badge personnalisée avec le CSS suivant.
.badge {
background-color: #428BCA;
color: #fff;
font-size: 22px;
}
Pour cette page et la page contact.html, nous avons ajouté une autre règle CSS dans customize.css.
.container > h1 {
text-align: center;
}
Cela aligne le h1 au centre.
Utilisation des formulaires
Dans le fichier contact.html, nous avons créé trois colonnes. Dans la première colonne, nous intégrons un formulaire. Le formulaire utilise les styles par défaut.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select>
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Autralia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
La classe 'form-horizontal' maintient le formulaire aligné horizontalement.Notez que nous ajoutons role="form" pour l'accessibilité. Il s'agit d'une nouvelle fonctionnalité dans la version 3.0.0.
Pour positionner chaque contrôle de formulaire, Bootstrap 3.0.0 utilise une nouvelle classe 'form-group'.
Dans cette page, dans la deuxième colonne de la grille, nous plaçons simplement du texte.
Ajout de Google Maps
Dans la page contact.html, dans la troisième colonne de la grille, nous avons ajouté une Google Map. Pour ce faire, nous avons utilisé le balisage suivant.
<div id="map_canvas"></div> </div>
Le js suivant est ajouté à la section head du fichier HTML.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
Avant le js mentionné ci-dessus, vous devez ajouter la balise script suivante.
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Pour que la carte s'affiche correctement, vous devez ajouter les styles suivants à custom.css.
#map_canvas {
width: 400px;
height: 400px;
}
Ainsi, voici comment créer un projet simple basé sur Bootstrap V3.0.0. Mais nous n'avons fait qu'effleurer la surface ; les chapitres suivants fourniront des explications plus détaillées.
Autres extensions