Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap » Bootstrap tutorial tutorialspoint pdf [Eng]

Bootstrap tutorial tutorialspoint pdf [Eng]

Problème à signaler:

Télécharger



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

bootstrap tutorial tutorialspoint pdf [Eng]

...

Twitter Bootstrap est le framework frontal le plus populaire de ces dernières années. Il s’agit du premier cadre frontal mobile, élégant, intuitif et puissant, qui permet un développement Web plus rapide et plus facile. Il utilise HTML, CSS et Javascript. Ce tutoriel vous apprendra les bases du framework Bootstrap grâce auxquelles vous pourrez créer facilement des projets Web. Le didacticiel est divisé en sections telles que la structure de base Bootstrap, Bootstrap CSS, les composants de mise en page Bootstrap et les plugins Bootstrap. Chacune de ces sections contient des rubriques connexes avec des exemples simples et utiles.

...

span>

Exécuter Bootstrap Online

Vous n'avez pas besoin de votre propre environnement pour commencer à apprendre la programmation Bootstrap! Nous avons mis en place pour vous un compilateur en ligne qui peut être utilisé pour compiler et exécuter les programmes en ligne.

Pour la plupart des exemples disponibles dans ce didacticiel, vous trouverez une option Essayez-le dans le coin supérieur droit de la zone de code. Utilisez-le pour vérifier les programmes et vérifier le résultat avec différentes options. N'hésitez pas à modifier n'importe quel exemple et à l'exécuter en ligne.

<! DOCTYPE html>

<html lang = "en">

   <tête>

      <meta charset = "utf-8">

      <meta http-equiv = "Compatible X-UA" content = "IE = edge">

      <meta name = "viewport" content = "width = largeur du périphérique, initial-scale = 1">

      <title> Modèle Bootstrap 101 </ title>

      <! - Bootstrap ->

      <link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">

      <! - Prise en charge de HTML5 et de Respond.js pour IE8 prenant en charge les éléments HTML5 et les requêtes multimédias ->

      <! - AVERTISSEMENT: Respond.js ne fonctionne pas si vous affichez la page via le fichier: // ->

            <! - [si lt IE 9]>

      <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </ script>

      <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </ script>

      <! [endif] ->

   </ head>

      <body>

      <h1> Bonjour le monde! </ h1>

      <! - jQuery (nécessaire pour les plugins JavaScript de Bootstrap) ->

      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </ script>

            <! - Inclut tous les plugins compilés (ci-dessous), ou incluez des fichiers individuels si nécessaire ->

      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </ script>

         </ body>

</ html>

Qu'est-ce que Twitter Bootstrap?

Bootstrap est un premier framework frontal mobile, élégant, intuitif et puissant, permettant un développement Web plus rapide et plus facile. Il utilise HTML, CSS et Javascript.

L'histoire

Bootstrap a été développé par Mark Otto et Jacob Thornton sur Twitter. Il a été publié en tant que produit open source en août 2011 sur GitHub.

Pourquoi utiliser Bootstrap?

  • Première approche mobile - Bootstrap 3, l’infrastructure se compose de styles Mobile First dans l’ensemble de la bibliothèque et non de fichiers distincts.
  • Support de navigateur - Il est supporté par tous les navigateurs populaires.
  • Facile à démarrer - Avec juste la connaissance de HTML et CSS, tout le monde peut démarrer avec Bootstrap. Le site officiel de Bootstrap a également une bonne documentation.
  • Conception réactive - Le CSS réactif de Bootstrap s'adapte aux ordinateurs de bureau, aux tablettes et aux mobiles. Pour plus d'informations sur le responsive design, consultez le chapitre Bootstrap Responsive Design.
  • Fournit une solution propre et uniforme pour la création d'une interface pour les développeurs.
  • Il contient des composants intégrés, beaux et fonctionnels, faciles à personnaliser.
  • Il fournit également une personnalisation Web.
  • Mieux encore, il s’agit d’une source ouverte.

