Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap » Bootstrap tutorial in javatpoint [Eng]

Bootstrap tutorial in javatpoint [Eng]

Problème à signaler:

Télécharger



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

bootstrap tutorial in javatpoint [Eng]

Qu'est-ce que Bootstrap

o             Bootstrap est le HTML le plus populaire, CSS et framework JavaScript pour l'élaboration d'un site Web convivial et réactif mobile.

o             Il est absolument gratuit à télécharger et à utiliser.

o             Il est un cadre frontal utilisé pour le développement web plus facile et plus rapide.

o             Il comprend des modèles de conception en HTML et CSS pour la typographie, des formes, des boutons, tables, navigation, modaux, carrousels d'image et bien d'autres.

o             Il peut également utiliser des plug-ins JavaScript.

o             Il vous facilite de créer des modèles adaptés.

Histoire de Bootstrap

Bootstrap a été développé par Mark Otto et Jacob Thornton à Twitter.It a été libéré comme un produit open source en Août 2011 sur GitHub.

En Juin 2014 Bootstrap a été le projet n ° 1 sur GitHub.

Pourquoi utiliser Bootstrap

Ce qui suit est le principal avantage de Bootstrap:

o             Il est très facile à utiliser. Toute personne ayant des connaissances de base du langage HTML et CSS peut utiliser

Bootstrap.

o             Il facilite aux utilisateurs de développer un site réactif.

o             Il est compatible sur la plupart des navigateurs tels que Chrome, Firefox, Internet Explorer, Safari et Opera, etc.

Qu'est-ce qu'un site réactif

Un site Web est appelé site réactif qui peut automatiquement se régler pour bien paraître sur tous les appareils, des téléphones intelligents aux ordinateurs de bureau, etc.

Quel package contient Bootstrap

Échafaudage: Bootstrap fournit une structure de base avec le système de grille, les styles de lien, et arrière-plan.

CSS: Bootstrap est livré avec la fonction des paramètres CSS globaux, des éléments de base HTML style et un système de réseau avancé.

Composants: Bootstrap contient beaucoup de composants réutilisables construits pour fournir l'iconographie, des menus déroulants, navigation, alertes, pop-overs, et bien plus encore.

JavaScript Plugins: Bootstrap contient aussi beaucoup de plug-ins personnalisés jQuery. Vous pouvez facilement les inclure, ou un par un.

Personnaliser: Bootstrap components are customizable and you can customize Bootstrap's components, LESS variables, and jQuery plugins to get your own style.

Qu'est-ce que Bootstrap 4?

Bootstrap est la version la plus récente et la plus récente de Bootstrap. Il s’agit du cadre HTML, CSS et JavaScript le plus populaire pour le développement de premiers sites Web réactifs et mobiles.

Bootstrap 3 vs Bootstrap 4

Bootstrap 4 a de nouveaux composants, une feuille de style plus rapide, plus de boutons, d’effets et plus de réactivité.

Bootstrap 4 prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes.

Est-ce que Bootstrap est le meilleur?

Bootstrap est plus qu'efficace pour créer un premier site Web réactif et mobile, mais ce n'est pas le meilleur du secteur. Il existe une alternative à Bootstrap nommée W3.CSS qui est plus petite, plus rapide et plus facile à utiliser.

Premier exemple de bootstrap

Ajoutez le doctype HTML 5: Bootstrap utilise des éléments HTML et des propriétés CSS. Vous devez donc ajouter le doctype HTML 5 au début de la page avec l'attribut lang et le bon jeu de caractères.

Ex:

<!DOCTYPE html >

<html lang = "en" >

<head><meta http-equiv = "Content-Type" content = "text/html; charset=windows1252" >

<title> Any title </ title> </head> <body>

//write code

</body>

</html>

Bootstrap est adapté aux mobiles: Bootstrap 3 est conçu pour répondre aux besoins des appareils mobiles.

Les styles Mobile-first font partie du cadre principal de Bootstrap.Vous devez ajouter la balise <meta> suivante dans l'élément <head> pour un rendu correct et un zoom tactile:

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

Remarque: La partie "width = device-width" sert à définir la largeur de la page afin qu'elle suive la largeur de l'écran du périphérique (varie en fonction des périphériques).

La partie initial-scale = 1 est utilisée pour définir le niveau de zoom initial lors du premier chargement de la page par le navigateur.

Conteneurs: le conteneur est utilisé pour envelopper le contenu du site. Il existe deux classes de conteneurs.

o le. La classe conteneur fournit un conteneur sensible à largeur fixe.

