Bootstrap - Cover Demo
Bienvenue, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant de Bootstrap et explorer un composant magnifique appelé la "Cover." En tant que votre enseignant bienveillant en informatique, je suis ravi de vous guider à travers ce périple.Alors, prenez votre boisson favorite, installez-vous confortablement, et embarquons ensemble dans cette aventure de codage !
Qu'est-ce qu'une Cover ?
Avant de nous plonger dans le code, comprenons ce qu'est une "cover" dans le contexte du design web. Une cover, souvent appelée "section hero" ou "jumbotron", est une grande zone accrocheuse en haut d'une page web. C'est comme la couverture d'un livre - conçue pour attirer l'attention et donner aux visiteurs un aperçu rapide de ce que votre site est vraiment.
Imaginez que vous entrez dans un restaurant chic. La première chose que vous voyez, c'est l'entrée magnifiquement décorée qui donne le ton à votre expérience de restauration. C'est exactement ce que fait une cover pour votre site web !
Configuration de notre projet
Pour commencer, nous devons configurer notre projet avec Bootstrap. Ne vous inquiétez pas si vous n'avez jamais fait cela auparavant - je vais vous guider à travers chaque étape !
Étape 1 : Créer la structure HTML
Premièrement, créons un fichier HTML de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title.Ma super page de couverture</title>
<!-- Nous ajouterons ici le CSS de Bootstrap -->
</head>
<body>
<!-- Notre cover ira ici -->
</body>
</html>C'est comme préparer notre toile avant de commencer à peindre. Nous avons créé un document HTML vierge avec une section head et body.
Étape 2 : Ajouter le CSS de Bootstrap
Maintenant, ajoutons un peu de magie Bootstrap ! Ajoutez cette ligne à l'intérieur de la section <head> :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">Cette ligne relie le fichier CSS de Bootstrap. C'est comme donner à notre page web un garde-robe chic à choisir !
Création de la Cover
Maintenant que nous avons notre base, créons notre cover !
Étape 3 : Ajouter la structure de la cover
À l'intérieur de la balise <body>, ajoutez le code suivant :
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
<a class="nav-link" href="#">Fonctionnalités</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Couvrez votre page.</h1>
<p class="lead">Cover est un modèle d'une page pour créer des pages d'accueil simples et magnifiques. Téléchargez, modifiez le texte, et ajoutez votre propre image d'arrière-plan en plein écran pour le personnaliser.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">En savoir plus</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Modèle Cover pour <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, par <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>Whaou, c'est beaucoup de code ! Reprenons :
- Le
<div>externe crée un conteneur flexible pour notre cover. - À l'intérieur, nous avons trois sections principales :
<header>,<main>, et<footer>. - Le
<header>contient un titre et des liens de navigation. - La section
<main>contient notre contenu principal - un titre, une description, et un bouton. - Le
<footer>fournit quelques crédits (que vous pouvez personnaliser).
Étape 4 : Ajouter un peu de CSS personnalisé
Pour rendre notre cover encore plus belle, ajoutons un peu de CSS personnalisé. Dans la section <head>, ajoutez :
<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>Ce CSS fait plusieurs choses :
- Définit une largeur maximale pour notre cover
- Donne à la balise body un arrière-plan sombre et du texte blanc
- Ajoute des ombres subtiles pour donner de la profondeur
- Style les liens de navigation
Mettre tout ensemble
Maintenant que nous avons toutes les pièces, voyons notre belle cover en action ! Voici le code complet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title.Ma super page de couverture</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body class="d-flex text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
<a class="nav-link" href="#">Fonctionnalités</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Couvrez votre page.</h1>
<p class="lead">Cover est un modèle d'une page pour créer des pages d'accueil simples et magnifiques. Téléchargez, modifiez le texte, et ajoutez votre propre image d'arrière-plan en plein écran pour le personnaliser.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">En savoir plus</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Modèle Cover pour <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, par <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>
</body>
</html>Conclusion
Félicitations ! Vous venez de créer votre toute première page de couverture Bootstrap. N'est-ce pas incroyable comment quelques lignes d'HTML et de CSS peuvent créer un design aussi professionnel ?
Souvenez-vous, c'est juste le début. N'hésitez pas à expérimenter avec des couleurs différentes, ajouter votre propre contenu, ou même inclure une image d'arrière-plan pour le rendre vraiment vôtre. Le monde du développement web est plein de possibilités, et vous venez de faire votre premier pas dans cette aventure passionnante !
En conclusion, voici un tableau rapide des principales classes Bootstrap que nous avons utilisées :
| Classe | Objectif |
|---|---|
| cover-container | Crée un conteneur flexible pour la cover |
| d-flex | Applique la disposition Flexbox |
| w-100, h-100 | Définit la largeur et la hauteur à 100% |
| p-3 | Ajoute un padding |
| mx-auto | Centre le conteneur horizontalement |
| flex-column | Définit la direction flex en colonne |
| mb-auto, mt-auto | Ajoute un margin en haut ou en bas |
| nav-masthead | Classe personnalisée pour le style de navigation |
| btn btn-lg btn-secondary | Style le bouton |
Continuez à pratiquer, restez curieux, et surtout, amusez-vous avec le codage ! Jusqu'à la prochaine fois, bon web designing !
Credits: Image by storyset