Bootstrap 4 full tutorial pdf [Eng]


Télécharger Bootstrap 4 full tutorial pdf [Eng]

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

Télécharger aussi :


bootstrap 4 full tutorial pdf [Eng]

Démarrez avec Bootstrap, le framework le plus populaire au monde pour la création de sites réactifs destinés au mobile, avec BootstrapCDN et une page de démarrage de modèles.

Démarrage rapide

Vous souhaitez ajouter rapidement Bootstrap à votre projet? Utilisez BootstrapCDN , fourni gratuitement par les employés de StackPath . Vous utilisez un gestionnaire de paquets ou vous avez besoin de télécharger les fichiers source?  

CSS

Copier-coller la feuille de style   <lien>   Dans votre   <tête>   avant toutes les autres feuilles de style pour charger notre CSS.

JS

Beaucoup de nos composants nécessitent l'utilisation de JavaScript pour fonctionner. Plus précisément, ils requièrent jQuery, Popper.js et nos propres plugins JavaScript. Placez les <script> suivants à la fin de vos pages, juste avant la balise de fermeture </ body>, pour les activer. jQuery doit venir en premier, puis Popper.js, puis nos plugins JavaScript.

Nous utilisons la version slim de jQuery, mais la version complète est également prise en charge.

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" intégrité = "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" intégrité = "SHA384-ZMP7rVo3mIykV + 2 + 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK / l8WvCWPIPm49"crossorigin = "anonyme"> </ script>

<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" intégrité = "SHA384-ChfqqxuZUCnJSK3 + MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW / JmZQ5stwEULTy" crossorigin= "anonymous"> </ script>

Curieux de savoir quels composants requièrent explicitement jQuery, notre JS et Popper.js? Cliquez sur le lien Afficher les composants ci-dessous. Si vous n'êtes pas sûr de la structure générale de la page, continuez à lire pour un exemple de modèle de page.

Les fichiers bootstrap.bundle.js et bootstrap.bundle.min.js incluent Popper, mais pas jQuery. Pour plus d'informations sur ce qui est inclus dans Bootstrap, veuillez consulter notre section Contenu.

Afficher les composants nécessitant JavaScript

Modèle de départ

Assurez-vous que vos pages sont configurées avec les normes de conception et de développement les plus récentes. Cela signifie qu’il est nécessaire d’ utiliser un doctype HTML5 et d’inclure une baliseméta viewport pour obtenir les comportements réactifs appropriés. Rassemblez tout et vos pages devraient ressembler à ceci:

<! doctype html>

<html lang = "en">

  < tête >

    <! - Meta tags requis ->

< meta charset = "utf-8">

< meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

<! - Bootstrap CSS ->

<link rel = "stylesheet" href = "/bootstrap/4.1.3/css/bootstrap.min.css" intégrité = "SHA384-MCw98 / SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous">

< title> Bonjour tout le monde! </ title>

</ head>

< body >

<h1> Bonjour le monde ! < / h1>

<! - JavaScript optionnel ->

    <! - jQuery d'abord, puis Popper.js, puis Bootstrap JS ->

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" intégrité = "SHA384-Q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo" crossorigin = "anonymous"> </ script>

<script src = "/popper.js/1.14.3/umd/popper.min.js" intégrité = "SHA384-ZMP7rVo3mIykV + 2 + 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK / l8WvCWPIPm49"crossorigin = "anonyme"> </ script>

<script src = "/4.1.3/js/bootstrap.min.js" intégrité = "SHA384-ChfqqxuZUCnJSK3 + MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW / JmZQ5stwEULTy" crossorigin= "anonymous"> </ script>

</ body>

</ html>

C'est tout ce dont vous avez besoin pour connaître le nombre de pages requis. Visitez la documentation de présentation ou nos exemples officiels pour commencer à présenter le contenu et les composants de votre site.

Globaux importants

Bootstrap utilise une poignée de styles et de paramètres globaux importants dont vous devrez tenir compte lors de son utilisation, qui sont tous presque exclusivement conçus pour le   normalisation  de styles de navigateur croisés. Plongeons dedans.

Doctype HTML5

Bootstrap nécessite l'utilisation du doctype HTML5 . Sans cela, vous verrez un style funky incomplet, mais l'inclure ne devrait pas causer de hoquet considérable.

<! doctype html>

<html lang = "en">

  ...

</ html>

Balise méta sensible

