Cours Bootstrap

Bootstrap website tutorial pdf [Eng]


Télécharger Bootstrap website tutorial pdf [Eng]

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

Télécharger aussi :


bootstrap website tutorial pdf [Eng]

Les conteneurs

Les conteneurs sont les éléments de présentation les plus élémentaires de Bootstrap et sont obligatoires pour l’utilisation de notre système de grille par défaut. Choisissez un conteneur réactif de largeur fixe (ce qui signifie que sa largeur maximale change à chaque point de rupture) ou de fluide (ce qui signifie qu’il est 100% large tout le temps).

Bien que les conteneurs puissent être imbriqués, la plupart des mises en page ne nécessitent pas de conteneur imbriqué.

<div class = "conteneur">

  <! - Content here ->

</ div>

Utilisez .container-fluid pour un conteneur pleine largeur, couvrant toute la largeur de la fenêtre.

<div class = "container-fluid">

  ...

</ div>

Points de rupture réactifs

Bootstrap étant conçu pour être mobile d’abord, nous utilisons une poignée de requêtes de support pour créer des points de rupture sensibles pour nos présentations et nos interfaces. Ces points d'arrêt sont principalement basés sur les largeurs minimales de la fenêtre d'affichage et nous permettent de redimensionner les éléments à mesure que la fenêtre d'affichage change.

Bootstrap utilise principalement les plages de requête de média suivantes (ou points d'arrêt) dans nos fichiers Sass source pour notre structure, notre système de grille et nos composants.

// Extra petits appareils (téléphones portrait, moins de 576 pixels)

// Aucune requête multimédia pour `xs` puisqu'il s'agit de la valeur par défaut dans Bootstrap

// Petits appareils (téléphones panoramiques, à partir de 576 pixels)

@media (min-width: 576px) {...}

// Appareils de taille moyenne (tablettes, 768 pixels et plus)

@media (min-width: 768px) {...}

// Gros appareils (ordinateurs de bureau, 992px et plus)

@media (min-width: 992px) {...}

// très grands périphériques (grands ordinateurs de bureau, 1200px et plus)

@media (min-width: 1200px) {...}

Depuis que nous écrivons notre code source CSS dans Sass, toutes nos requêtes multimédia sont disponibles via les mixins Sass:

// Aucune requête multimédia nécessaire pour le point d'arrêt xs car il s'agit en fait de @media (min-width: 0) {...} `

@include media-breakpoint-up (sm) {...}

@include media-breakpoint-up (md) {...}

@include media-breakpoint-up (lg) {...}

@include media-breakpoint-up (xl) {...}

// Exemple: Masquer à partir de `min-width: 0`, puis afficher au point de rupture` sm`

.custom-class {

  affichage: aucun;

}

@include media-breakpoint-up (sm) {

  .custom-class {

    bloc de visualisation;

  }

}

Nous utilisons parfois des requêtes multimédia qui vont dans l'autre sens (la taille d'écran donnée ou plus petite):

// Extra petits appareils (téléphones portrait, moins de 576 pixels)

@media (max-width: 575.98px) {...}

// Petits appareils (téléphones paysagers, moins de 768px)

@media (max-width: 767.98px) {...}

// Appareils de taille moyenne (tablettes, moins de 992px)

@media (max-width: 991.98px) {...}

// Gros appareils (ordinateurs de bureau, moins de 1200px)

@media (largeur maximale: 1199.98px) {...}

// très gros périphériques (grands ordinateurs de bureau)

// Aucune requête de média car le point d'arrêt extra-large n'a pas de limite supérieure sur sa largeur.

Notez que, les navigateurs ne prenant actuellement pas en charge les requêtes de contexte de plage, nous contournons les limitations des préfixes min et max et des fenêtres avec des largeurs fractionnaires (pouvant se produire dans certaines conditions sur les appareils à haute résolution, par exemple) en utilisant des valeurs avec des valeurs plus élevées. précision pour ces comparaisons.

Une fois encore, ces requêtes multimédia sont également disponibles via Sass mixins:

@include media-breakpoint-down (xs) {...}

@include media-breakpoint-down (sm) {...}

@include media-breakpoint-down (md) {...}

@include media-breakpoint-down (lg) {...}

// Aucune requête multimédia nécessaire pour le point d'arrêt xl car il n'a pas de limite supérieure pour sa largeur.

// Exemple: Style à partir du point d'arrêt moyen

@include media-breakpoint-down (md) {

  .custom-class {

    bloc de visualisation;

  }

}

