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

Bootstrap tutorial pdf w3schools [Eng]

Problème à signaler:

Télécharger



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

bootstrap tutorial pdf w3schools [Eng]

Qu'est-ce que Bootstrap?

  • Bootstrap est une infrastructure frontale gratuite permettant un développement Web plus rapide et plus facile.
  • Bootstrap inclut des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les modaux, les carrousels d'images et de nombreux autres, ainsi que des plugins JavaScript en option.
  • Bootstrap vous donne également la possibilité de créer facilement des conceptions réactives

Qu'est-ce que le design Web ré

actif?

Une conception Web réactive consiste à créer des sites Web qui s'adaptent automatiquement à tous les appareils, des petits téléphones aux grands ordinateurs de bureau.

Bootstrap 3 vs Bootstrap 4

Bootstrap 4 est la dernière version de Bootstrap; avec de nouveaux composants, une feuille de style plus rapide et plus de réactivité.

Bootstrap 4 prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes. Toutefois, Internet Explorer 9 et versions ultérieures ne sont pas pris en charge.

Si vous avez besoin de la prise en charge d'IE8-9, utilisez Bootstrap 3. Il s'agit de la version la plus stable de Bootstrap. Elle est toujours prise en charge par l'équipe pour les corrections de bogues critiques et les modifications de la documentation. Cependant, aucune nouvelle fonctionnalité ne sera ajoutée.

Prise en charge des icônes perdues: Bootstrap 4 ne prend pas en charge les glyphicons BS3. Utilisez plutôt Font-Awesome ou d’autres bibliothèques d’icônes.

Pourquoi utiliser Bootstrap?

Avantages de Bootstrap:

  • Facile à utiliser: toute personne possédant des connaissances de base en HTML et CSS peut commencer à utiliser Bootstrap.
  • Fonctions adaptatives: le CSS réactif de Bootstrap s'adapte aux téléphones, aux tablettes et aux ordinateurs de bureau.
  • Approche mobile d’abord: dans Bootstrap, les styles d’application mobile font partie du cadre principal.
  • Compatibilité de navigateur: Bootstrap 4 est compatible avec tous les navigateurs modernes (Chrome, Firefox, Internet Explorer 10+, Edge, Safari et Opera).

Où obtenir Bootstrap 4?

Il existe deux manières de commencer à utiliser Bootstrap 4 sur votre propre site Web.

Vous pouvez:

  • Inclure Bootstrap 4 à partir d’un CDN
  • Télécharger Bootstrap 4 à partir de getbootstrap.com

Bootstrap 4 CDN

Si vous ne souhaitez pas télécharger et héberger Bootstrap 4 vous-même, vous pouvez l'inclure à partir d'un CDN (Content Delivery Network).

MaxCDN fournit un support CDN pour CSS et JavaScript de Bootstrap. Vous devez également inclure jQuery:

... ...

Un avantage de l’utilisation du CDN Bootstrap 4:

De nombreux utilisateurs ont déjà téléchargé Bootstrap 4 à partir de MaxCDN lorsqu'ils visitent un autre site. En conséquence, il sera chargé à partir du cache lors de la visite de votre site, ce qui accélérera le temps de chargement. De plus, la plupart des CDN s'assureront qu'une fois qu'un utilisateur lui demandera un fichier, il sera servi par le serveur le plus proche, ce qui accélérera également le temps de chargement.

jQuery et Popper?

Bootstrap 4 utilise jQuery et Popper.js pour les composants JavaScript (tels que les modaux, les info-bulles, les popovers, etc.). Cependant, si vous utilisez uniquement la partie CSS de Bootstrap, vous n'en avez pas besoin.

Afficher les composants nécessitant jQuery »

...

Créer la première page Web avec Bootstrap 4

  1. Ajouter le doctype HTML5

Bootstrap 4 utilise des éléments HTML et des propriétés CSS qui nécessitent le doctype HTML5.

Toujours inclure le doctype HTML5 au début de la page, ainsi que l'attribut lang et le jeu de caractères correct:

<! DOCTYPE html>

<html lang = "en">

  <tête>

    <meta charset = "utf-8">

  </ head>

</ html>

  1. Bootstrap 4 est d'abord mobile

Bootstrap 4 est conçu pour être réactif aux appareils mobiles. Les styles Mobile-First font partie du cadre principal.

Pour assurer un rendu correct et un zoom tactile, ajoutez la balise <meta> suivante à l'intérieur de l'élément <head>:

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

