Bootstrap - Template de Départ Demo

Bonjour là-bas, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans le monde merveilleux de Bootstrap et explorer son template de départ. En tant que votre gentil voisin professeur de sciences informatiques, je suis excité de vous guider dans ce voyage. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et c'est parti !

Bootstrap-Starter template Demo

Qu'est-ce qu'un template de départ ?

Avant de plonger dans les détails du template de départ de Bootstrap, comprenons ce qu'est réellement un template de départ. Pensez-y comme une recette pré-faite pour la structure de votre site web. Juste comme une recette vous donne les ingrédients de base et les instructions pour créer un plat délicieux, un template de départ vous fournit l'HTML, le CSS et le JavaScript essentiels pour démarrer votre projet web.

Dans le contexte de Bootstrap, un template de départ est un fichier HTML de base qui inclut tous les composants et dépendances Bootstrap nécessaires. C'est comme avoir une toile vierge avec tous vos outils de peinture déjà installés et prêts à l'emploi !

Pourquoi utiliser un template de départ ?

Vous pourriez vous demander : "Pourquoi me tracasser avec un template de départ ? Ne puis-je pas tout écrire de zéro ?" Eh bien, vous pourriez certainement le faire, mais laissez-moi vous partager une petite histoire de mes premiers jours d'enseignement.

J'avais un élève qui insistait pour construire tout depuis la base. Bien que cela soit admirable, il a passé des semaines à se débattre avec des problèmes de mise en page basiques que Bootstrap aurait résolus en quelques minutes. Ne soyez pas comme cet élève - travaillez intelligemment, pas durement !

Utiliser un template de départ :

Économise du temps
Assure que vous avez toutes les dépendances nécessaires
Fournit un point de départ cohérent
Vous aide à vous concentrer sur le contenu et la fonctionnalité réelle

Maintenant que nous comprenons le "pourquoi", voyons le "comment" !

Le Template de Départ Bootstrap

Voici à quoi ressemble un template de départ Bootstrap de base :

<!doctype html>
<html lang="fr">
<head>
<!-- Balises meta nécessaires -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- JavaScript optionnel ; choisissez l'un des deux ! -->

<!-- Option 1 : Bundle Bootstrap avec Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Option 2 : Popper et Bootstrap JS séparés -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>

Décomposons cela pièce par pièce :

La Déclaration du Type de Document

<!doctype html>

Cette ligne indique au navigateur que ce fichier est un document HTML5. C'est comme se présenter avant de commencer une conversation - il fixe le ton pour tout ce qui suit.

La Balise HTML

<html lang="fr">

Cela ouvre notre document HTML et spécifie que la langue est le français. C'est comme ouvrir un livre et voir qu'il est écrit en français.

La Section Head

<head>
<!-- Balises meta nécessaires -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hello, world!</title>
</head>

La section <head> contient des métadonnées sur notre document. Décomposons-la :

<meta charset="utf-8">: Cela spécifie l'encodage des caractères pour le document HTML. UTF-8 est un encodage universel qui peut représenter n'importe quel caractère.
<meta name="viewport" content="width=device-width, initial-scale=1">: Cela garantit que la page web est responsive et s'affiche bien sur tous les appareils.
La balise <link> importe le fichier CSS de Bootstrap depuis un réseau de diffusion de contenu (CDN). C'est comme importer un guide de stylisation pour votre page web.
<title>: Cela définit le titre de votre page web, qui apparaît dans l'onglet du navigateur.

La Section Body

<body>
<h1>Hello, world!</h1>

<!-- JavaScript optionnel ; choisissez l'un des deux ! -->

<!-- Option 1 : Bundle Bootstrap avec Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Option 2 : Popper et Bootstrap JS séparés -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>

La section <body> est où va le contenu principal de votre page web. Dans ce template de départ, elle inclut :

Un simple titre "Hello, world !" pour vous aider à démarrer.
Les fichiers JavaScript pour la fonctionnalité Bootstrap. Vous avez deux options :

Option 1 : Un fichier groupé qui inclut à la fois Bootstrap et Popper.js (une bibliothèque dont Bootstrap dépend pour certains composants).
Option 2 : Des fichiers séparés pour Popper.js et Bootstrap (commentés par défaut).

Utilisation du Template de Départ

Maintenant que nous avons analysé notre template de départ, mettons-le à l'usage ! Voici un exemple simple de la manière dont nous pouvons construire sur ce template :

<!doctype html>
<html lang="fr">
<head>
<!-- Balises meta nécessaires -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Ma Première Page Bootstrap</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">Bienvenue sur mon site Web !</h1>
<p class="lead">Ceci est une simple unité hero, un composant de style jumbotron pour attirer une attention supplémentaire sur le contenu ou les informations vedettes.</p>
<hr class="my-4">
<p>Il utilise des classes utilitaires pour la typographie et l'espacement pour espacer le contenu à l'intérieur du conteneur plus large.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">En savoir plus</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Dans cet exemple, nous avons ajouté une simple unité hero (une boîte de message proéminente) en utilisant les classes Bootstrap. Décomposons ce que nous avons ajouté :

<div class="container">: Cela crée un conteneur de largeur fixe responsive.
<h1 class="mt-5">: La classe mt-5 ajoute de la marge en haut de l'en-tête.
<p class="lead">: La classe lead fait ressortir ce paragraphe.
<hr class="my-4">: Cela crée une règle horizontale avec de la marge sur l'axe y.
<a class="btn btn-primary btn-lg">: Cela crée un bouton large de couleur primaire.

Conclusion

Et voilà, amis ! Nous avons parcouru le pays des templates de départ Bootstrap, de la compréhension de ce qu'ils sont à la création d'une page web simple en utilisant un. Souvenez-vous, c'est juste le début. Bootstrap offre une richesse de composants et d'utilitaires que vous pouvez utiliser pour créer des sites web magnifiques et responsifs.

Alors, je suis rappelé d'une autre élève que j'avais. Elle a commencé avec ce même template et, à la fin du semestre, avait créé un site portfolio qui lui a valu un stage. Qui sait ? Peut-être que ce sera vous dans quelques mois !

Continuez à pratiquer, continuez à explorer, et surtout, amusez-vous avec ça. Le développement web est aussi much une art que une science, alors laissez votre créativité briller. Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset

Tutoriel précédent:

Démonstration Bootstrap-Masonry

Tutoriel suivant:

Démonstration d'Album Bootstrap RTL