o le. La classe container-fluid fournit un conteneur de largeur totale, couvrant toute la largeur de la fenêtre.

Premier exemple d'amorçage (avec conteneur sensible à largeur fixe)<!DOCTYPE html >

<html lang = "en" >

<head> <title> This is a Bootstrap example </ title>

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/boo tstrap.min.css" >

</head> <body> <div class = "container" >

<h1> First Bootstrap web page </ h1> <p> Write your text here.. </

p> </div>

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

<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ><

/script>

</body>

</html>

Conteneur Bootstrap

Dans Bootstrap, conteneur est utilisé pour définir les marges du contenu traitant des comportements réactifs de votre mise en page. Il contient les éléments de ligne et les éléments de ligne constituent le conteneur de colonnes (appelé système de grille).

La classe conteneur est utilisée pour créer un contenu encadré.

Il existe deux classes de conteneur dans Bootstrap:

  1. conteneur
  2. fluide de conteneur

Voir la disposition de base d'un conteneur:

<html> <body> <div class = "conteneur">

<div class = "row">

<div class = "col-md-xx"> </ div>

. . .

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

<div class = "col-md-xx"> </ div>

. . .

</ div> </ div>

</ body>

</ html>

Exemple de conteneur bootstrap

<! DOCTYPE html>

<html lang = "en">

<head> <title> Job </ title> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/boo tstrap.min.css" />

</ head>

<body>

<div class = "conteneur">

<h1> Conteneur </ h1> <p> contenu du conteneur </ p>

</ div>

<div class = "container-fluid">

<h1> Conteneur-fluide </ h1> <p> contenu du conteneur-fluide </

p> </ div>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </ scr ipt> <script src = "https: //maxcdn.bootstrapcdn. com / bootstrap / 3.3.5 / js / bootst

> <

/ script>

</ body>

</ html>

Bootstrap Jumbotron

Un jumbotron Bootstrap spécifie une grande boîte pour attirer l’attention sur un contenu ou une information particulière. Il s’affiche sous la forme d’une boîte grise à coins arrondis. Il peut également agrandir les tailles de police du texte qu'il contient.

Vous pouvez mettre n'importe quel code HTML ou d'autres éléments / classes Bootstrap valides dans un jumbotron.

La classe .jumbotron dans l'élément <div> est utilisée pour créer un jumbotron.

Jumbotron Inside Container

Le conteneur Inside est utilisé dans jumbotron, si vous souhaitez que le jumbotron ne s’étende pas au bord de l’écran.

Placez le jumbotron dans le <div class = "container">.

Example:

<!DOCTYPE html >

<html lang = "en" >

<head> <title> Bootstrap Example </ title> <meta charset = "utf-8"

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/b ootstrap.min.css" >

</head>

<body>

<div class = "container" >

<div class = "jumbotron" >

<h1> This is Jumbotron inside container! </ h1> <p> Jumbotron specifies a big box for getting extra attention to some special content or information. </ p> </div> <p> This is some text. </ p> <p> This is another text. </ p> </div>

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

script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"

> </script>

</body> </html>

Conteneur extérieur Jumbotron

Il est utilisé lorsque vous souhaitez que le jumbotron s’étende jusqu'aux bords de l’écran.

Placez le jumbotron en dehors de <div class = "container">.Example:

<!DOCTYPE html >

<html lang = "en" >

<head> <title> Bootstrap Example </ title> <meta charset = "utf-8"

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/cs s/bootstrap.min.css" >

</head>

<body>

<div class = "jumbotron" >

<h1> Ceci est le conteneur extérieur de Jumbotron! </ h1> <p> Jumbotron spécifie une grande boîte pour attirer l’attention sur un contenu ou une information particulière. </ p>

</ div>

<div class = "conteneur">

<p> Ceci est du texte. </ p> <p> Ceci est un autre texte. </ p> </ div>

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

</ script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.j s"> </ script> </ body> </ html>

Jumbotron pleine largeur

Pour obtenir un jumbotron sans bord arrondi, vous devez ajouter la classe .jumbotron-fluid et un .container ou .container-fluid à l'intérieur.

Exemple:

<! DOCTYPE html>

<html lang = "en">

<head> <title> Exemple d'amorçage </ title> <meta charset = "utf-8"

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0beta.2/css/bootstrap.min.css">

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

/ script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper. min.js"> </ script> <script src = "https: //maxcdn.bootstrapcdn.co

> </ script> </ head> <body>

<div class = "jumbotron jumbotron-fluid">