Bootstrap est développé   mobile first , stratégie dans laquelle nous optimisons d'abord le code pour les appareils mobiles, puis mettons à l'échelle les composants à l'aide des requêtes de support CSS.Pour assurer un rendu correct et un zoom tactile pour tous les périphériques,   ajouter la balise meta réactif fenêtre   à ton   <tête> .

< meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

Taille de la boîte

Pour un dimensionnement plus simple en CSS, nous passons du global   taille de la boîte   valeur de   contenu-box   à   border-box . Cela garantit   rembourrage   n'affecte pas la largeur finale calculée d'un élément, mais peut entraîner des problèmes avec certains logiciels tiers tels que Google Maps et Google Custom Search Engine.

Dans les rares cas où vous devez le remplacer, utilisez l'une des méthodes suivantes:

.selector-for-some-widget {

  taille de la boîte : contenu-boîte;

}

Avec l'extrait de code ci-dessus, les éléments imbriqués, y compris le contenu généré via   :: avant   et   :: after: tous hériteront du spécifié   taille de la boîte pour cela   .selector-for-some-widget .

Redémarrer

Pour améliorer le rendu inter-navigateurs, nous utilisons   Redémarrer   corriger les incohérences entre les navigateurs et les périphériques tout en permettant des réinitialisations légèrement plus nuancées sur des éléments HTML courants.

Accessibilité

Un bref aperçu des fonctionnalités et des limitations de Bootstrap pour la création de contenu accessible.

Bootstrap fournit un cadre convivial de styles prédéfinis, d'outils de présentation et de composants interactifs, permettant aux développeurs de créer des sites Web et des applications attrayantes visuellement, riches en fonctionnalités et accessibles immédiatement.

Vue d'ensemble et limitations

L'accessibilité globale de tout projet construit avec Bootstrap dépend en grande partie du balisage de l'auteur, du style supplémentaire et des scripts inclus. Cependant, à condition que ceux-ci aient été correctement implémentés, il devrait être parfaitement possible de créer des sites Web et des applications avec Bootstrap conformes à la norme WCAG 2.0 (A / AA / AAA), Section 508 et à des normes et exigences d'accessibilité similaires.

Balisage structurel

Le style et la disposition de Bootstrap peuvent être appliqués à un large éventail de structures de balisage. Cette documentation a pour but de fournir aux développeurs des exemples de meilleures pratiques pour illustrer l'utilisation de Bootstrap et illustrer le balisage sémantique approprié, y compris les moyens de résoudre les problèmes d'accessibilité éventuels.

Composants interactifs

Les composants interactifs de Bootstrap, tels que les boîtes de dialogue modales, les menus déroulants et les info-bulles personnalisées, sont conçus pour fonctionner avec les utilisateurs tactiles, souris et clavier. En utilisant des outils pertinents   WAI-ARIA   rôles et attributs, ces composants doivent également être compréhensibles et utilisables à l'aide de technologies d'assistance (telles que les lecteurs d'écran).



Les composants de Bootstrap étant volontairement conçus pour être assez génériques, les auteurs peuvent avoir besoin d’inclure   ARIA   les rôles et les attributs, ainsi que le comportement JavaScript, pour mieux communiquer la nature et les fonctionnalités de leurs composants. Ceci est généralement noté dans la documentation.

Contraste de couleur

La plupart des couleurs qui constituent actuellement la palette par défaut de Bootstrap (utilisée dans le cadre pour des modifications telles que les variations de bouton, les variations d’alerte, les indicateurs de validation de formulaire) conduisent à:   insuffisant   contraste de couleur (inférieur à la valeur recommandée   Rapport de contraste de couleur WCAG 2.0 de 4,5: 1) lorsqu’il est utilisé sur un fond clair. Les auteurs devront modifier / étendre manuellement ces couleurs par défaut pour assurer des rapports de contraste de couleur adéquats.

Visuellement contenu caché

Le contenu qui doit être caché visuellement, tout en restant accessible aux technologies d'assistance telles que les lecteurs d'écran, peut être stylisé à l'aide de la   . sr- seulement   classe. Cela peut être utile dans les situations où des informations visuelles supplémentaires (telles que la signification indiquée par l'utilisation de couleurs) doivent également être transmises aux utilisateurs non-visuels.

<p class = "text-danger">

  <span class = " sr -only"> Danger: </ span>

Cette action n'est pas réversible

</ p>