Il existe également des requêtes multimédia et des mixines permettant de cibler un seul segment de tailles d'écran en utilisant les largeurs minimale et maximale des points d'arrêt.

// Extra petits appareils (téléphones portrait, moins de 576 pixels)

@media (max-width: 575.98px) {...}

// Petits appareils (téléphones panoramiques, à partir de 576 pixels)

@media (min-width: 576px) et (max-width: 767.98px) {...}

// Appareils de taille moyenne (tablettes, 768 pixels et plus)

@media (min-width: 768px) et (max-width: 991.98px) {...}

// Gros appareils (ordinateurs de bureau, 992px et plus)

@media (min-width: 992px) et (max-width: 1199.98px) {...}

// très grands périphériques (grands ordinateurs de bureau, 1200px et plus)

@media (min-width: 1200px) {...}

Ces requêtes médiatiques sont également disponibles via les mixins Sass:

@include media-breakpoint-only (xs) {...}

@include media-breakpoint-only (sm) {...}

@include media-breakpoint-only (md) {...}

@include media-breakpoint-only (lg) {...}

@include media-breakpoint-only (xl) {...}

De même, les requêtes multimédias peuvent s'étendre sur plusieurs largeurs de point d'arrêt:

// Exemple

// Appliquer des styles à partir de périphériques moyens et de très grands périphériques

@media (min-width: 768px) et (max-width: 1199.98px) {...}

Le mixin Sass pour cibler la même plage de taille d’écran serait:

@include media-breakpoint-between (md, xl) {...}

Z-index

Plusieurs composants Bootstrap utilisent z-index, la propriété CSS qui permet de contrôler la disposition en fournissant un troisième axe pour organiser le contenu. Dans Bootstrap, nous utilisons une échelle d'index-z par défaut conçue pour superposer correctement la navigation, les info-bulles et les popovers, les modaux, etc.



Ces valeurs plus élevées commencent par un nombre arbitraire, élevé et suffisamment spécifique pour éviter idéalement les conflits. Nous avons besoin d'un ensemble standard de ces composants dans nos composants en couches - info-bulles, popovers, barres de navigation, menus déroulants, modaux - pour que nous puissions être raisonnablement cohérents dans les comportements. Il n’ya aucune raison pour laquelle nous n’aurions pas pu utiliser 100+ ou 500+.

Nous n’encourageons pas la personnalisation de ces valeurs individuelles; Si vous en changez un, vous devrez probablement les changer tous.

$ zindex-dropdown: 1000! default;

$ zindex-sticky: 1020! default;

$ zindex-fixed: 1030! default;

$ zindex-modal-backdrop: 1040! default;

$ zindex-modal: 1050! default;

$ zindex-popover: 1060! default;

$ zindex-tooltip: 1070! default;