Quel forfait Bootstrap comprend?

  • Échafaudage - Bootstrap fournit une structure de base avec système de grille, styles de lien et arrière-plan. C’est couvert en détail dans la section Structure de base de Bootstrap
  • CSS - Bootstrap est doté des paramètres CSS globaux, d’éléments HTML fondamentaux stylisés et améliorés avec des classes extensibles et d’un système de grille avancé. Ceci est couvert en détail dans la section Bootstrap with CSS.
  • Composants - 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 fenêtres contextuelles et bien plus encore. Ceci est couvert en détail dans la section Composants de disposition.
  • Plugins JavaScript - 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étail dans la section Plugins Bootstrap.
  • Personnaliser - Vous pouvez personnaliser les composants, les variables LESS et les plugins jQuery de Bootstrap pour obtenir votre propre version.

Essayez-le Option Online

Vous n'avez vraiment pas besoin de configurer votre propre environnement pour commencer à apprendre Bootstrap. Reason est très simple, nous avons déjà configuré l’environnement Bootstrap en ligne, de sorte que vous puissiez exécuter tous les exemples disponibles en ligne en même temps que votre travail théorique. Cela vous donne confiance dans ce que vous lisez et vous permet de vérifier le résultat avec différentes options. N'hésitez pas à modifier n'importe quel exemple et à l'exécuter en ligne.

Essayez l'exemple suivant en utilisant l'option Essayez-le disponible dans le coin supérieur droit de la boîte de code exemple ci-dessous -

<! DOCTYPE html>

<html lang = "en">

      <tête>

      <meta charset = "utf-8">

      <meta http-equiv = "Compatible X-UA" content = "IE = edge">

      <meta name = "viewport" content = "width = largeur du périphérique, initial-scale = 1">

            <title> Modèle Bootstrap 101 </ title>

      <! - Bootstrap ->

      <link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">

      <! - Prise en charge de HTML5 et de Respond.js pour IE8 prenant en charge les éléments HTML5 et les requêtes multimédias ->

      <! - AVERTISSEMENT: Respond.js ne fonctionne pas si vous affichez la page via le fichier: // ->

      <! - [si lt IE 9]>

      <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </ script>

      <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </ script>

      <! [endif] ->

   </ head>

   <body>

      <h1> Bonjour le monde! </ h1>

         <! - jQuery (nécessaire pour les plugins JavaScript de Bootstrap) ->

      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </ script>

      <! - Inclut tous les plugins compilés (ci-dessous), ou incluez des fichiers individuels si nécessaire ->

      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </ script>

   </ body>

</ html>

Pour la plupart des exemples donnés dans ce tutoriel, vous trouverez Try itoption. Utilisez-le simplement et profitez de votre apprentissage.

Il est très facile d’installer et de commencer à utiliser Bootstrap. Ce chapitre explique comment télécharger et configurer Bootstrap. Nous discuterons également de la structure du fichier Bootstrap et démontrerons son utilisation à l'aide d'un exemple.

Télécharger Bootstrap

Vous pouvez télécharger la dernière version de Bootstrap à l’adresse http://getbootstrap.com/. Lorsque vous cliquez sur ce lien, vous verrez apparaître un écran comme ci-dessous -

Ici vous pouvez voir deux boutons -

  • Télécharger Bootstrap - En cliquant dessus, vous pouvez télécharger les versions précompilées et minifiées de Bootstrap CSS, JavaScript et des polices. Aucune documentation ou fichiers de code source d'origine ne sont inclus.
  • Télécharger la source - En cliquant dessus, vous pouvez obtenir le dernier code source Bootstrap LESS et JavaScript directement à partir de GitHub.

Si vous travaillez avec le code source non compilé de Bootstrap, vous devez compiler les fichiers LESS pour générer des fichiers CSS utilisables. Pour compiler des fichiers LESS en CSS, Bootstrap ne prend officiellement en charge que Recess, qui est l'hinter CSS de Twitter basé sur less.js.