La partie width = device-width définit la largeur de la page en fonction de la largeur d'écran du périphérique (qui varie en fonction du périphérique).

La partie initial-scale = 1 définit le niveau de zoom initial lors du premier chargement de la page par le navigateur.

  1. Conteneurs

Bootstrap 4 nécessite également un élément contenant pour envelopper le contenu du site.

Il existe deux classes de conteneurs parmi lesquelles choisir:

  1. La classe .container fournit un conteneur sensible à largeur fixe
  2. La classe .container-fluid fournit un conteneur pleine largeur, couvrant toute la largeur de la fenêtre.

.récipient

.container-fluid

Deux pages de base Bootstrap 4

L'exemple suivant montre le code d'une page Bootstrap 4 de base (avec un conteneur sensible à largeur fixe):

… …

Bootstrap 4 Grilles

Système Bootstrap 4 Grid

Le système de grille de Bootstrap est construit avec flexbox et permet jusqu'à 12 colonnes sur la page.

Si vous ne souhaitez pas utiliser les 12 colonnes individuellement, vous pouvez les regrouper pour créer des colonnes plus larges:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span

 span 4 span 4 span 4

span 4 span 8

span 6 span 6

durée 12

Le système de grille est réactif et les colonnes seront réorganisées automatiquement en fonction de la taille de l'écran.

