Tu souhaites gérer le responsive facilement avec le HTML et le CSS. Dans ce cours nous allons utiliser Bootstrap 4 et dans sa version 4. En effet c’est une librairie CSS qui va te permettre de créer du responsive design rapidement, il te suffira juste d’apprendre quelques propriétés et avoir la documentation à côté de toi puis tu deviendras le roi du responsive design avec Bootstrap 4
Voici notre programme gratuit pour apprendre Bootstrap 4 :
Étape 1: configuration et présentation
- Créez une page HTML
- Charger Bootstrap via CDN
- Héberger Bootstrap localement
- Inclure également jQuery
- Charger le JavaScript Bootstrap
- Code complet avec Bootstrap intégré
Étape 2: Concevez votre page de destination
- Ajouter une barre de navigation
- Inclure du CSS personnalisé
- Créer un conteneur de contenu de page
- Configurer une section à trois colonnes
- Ajouter un formulaire de contact
- Créer un pied de page à deux colonnes
- Conclusion
Annexe :
Étape 1: configuration et présentation
Pour utiliser Bootstrap, vous devez d’abord l’intégrer dans votre environnement ça peut être une page web ou si c’est dans un framework, inclure la librairie. Pour cela, vous avez deux possibilités différentes: le charger à distance ou télécharger et utiliser Bootstrap localement. Peu importe les manières que vous souhaitez utiliser, il faut impérativement charger ce fichier pour que la librairie Bootstrap soit prise en compte
1. Créez une page HTML
Dans un premier temps, nous allons créer une page HTML simple comme base sur laquelle nous utiliserons Bootstrap. Pour cela, la première chose à faire est de créer un dossier sur votre ordinateur ou serveur pour les fichiers de votre projet. Dans ce cas, nous l’appellerons simplement le dossier « bootstrap ». Ici, créez un nouveau fichier texte et appelez-le index.html. Ouvrez-le avec un éditeur de texte de votre choix (par exemple SublimText) puis collez-y le code ci-dessous.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tutorial Sample Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html>
2. Charger Bootstrap via CDN
Comme déjà expliqué, Bootstrap se compose principalement de feuilles de style et de scripts. En tant que tels, ils peuvent être chargés dans l’en-tête et le pied de page de votre page Web. Le framework Boostrap offre un chemin d’accès CDN (Content Delivery Network) pour cela. Vous pouvez le trouver sur la page de téléchargement de Bootstrap, ci-dessous. Pour obtenir Bootstrap dans votre page, collez simplement le code ci-dessous dans la section de votre modèle.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Enregistrer, puis lorsque votre navigateur qui l’ouvre chargera automatiquement les ressources Bootstrap.
L’utilisation de la méthode à distance est une bonne idée car de nombreux utilisateurs auront déjà le framework dans le cache de leur navigateur. Si tel est le cas, ils n’auront pas à le recharger lorsqu’ils accèdent à votre site, ce qui accélère le temps de chargement des pages. Par conséquent, c’est la méthode recommandée pour les sites en direct.
Cependant, pour expérimenter et développer, ou si vous souhaitez être indépendant d’une connexion Internet, vous pouvez également obtenir votre propre copie de Bootstrap. C’est ce que nous faisons pour ce didacticiel, car il entraîne également moins de code à publier.
3. Héberger Bootstrap localement
Une autre façon de configurer Bootstrap consiste à le télécharger sur votre disque dur et à utiliser les fichiers localement. Vous trouverez les options de téléchargement au même endroit que les liens vers la version distante. Ici, assurez-vous d’obtenir les fichiers CSS et JS compilés. Vous n’avez pas besoin des fichiers source.
Une fois que vous avez fait cela, décompressez le fichier et copiez son contenu dans le même répertoire que index.html. Après cela, vous pouvez charger le CSS Bootstrap dans votre projet comme ceci:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
Vous remarquerez que cela inclut le chemin d’accès au fichier où trouver le fichier Bootstrap. Dans votre cas, assurez-vous que votre chemin correspond à votre configuration actuelle. Par exemple, les noms des répertoires peuvent différer si vous téléchargez une version différente de Bootstrap.
4. Inclure également jQuery
Afin d’obtenir toutes les fonctionnalités de Bootstrap, vous devez également charger la bibliothèque jQuery. Ici aussi, vous avez la possibilité de le charger à distance ou de l’héberger localement. Dans le premier cas, vous trouvez le lien vers la dernière version de jQuery ici. Vous pouvez l’utiliser pour charger la bibliothèque dans votre page en mettant la ligne de code ci-dessous juste avant où il est dit sur votre page.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Sinon, téléchargez jQuery (clic droit> Enregistrer le lien sous…), décompressez-le et placez-le dans le dossier du projet. Ensuite, incluez-le au même endroit que votre fichier de cette manière:
Encore une fois, assurez-vous que le chemin correspond à votre configuration.
5. Charger le JavaScript Bootstrap
La dernière étape de la configuration de Bootstrap consiste à charger la bibliothèque JavaScript Bootstrap. Ceux-ci sont inclus dans la version téléchargée du framework et vous trouverez également des liens vers des sources distantes au même endroit qu’avant. Cependant, nous le chargerons dans un endroit différent de la feuille de style. Au lieu de l’en-tête, il va dans le pied de page, juste après l’appel à jQuery. Vous pouvez l’appeler à distance comme ceci:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Ou en local comme ça:
<script src="bootstrap/js/bootstrap.min.js"></script>
6. Code complet avec Bootstrap intégré
Si vous avez correctement suivi les étapes ci-dessus, vous devriez vous retrouver avec un fichier qui ressemble à ceci pour la solution distante:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>Sinon, si vous hébergez localement, votre modèle de page doit ressembler au code ci-dessous:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>Si c’est ce que vous avez et que vous avez enregistré votre travail, vous êtes maintenant prêt à passer à l’étape suivante.
Étape 2: Concevez votre page de destination
D’accord, c’était, certes, beaucoup de travail de préparation. Cependant, ce n’était pas très difficile, n’est-ce pas? De plus, le plaisir commence maintenant. Pour le moment, lorsque vous accédez à votre exemple de site, vous devriez simplement voir une page vierge. Il est temps de changer cela.
1. Ajouter une barre de navigation
La première chose que nous voulons faire est d’ajouter une barre de navigation en haut de la page. Cela permet à vos visiteurs de se déplacer sur votre site et de découvrir le reste de vos pages.
Pour cela, nous utiliserons la classe navbar. C’est l’un des éléments par défaut de Bootstrap. Il crée un élément de navigation qui est réactif par défaut et se réduira automatiquement sur les petits écrans. Il offre également une prise en charge intégrée pour l’ajout de la marque, des jeux de couleurs, de l’espacement et d’autres composants.
Nous allons l’utiliser comme ci-dessous et le publier juste en dessous de la balise :
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>Quelques explications sur le code:
- navbar-expand-md – Ceci indique à quel point la barre de navigation se développe d’une icône verticale ou hamburger à une barre horizontale pleine taille. Dans ce cas, nous l’avons défini sur des écrans moyens, qui, dans Bootstrap, sont supérieurs à 768px.
- navbar-brand – Ceci est utilisé pour l’image de marque de votre site Web. Vous pouvez également inclure un fichier image de logo ici.
- navbar-toggler – Désigne le bouton bascule pour le menu réduit. L’élément data-toggle = « collapse » définit que cela se transforme en menu hamburger, pas en menu déroulant, qui est l’autre option. Il est important que vous définissiez une cible de données avec un identifiant CSS (défini par le #) et que vous entouriez un élément div du même nom autour de l’élément de barre de navigation.
- navbar-toggler-icon – Comme vous pouvez probablement le deviner, cela crée l’icône sur laquelle les utilisateurs cliquent pour ouvrir le menu sur des écrans plus petits.
- navbar-nav – La classe de l’élément de liste
Pourquoi expliquons-nous autant cela?
Parce que c’est le but de Bootstrap. Vous disposez de toutes ces normes qui vous permettent de créer rapidement des éléments avec certaines classes HTML et CSS. Vous n’avez pas besoin d’écrire de CSS pour fournir un style, tout est déjà configuré dans Bootstrap. De plus, tout est prêt à l’emploi pour mobile! Commencez-vous à voir à quel point cela est utile?
Ce qui précède suffit à ajouter une barre de navigation à votre site. Cependant, pour le moment, cela semble encore très peu.
2. Inclure le CSS personnalisé
Heureusement, si vous souhaitez modifier le style par défaut, vous n’avez pas à parcourir une grande bibliothèque de feuilles de style et à effectuer les modifications à la main. Au lieu de cela, tout comme avec un thème enfant WordPress, vous pouvez ajouter vos propres fichiers CSS que vous pouvez utiliser pour écraser le style existant.
Pour cela, créez simplement un fichier vierge avec votre éditeur de texte et appelez-le main.css. Enregistrez-le, puis ajoutez-le à la section principale de votre site Bootstrap comme ceci:
<link rel = "stylesheet" type = "text/css" href = "main.css">Il s’agit du code d’une feuille de style qui réside dans le répertoire principal. Si vous décidez de placer votre dans le dossier css, assurez-vous d’inclure le chemin correct dans le lien. À partir de là, vous pouvez ajouter du CSS personnalisé à votre site. Par exemple, pour styliser la barre de navigation et ses éléments, vous pouvez utiliser un balisage comme celui-ci:
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}3. Créer un conteneur de contenu de page
Après la barre de navigation, la prochaine chose que vous voulez est un conteneur pour le contenu de la page. C’est vraiment facile dans Bootstrap car tout ce dont vous avez besoin est ceci sous la balise navbar:
Notez la classe container-fluid. C’est une autre de ces classes Bootstrap par défaut. Son application à l’élément div lui applique automatiquement un tas de CSS.
La partie -fluide s’assure que le conteneur s’étend sur toute la largeur de l’écran. Il y a aussi juste un conteneur, auquel des largeurs fixes sont appliquées, donc il y aura toujours de l’espace des deux côtés de l’écran.
Cependant, si vous rechargez maintenant la page, vous ne verrez toujours rien (sauf si vous utilisez les outils de développement). En effet, vous n’avez créé qu’un élément HTML vide. Cela va commencer à changer maintenant.
4. Configurer une section à trois colonnes
Nous sommes déjà très satisfaits de l’évolution des choses. Cependant, nous n’en avons pas encore fini avec la page. Ensuite, nous voulons créer trois colonnes sous le contenu principal pour plus d’informations. C’est une spécialité de Bootstrap puisqu’elle joue sur sa force: créer une grille. Voici comment procéder dans ce cas:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Lorem ipsum</h3>
<img src="images/column-1.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Lorem ipsum</h3>
<img src="images/column-2.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
</div>
</div>La première chose que vous remarquerez est l’élément row. Vous en avez besoin chaque fois que vous créez des colonnes pour servir de conteneur pour la grille.
Quant aux colonnes, elles ont toutes plusieurs classes: col-lg-4, col-md-4 et col-sm-12. Celles-ci indiquent que nous avons affaire à des colonnes et à la taille qu’elles auront sur différents écrans.
Pour comprendre cela, vous devez savoir que dans une grille Bootstrap, toutes les colonnes d’une ligne s’additionnent toujours au nombre 12. Donc, leur donner les classes ci-dessus signifie qu’elles occuperont un tiers de l’écran sur grand et moyen écrans (12 divisé par 3 est 4) mais l’écran entier sur de petits appareils (12 sur 12 colonnes).
Cela a du sens, non?
Vous remarquerez également que nous avons inclus des images et leur avons ajouté la classe .image-fluid. Il s’agit de les rendre réactifs afin qu’ils évoluent avec un écran sur lequel la page est affichée.
5. Ajouter un formulaire de contact
Vous remarquerez que l’un des nouveaux champs est toujours vide. C’était exprès parce que nous voulons y ajouter un formulaire de contact. Il s’agit d’une pratique très normale pour les pages de destination pour permettre aux visiteurs d’entrer en contact.
Créer un formulaire de contact dans Bootstrap est assez simple:
<h3 class="feature-title">Get in Touch!</h3> <div class="form-group"> <input type="text" class="form-control" placeholder="Name" name=""> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Email Address" name="email"> </div> <div class="form-group"> <textarea class="form-control" rows="4"></textarea> </div> <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
À présent, nous ne devrions plus avoir à expliquer le balisage pour créer des colonnes. Voici ce que signifie le reste du balisage:
- form-group – Utilisé pour envelopper les champs de formulaire pour le formatage.
- form-control – Désigne les champs de formulaire tels que les entrées, les zones de texte, etc.
Vous pouvez faire beaucoup plus avec les formulaires, que vous pouvez découvrir dans la documentation.
6. Créer un pied de page à deux colonnes
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<p>1640 Riverside Drive, Hill Valley, California
<br/>info@mywebsite.com
<br/>+ 01 234 567 88
<br/>+ 01 234 567 89</p>
</div>
</div>
<div class="footer-copyright text-center">© 2020 Copyright: MyWebsite.com</div>
</footer>Outre le balisage de grille habituel, cette section met en évidence quelques possibilités pour modifier la typographie avec Bootstrap:
- texte en majuscules
- police-poids-gras
- centre de texte
Cela devrait être assez clair d’après les noms des classes qu’ils font. Vous pouvez trouver plus d’informations sur Bootstrap et la typographie ici.
En plus de ce qui précède, vous pouvez utiliser un style comme celui-ci:
.page-footer {
background-color: #222;
color: #ccc;
padding: 60px 0 30px;
}
.footer-copyright {
color: #666;
padding: 40px 0;
}Conclusion
Comme vous l’avez vu dans ce tuto Bootstrap pour débutants, il ne nécessite que des connaissances de base en HTML, CSS et quelques jQuery facultatifs. Bootstrap est une très alternative valable pour créer un site Web.
À présent, vous savez comment configurer et installer Bootstrap et ses composants, créer une page de destination simple, inclure du contenu de base et le styliser. Vous pouvez créer des menus de navigation, définir des images d’arrière-plan, inclure des boutons, des colonnes et des formulaires de contact.
Grâce à ce tuto de base Bootstrap, vous en savez maintenant assez pour continuer à avancer par vous-même.
Nous allons mettre régulièrement ce tutorial afin qu’il soit à jour et que la compréhension de cet article soit plus fluide et ludique pour vous