Pour une meilleure compréhension et facilité d’utilisation, nous utiliserons la version précompilée de Bootstrap tout au long du tutoriel. Au fur et à mesure que les fichiers sont conformes et minifiés, vous n'avez pas à vous soucier à chaque fois, y compris de fichiers séparés pour des fonctionnalités individuelles. Au moment de la rédaction de ce tutoriel, la dernière version (Bootstrap 3) a été téléchargée.

Structure de fichier

Bootstrap précompilé

Une fois que la version compilée de Bootstrap est téléchargée, extrayez le fichier ZIP et vous verrez la structure de fichiers / répertoires suivante -

Comme vous pouvez le constater, il existe CSS et JS compilés (bootstrap. *), Ainsi que des CSS et JS compilés et minifiés (bootstrap.min. *). Les polices de Glyphicons sont incluses, car il s'agit du thème Bootstrap optionnel.

Code source d'amorçage

Si vous avez téléchargé le code source Bootstrap, la structure de fichier est la suivante:

  • Les fichiers situés sous less /, js / et fonts / constituent le code source des polices Bootstrap CSS, JS et icon (respectivement).
  • Le répertoire dist / folder comprend tout ce qui est répertorié dans la section de téléchargement précompilé ci-dessus.
  • docs-assets /, examples / et tous les fichiers * .html constituent une documentation Bootstrap.

Modèle HTML

Un modèle HTML de base utilisant Bootstrap ressemblerait à ceci -

... ...

Vous pouvez voir ici les fichiers jquery.js, bootstrap.min.js et bootstrap.min.css inclus pour créer un fichier HTM normal dans le modèle Bootstrapped. Assurez-vous simplement d'inclure la bibliothèque jQuery avant d'inclure la bibliothèque Bootstrap.

Plus de détails sur chacun des éléments de ce code ci-dessus seront abordés dans le chapitre Présentation de Bootstrap CSS.

Cette structure de modèle est déjà incluse dans l'outil Try it (compilateur en ligne). Ainsi, dans tous les exemples (dans les chapitres suivants) de ce tutoriel, vous ne verrez que le contenu de l'élément <body>. Une fois que vous avez cliqué sur l’essai disponible dans le coin supérieur droit de l’exemple, vous verrez tout le code.

Exemple

Essayons maintenant un exemple utilisant le modèle ci-dessus. Essayez l'exemple suivant en utilisant l'option Essayez-le disponible dans le coin supérieur droit de la zone de code exemple ci-dessous sur notre site Web -

<h1> Bonjour le monde! </ h1>

Bootstrap - Système de grille

Annonces

 Page précédente

Page suivante

Dans ce chapitre, nous aborderons le système de grille Bootstrap.

Qu'est-ce qu'une grille?

Comme l'a dit wikepedia -

En graphisme, une grille est une structure (généralement bidimensionnelle) constituée d'une série de lignes droites (verticales, horizontales) qui se croisent et qui servent à structurer le contenu. Il est largement utilisé pour concevoir la structure de mise en page et de contenu dans la conception d'impression. En conception Web, il s'agit d'une méthode très efficace pour créer rapidement et efficacement une mise en page cohérente à l'aide de HTML et de CSS.

Pour résumer, les grilles de conception de sites Web organisent et structurent le contenu, facilitent l'analyse des sites Web et réduisent la charge cognitive des utilisateurs.

Qu'est-ce que le système de grille Bootstrap?

Comme indiqué par la documentation officielle de Bootstrap pour le système de grille -

Bootstrap comprend un premier système de grille de fluide mobile réactif, qui s'adapte de manière appropriée à 12 colonnes à mesure que la taille du dispositif ou de la fenêtre d'affichage augmente. Il inclut des classes prédéfinies pour des options de mise en page faciles, ainsi que de puissants mixins pour générer plus de mises en page sémantiques.