<div class = "conteneur">

<h1> Jumbotron pleine largeur </ h1> <p> Jumbotron spécifie une grande boîte pour attirer davantage l’attention sur un contenu ou une information particulière. </

p> </ div>

<div class = "conteneur">

<p> Ceci est du texte. </ p> <p> Ceci est un autre texte. </ p> </ div>

</ body>

</ html>

Bootstrap En-tête de page

Un en-tête de page est comme un diviseur de section. Il ajoute une ligne horizontale sous l'en-tête.

Le . La classe en-tête de page est utilisée pour créer un en-tête de page.

Exemple:

<! DOCTYPE html>

<html lang = "en">

<head> <title> Exemple d'amorçage </ title> <meta charset = "utf-8"

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

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

</ head>

<body>

<div class = "conteneur">

<div class = "page-header">

<h1> Exemple d'en-tête de page </ h1> </ div> <p> Ceci est du texte. </ p> <p> Ceci est un autre texte. </ p> </ div>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </ script> <script src = "https://maxcdn.bootstrapcdn.com / bootstrap / 3

n.js "> </ script> </ body>

</ html>

Bootstrap Badges publicitaires

Il existe sept styles pour ajouter un bouton dans Bootstrap. Utilisez les classes suivantes pour obtenir les différents styles de bouton:

  1. btn-default
  1. btn-primaire
  2. btn-succès
  3. btn-info
  4. btn-warning
  5. btn-danger
  6. btn-link

Exemple de bouton Bootstrap: spécification de sept styles

<! DOCTYPE html>

<html lang = "en">

<tête>

<title> Emploi </ title> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6 /css/bootstrap.min.css" />

</ head> <body> <h1> Exemple de bouton! </ h1>

<button class = "btn btn-default"> défaut </ button> <button class = "btn btn-primary"> primaire

</ button> <bouton class = "btn btn-danger"> danger </ bouton> <bouton class = "btn

btn-success "> succès </ button> <button class =" btn btn-info "> info </ button> <classe de boutons

= "btn btn-warning"> avertissement </ button> <button class = "btn btn-link"> Lien </ button>

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

</ script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min

. js "> </ script> </ body>

</ html>

Ces 3 boutons sont:

o secondaire

o sombre

o lumière

Les classes suivantes sont utilisées pour les spécifier respectivement:

<type de bouton = "bouton" class = "btn btn-secondary"> secondaire </ bouton> <type de bouton = "bouton" class = "btn btn-dark"> Sombre </

bouton> <type de bouton = "bouton" class = "btn btn-light"> Lumière </ button>

Exemple:

Voyons tous les boutons pris en charge dans Bootstrap 4.

<! DOCTYPE html>

<html lang = "en">

<head> <title> Exemple d'amorçage </ title> <meta charset = "utf-8"

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0

- beta.2 / css / bootstrap.min.css ">

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

> </ script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popp er.min.js"> </ script> <script src = "https: //maxcdn.bootstrapc

> </ script> </ head> <body>

<div class = "conteneur">

<h2> Styles de boutons </ h2> <type de bouton = "bouton" class = "btn"> Base </ bouton> <type de bouton = "bouton" class = "btn

btn-primaire "> Primaire </ button> <bouton type =" bouton "class =" btn btn-secondaire "> secondaire </ bouton> <bouton type =" bouton "class =" btn btn-success "> Succès </ bouton> <type de bouton = "bouton" class = "btn btn-info"> Informations </ bouton> <type de bouton = "bouton" class = "btn btn-warning"> Avertissement </ bouton> <bouton type = " "class =" btn btn-danger "> Danger </ button> <type de bouton

= "bouton" class = "btn btn-dark"> Sombre </ bouton> <type de bouton = "bouton" class = "btn btn-light"> Lumière </ bouton> <type de bouton = "bouton" class = "btn btn-link "> Lien </ button>

</ div>

</ body>

</ html>

Taille du bouton Bootstrap

Dans Bootstrap, vous pouvez choisir un bouton en fonction de vos besoins. Il fournit quatre tailles de bouton.

Les classes suivantes définissent les différentes tailles:

  1. btn-lg
  2. btn-md
  3. btn-sm
  4. btn-xs

Exemple:

<! DOCTYPE html>

<html lang = "en">

<head> <title> Exemple d'amorçage </ title> <meta charset = "utf-8"

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/c ss / bootstrap.min.css">

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

> </ script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min

. js "> </ script> </ head>

<body>

<div class = "conteneur">

