Comment créer un design simple et efficace pour un site internet ? Créer un design soit-même demande beaucoup de connaissances, en CSS, en Expérience Utilisateurs, en intégration et bien d’autres domaines. Comment faire pour ne pas passer trop de temps et avoir un rendu rapide, beau et efficace. Lisez la suite pour découvrir un outils qui pour permet de faire tout ça : Bootstrap !

Qu’est-ce que Bootstrap ?

Bootstrap est une collection d’outils utile à la création du design de sites et d’applications web. Celui-ci permet de créer un rendu rapidement avec l’utilisation des classes CSS. Je le trouve particulièrement utile lorsqu’on commence un site à partir de zéro dont l’objectif est de mettre en forme des information pour un panneau d’administration, un réseau social ou un service en ligne.

Si on maîtrise le design, on peut aller beaucoup plus loin et obtenir de super rendu.

Qu’est-ce que je peux créer avec Bootstrap ?

Bootstrap propose des éléments graphiques prêt à l’emploi à assembler soi-même, mais aussi des thèmes gratuits et payants basés sur ces éléments en question.

Le mieux est de montrer les thèmes créés à partir de Bootstrap. Vous pouvez les voir dans la section “thème” de leur site. En voici quelques exemples :

Thèmes Bootstrap

Thèmes Bootstrap 2

Comme vous pouvez le voir, il est en effet possible d’obtenir des résultats super intéressant. Donc, voyons maintenant…

Comment installer Bootstrap ?

Bootstrap fonctionne avec l’installation des 4 fichiers. Pour faire votre premier test, je vous invite à partir du code HTML suivant.

Note : Si vous n’avez pas encore de connaissance en HTML, je vous conseille de tout d’abord lire ma suite d’articles sur les langages à connaître pour créer un site internet : Comment créer un page HTML et Comment créer le design avec le CSS.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

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

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

Une fois que cette première version de test est disponible, voyons les éléments utilisables pour l’enrichir.

Comment utiliser les éléments Bootstrap ?

La documentation de Bootstrap étant en Anglais, j’utiliserai les termes Anglais avec leur description en Français.
Commençons tout de suite avec…

Les Layouts

Les layouts dans tous les éléments permettant de définir les différentes couches de votre page. Voyons désormais ensemble les principaux :

Les conteneurs : containers

Les conteneurs permettent de créer un emplacement avec du contenu sous deux formes :

  • <div class=”.container”>
    Celui-ci créé un “conteneur” avec une marge à gauche et à droite pour garder le contenu de votre page au centre de votre écran. Très pratique quand on souhaite afficher du texte ou un qu’il y a un fils à suivre (article, texte, etc.).
  • <div class=”.container-fluid”>
    Celui-ci permet de créer un conteneur avec une marge à gauche et à droite beaucoup plus petite afin d’utiliser plus de place à l’écran. Très pratique quand la page est plutôt constituée de widgets (sous éléments) comme pour un panneau d’administration ou pour un logiciel en ligne.

Les grilles : row, col

Bootstrap propose un panel de ligne (row) et de colonne (col) permettant de créer des tableaux et des grilles sur mesure ! Comme :

Grille Bootstrap

Le mieux n’est pas de tout décrire mais de vous laisser jouer avec.

La seule à savoir, un écran est divisé en 12 colonne. On peut choisir d’afficher une certaine taille de colonne de 1 à 12 et cela en appliquant une taille suivant la taille du device (écran d’ordinateur, tablette ou smartphone).

Pour cela il suffit d’utiliser les mots clé :

  •  Les écrans extra-petits / phone : xs
    Entre 0px et 575px de largeur
  • Les petits écrans / phone : sm
    Entre 576px et 767px de largeur
  • Les moyens écrans / tablette : md
    Entre 768px et 991 px de largeur
  • Les écrans larges / bureau : lg
    Entre 992px et 1199px de largeur
  • Les écrans extra-larges / grand bureau : xl
    Au dela de 1200px de largeur

A présent, à vous de jouer avec la documentation ici.

Les Medias Objects

Ce sont des jeux d’éléments permettant de créer des objets dans votre page comme une liste de commentaires ou un fils d’actualité sous la forme :

Objet Bootstrap

Content

Bootstrap propose pour tous les éléments HTML de base un design sur mesure. Pour cela, je vous conseille de regarder par vous même les rendus possibles :

Du coup, je vous invite à vous balader sur la documentation pour découvrir toutes les possibilités.

Les composants : Components

Tout un tas d’éléments intéressants à intégrer à votre design : AlertesBadges, Fil d’arianne, Boutons, Groupe de boutons, Cartes, Carousel, Accordéons, Bouton avec liste déroulante, Formulaires, Groupe de champs de saisir, Annonce, Liste groupée, Modal (pop-up), Ruban de Navigation, Barre de navigation, Pagination, Popovers, Barre de progression, Suivant de déroulementFenêtre d’aide.

Amusez-vous bien 🙂

Les autres utilitaires : Utilities

A découvrir par vous même.

 

Voilà, j’espère que cet article vous aura permis de découvrir un outils très pratique pour commencer ! Je m’en suis personnellement servi à plusieurs reprise lors de mission chez des clients pour créer des interfaces d’administration pour obtenir des résultats élégants et fonctionnels rapidement.

Et vous, utilisez-vous Bootstrap ou un équivalent ? Dites-le dans les commentaires.

  •  
  •  
  •  
  •  
  • 1
  •  
  •  
  •