Pour les contrôles interactifs visuellement cachés, tels que les liens traditionnels «ignorer»,   . sr- seulement   peut être combiné avec   . sr -seulement-focusable   classe. Cela garantira que le contrôle deviendra visible une fois la mise au point effectuée (pour les utilisateurs de clavier voyants).

<a class=" sr -seulement sr href -only-focusable" ="#content"> Passer au contenu principal </a>

Mouvement réduit

Bootstrap inclut le support pour le   préfère-réduit-mouvement   fonction média. Dans les navigateurs / environnements qui permettent à l'utilisateur de spécifier sa préférence pour le mouvement réduit, la plupart des effets de transition CSS dans Bootstrap (par exemple, lorsqu'une boîte de dialogue modale est ouverte ou fermée) sont désactivés. Actuellement, la prise en charge est limitée à Safari surmacOS et iOS.

Navigateurs et appareils

En savoir plus sur les navigateurs et les appareils, des plus modernes aux plus récents anciens, qui sont pris en charge par Bootstrap, y compris les quirks connus et les bugs pour chacun.

Navigateurs supportés

Bootstrap soutient le   dernières versions stables   de tous les principaux navigateurs et plates-formes. Sous Windows,   nous prenons en charge Internet Explorer 10-11 / Microsoft Edge .

Les navigateurs alternatifs utilisant la dernière version de WebKit , Blink ou Gecko, directement ou via l’API de visualisation Web de la plate-forme, ne sont pas explicitement pris en charge. Cependant, Bootstrap devrait (dans la plupart des cas) s’afficher et fonctionner correctement dans ces navigateurs. Des informations d'assistance plus spécifiques sont fournies ci-dessous.

"liste de navigateurs ": [

  " dernière 1 version majeure",

  "> = 1%",

  "Chrome> = 45",

  "Firefox> = 38",

  "Edge> = 12",

  "Explorateur> = 10",

  " iOS > = 9",

  "Safari> = 9",

  "Android> = 4.4",

  "Opéra> = 30"

]

Nous utilisons Autoprefixer pour gérer la prise en charge prévue du navigateur via les préfixes CSS, qui utilise Browserslist pour gérer les versions de ce navigateur. Consultez leur documentation pour savoir comment intégrer ces outils dans vos projets.

Appareils mobiles

