Tutoriel Bootstrap

Twitter Bootstrap est le framework frontal le plus populaire de ces derniers temps. Il s'agit d'une infrastructure frontale mobile élégante, intuitive et puissante pour un développement Web plus rapide et plus facile. Il utilise HTML, CSS et Javascript. Ce didacticiel vous apprendra les bases de Bootstrap Framework à l'aide duquel vous pouvez créer facilement des projets Web. Le didacticiel est divisé en sections telles que Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components et Bootstrap Plugins. Chacune de ces sections contient des rubriques connexes avec des exemples simples et utiles.

Pourquoi apprendre Bootstrap?

Mobile first approach - Bootstrap 3, le framework se compose de styles Mobile first dans toute la bibliothèque au lieu de les dans des fichiers séparés.
Browser Support - Il est pris en charge par tous les navigateurs courants.

Easy to get started- Avec juste la connaissance du HTML et du CSS, tout le monde peut commencer avec Bootstrap. Le site officiel de Bootstrap a également une bonne documentation.
Responsive design- Le CSS réactif de Bootstrap s'adapte aux ordinateurs de bureau, aux tablettes et aux mobiles. Pour en savoir plus sur le responsive design, consultez le chapitre Bootstrap Responsive Design.

Fournit une solution propre et uniforme pour créer une interface pour les développeurs.
Il contient des composants intégrés beaux et fonctionnels faciles à personnaliser.
Il fournit également une personnalisation basée sur le Web.
Et le meilleur de tout, c'est une source ouverte.

Hello World en utilisant Bootstrap.

Juste pour vous donner un peu d'enthousiasme à propos de Bootstrap, je vais vous donner un petit programme classique Bootstrap Hello World, vous pouvez l'essayer en utilisant le lien Démo.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Applications de Bootstrap

Scaffolding- Bootstrap fournit une structure de base avec le système de grille, les styles de lien et l'arrière-plan. Ceci est couvert en détail dans la sectionBootstrap Basic Structure
CSS- Bootstrap est livré avec la fonctionnalité de paramètres CSS globaux, des éléments HTML fondamentaux stylisés et améliorés avec des classes extensibles et un système de grille avancé. Ceci est couvert en détail dans la sectionBootstrap with CSS.
Components- Bootstrap contient plus d'une douzaine de composants réutilisables conçus pour fournir une iconographie, des listes déroulantes, une navigation, des alertes, des pop-overs et bien plus encore. Ceci est couvert en détail dans la sectionLayout Components.
JavaScript Plugins- Bootstrap contient plus d'une douzaine de plugins jQuery personnalisés. Vous pouvez facilement les inclure tous, ou un par un. Ceci est couvert en détails dans la sectionBootstrap Plugins.
Customize - Vous pouvez personnaliser les composants de Bootstrap, les variables LESS et les plugins jQuery pour obtenir votre propre version.

Public

Ce didacticiel a été préparé pour tous ceux qui ont une connaissance de base du HTML et du CSS et qui souhaitent développer des sites Web. Après avoir terminé ce didacticiel, vous vous retrouverez à un niveau d'expertise modéré dans le développement de projets Web à l'aide de Twitter Bootstrap.

Conditions préalables

Avant de commencer ce didacticiel, nous supposons que vous connaissez déjà les bases du HTML et du CSS. Si vous n'êtes pas bien conscient de ces concepts, nous vous suggérons de suivre notre court tutoriel sur le tutoriel HTML et le tutoriel CSS.