Cours Bootstrap

Apprendre a utiliser bootstrap [Eng] pdf


Télécharger Apprendre a utiliser bootstrap [Eng] pdf

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

Télécharger aussi :


36912151821242730333639424548515457606366697275

apprendre a utiliser bootstrap pdf [Eng]

...

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?

  • Approche d'abord mobile: Depuis Bootstrap 3, la structure consiste en styles de premier mobile dans toute la bibliothèque au lieu 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, n'importe qui 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. Plus d'informations sur le responsive design dans 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 comprend une fonctionnalité de paramètres CSS globaux, des éléments HTML fondamentaux stylés et améliorés avec des classes extensibles et 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 popovers et bien plus encore. Ceci est couvert en détail dans la section Layout

Composants.

  • 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.

Configuration de l'environnement d'amorçage

Il est très facile d’installer et de commencer à utiliser Bootstrap. Ce chapitre explique comment télécharger et configurer Bootstrap. Il abordera également la structure du fichier Bootstrap et montrera 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 les polices. Aucune documentation ou fichiers de code source d'origine ne sont inclus.

  • Source de téléchargement: 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 supporte officiellement onlyRecess, 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

PIECE DE BOTTE PRECOMPLET

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 voir, 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, de même que le thème Bootstrap optionnel.

CODE SOURCE DE DÉMARRAGE

Si vous avez téléchargé le code source Bootstrap, la structure du fichier serait 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:

<! DOCTYPE html>

<html>

 <tête>