<h2> Tailles des boutons </ h2> <button type = "button" class = "btn btn-primaire btn-lg"> Grand </ button> <button type = "bouton" class = "btn btn-primaire btnmd"> Moyen </ button> <button type = "bouton" class = "btn btn-primaire btn-sm"> petit </ button> <bouton type = "bouton" class = "btn btn-primaire btn-xs"> XSmall < / bouton> </ div>

</ body>

</ html>

Boutons Bootstrap Enable / Disable

Vous pouvez définir un bouton désactivé ou non cliquable.

Le . classe active est utilisé pour faire apparaître un bouton enfoncé, et la classe

. disabled rend un bouton non cliquable:

Exemple:

<! DOCTYPE html>

<html lang = "en">

<head> <title> Exemple d'amorçage </ title> <meta charset = "utf-8"

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/c ss / bootstrap.min.css">

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

> </ script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min

. js "> </ script> </ head>

<body>

<div class = "conteneur">

<h2> Etats des boutons </ h2> <type de bouton = "bouton" class = "btn btn-primary"> bouton principal </ bouton> <type de bouton = "bouton" classe

= "btn btnprimary active"> Actif principal </ button> <button type = "bouton" class = "btn btnprimary désactivé"> Désactivé primaire </ button>

</ div>

</ body>

</ html>

Boutons de niveau de bloc d'amorçage

Le bouton de niveau de bloc couvre toute la largeur de l'élément parent.

Le . La classe btn-block est utilisée pour créer un bouton de niveau de bloc:

Exemple:

<! DOCTYPE html>

<html lang = "en">

<head> <title> Exemple d'amorçage </ title> <meta charset = "utf-8"

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/c ss / bootstrap.min.css">

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

> </ script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min

. js "> </ script> </ head>

<body>

<div class = "conteneur">

<h2> Boutons de niveau de blocage </ h2> <button type = "bouton" class = "btn btn-primary btnblock"> bouton 1 </ button> <button type = "bouton" classe

= "btn btn-default btn-block"> Bouton 2 </ bouton>

<h2> Boutons de niveau de bloc large </ h2> <button type = "bouton" class = "btn btn-primaire btn-lg btnblock"> bouton 1 </ bouton> <button type = "bouton" class = "btn btn- btn-lg btnblock par défaut "> Bouton 2 </ bouton>

<h2> Boutons de niveau de petit bloc </ h2> <button type = "bouton" class = "btn btn-primaire btn-sm btnblock"> bouton 1 </ bouton> <button type = "bouton" class = "btn btn- btn-sm btnblock par défaut "> Bouton 2 </ bouton> </ div>

</ body>

</ html>

Button Classes avec d'autres éléments

Vous pouvez utiliser des classes de boutons avec d’autres balises, par exemple <a>, <button> ou <input>, etc.

Exemple:

<! DOCTYPE html>

<html lang = "en">

<tête>

<title> Exemple d'amorçage </ title> <meta charset = "utf-8">

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0beta.2/css/bootstrap.min.css">

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

</ script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper

. min.js "> </ script> <script src =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0beta.2/js/bootstrap.min.js "> </

script> </ head> <body>

<div class = "conteneur">

<h2> Classes de boutons avec d'autres éléments </ h2> <a href = "#" class = "btn binfo-info" role = "button"> Bouton de lien </ a>

<type de bouton = "bouton" class = "btn btn-info"> bouton </ bouton> <type d'entrée = "bouton" class = "btn btn-info" value = "Bouton d'entrée">

<input type = "submit" class = "btn btn-info" value = "Bouton de soumission">

</ div>

</ body>

</ html>

Boutons Contour / Bordé

Bootstrap 4 fournit huit boutons de contour / bordés:

Exemple

<! DOCTYPE html>

<html lang = "en">

<head> <title> Exemple d'amorçage </ title> <meta charset = "utf-8"

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

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0beta.2/css/bootstrap.min.css">

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

</ script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper

. min.js "> </ script>

 <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0beta.2/js/bootstrap.min.js"> </ script>

</ head> <body>

<div class = "conteneur">

<h2> Boutons Contour / Bordure de bouton </ h2> <button type = "button" class = "btn btn-outline-primary"> Primaire </ button>

<type de bouton = "bouton" class = "btn btn-outlinesecondary"> secondaire </ bouton> <type de bouton = "bouton" class = "btn

btn-outline-success "> Succès </ button> <bouton type =" bouton "class =" btn btn-aperçu-info "> Informations </ bouton> <bouton type =" bouton "class =" btn btn-contour- avertissement "> Avertissement </ button> <type de bouton =" bouton "class =" btn btn-contour-danger "> Danger </ bouton>