Assurez-vous que la somme totalise 12 ou moins (il n'est pas nécessaire que vous utilisiez les 12 colonnes disponibles).

Classes de grille

Le système de grille Bootstrap 4 comprend cinq classes:

  • .col- (très petits appareils - largeur d'écran inférieure à 576 pixels)
  • .col-sm- (petits appareils - largeur d’écran égale ou supérieure à 576 pixels)
  • .col-md- (périphériques de taille moyenne - largeur d’écran égale ou supérieure à 768 pixels)
  • .col-lg- (gros périphériques - largeur d’écran égale ou supérieure à 992px)
  • .col-xl- (xlarge devices - largeur d'écran égale ou supérieure à 1200px)

Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.

Astuce: Chaque classe évolue. Par conséquent, si vous souhaitez définir les mêmes largeurs pour sm et md, il vous suffit de spécifier sm.

Structure de base d'une grille Bootstrap 4

Ce qui suit est une structure de base d'une grille Bootstrap 4:

<! - Contrôle la largeur de la colonne et la manière dont elles doivent apparaître sur différents périphériques ->

<div class = "row">

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

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

</ div>

<div class = "row">

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

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

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

</ div>

<! - Ou laissez Bootstrap gérer automatiquement la mise en page ->

<div class = "row">

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

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

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

</ div>

Premier exemple: créer une ligne (<div class = "row">). Ajoutez ensuite le nombre de colonnes souhaité (balises avec les classes appropriées .col - * - *). La première étoile (*) représente la réactivité: sm, md, lg ou xl, tandis que la deuxième étoile représente un nombre, ce qui devrait donner un total de 12 pour chaque ligne.

Deuxième exemple: au lieu d’ajouter un nombre à chaque colonne, laissez Bootstrap gérer la présentation pour créer des colonnes de même largeur: deux éléments "col" = 50% de la largeur de chaque col. trois colonnes = 33,33% largeur à chaque colonne. quatre colonnes = 25% largeur, etc. Vous pouvez également utiliser .col-sm | md | lg | xl pour rendre les colonnes réactives.

Ci-dessous, nous avons rassemblé quelques exemples de configurations de grille Bootstrap 4 de base.

Trois colonnes égales

.col

.col

.col

L'exemple suivant montre comment créer trois colonnes de même largeur, sur tous les périphériques et toutes les largeurs d'écran:

Exemple

<div class = "row">

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

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

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

</ div>

Colonnes réactives

.col-sm-3

.col-sm-3

.col-sm-3

.col-sm-3

L'exemple suivant montre comment créer quatre colonnes de largeur égale en commençant par les tablettes et en les redimensionnant sur des bureaux de très grande taille. Sur les téléphones mobiles ou les écrans dont la largeur est inférieure à 576 px, les colonnes s'empileront automatiquement les unes sur les autres:

Exemple

<div class = "row">

  <div class = "col-sm-3">. col-sm-3 </ div>

  <div class = "col-sm-3">. col-sm-3 </ div>

  <div class = "col-sm-3">. col-sm-3 </ div>

  <div class = "col-sm-3">. col-sm-3 </ div>

</ div>

Deux colonnes réactives inégales

.col-sm-4

.col-sm-8

L'exemple suivant montre comment obtenir deux colonnes de différentes largeurs, en commençant par les tablettes et en les redimensionnant sur de grands ordinateurs de bureau:

Exemple

<div class = "row">

  <div class = "col-sm-4">. col-sm-4 </ div>

  <div class = "col-sm-8">. col-sm-8 </ div>

</ div>

Conseil: vous en apprendrez plus sur les grilles Bootstrap 4 plus loin dans ce didacticiel.

Bootstrap 4 Texte / Typographie

Bootstrap 4 Paramètres par défaut

Bootstrap 4 utilise une taille de police par défaut de 16 pixels et une hauteur de ligne de 1,5.

La famille de polices par défaut est "Helvetica Neue", Helvetica, Arial, sans-serif.

De plus, tous les éléments <p> ont les marges top-top: 0 et margin-bottom: 1rem (16px par défaut).

<h1> - <h6>

Bootstrap 4 styles HTML rubriques HTML (<h1> à <h6>) avec un poids de police plus épais et une taille de police augmentée:

Exemple

h1 rubrique Bootstrap (2.5rem = 40px)

h2 rubrique Bootstrap (2rem = 32px)

En-tête h3 Bootstrap (1,75rem = 28px)

h4 rubrique Bootstrap (1.5rem = 24px)

En-tête h5 Bootstrap (1.25rem = 20px)

h6 rubrique Bootstrap (1rem = 16px)

Afficher les titres

Les titres d’affichage sont utilisés pour se démarquer plus que les titres habituels (taille de police plus grande et poids de police plus léger). Il existe quatre classes parmi lesquelles choisir: .display-1, .display-2, .display-3, .display- 4

Exemple

Affichage 1

Affichage 2

Affichage 3

Affichage 4

<petit>

Dans Bootstrap 4, l'élément HTML <small> est utilisé pour créer un texte secondaire plus clair dans n'importe quel en-tête:

Exemple

h1 titre texte secondaire

texte secondaire en-tête h2

texte secondaire en-tête h3

h4 titre texte secondaire

texte secondaire en-tête h5

h6 titre texte secondaire

<marque>

Bootstrap 4 appellera l'élément HTML <mark> avec une couleur d'arrière-plan jaune et un remplissage:

Exemple

Utilisez l'élément mark pour surligner du texte.

<abbr>

Bootstrap 4 appellera l'élément HTML <abbr> avec un bas de bordure en pointillé:

Exemple

L'OMS a été fondée en 1948.

<blockquote>

Ajoutez la classe .blockquote à une <blockquote> lorsque vous citez des blocs de contenu provenant d'une autre source:

Exemple

Depuis 50 ans, le WWF protège l’avenir de la nature. Le WWF est la plus grande organisation de protection de la nature au monde. Elle est présente dans 100 pays et compte 1,2 million de membres aux États-Unis et près de 5 millions dans le monde.

Sur le site du WWF

<dl>

Bootstrap 4 appellera l'élément HTML <dl> de la manière suivante:

Exemple

café

- boisson chaude noire

Lait

- boisson blanche froide

<code>

Bootstrap 4 appellera l'élément HTML <code> de la manière suivante:

Exemple

Les éléments HTML suivants: span, section et div définissent une section dans un document.

<kbd>

Bootstrap 4 appellera l'élément HTML <kbd> de la manière suivante:

Exemple

Utilisez ctrl + p pour ouvrir la boîte de dialogue Imprimer.

<pre>

Bootstrap 4 appellera l'élément HTML <pre> de la manière suivante:

Exemple

Texte dans un pré-élément

est affiché dans une largeur fixe

police, et il préserve

les deux espaces et

sauts de ligne.

Plus de cours de typographie

Les classes Bootstrap 4 ci-dessous peuvent être ajoutées pour styler davantage les éléments HTML:

Description de la classe

.font-weight-bold Texte en gras

.font-italic Texte en italique

.font-weight-light Texte léger

.font-weight-normal Texte normal

.lead Fait ressortir un paragraphe

.small Indique un texte plus petit (défini sur 85% de la taille du parent)

.text-left Indique le texte aligné à gauche

.text - * - left Indique que le texte est aligné à gauche sur les écrans de taille petite, moyenne, grande ou très grande

.text-center Indique un texte aligné au centre

.text - * - center Indique le texte aligné au centre sur les écrans de taille petite, moyenne, grande ou très grande

.text-right Indique un texte aligné à droite

.text - * - right Indique que le texte est aligné à droite sur les écrans de taille petite, moyenne, grande ou très grande

.text-justifier Indique un texte justifié

.text-monospace Texte monospace

.text-nowrap Indique qu'aucun texte n'est renvoyé

.text-lowercase Indique le texte en minuscule

.text-uppercase Indique le texte en majuscule

.text-capitalize Indique le texte en majuscule

.initialism Affiche le texte à l'intérieur d'un élément <abbr> dans une taille de police légèrement plus petite

.list-unstyled Supprime le style de liste par défaut et la marge de gauche sur les éléments de la liste (fonctionne à la fois sur <ul> et <ol>). Cette classe ne s'applique qu'aux éléments de liste d'enfants immédiats (pour supprimer le style de liste par défaut de toutes les listes imbriquées, appliquez également cette classe à toutes les listes imbriquées).

.list-inline Place tous les éléments de la liste sur une seule ligne (utilisée avec le .list-inline-item sur chaque élément <li>)

.pre-scrollable Fait défiler un élément <pre>

Bootstrap 4 Couleurs

Couleurs du texte

Bootstrap 4 a quelques classes contextuelles qui peuvent être utilisées pour fournir "le sens à travers les couleurs".

Les classes de couleurs de texte sont les suivantes: .text-muet, .text-primaire, .text-succès, .text-info, .text-warning, .text-danger, .text-secondaire, .text-blanc, .text- dark, .text-body (couleur du corps par défaut / souvent noir) et .text-light:

Exemple

Ce texte est en sourdine.

Ce texte est important.

Ce texte indique le succès.

Ce texte représente quelques informations.

Ce texte représente un avertissement.

Ce texte représente un danger.

Texte secondaire.

Texte gris foncé.

Le corps du texte.

Texte gris clair.

Les classes de texte contextuelles peuvent également être utilisées sur des liens, ce qui ajoutera une couleur de survol plus sombre:

Vous pouvez également ajouter une opacité de 50% pour le texte noir ou blanc avec les classes .text-black-50 ou .text-white-50:

Exemple

Texte noir avec une opacité de 50% sur fond blanc

Texte blanc avec une opacité de 50% sur fond noir

Couleurs de fond

Les classes de couleurs d'arrière-plan sont les suivantes: .bg-primaire, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark et .bg-light.

Notez que les couleurs d'arrière-plan ne définissent pas la couleur du texte. Par conséquent, dans certains cas, vous voudrez les utiliser avec une classe .text- *.

Exemple

Ce texte est important.

Ce texte indique le succès.

Ce texte représente quelques informations.

Ce texte représente un avertissement.

Ce texte représente un danger.

Couleur de fond secondaire.

Couleur de fond gris foncé.

Couleur de fond gris clair.

Bootstrap 4 Tables

Table de base Bootstrap 4

Une table Bootstrap 4 de base a un rembourrage léger et des séparations horizontales.

La classe .table ajoute un style de base à un tableau:

... ...

Tables réactives

La classe .table-responsive crée une table sensible: une barre de défilement horizontale est ajoutée à la table sur les écrans dont la largeur est inférieure à 992 pixels (si nécessaire). Lorsque vous visualisez sur une largeur supérieure à 992 pixels, il n'y a pas de différence:

Exemple

<div class = "table-responsive">

  <table class = "table">

    ...

  </ table>

</ div>

Vous pouvez également décider quand la table doit recevoir une barre de défilement, en fonction de la largeur de l'écran:

Classe Largeur de l'écran

.table-responsive-sm <576px

.table-responsive-md <768px

.table-responsive-lg <992px

.table-responsive-xl <1200px

Exemple

<div class = "table-responsive-sm">

  <table class = "table">

    ...

  </ table>

</ div>

Images de Bootstrap 4

Bootstrap 4 formes d'image

Coins arrondis:

Cercle:

La vignette:

Coins arrondis

La classe .rounded ajoute des coins arrondis à une image:

Exemple

<img src = "cinqueterre.jpg" class = "arrondi" alt = "Cinque Terre">

Cercle

La classe .rounded-circle façonne l'image en un cercle:

Exemple

<img src = "cinqueterre.jpg" class = "cercle arrondi" alt = "Cinque Terre">

La vignette

La classe .img-thumbnail façonne l'image en une vignette (bordée):

Exemple

<img src = "cinqueterre.jpg" class = "img-thumbnail" alt = "Cinque Terre">

Aligner des images

Flottez une image à droite avec la classe .float-right ou à gauche avec .float-left:

 Exemple

<img src = "paris.jpg" class = "float-left">

<img src = "paris.jpg" class = "float-right">


3