tyle="font-size: 8pt;"> <title> Modèle Bootstrap 101 </ title>

 <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

 <! - Bootstrap ->

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

 <! - Prise en charge des éléments HTML5 et des requêtes multimédias dans HTML5 Shim et Respond.js IE8 ->

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

 <! - [si 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> Bonjour le monde! </ h1>

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

 <script src = "https://code.jquery.com/jquery.js"> </ script>

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

<script src = "js / bootstrap.min.js"> </ script>

 </ body>

</ html>

Ici, vous pouvez voir les fichiers jquery.js et bootstrap.min.js et bootstrap.min.css sont inclus pour faire une normale

Fichier HTM au modèle Bootstrapped.

Plus de détails sur chacun des éléments de ce code ci-dessus seront discutés dans le chapitreBootstrap CSS

Vue d'ensemble

Cette structure de modèle est déjà incluse dans l'outil Try it. Par conséquent, 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:

 <h1> Bonjour le monde! </ h1>

yle="font-size: 8pt;">…

Système Bootstrap Grid

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

Qu'est-ce qu'une grille?

Comme le 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 mots dans la conception 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é dans la documentation officielle de Bootstrap pour le système de grille:

Bootstrap comprend un premier système de grille de fluide mobile réactif capable d’échelonner de manière appropriée jusqu’à 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 gné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.

PREMIÈRE STRATÉGIE MOBILE

  • Contenu

o Déterminez ce qui est le plus important.

  • Disposition

o Concevez d’abord en petites largeurs

o Basez d'abord l'adresse CSS sur le périphérique mobile, puis l'adresse de requête de média pour la tablette et le 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 des enfants immédiats de 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 des 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:



Permet de considérer cette ligne:

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

STRUCTURE DE BASE DE LA GRILLE

Voici la structure de base de la grille Bootstrap:

<div class = "conteneur">

 <div class = "row">

 <div class = "col - * - *"> </ div>

 <div class = "col - * - *"> </ div>

 </ div>

 <div class = "row"> ... </ div>

</ div>

<div class = "container"> ....

Voyons quelques exemples de grille simples:

  • Exemple: empilé sur horizontal
  • Exemple: moyen et grand appareil
  • Exemple: mobile, tablette, ordinateurs de bureau

Exemple de système Bootstrap Grid: empilé sur horizontal

Voyons un exemple de grille simple avec une mise en page simple: deux colonnes, deux paragraphes par colonne. (Ici, le style de chaque colonne est utilisé. Vous pouvez l'éviter.)

<div class = "conteneur">

 <h1> Bonjour le monde! </ h1>

 <div class = "row">

 <div class = "col-md-6" style = "background-color: # dedef8; box-shadow:

 insert 1px -1px 1px # 444, insert -1 px 1px 1px # 444; ">

<p> Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis par le passé incididut ut labore et dolore magna aliqua. Tout en un minimum de poids, l’exercice physique nous permet d’acquérir des connaissances de base.

 </ p>

 <p> Il ya des erreurs et des erreurs naturelles si l’on commet une erreur, qu’il soit accusé de dolemque laudantium, qu’il n’ait plus d’invention, qu’il n’ait inventé que de vrais architectes et que l’architecture de la vie ait été dictée par son explicite.

 </ p>

 </ div>

 <div class = "col-md-6" style = "background-color: # dedef8; box-shadow:

 insert 1px -1px 1px # 444, insert -1 px 1px 1px # 444; ">

 <p> L'erreur la plus évidente est assis voluptatem accusantium doloremque laudantium.

 </ p>

 <p> </ p> <p> </ p> <p> </ p> <p> </ p> <i> </ p> </ p> </ p>, c'est ce que vous qui êtes, qui êtes assis, qui êtes assis, qui êtes assis, qui êtes adorable, qui est non-numéroté, est peu coûteux, mais il est beaucoup moins connu.

 </ p>

 </ div>

</ div>

Détails

  • Un élément <div class = "container"> ... </ div> a été ajouté pour garantir un centrage correct et une largeur maximale pour la présentation.
  • Une fois le conteneur ajouté, vous devez ensuite penser en termes de lignes. Ajoutez <div class = "row"> ... </ div> et les colonnes <div class = "col-md-6"> </ div> à l'intérieur des lignes.
  • Chaque ligne de la grille est composée de 12 unités et vous pouvez définir la taille souhaitée de vos colonnes à l'aide de ces unités. Dans notre exemple, nous avons deux colonnes composées chacune de 6 unités de large, soit 6 + 6 = 12.

Vous pouvez essayer d'autres options telles que <div class = "col-md-3"> </ div> et <div class = "col-md-9"> </ div> ou <div class = "col-md- 7 "> </ div> et <div class =" col-md-5 "> </ div>

Expérimentez et assurez-vous que la somme doit toujours être de 12.

Exemple de système Bootstrap Grid: Périphérique moyen et grand

Nous avons vu le système de grille de base dans Example: Stacked-to-horizontal. Ici, nous avions utilisé 2 divs et leur avions donné la séparation 50% / 50% à la largeur de la fenêtre de visualisation moyenne:

<div class = "col-md-6"> .... </ div>

<div class = "col-md-6"> .... </ div>

Mais dans l’ensemble, votre conception pourrait vraiment être meilleure à 33% / 66%. Nous allons donc le configurer pour modifier la largeur des colonnes au point de rupture:

<div class = "col-md-6 col-lg-4"> .... </ div>

<div class = "col-md-6 col-lg-4"> .... </ div>

Maintenant, Bootstrap va dire «à la taille moyenne, je regarde les classes contenant md et les utilise. En grande taille, je regarde les classes contenant le mot lg et les utilise. Dans ce cas, nos 2 divs vont d’un partage 50% / 50% à 33% / 66%. Découvrez-le dans l'exemple suivant. (Ici, le style de chaque colonne est utilisé. Vous pouvez l'éviter.)

<div class = "conteneur">

 <h1> Bonjour le monde! </ h1>

 <div class = "row">

 <div class = "col-md-6" col-lg-4 "style =" couleur d'arrière-plan: # dedef8;

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

 <p> Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis par le passé incididut ut labore et dolore magna aliqua. Tout en un minimum de poids, l’exercice physique nous permet d’acquérir des connaissances de base.

 </ p>

 <p> Il ya des erreurs et des erreurs naturelles si l’on commet une erreur, qu’il soit accusé de dolemque laudantium, qu’il n’ait plus d’invention, qu’il n’ait inventé que de vrais architectes et que l’architecture de la vie ait été dictée par son explicite.

 </ p>

 </ div>

 <div class = "col-md-6" col-lg-8 "" style = "background-color: # dedef8; box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

 <p> L'erreur la plus évidente est assis voluptatem accusantium doloremque laudantium.

 </ p>

 <p> </ p> <p> </ p> <p> </ p> <p> </ p> <i> </ p> </ p> </ p>, c'est ce que vous qui êtes, qui êtes assis, qui êtes assis, qui êtes assis, qui êtes adorable, qui est non-numéroté, est peu coûteux, mais il est beaucoup moins connu.

 </ p>

 </ div>

</ div>

Exemple de système Bootstrap Grid: Mobile, Tablet, Desktops

Nous avons vu un exemple pour les appareils de taille moyenne et grande. Passons maintenant à un autre niveau, où nous voudrions également le changer pour la taille réduite du téléphone. Disons que nous voulons ajouter l'option pour les colonnes à fractionner



25% / 75% pour les tablettes, nous allons comme ceci:

<div class = "col-sm-3 col-md-6 col-lg-4"> .... </ div>

<div class = "col-sm-9 col-md-6 col-lg-8"> .... </ div>

Maintenant, cela nous donne 3 dispositions de colonne différentes à chaque point. Sur un téléphone, ce sera 25% à gauche et 75% à droite. Sur une tablette, ce sera encore 50% / 50%, et sur une grande fenêtre, ce sera 33% / 66%. 3 dispositions différentes pour chacune des 3 tailles sensibles. Découvrez-le dans l'exemple suivant. (Ici, le style de chaque colonne est utilisé. Vous pouvez l'éviter.)