<type de bouton = "bouton" class = "btn btn-contour-dark"> sombre </ bouton> <type de bouton = "bouton" class = "btn btn-contour-light textdark"> clair

</ button> </ div>

</ body>

</ html>

Grille de bootstrap

Wikipedia dit:

"Dans la conception graphique, une grille est une structure (généralement bidimensionnelle) constituée d'une série de lignes droites (verticales, horizontales) qui se croisent et est utilisée pour structurer le contenu. Elle est largement utilisée pour concevoir la structure de présentation et de contenu dans la conception d'impression. En conception Web, c’est 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. "

Système Bootstrap Grid

Le système de grille Bootstrap autorise jusqu'à 12 colonnes sur la page. Vous pouvez utiliser les 12 colonnes individuellement ou les regrouper pour créer des colonnes plus larges.

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

Classes de grille:

Il existe quatre classes dans Bootstrap Grid System:

o xs (pour les téléphones)

o sm (pour les comprimés)

 o md (pour les ordinateurs de bureau)

o lg (pour les plus grands ordinateurs de bureau)

Vous pouvez combiner les classes ci-dessus pour créer des mises en page plus dynamiques et flexibles.

Structure de base d'une grille Bootstrap:

<div class = "row">

<div class = "col - * - *"> </ div> </ div> <div class = "rangée"

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

<div class = "col - * - *"> </ div> </ div> <div class = "rangée">

. . .

</ div>

Suivez les instructions ci-dessous lors de la création d'une grille Bootstrap:

o Créez une ligne (<div class = "row">).

o Ajoutez le nombre de colonnes que vous souhaitez dans la grille (balises avec les classes appropriées .col - * - *).

o Notez que les nombres en .col - * - * doivent toujours ajouter jusqu'à 12 pour chaque ligne.

Exemple de grille bootstrap

Pour les colonnes égales:

<! DOCTYPE html>

<html lang = "en">

<tête>

<title> Emploi </ title> <link rel = "stylesheet" href = "Https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6 /css/bootstrap.min.css" />

</ Head>

<body>

<div classe = "destinataire">

<H1> Exemple de calandre </ h1>

<div classe = "rangée">

<div classe = "Col-3 md-" style = "Background-color: lavande;" > Rahul </ div>

<div classe = "Col-3 md-" style = "Background-color: lavenderblush;" > Vijay </ div> <div classe = "Col-3 md-" style =

"Couleur de fond: lavande;" > Kartik </ div> <div classe = "Col-3 md-" style = "Background-color: lavenderblush;" > ajeet </ div> </ div>

</ Div> <script src = "Https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">

</ Script> <script src = «https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min

. js »> </ script> </ body>

</ html>

Pour les colonnes inégales:

<! DOCTYPE html>

<html lang = "En">

<Chef>

<Title> Emploi </ title> <link rel = "Feuille de style" href = "Https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6 /css/bootstrap.min.css" />

</ Head>

<body>

<div classe = "destinataire">

<H1> Exemple de calandre </ h1>

<div classe = "rangée">

<div classe = "Col-md-1" style = "Background-color: lavande;" > Rahul </ div> <div classe = "Col-MD-2" style = "Couleur-de-fond: lavenderblush;" > Vijay </ div> <div classe = "Col-md-4" style = "Background-color: lavande;" > Kartik </ div> <div classe =

"Col-MD-5" style = "Couleur de fond: lavenderblush;" > ajeet </ div> </ div>

</ div>

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

</ script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min

. js "> </ script> </ body>

</ html>

Classes de grille Bootstrap 4

Il y a 5 classes dans le système de grille Bootstrap 4.

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

Vous pouvez également combiner les classes ci-dessus pour créer des mises en page plus dynamiques et flexibles.

Structure de la grille Bootstrap 4

Voir la structure de base de la grille Bootstrap 4:

<- Check of the width of the column, and at a way to how to it it to different appareils -

<div classe = "rangée">

<div classe = "Col - * - *"> </ div> <div classe = "Col

- * - * "> </ div> </ div> <div classe =" rangée ">

<div classe = "Col - * - *"> </ div> <div classe = "Col

- * - * "> </ div> <div classe =" Col - * - * "> </ div> </ div>

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

<div classe = "rangée">

<div classe = "Col"> </ div> <div classe = "Col"

> </ div> <div classe = "Col"> </ div> </ div>


3