De manière générale, Bootstrap prend en charge les dernières versions des navigateurs par défaut de chaque plate-forme principale. Notez que les navigateurs proxy (tels que Opera Mini, le mode Turbo d'Opera Mobile, UC Browser Mini, Amazon Silk) ne sont pas pris en charge.

Internet Explorer

Internet Explorer 10+ est pris en charge. IE9 et vers le bas ne l'est pas. Veuillez noter que certaines propriétés CSS3 et certains éléments HTML5 ne sont pas totalement pris en charge dans IE10 ou requièrent des propriétés préfixées pour une fonctionnalité complète. Visite   Puis-je utiliser…   pour plus de détails sur la prise en charge par le navigateur des fonctionnalités CSS3 et HTML5.

Si vous avez besoin de la prise en charge d'IE8-9, utilisez Bootstrap 3.   C'est la version la plus stable de notre code et est toujours prise en charge par notre équipe pour les corrections de bugscritiques et les modifications de la documentation. Cependant, aucune nouvelle fonctionnalité ne sera ajoutée.

Modaux et menus déroulants sur mobile

Débordement et défilement

Prise en charge du débordement: masqué; sur l'élément <body> est assez limité dans iOS et Android. À cette fin, lorsque vous faites défiler le haut ou le bas d'un modal dans l'un des navigateurs de ces périphériques, le contenu <body> commence à défiler. Voir le bogue Chrome n ° 175502 (corrigé dans Chrome v40) et le bogue WebKit n ° 153852.

Champs de texte iOS et défilement

Depuis iOS 9.2, lorsqu'un modal est ouvert, si le premier geste d'un geste de défilement se situe dans les limites d'un <input> textuel ou d'une < textarea >, le contenu <body> situé sous le modal défile à la place du modal. lui-même. Voir le bogue WebKit n ° 153856.

Navbar Dropdowns

L'élément .dropdown-backdrop n'est pas utilisé sur iOS dans la navigation à cause de la complexité de l'indexation z. Ainsi, pour fermer les listes déroulantes dans les barres de navigation , vous devez directement cliquer sur l'élément déroulant (ou sur tout autre élément déclenchant un événement de clic dans iOS).

Zoom du navigateur

Le zoom sur une page présente inévitablement des artefacts de rendu dans certains composants, à la fois dans Bootstrap et dans le reste du Web. En fonction du problème, nous pourrons peut-être résoudre le problème (effectuez d'abord une recherche, puis ouvrez un problème si besoin est). Cependant, nous avons tendance à les ignorer car ils n’ont souvent pas de solution directe autre que les solutions de contournement.

Gluant   : survol / : focus   sur iOS

Alors que: le survol n'est pas possible sur la plupart des appareils tactiles, iOS émule ce comportement, ce qui entraîne des styles de survol «persistants» qui persistent après avoir appuyé sur un élément.Ces styles de survol ne sont supprimés que lorsque les utilisateurs tapent sur un autre élément. Ce comportement est considéré comme largement indésirable et ne semble pas poser de problème sur les appareils Android ou Windows.

Tout au long de nos versions v4 alpha et bêta, nous avons inclus un code incomplet et commenté permettant d’opter pour un shim de requête multimédia qui désactiverait les styles de survol dans les navigateurs d’appareils tactiles qui émulent le survol. Ce travail n'a jamais été complètement terminé ni activé, mais pour éviter toute rupture, nous avons choisi de déconseiller ce correctif et de conserver les mixins comme raccourcis pour les pseudo-classes.

Impression

Même dans certains navigateurs modernes, l’impression peut être bizarre.

À partir de Safari version 8.0, l'utilisation de la classe .container à largeur fixe peut amener Safari à utiliser une taille de police inhabituellement petite lors de l'impression. Voir le numéro 14868 et lebogue WebKit 138192 pour plus de détails. La solution CSS suivante est une solution de contournement: @media print {

  .récipient {

    largeur : auto ;

  }

}

Navigateur stock Android

En sortie d'usine, Android 4.1 (et même certaines versions plus récentes apparemment) est livré avec l'application Navigateur comme navigateur Web par défaut (par opposition à Chrome).Malheureusement, l'application Navigateur présente de nombreux bugs et incohérences avec CSS en général.

Sélectionnez le menu

Sur   <select>   éléments, le navigateur de stock Android n’affiche pas les commandes latérales s’il existe un   rayon de la frontière   et / ou   frontière   appliqué. (Voir   cette question StackOverflow   pour plus de détails.) Utilisez l'extrait de code ci-dessous pour supprimer le CSS fautif et restituer le   <select>   comme élément non- stylé sur le navigateur de stock Android. Le sniffing de l'agent utilisateur évite les interférences avec les navigateurs Chrome, Safari et Mozilla.



< script >

$ (fonction () {

  var nua = navigator.userAgent

  var isAndroid = ( nua.indexOf ('Mozilla / 5.0')> -1 && nua.indexOf ('Android')> -1 && nua.indexOf (' AppleWebKit ')> -1 && nua.indexOf ('Chrome') = == -1)

  if ( isAndroid ) {

$ ('select.form-control'). removeClass ( 'form-control'). css ('width', '100%')

}

})

</ script>

Validateurs

Afin de fournir la meilleure expérience possible aux navigateurs anciens et obsolètes, Bootstrap utilise des piratages de navigateur CSS à plusieurs endroits pour cibler des CSS spéciales sur certaines versions de navigateur afin de contourner les bogues dans les navigateurs eux-mêmes. Ces hacks amènent naturellement les validateurs CSS à se plaindre de leur invalidité. À quelques endroits, nous utilisons également des fonctionnalités CSS de pointe qui ne sont pas encore complètement normalisées, mais elles sont utilisées uniquement pour une amélioration progressive.

Ces avertissements de validation importent peu dans la pratique car la partie non hacky de notre code CSS est entièrement validée et que les parties hacky n’interfèrent pas avec le bon fonctionnement de la partie non hacky. C’est pourquoi nous ignorons délibérément ces avertissements particuliers.

Nos documents HTML ont également des avertissements de validation HTML triviaux et sans conséquence en raison de l’inclusion d’une solution de contournement pour un certain bogue de Firefox.

Construire des outils

Apprenez à utiliser les scripts npm inclus dans Bootstrap pour créer notre documentation, compiler le code source, exécuter des tests, etc.

Configuration de l'outillage

Bootstrap utilise des scripts NPM pour son système de construction. Notre package.json comprend des méthodes pratiques pour travailler avec la structure, y compris la compilation de code, l'exécution de tests, etc.

Pour utiliser notre système de compilation et exécuter notre documentation localement, vous avez besoin d'une copie des fichiers source et du nœud de Bootstrap. Suivez ces étapes et vous devriez être prêt à basculer:

  1. Téléchargez et installez Node.js, que nous utilisons pour gérer nos dépendances.
  2. Accédez au répertoire racine / bootstrap et exécutez npm install pour installer nos dépendances locales répertoriées dans package.json .
  3. Installez Ruby, installez Bundler avec gem install bundler et exécutez enfin l’installation en bundle.Cela installera toutes les dépendances Ruby, telles que Jekyll et les plugins.
  • Utilisateurs Windows: lisez ce guide pour que Jekyll soit opérationnel sans problèmes.

Une fois terminé, vous pourrez exécuter les différentes commandes fournies à partir de la ligne de commande.

Utiliser les scripts NPM

Notre   package.json   inclut les commandes et tâches suivantes:

Tâche

La description

npm courir dist

npm run dist   crée le   / dist   répertoire avec les fichiers compilés.   Les usages   Sass ,   Préfixeur automatique , et   UglifyJS .

test npm

Pareil que   npm run dist   en plus, il exécute des tests localement

npm lancer des documents

Construit et lint CSS et JavaScript pour les documents. Vous pouvez ensuite exécuter la documentation localement via   npm lance docs-serve .

Courir   npm run   pour voir tous les scripts npm .

Préfixeur automatique

Bootstrap utilise   Préfixeur automatique   (inclus dans notre processus de construction) pour ajouter automatiquement des préfixes de fournisseur à certaines propriétés CSS au moment de la construction. Cela nous fait gagner du temps et du code en nous permettant d'écrire des parties clés de notre code CSS en une seule fois, tout en éliminant le besoin de mixins de fournisseurs comme ceux de la v3.

Nous maintenons la liste des navigateurs pris en charge via Autoprefixer dans un fichier séparé au sein de notre référentiel GitHub. Voir   / package.json   pour plus de détails.

Documentation locale

Exécuter notre documentation localement nécessite l’utilisation de Jekyll, un générateur de site statique très flexible qui nous fournit: éléments de base, fichiers basés sur Markdown, modèles, etc. Voicicomment obtenir il a commencé :

  1. Courir à travers la configuration de l'outillage   ci-dessus pour installer Jekyll (le constructeur du site) et d’autres dépendances Ruby avec   bundle installer .
  2. De la racine/ bootstrap   répertoire, exécuter   npm exécuter docs-serve   dans la ligne de commande.
  3. Ouvrir http: // localhost: 9001   dans votre navigateur, et voilà.

Dépannage

Si vous rencontrez des problèmes lors de l’installation de dépendances, désinstallez toutes les versions de dépendance précédentes (globales et locales). Puis relancez   npm installer .

Contenu

Découvrez ce qui est inclus dans Bootstrap, y compris nos variantes de code source et précompilées. N'oubliez pas que les plugins JavaScript de Bootstrap nécessitent jQuery.

Bootstrap précompilé

Une fois téléchargé, décompressez le dossier compressé et vous verrez à peu près ceci:

bootstrap /

├── css /

├── bootstrap-grid.css

├── bootstrap- grid.css.map

├── bootstrap-grid.min.css

├── bootstrap- grid.min.css.map

├── bootstrap-reboot.css

├── bootstrap- reboot.css.map

├── bootstrap-reboot.min.css

├── bootstrap- reboot.min.css.map

├── ├── bootstrap.css

├── bootstrap.css.map

St ├── bootstrap.min.css

└── bootstrap.min.css.map

└── js /

├── bootstrap.bundle.js

├── bootstrap.bundle.js.map

├── bootstrap.bundle.min.js

├── bootstrap.bundle.min.js.map

├── bootstrap.js

├── bootstrap.js.map

├── bootstrap.min.js

└── bootstrap.min.js.map

C’est la forme la plus élémentaire de Bootstrap: des fichiers précompilés pour une utilisation rapide dans presque tous les projets Web. Nous fournissons les fichiers CSS et JS compilés (bootstrap. *), Ainsi que les fichiers CSS et JS compilés et minifiés ( bootstrap.min . *). Les cartes sources (bootstrap. *. map) peuvent être utilisées avec les outils de développement de certains navigateurs. Les fichiers JS fournis (bootstrap.bundle.js et minified bootstrap.bundle.min.js) incluent Popper, mais pas jQuery.



261