Bootstrap 4

Bootstrap 4

Introduction

Bootstrap est un framework front-end (HTML5, CSS et JavaScript) spécialement conçu pour le développement d'application web "responsive", c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).


Les avantages principaux de Bootstrap sont :

  • Facilité et vitesse de développement : les éléments mis à disposition par Bootstrap permettent de créer en peu de temps des pages avec un layout soigné et moderne ;
  • Facilité d'installation : Bootstrap se compose seulement de deux fichiers à inclure dans le code d'une page HTML.
  • Composants disponibles "out of the box" : les éléments qu'on retrouve plus fréquemment dans une page (e.g. menu de navigation, boutons, etc.) sont déjà disponibles et facilement adaptables.
  • Design "responsive" : la structure de la page s'adapte automatiquement à différents dispositifs et tailles d'écran.

Pour utiliser Bootstrap une connaissance de base de HTML5 et CSS est suffisante. Une connaissance de base de JavaScript serait également utile pour exploiter toutes les caractéristiques du framework. Parmi les caractéristiques les plus importantes, on trouve :

  • Reset du code CSS : toutes les propriétés de style déjà prévues dans les navigateurs sont annulées, permettant ainsi de garantir la compatibilité et l'homogénéité entre les navigateurs.
  • Structure de la page : on peut créer facilement des mises en page modulaires, grâce notamment à un système de division de la page en grille.
  • Composants d'interface graphique : disponible "out of the box", ces éléments comprennent des menus de navigation, des fenêtres modales, des formulaires, des tableaux, etc.
  • Éléments dynamiques : possibilité d'intégrer facilement des éléments dynamiques, comme des carrousels d'images, des onglets, des alertes, etc.

Placer le style entre les la balise head et le script en bas de la page avant la balise body.
Important : N'oublie pas d'ajouter la bibliothéque JQUERY.

Code :

Exemple :

Container Page

This is some text.

Code :

Exemple :

Container Full page

This is some text.

Exemple :

.col-3
.col-3
.col-3
.col-3
.col-6
.col-6
.col-10
.col-2

Code :

Exemple :

h1 Bootstrap heading (2.5rem = 40px)


h2 Bootstrap heading (2rem = 32px)


h3 Bootstrap heading (1.75rem = 28px)


h4 Bootstrap heading (1.5rem = 24px)


h5 Bootstrap heading (1.25rem = 20px)

h6 Bootstrap heading (1rem = 16px)

Display 1

Display 2

Display 3

Display 4

Exemple :

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

This text is dark grey.

Default body color (often black).

This text is light grey (on white background).

This text is white (on white background).

Code .table-striped :

Exemple .table-striped:

nom age Pays
Said 30 Maroc
Oumaima 26 France
Saadia 60 Maroc

Code .table-bordered :

Exemple .table-bordered:

nom age Pays
Said 30 Maroc
Oumaima 26 France
Saadia 60 Maroc

Code .table-hover :

Exemple .table-hover:

nom age Pays
Said 30 Maroc
Oumaima 26 France
Saadia 60 Maroc

Code .table-borderless :

Exemple .table-borderless :

nom age Pays
Said 30 Maroc
Oumaima 26 France
Saadia 60 Maroc

Code table avec des couleurs :

Exemple table avec des couleurs :

nom age Pays
Said 30 Maroc
Ali 37 Maroc
Amine 35 Maroc
Houda 20 Maroc
Rachida 30 Maroc
Oumaima 20 Maroc
Sbai 60 Maroc
Saadia 50 Maroc
Mohammed 40 Maroc
Ahmed 30 Maroc

Image rounded :

Exemple imagerounded:

Image rounded-circle :

Exemple image rounded-circle:

Image img-thumbnail :

Exemple image img-thumbnail:

Image float-right, float-left :

Exemple image float-right, float-left :

Image Centré :

Exemple image Centré :

Image Responsive :

Exemple image Responsive :

Code Jumbotron:

Exemple Jumbotron:

Bootstrap jumbotron

Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad

Code Full-width Jumbotron:

Exemple Full-width Jumbotron:

Bootstrap jumbotron

Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad

Exemple :

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

Code Button Styles :

Exemple Button Styles:

Code Button Outline :

Exemple Button Outline:

Code Button Sizes :

Exemple Button Sizes:

Code Spinner Buttons :

Exemple Spinner Buttons:

Code Button Groups :

Exemple Button Groups:

Code Split Button Dropdowns :

Exemple Split Button Dropdowns:

Add Delete

Code Badge :

Exemple Badge :

Primary Secondary Success Danger Warning Info Light Dark

Exemple Pill Badges:

Exemple Pill Badges:

Primary Secondary Success Danger Warning Info Light Dark

Code Badge avec élement:

Exemple Badge avec élement:

Code Progress Bars:

Exemple Progress Bars:



Code Progress Bars avec background:

Exemple Progress Bars avec background:



Code Progress Bars avec Label:

Exemple Progress Bars avec Label:

No striped


striped


striped animated

Code avec Spinner:

Exemple avec Spinner:

Code avec Breadcrumbs:

Exemple avec Breadcrumbs:

Code avec Pagination :

Exemple avec Pagination :

Dévéloppeur web Freelance
Devenir un développeur web

Devenir un développeur web en 1 mois

Créer votre cv gratuitement
Web Hosting Canada