Pour gérer les bordures qui se chevauchent dans les composants (par exemple, les boutons et les entrées dans les groupes d'entrées), nous utilisons des valeurs d'indice z faibles à 1 chiffre de 1, 2 et 3 pour les états par défaut, survolé et actif. En survol / focus / actif, nous mettons au premier plan un élément particulier avec une valeur d'index z plus élevée pour afficher sa bordure sur les éléments frères.

Typographie

Documentation et exemples pour la typographie Bootstrap, y compris les paramètres globaux, les en-têtes, le corps du texte, les listes, etc.

Paramètres globaux

Bootstrap définit les styles d'affichage, de typographie et de lien globaux de base. Si vous avez besoin de plus de contrôle, consultez les classes d’utilitaires textuels.

  • Utilisez une pile de polices native qui sélectionne la famille de polices la mieux adaptée à chaque système d'exploitation et à chaque périphérique.
  • Pour une échelle de type plus inclusive et accessible, nous supposons la taille de police racine par défaut du navigateur (généralement 16 pixels) afin que les visiteurs puissent personnaliser les paramètres par défaut de leur navigateur si nécessaire.
  • Utilisez les attributs $ font-family-base, $ font-size-base et $ line-height-base comme base typographique appliquée au <body>.
  • Définissez la couleur du lien global via $ link-color et appliquez un soulignement de lien uniquement sur: survolez.
  • Utilisez $ body-bg pour définir une couleur d'arrière-plan sur <body> (#fff par défaut).

Ces styles peuvent être trouvés dans _reboot.scss et les variables globales sont définies dans _variables.scss. Assurez-vous de définir $ font-size-base in rem.

Rubriques

Tous les en-têtes HTML, <h1> à <h6>, sont disponibles.

Exemple de titre

<h1> </ h1> h1. Rubrique Bootstrap

<h2> </ h2> h2. Rubrique Bootstrap

<h3> </ h3> h3. Rubrique Bootstrap

<h4> </ h4> h4. Rubrique Bootstrap

<h5> </ h5> h5. Rubrique Bootstrap

<h6> </ h6> h6. Rubrique Bootstrap

<h1> h1. Rubrique Bootstrap </ h1>

<h2> h2. Rubrique Bootstrap </ h2>

<h3> h3. Rubrique Bootstrap </ h3>

<h4> h4. Rubrique Bootstrap </ h4>

<h5> h5. Rubrique Bootstrap </ h5>

<h6> h6. Rubrique Bootstrap </ h6>

Les classes .h1 à .h6 sont également disponibles, lorsque vous souhaitez faire correspondre le style de police d'un titre mais que vous ne pouvez pas utiliser l'élément HTML associé.

h1. Rubrique Bootstrap

h2. Rubrique Bootstrap

h3. Rubrique Bootstrap

h4. Rubrique Bootstrap

h5. Rubrique Bootstrap

h6. Rubrique Bootstrap

<p class = "h1"> h1. Rubrique Bootstrap </ p>

<p class = "h2"> h2. Rubrique Bootstrap </ p>

<p class = "h3"> h3. Rubrique Bootstrap </ p>

<p class = "h4"> h4. Rubrique Bootstrap </ p>

<p class = "h5"> h5. Rubrique Bootstrap </ p>

<p class = "h6"> h6. Rubrique Bootstrap </ p>

Personnalisation des rubriques

Utilisez les classes d’utilitaires incluses pour recréer le texte d’en-tête secondaire de Bootstrap 3.

En-tête d'affichage avec texte secondaire estompé

<h3>

  Rubrique d'affichage fantaisie

  <small class = "text-muted"> Avec du texte secondaire estompé </ small>

</ h3>

Afficher les titres

Les éléments d'en-tête traditionnels sont conçus pour fonctionner au mieux dans le contenu de votre page. Lorsque vous avez besoin d'un titre qui se démarque, envisagez d'utiliser un titre d'affichage, un style de titre plus grand et légèrement plus marqué.

Affichage 1

Affichage 2

Affichage 3

Affichage 4

<h1 class = "display-1"> Affichage 1 </ h1>

<h1 class = "display-2"> affichage 2 </ h1>

<h1 class = "display-3"> Affichage 3 </ h1>

<h1 class = "display-4"> affichage 4 </ h1>

Conduire

Faites un paragraphe se démarquer en ajoutant .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead">

  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

</ p>

Éléments de texte en ligne

Style pour les éléments HTML5 communs en ligne.

Vous pouvez utiliser la balise mark pour surligner du texte.

Cette ligne de texte est censée être traitée comme du texte supprimé.

Cette ligne de texte est censée être traitée comme n'étant plus exacte.

Cette ligne de texte est censée être traitée comme un ajout au document.

Cette ligne de texte sera rendue comme souligné

Cette ligne de texte doit être traitée en petits caractères.

Cette ligne est affichée en gras.

Cette ligne est affichée en italique.

<p> Vous pouvez utiliser la balise mark pour <mark> mettre en surbrillance </ mark> le texte. </ p>

<p> <del> Cette ligne de texte doit être traitée comme du texte supprimé. </ del> </ p>

<p> <s> Cette ligne de texte doit être traitée comme n'étant plus précise. </ s> </ p>

<p> <ins> Cette ligne de texte doit être traitée comme un ajout au document. </ ins> </ p>



<p> <u> Cette ligne de texte sera rendue comme souligné </ u> </ p>

<p> <small> Cette ligne de texte doit être traitée comme une impression fine. </ small> </ p>

<p> <strong> Cette ligne est affichée en gras. </ strong> </ p>

<p> <em> Cette ligne est affichée en italique. </ em> </ p>

Les classes .mark et .small sont également disponibles pour appliquer les mêmes styles que <mark> et <small> tout en évitant toute implication sémantique non désirée que les balises apporteraient.

Bien que cela ne soit pas illustré ci-dessus, n'hésitez pas à utiliser <b> et <i> en HTML5. <b> vise à mettre en évidence des mots ou des phrases sans donner d’importance supplémentaire, tandis que <i> s’applique principalement à la voix, aux termes techniques, etc.

Utilitaires de texte

Modifiez l'alignement du texte, la transformation, le style, l'épaisseur et la couleur avec nos utilitaires de texte et de couleur.

Les abréviations

Implémentation stylisée de l’élément <abbr> de HTML pour les abréviations et les acronymes afin d’afficher la version développée en survol. Les abréviations sont soulignées par défaut et obtiennent un curseur d’aide afin de fournir un contexte supplémentaire en survol et aux utilisateurs de technologies d’assistance.

Ajoutez .initialism à une abréviation pour une taille de police légèrement inférieure.

attr

HTML

<p> <abbr title = "attribut"> attr </ abbr> </ p>

<p> <abbr title = "Langage de balisage HyperText" class = "initialism"> HTML </ abbr> </ p>

Devis de blocs

Pour citer des blocs de contenu provenant d'une autre source de votre document. Enroulez <blockquote class = "blockquote"> autour de tout code HTML en tant que citation.

Lorem ipsum dolor sit amet, consectetur elit adipiscing. Entier posuere erat a ante.

<blockquote class = "blockquote">

  <p class = "mb-0"> Lorem ipsum dolor sit amet, consectetur elit adipiscing. Entier posuere erat an an. </ P>

</ blockquote>

Nommer une source

Ajoutez un <footer class = "blockquote-footer"> pour identifier la source. Enveloppez le nom du travail source dans <cite>.

Lorem ipsum dolor sit amet, consectetur elit adipiscing. Entier posuere erat a ante.

Un personnage célèbre dans Source Title

<blockquote class = "blockquote">

  <p class = "mb-0"> Lorem ipsum dolor sit amet, consectetur elit adipiscing. Entier posuere erat an an. </ P>

  <footer class = "blockquote-footer"> Quelqu'un de célèbre en <cite title = "Titre de la source"> Titre de la source </ cite> </ footer>

</ blockquote>

Alignement

Utilisez les utilitaires de texte nécessaires pour modifier l’alignement de votre citation de bloc.

Lorem ipsum dolor sit amet, consectetur elit adipiscing. Entier posuere erat a ante.

Un personnage célèbre dans Source Title

<blockquote class = "blockquote text-center">

  <p class = "mb-0"> Lorem ipsum dolor sit amet, consectetur elit adipiscing. Entier posuere erat an an. </ P>

  <footer class = "blockquote-footer"> Quelqu'un de célèbre en <cite title = "Titre de la source"> Titre de la source </ cite> </ footer>

</ blockquote>

Lorem ipsum dolor sit amet, consectetur elit adipiscing. Entier posuere erat a ante.

Un personnage célèbre dans Source Title

<blockquote class = "blockquote text-right">

  <p class = "mb-0"> Lorem ipsum dolor sit amet, consectetur elit adipiscing. Entier posuere erat an an. </ P>

  <footer class = "blockquote-footer"> Quelqu'un de célèbre en <cite title = "Titre de la source"> Titre de la source </ cite> </ footer>

</ blockquote>

Des listes

Non stylé

Supprimez le style de liste par défaut et la marge gauche des éléments de la liste (enfants immédiats uniquement). Cela ne s'applique qu'aux éléments de liste d'enfants immédiats, ce qui signifie que vous devrez également ajouter la classe aux listes imbriquées.

  • Lorem ipsum dolor sit amet
  • Consectetur elipiscing elit
  • Intenger molestie lorem à massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

o Phasellus iaculis neque

o ultrices de Purus sodales

o Vestibulum laoreet porttitor sem

o Ac tristique libero volutpat à

  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

<ul class = "list-unstyled">

  <li> Lorem ipsum dolor sit amet </ li>

  <li> Consectetur elip adipiscing elit </ li>

  <li> Integer molestie lorem à massa </ li>

  <li> Facilisis in pretium nisl aliquet </ li>

  <li> Nulla volutpat aliquam velit

    <ul>

      <li> Phasellus iaculis neque </ li>

      <li> Ultricies de Purus sodales </ li>

      <li> Vestibulum laoreet porttitor sem </ li>

      <li> Ac tristique libero volutpat sur </ li>

    </ ul>

  </ li>

  <li> Faucibus porta lacus fringilla vel </ li>

  <li> Aenean sit amet erat nunc </ li>

  <li> Eget porttitor lorem </ li>

</ ul>

En ligne

Supprimez les puces d’une liste et appliquez une marge légère en combinant deux classes, .list-inline et .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

<ul class = "list-inline">

  <li class = "list-inline-item"> Lorem ipsum </ li>

  <li class = "list-inline-item"> Phasellus iaculis </ li>

  <li class = "list-inline-item"> Nulla volutpat </ li>

</ ul>

Alignement de la liste de description



Alignez les termes et les descriptions horizontalement en utilisant les classes prédéfinies (ou mixins sémantiques) de notre système de grille. Pour les termes plus longs, vous pouvez éventuellement ajouter une classe .text-truncate pour tronquer le texte avec des points de suspension.

Listes de description

Une liste de description est parfaite pour définir les termes.

Euismod

Le vestibule id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non porta gravida à eget metus.

Malesuada Porta

Etiam porta sem malesuada magna mollis euismod.

Le terme tronqué est tronqué

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nidification

Liste de définition imbriquée

Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<dl class = "row">

  <dt class = "col-sm-3"> Listes de description </ dt>

  <dd class = "col-sm-9"> Une liste de description est idéale pour définir des termes. </ dd>

  <dt class = "col-sm-3"> Euismod </ dt>

  <dd class = "col-sm-9">

    <p> Identifiant de porte portel felis euismod semper eget lacinia odio sem nec elit. </ p>

    <p> Donec id elit non porta gravida au méticulier. </ p>

  </ dd>

  <dt class = "col-sm-3"> Portail Malesuada </ dt>

  <dd class = "col-sm-9"> Etiam porta sem malesuada magna mollis euismod. </ dd>

  <dt class = "col-sm-3 text-truncate"> Le terme tronqué est tronqué </ dt>

  <dd class = "col-sm-9"> Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </ dd>

  <dt class = "col-sm-3"> Imbrication </ dt>

  <dd class = "col-sm-9">

    <dl class = "row">

      <dt class = "col-sm-4"> Liste de définitions imbriquées </ dt>

      <dd class = "col-sm-8"> Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. </ dd>

    </ dl>

  </ dd>

</ dl>

Typographie sensible

La typographie adaptative consiste à redimensionner le texte et les composants en ajustant simplement la taille de la police de l’élément racine dans une série de requêtes multimédia. Bootstrap ne le fait pas pour vous, mais c’est assez facile à ajouter si vous en avez besoin.

En voici un exemple concret. Choisissez les tailles de police et les requêtes de média souhaitées.

html {

  taille de la police: 1rem;

}

@include media-breakpoint-up (sm) {

  html {

    taille de la police: 1.2rem;

  }

}

@include media-breakpoint-up (md) {

  html {

    taille de la police: 1.4rem;

  }

}

@include media-breakpoint-up (lg) {

  html {

    taille de la police: 1.6rem;

  }

}

Code

Documentation et exemples d’affichage de blocs de code en ligne et multilignes avec Bootstrap.

Code en ligne

Encapsulez des extraits de code en ligne avec <code>. Assurez-vous d'échapper aux crochets HTML.

Par exemple, <section> doit être encapsulé en ligne.

Par exemple, <code> & lt; section & gt; </ code> doit être encapsulé en ligne.

Blocs de code

Utilisez <pre> s pour plusieurs lignes de code. Encore une fois, assurez-vous d’échapper aux crochets du code pour obtenir un rendu correct. Vous pouvez éventuellement ajouter la classe .pre-scrollable, qui définira une hauteur maximale de 340 pixels et fournira une barre de défilement de l'axe des ordonnées.

<p> Exemple de texte ici ... </ p>

<p> Et une autre ligne d'échantillon de texte ici ... </ p>

<pre> <code> & lt; p & gt; Exemple de texte ici ... & lt; / p & gt;

& lt; p & gt; Et une autre ligne d'échantillon de texte ici ... & lt; / p & gt;

</ code> </ pre>

Variables

Pour indiquer les variables, utilisez la balise <var>.

y = mx + b

<var> y </ var> = <var> m </ var> <var> x </ var> + <var> b </ var>

Entrée utilisateur

Utilisez le <kbd> pour indiquer une entrée généralement saisie au clavier.

Pour changer de répertoire, tapez cd suivi du nom du répertoire.

Pour modifier les paramètres, appuyez sur ctrl +,

Pour changer de répertoire, tapez <kbd> cd </ kbd> suivi du nom du répertoire. <br>

Pour modifier les paramètres, appuyez sur <kbd> <kbd> ctrl </ kbd> + <kbd>, </ kbd> </ kbd>.



17