Easy-Micro


LOGICIEL Bootstrap
Bootstrap

Présentation du framework CSS gratuit Bootstrap

Bootstrap Bootstrap fut développé par Mark Otto et Jacob Thornton sur Twitter et définit comme produit open source en août 2011 sur la plateforme GitHub.

Bootstrap [GetBootstrap.com] est un peu plus qu'un Framework CSS puisqu'il propose des composants HTML et JavaScript ainsi que des plugins jQuery de qualité pour enrichir vos pages. Bootstrap comporte un système de grille simple et efficace pour mettre en ordre l'aspect visuel d'une page web. Il apporte du style pour les boutons, les formulaires, la navigation. Il permet ainsi de concevoir un site web rapidement et avec peu de lignes de code ajoutées. Voir notamment l'utilisation de Bootstrap dans l'éditeur Brackets

Télécharger et installer Bootstrap

Télécharger Bootstrap sur GetBootstrap.com. Choisissez le bouton "Download" qui correspond au titre "Compiled CSS and JS" afin de récupérer les seuls fichiers nécessaires au fonctionnement de Bootstrap. Après avoir récupérer le fichier bootstrap.min.css (ou bootstrap.css si vous êtes en phase de développement), déposez-le dans votre site par FTP et faite ensuite un lien vers ce dernier dans le head de votre page d'accueil comme ceci :

<head>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
</head>

Vous pouvez aussi utiliser les services d'un CDN Bootstrap [https://www.bootstrapcdn.com] comme ceci :
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
Le CDN - Content Delivery Network - est un réseau de serveurs qui met à disposition des librairies.

Toujours via un CDN, vous pouvez aussi faire plusieurs liens vers les différentes librairies utilisées par Bootstrap:
<head>
<!-- Feuille de style CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/>

<!-- Librairie jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Librairie JavaScript Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
Les fichiers min.css sont des fichiers minifiés - épurés de tous commentaires, espaces, etc... - qui sont difficilement modifiable mais plus légers et donc plus rapides à être chargés pour les visiteurs.

Pour vérifier que les liens fonctionne, afficher un bouton Bootstrap avec ce code : <button type="button" class="btn btn-success">succès</button>

Conteneur Bootstrap

Toutes les pages Bootstrap doivent être placées dans un conteneur avec les classes container (qui centre la grille sur une largeur fixe, qui s'adapte en fonction de la largeur de l'écran) et container-fluid qui permet à la grille d'occuper toute la largeur de l'écran.

<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8"/>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<h1>Hello</h1>
</div>
</body>
</html>

La balise meta viewport permet de contrôler la mise en page des navigateurs mobile. Le paramètre width=device-width correspond à la largeur de l'écran en pixels CSS à l'échelle 100%. La propriété initial-scale contrôle le niveau de zoom lorsque la page est chargée pour la première fois. Les propriétés maximum-scale, minimum-scale, et user-scalable contrôlent la manière dont les utilisateurs sont autorisés à zoomer ou dézoomer une page.

  • Voir un exemple Easy-Micro de container Bootstrap
  • Voir un exemple Easy-Micro de container-fluid Bootstrap

  • Modifier la taille du conteneur Bootstrap

    Si vous voulez modifier la taille par défaut du conteneur (container) Bootstrap, soit vous rajoutez votre propre classe sur le div du conteneur, soit vous modifiez la ligne 288 du fichier bootstrap.css :
    .container
    {
    width: 940px;
    margin-right: auto;
    margin-left: auto;
    }

    Pour aller plus loin...



    Suivez les aventures des skippers aquitains sur EasyVoile.com
    Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
    Lundi 25 mars 2019 - Semaine 13 - Saint Humbert (Demain: Sainte Larissa)
    Aujourd'hui, c'est l'anniversaire de Marcia Cross (1962-57 ans), comédienne américaine (rôle de Bree Van de Kamp dans Desperate Housewives). Autre 25 mars: 1918 : décès à Paris du compositeur français Claude Debussy. 1984 : Alain Prost gagne le grand prix de Formule 1 du Brésil.
    Haut de page Easy-Micro