Laissez-nous comprendre la déclaration ci-dessus. Bootstrap 3 est d'abord mobile, en ce sens que le code pour Bootstrap commence maintenant par cibler des écrans plus petits, tels que les appareils mobiles, les tablettes, puis «développe» les composants et les grilles pour les écrans plus grands tels que les ordinateurs portables, les ordinateurs de bureau.

Stratégie mobile d'abord

  • Contenu

o Déterminez ce qui est le plus important.

  • Disposition

o Concevez d’abord en petites largeurs.

o Basez d'abord l'adresse du périphérique mobile CSS; demandes de médias adresse pour tablette, ordinateurs de bureau.

  • Amélioration progressive

o Ajouter des éléments à mesure que la taille de l'écran augmente.

Fonctionnement du système de grille Bootstrap

Les systèmes de grille sont utilisés pour créer des mises en page à travers une série de lignes et de colonnes qui hébergent votre contenu. Voici comment fonctionne le système de grille Bootstrap -

  • Les lignes doivent être placées dans une classe .container pour un alignement et un remplissage corrects.
  • Utilisez des lignes pour créer des groupes horizontaux de colonnes.
  • Le contenu doit être placé dans les colonnes et seules les colonnes peuvent être les enfants immédiats des lignes.
  • Des classes de grille prédéfinies telles que .row et .col-xs-4 sont disponibles pour créer rapidement des présentations de grille. Les mixins LESS peuvent également être utilisés pour des mises en page plus sémantiques.
  • Les colonnes créent des gouttières (espaces entre les contenus de colonne) via un remplissage. Ce remplissage est décalé en lignes pour les première et dernière colonnes via une marge négative sur .rows.
  • Les colonnes de la grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez étendre. Par exemple, trois colonnes égales utiliseraient trois .col-xs-4.

Requêtes de médias

La requête multimédia est un terme très sophistiqué pour "règle CSS conditionnelle". Il applique simplement certains CSS, en fonction de certaines conditions énoncées. Si ces conditions sont remplies, le style est appliqué.

Les requêtes multimédia dans Bootstrap vous permettent de déplacer, d'afficher et de masquer le contenu en fonction de la taille de la fenêtre. Les requêtes multimédia suivantes sont utilisées dans les fichiers LESS pour créer les points d'arrêt clés dans le système de grille Bootstrap.

/ * Très petits appareils (téléphones, moins de 768px) * /

/ * Aucune requête de média car il s'agit de la valeur par défaut dans Bootstrap * /

/ * Petits appareils (tablettes, 768px et plus) * /

@media (min-width: @ screen-sm-min) {...}

/ * Appareils de taille moyenne (ordinateurs de bureau, 992px et plus) * /

@media (min-width: @ screen-md-min) {...}

/ * Gros appareils (grands ordinateurs de bureau, 1200px et plus) * /

@media (min-width: @ screen-lg-min) {...}

Celles-ci sont parfois étendues pour inclure une largeur maximale afin de limiter les CSS à un ensemble plus restreint de périphériques.

@media (max-width: @ screen-xs-max) {...}

@media (min-width: @ screen-sm-min) et (max-width: @ screen-sm-max) {...}

@media (min-width: @ screen-md-min) et (max-width: @ screen-md-max) {...}

@media (min-width: @ screen-lg-min) {...}

Les requêtes de média comportent deux parties: une spécification de périphérique, puis une règle de taille. Dans le cas ci-dessus, la règle suivante est définie -

Considérons cette ligne -

@media (min-width: @ screen-sm-min) et (max-width: @ screen-sm-max) {...}

Pour tous les appareils, quel que soit leur type avec min-width: @ screen-sm-min si la largeur de l'écran devient inférieure à @ screen-sm-max, faites quelque chose.

...

Réinitialisation de la colonne réactive

Avec les quatre niveaux de grilles disponibles, vous rencontrerez des problèmes tels que, à certains points d'arrêt, les colonnes ne sont pas effacées correctement, l'une étant plus grande que l'autre. Pour résoudre ce problème, utilisez une combinaison de la classe .clearfix et des classes d’utilitaire responsive, comme indiqué dans l’exemple suivant -

