Le framework Bootstrap

Info

Je ne ferai ici qu'aborder le sujet Bootstrap. Pour plus d'info, je vous conseille de suivre l'excellent cours de Pierre Giraud : Apprendre à utiliser Bootstrap ou Prenez en main Bootstrap sur Openclassroom.

Pour reprendre Wikipedia, Bootstrap est un framework CSS (mais pas que). C'est a dire, une collection d'outils utiles à la création du design de sites et d'applications web.

Les frameworks CSS sont spécialisés, comme leur nom l'indique, en feuilles de style ! Ils vont nous aider à mettre en forme les pages web : organisation, aspect, animation… Pour le dire autrement, ces framework mettent à disposition des feuilles de styles et des classes CSS prédéfinies que l'on peut utiliser pour la création de notre site.

Si Bootstrap est le plus connu, il en existe un certain nombre :

Utilisation d'un framework CSS

Intérêts

Les framework CSS : - sont cross-browser, c'est à dire que la présentation est similaire quel que soit le navigateur utilisé et d'une parfaite compatibilité. - font gagner du temps de développement parce qu'ils nous proposent les fondations de la présentation. - normalisent la présentation en proposant un ensemble homogène de styles. - proposent en général une grille pour faciliter le positionnement des éléments. - offrent souvent des éléments complémentaires : boutons esthétiques, barres de navigation, etc… - simplifient la mise ne place du responsive design.

Inconvénients

Pour utiliser efficacement un framework il faut bien le connaître, ce qui implique un temps d'apprentissage.
La normalisation de la présentation peut devenir lassante en lissant les effets visuels.

Bootstrap : comment ca marche ?

Lorsque l'on souhaite utiliser Bootstrap sur une page, il suffit de lier le fichier CSS Bootstrap dans l'en-tête html, comme on le fait pour une feuille de style classique. Le code est toujours le même :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Et c'est tout ! Les éléments de votre sites seront maintenant stylisés en suivant les règles CSS définies par Bootstrap.

Vous pouvez faire l'expérience :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test Bootstrap</title>

        <!-- Appel du CSS Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>

    <body>
                    <header>
            <h1>Test Bootstrap</h1>
        </header>
        <section>
            <h2>Titre de niveau 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in ipsum et nisl <strong>porttitor posuere</strong>. Nullam hendrerit aliquet sem. Pellentesque rutrum euismod lorem in viverra. Maecenas ut odio nec <a href="#">lorem suscipit vehicula</a> a eu nisi.</p>

            <a href="#">Bouton</a>

            <h2>Listes</h2>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ol>

            <h3>Titre de niveau 3</h3>
            <h4>Titre de niveau 4</h4>
            <h5>Titre de niveau 5</h5>
            <h6>Titre de niveau 6</h6>
        </section>
    </body>
</html>

Mise en forme Boostrap

Bon d'accord, le résultat n'est pas spectaculaire mais ce n'est que le début.

Des classes prédéfinies

Toute la puissance de Bootstrap réside dans ses classes prédéfinies. Certaines permettent de structurer la mise en page grace à un système de grille, d'autres permettant de styliser des composants (des éléments HTML).

Coloration sémantique

Bootstrap propose des classes prédéfinie pour spécifier àla couleur du texte en fonction de sa sémantique (.text-...) :

    <p class="text-primary">.text-primary</p>
    <p class="text-secondary">.text-secondary</p>
    <p class="text-success">.text-success</p>
    <p class="text-danger">.text-danger</p>
    <p class="text-warning">.text-warning</p>
    <p class="text-info">.text-info</p>
    <p class="text-light bg-dark">.text-light</p>
    <p class="text-dark">.text-dark</p>
    <p class="text-muted">.text-muted</p>

Ca fonctionne aussi pour l'arrière-plan (.bg-...) :

    <p class="bg-primary">.bg-primary</p>
    <p class="bg-secondary">.bg-secondary</p>
    <p class="bg-success">.bg-success</p>
    <p class="bg-danger">.bg-danger</p>
    <p class="bg-warning">.bg-warning</p>
    <p class="bg-info">.bg-info</p>
    <p class="bg-light text-dark">.bg-light</p>
    <p class="bg-dark text-light">.bg-dark</p>
    <p class="bg-white">.bg-white</p>
    <p class="bg-transparent">.bg-transparent</p>