<div class = "conteneur">

 <h1> Bonjour le monde! </ h1>

 <div class = "row">

 <div class = "col-sm-3 col-md-6 col-lg-8"

 style = "background-color: # dedef8;

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

insert -1px 1px 1px # 444; ">

 <p> Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis par le passé incididut ut labore et dolore magna aliqua. Tout en un minimum de poids, l’exercice physique nous permet d’acquérir des connaissances de base.

 </ p>

 <p> Il ya des erreurs et des erreurs naturelles si l’on commet une erreur, qu’il soit accusé de dolemque laudantium, qu’il n’ait plus d’invention, qu’il n’ait inventé que de vrais architectes et que l’architecture de la vie ait été dictée par son explicite.

 </ p>

 </ div>

 <div class = "col-sm-9 col-md-6 col-lg-4"

 style = "background-color: # dedef8;

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

 insert -1px 1px 1px # 444; ">

 <p> L'erreur la plus évidente est assis voluptatem accusantium doloremque laudantium.

 </ p>

 <p> </ p> <p> </ p> <p> </ p> <p> </ p> <i> </ p> </ p> </ p>, c'est ce que vous qui êtes, qui êtes assis, qui êtes assis, qui êtes assis, qui êtes adorable, qui est non-numéroté, est peu coûteux, mais il est beaucoup moins connu.

 </ p>

 </ div>

</ div>

Réinitialisation de la colonne réactive

Avec les quatre niveaux de grilles disponibles, vous rencontrerez des problèmes pour lesquels, à certains points d'arrêt, vos colonnes ne sont pas effacées correctement, l'une étant plus haute que l'autre. Pour résoudre ce problème, utilisez une combinaison de class.clearfix et des classes d'utilitaires 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:

 insert 1px -1px 1px # 444, insert -1 px 1px 1px # 444; ">

 <p> Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis par le passé incididut ut labore et dolore magna aliqua. Tout en un minimum de poids, l’exercice physique nous permet d’acquérir des connaissances de base.

 </ p>

 <p> Lorem ipsum dolor sit amet, consectetur elite adipisicing, 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 enim ad minima veniam, quis nostrud exercites 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:

 insert 1px -1px 1px # 444, insert -1 px 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>

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

Colonnes décalées

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 les décalages sur de grands écrans, utilisez les classes .col-md-offset- *. 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 cela en utilisant la classe .col-md-offset-3.

<div class = "conteneur">

 <h1> Bonjour le monde! </ h1>



110