<div class = "conteneur">

   <div class = "row">

      <div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8;

         box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

         <p> Lorem ipsum dolor sit amet, consectetur elit adipisicing. </ p>

      </ div>

      <div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8;

         box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incidid ut ut labore et dolore magna aliqua. Utah

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            Nisi ut aliquip ex ea commodo conséquat. </ p>

         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut. </ p>

      </ div>

      <div class = "clearfix visible-xs"> </ div>

      <div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8;

         box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

         <p> Ut en ad minimen veniam, quis nostrud exercitation ullamco

            Laboris nisi ut aliquip ex ea commodo conséquat. </ p>

      </ div>

      

      <div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8;

         box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incidid ut ut labore et dolore magna aliqua. Utah

            enim ad minim </ p>

      </ div>

   </ div>

</ div>

Cela produira le résultat suivant -

Redimensionnez votre fenêtre ou consultez-la sur votre téléphone pour obtenir le résultat souhaité de cet exemple.

Colonnes Offset

Les décalages sont une fonctionnalité utile pour les dispositions plus spécialisées. Ils peuvent être utilisés pour pousser des colonnes pour obtenir plus d'espacement (par exemple). Les classes .col-xs = * ne prennent pas en charge les décalages, mais elles sont facilement répliquées en utilisant une cellule vide.

Pour utiliser des décalages sur de grands écrans, utilisez les classes .offset-md- *. Ces classes augmentent la marge gauche d'une colonne de * colonnes où * vont de 1 à 11.

Dans l'exemple suivant, nous avons <div class = "col-md-6"> .. </ div>, nous allons centrer ceci en utilisant la classe .col-md-offset-3.

<div class = "conteneur">

   <h1> Bonjour le monde! </ h1>

   <div class = "row">

      <div class = "col-xs-6" col-md-offset-3 "style =" couleur de fond: # dedef8;

         box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

         

         <p> Lorem ipsum dolor sit amet, consectetur elit adipisicing. </ p>

      </ div>

   </ div>

</ div>

Cela produira le résultat suivant -

Colonnes de nidification

Pour imbriquer votre contenu dans la grille par défaut, ajoutez un nouveau .row et un nouvel ensemble de colonnes .col-md- * dans une colonne existante .col-md- *. Les lignes imbriquées doivent inclure un ensemble de colonnes totalisant 12.

Dans l'exemple suivant, la mise en page comporte deux colonnes, la seconde étant divisée en quatre zones réparties sur deux lignes.

<div class = "conteneur">

   <h1> Bonjour le monde! </ h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: # dedef8;

         box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

         <h4> Première colonne </ h4>

         <p> Lorem ipsum dolor sit amet, consectetur elit adipisicing. </ p>

      </ div>

      <div class = "col-md-9" style = "background-color: # dedef8;

         box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

         <h4> Deuxième colonne - divisée en 4 cases </ h4>

         <div class = "row">

            <div class = "col-md-6" style = "couleur de fond: # B18904;

               box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

               <p> Soirée d’art Consectetur Sémiotique de Tonx Culpa.

                  Hypothèse Pinterest minimum organique. </ P>

            </ div>

            <div class = "col-md-6" style = "couleur de fond: # B18904;

               box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

               

               <p> sed eiusmod temporaire incididut ut labore et dolore magna

                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation

                  ullamco laboris nisi ut aliquip ex ea commodo conséquat. </ p>

            </ div>

         </ div>

         <div class = "row">

            <div class = "col-md-6" style = "couleur de fond: # B18904;

               box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

               <p> quis nostrud exercitation ullamco laboris nisi ut aliquip

                  ex ea commodo conséquat. </ p>

            </ div>

            <div class = "col-md-6" style = "couleur de fond: # B18904;

               box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

               <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,

                  sed eiusmod temporaire incididunt ut labore et dolore magna

                  aliqua. Ut en ad ad minim. </ P>

            </ div>

         </ div>

      </ div>

   </ div>

</ div>


3