Arrondis

Ajoutez la classe rounded pour arrondir les angles d'un élément :

1	`<div class="bg-primary rounded">Coins arrondis</div>`

Ombres

Il existe aussi quelques classe pour ajouter des ombres dont les caractéristiques sont prédéfinies :

    <div class="shadow-none">No shadow</div>
    <div class="shadow-sm">Small shadow</div>
    <div class="shadow">Regular shadow</div>
    <div class="shadow-lg">Larger shadow</div>

Mise en page

Reportez-vous à la documentation Bootstrap pour en savoir plus sur le système de grille.

Pour faire simple, Bootstrap utilise des conteneurs (class="container") comme éléments de base à leur mise en page.

La grille de mise en page et ensuite découpée en lignes (class="raw") de 12 colonnes. Par défaut un élément html dans une ligne s'étendra sur les 12 colonnes mais il est possible de spécifier la taille de l'élément en nombres de colonnes qu'il occupe (class="col-n) où n représente le nombre de colonnes.

Exemple : 2 colonnes ⅔ ⅓

<section class="container">
  <div class="row">
    <div class="col-8">Elément 1</div>
    <div class="col-4">Elément 2</div>
  </div>
</section>

Exemple : 3 colonnes de même taille

<section class="container">
  <div class="row">
    <div class="col-4">Elément 1</div>
    <div class="col-4">Elément 2</div>
    <div class="col-4">Elément 3</div>
  </div>
</section>

Remarquez que dans chaque .row le nombre de colonnes est égale à 12.

Encore une fois, ce n'est que le fonctionnement basique, il y bien d'autre façon de jourer avec le système de grilles de Bootstrap.

Composants

Reportez-vous à la documentation Bootstrap pour en savoir plus sur toutes les classes de composants accessibles.

Boutons

Bootstrap comprend plusieurs styles de boutons prédéfinis. On définit un bouton grace à la classe (.btn).

1	`<a href="#" class="btn">Un bouton</a>`

Puis on peut, si on le souhaite, spécifier le type de bouton (bouton primaire, secondaire, dangereux, attention, pour info... ) qui se traduira par un changment de couleur adapté à la sémantique.

<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn btn-link">Link</a>

Il est également possible de spécifier la taille d'un bouton. Est-il gros (.btn-lg), ou petit (.btn-sm) ?

1
2
3

<a href="#" class="btn btn-primary">Bouton</a>
<a href="#" class="btn btn-success btn-lg">Gros bouton</a>
<a href="#" class="btn btn-warning btn-sm">Petit bouton</a>

Menus

Ajoutez les classes .nav et .nav-item à vos listes pour les transformer en menus :

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

Et plein d'autres choses à découvrir dans la documentation ou dans les cours évoqués en début du chapitre Apprendre à utiliser Bootstrap ou Prenez en main Bootstrap.

Styliser Bootstrap

Notez que rien ne vous empêche d'ajouter votre propre feuille de style CSS à un modèle Bootstrap. C'est d'ailleurs le principes des thèmes.

    <!-- Lien vers la feuille de style Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- Lien vers la votre feuille de style -->
    <link rel="stylesheet" href="css/styles.css">

Exemples

Quelques modèles Bootstrap prêts à l'emploi

Start Bootstrap - Template Bare

Start Bootstrap - Template Scrolling Nav

Start Bootstrap - Template Business Frontpage

Start Bootstrap - Template Shop Homepage

Et bien d'autres...

Quelques thèmes Bootstrap prêts à l'emploi

Les thèmes sont des modèles Bootstrap par sur lesquels que l'on est venu surcharger d'autres styles CSS.

Start Bootstrap - Thème Freelance

Start Bootstrap - Thème Stylish Portfolio

Start Bootstrap - Thème Agency

Start Bootstrap - Thème Business Casual

Start Bootstrap - Thème Resume

Start Bootstrap - Thème One Page Wonder

Et bien d'autres...