Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap » Bootstrap table download pdf [Eng]

Bootstrap table download pdf [Eng]

Problème à signaler:

Télécharger



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

bootstrap table download pdf [Eng]

...

Quelle est la table

Les tableaux HTML permettent de présenter les données sous forme de grille, comme des lignes et des colonnes. En utilisant Bootstrap, vous pouvez grandement améliorer l'apparence d'un tableau de manière simple.

Consultez le tutoriel sur les tableaux HTML pour en savoir plus sur les tableaux.

Créer une table simple avec Bootstrap

Vous pouvez créer des tableaux avec un style de base comportant des séparateurs

horizontaux et un petit remplissage de cellules (8 pixels par défaut), en ajoutant simplement la table .table de la classe Bootstrap à l'élément <table>.

Exemple

Essayez ce code »

  • <table class = "table">
  • <thead>
  • <tr>
  • <th> Row </ th>
  • <th> Prénom </ th>
  • <th> Nom </ th>
  • <th> Email </ th>
  • </ tr>
  • </ thead>
  • <tbody>
  • <tr>
  • <td> 1 </ td>
  • <td> John </ td>
  • <td> Carter </ td>
  • <td> johncarter@mail.com </ td>
  • </ tr>
  • <tr>
  • <td> 2 </ td>
  • <td> Peter </ td>
  • <td> Parker </ td>
  • <td> peterparker@mail.com </ td>
  • </ tr>
  • <tr>
  • <td> 3 </ td>
  • <td> John </ td>
  • <td> Rambo </ td>
  • <td> johnrambo@mail.com </ td>
  • </ tr>
  • </ tbody>
  • </ table>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Tables à rayures

Vous pouvez créer un tableau avec un arrière-plan alternatif, tel que des zébrures, en ajoutant simplement la classe .table-striped du Bootstrap à la classe de base .table.

Ceci est réalisé en ajoutant la couleur d'arrière-plan à la ligne du tableau dans l'élément <tbody> via le sélecteur CSS: nth-child (non pris en charge dans IE7-8).

Exemple

Essayez ce code »

  • <table class = "table table-striped">
  • <thead>
  • <tr>
  • <th> Row </ th>
  • <th> Prénom </ th>
  • <th> Nom </ th>
  • <th> Email </ th>
  • </ tr>
  • </ thead>
  • <tbody>
  • <tr>
  • <td> 1 </ td>
  • <td> John </ td>
  • <td> Carter </ td>
  • <td> johncarter@mail.com </ td>
  • </ tr>
  • <tr>
  • <td> 2 </ td>
  • <td> Peter </ td>
  • <td> Parker </ td>

<td> peterparker@mail.com </ td>

  • </ tr>
  • <tr>
  • <td> 3 </ td>
  • <td> John </ td>
  • <td> Rambo </ td>
  • <td> johnrambo@mail.com </ td>
  • </ tr>
  • </ tbody>
  • </ table>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Table avec des bordures sur tous les côtés

Vous pouvez également ajouter des bordures à toutes les cellules du tableau en ajoutant une classe .table délimitée par Bootstrap à la classe de base .table.

Exemple

Essayez ce code »

  • <table class = "table bordée de table">
  • <thead>
  • <tr>
  • <th> Row </ th>
  • <th> Prénom </ th>
  • <th> Nom </ th>
  • <th> Email </ th>
  • </ tr>
  • </ thead>
  • <tbody>
  • <tr>
  • <td> 1 </ td>
  • <td> John </ td>
  • <td> Carter </ td>
  • <td> johncarter@mail.com </ td>
  • </ tr>
  • <tr>
  • <td> 2 </ td>
  • <td> Peter </ td>
  • <td> Parker </ td>
  • <td> peterparker@mail.com </ td>
  • </ tr>
  • <tr>
  • <td> 3 </ td>
  • <td> John </ td>
  • <td> Rambo </ td>
  • <td> johnrambo@mail.com </ td>
  • </ tr>
  • </ tbody>
  • </ table>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Activer l'état de survol sur les lignes de la table

Vous pouvez également activer un état de survol sur les lignes de la table d'un élément <tbody> en ajoutant la classe .table-hover de la classe Bootstrap à la classe de base .table.

Exemple

Essayez ce code »

  • <table class = "table table-hover">
  • <thead>
  • <tr>
  • <th> Row </ th>
  • <th> Prénom </ th>
  • <th> Nom </ th>
  • <th> Email </ th>
  • </ tr>
  • </ thead>
  • <tbody>
  • <tr>
  • <td> 1 </ td>
  • <td> John </ td>
  • <td> Carter </ td>
  • <td> johncarter@mail.com </ td>
  • </ tr>
  • <tr>
  • <td> 2 </ td>
  • <td> Peter </ td>
  • <td> Parker </ td>

<td> peterparker@mail.com </ td>

  • </ tr>
  • <tr>
  • <td> 3 </ td>
  • <td> John </ td>
  • <td> Rambo </ td>
  • <td> johnrambo@mail.com </ td>
  • </ tr>
  • </ tbody>
  • </ table>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Table condensée ou compacte

Vous pouvez également rendre vos tables plus compactes et économiser de l'espace en ajoutant une classe supplémentaire condensée .table à la classe de base .table. La classe .table-condensed rend la table compacte en coupant le rembourrage des cellules en deux.

Exemple

Essayez ce code »

  • <table class = "table table-condensed">
  • <thead>
  • <tr>
  • <th> Row </ th>
  • <th> Prénom </ th>
  • <th> Nom </ th>
  • <th> Email </ th>
  • </ tr>
  • </ thead>
  • <tbody>
  • <tr>
  • <td> 1 </ td>
  • <td> John </ td>
  • <td> Carter </ td>
  • <td> johncarter@mail.com </ td>
  • </ tr>
  • <tr>
  • <td> 2 </ td>
  • <td> Peter </ td>
  • <td> Parker </ td>
  • <td> peterparker@mail.com </ td>
  • </ tr>
  • <tr>
  • <td> 3 </ td>
  • <td> John </ td>
  • <td> Rambo </ td>
  • <td> johnrambo@mail.com </ td>
  • </ tr>
  • </ tbody>
  • </ table>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Classes d'emphase facultatives pour les lignes de table

Certaines classes contextuelles mettent l'accent sur les données de lignes ou de cellules individuelles telles que le succès, l'avertissement, le danger, etc. en coloriant l'arrière-plan.

Exemple

Essayez ce code »

  • <table class = "table">
  • <thead>
  • <tr>
  • <th> Row </ th>
  • <th> Bill </ th>
  • <th> Date de paiement </ th>
  • <th> État du paiement </ th>
  • </ tr>
  • </ thead>
  • <tbody>
  • <tr class = "active">
  • <td> 1 </ td>
  • <td> Carte de crédit </ td>
  • <td> 04/07/2014 </ td>
  • <td> Appelez pour confirmer </ td>
  • </ tr>
  • <tr class = "success">
  • <td> 2 </ td>
  • <td> Eau </ td>
  • <td> 01/07/2014 </ td>
  • <td> payé </ td>
  • </ tr>
  • <tr class = "info">
  • <td> 3 </ td>
  • <td> Internet </ td>
  • <td> 05/07/2014 </ td>
  • <td> Modifier le plan </ td>
  • </ tr>
  • <tr class = "warning">
  • <td> 4 </ td>
  • <td> Électricité </ td>
  • <td> 03/07/2014 </ td>
  • <td> en attente </ td>
  • </ tr>
  • <tr class = "danger">
  • <td> 5 </ td>
  • <td> Téléphone </ td>
  • <td> 06/07/2014 </ td>
  • <td> Due </ td>
  • </ tr>
  • </ tbody>
  • </ table>

La sortie de l'exemple ci-dessus ressemblera à ceci:

Consultez la section des extraits pour obtenir des exemples de tables Bootstrap magnifiquement conçues.

Création de tables réactives avec Bootstrap

Avec Bootstrap 3, vous pouvez également créer des tableaux réactifs pour permettre le défilement horizontal sur de petits appareils (largeur d’écran inférieure à 768px). Cependant, si vous visualisez des tableaux sensibles sur d'autres appareils ayant une largeur d'écran supérieure à 768 pixels, vous ne verrez aucune différence.

Pour rendre une table sensible, placez-la simplement dans un élément <div> et appliquez-y la classe .table-responsive, comme illustré dans l'exemple ci-dessous:

Exemple

Essayez ce code »

  • <div class = "table-responsive">
  • <table class = "table bordée de table">
  • <thead>
  • <tr>
  • <th> Row </ th>
  • <th> Prénom </ th>
  • <th> Nom </ th>
  • <th> Email </ th>
  • <th> Biographie </ th>
  • </ tr>
  • </ thead>
  • <tbody>
  • <tr>
  • <td> 1 </ td>
  • <td> John </ td>
  • <td> Carter </ td>
  • <td> johncarter@mail.com </ td>
  • <td> Lorem ipsum dolor sit amet… </ td>
  • </ tr>
  • <tr>
  • <td> 2 </ td>
  • <td> Peter </ td>
  • <td> Parker </ td>
  • <td> peterparker@mail.com </ td>
  • <td> Vestibulum consectetur scelerisque… </ td>
  • </ tr>
  • <tr>
  • <td> 3 </ td>
  • <td> John </ td>
  • <td> Rambo </ td>
  • <td> johnrambo@mail.com </ td>
  • <td> Integer pulvinar leo id risus… </ td>
  • </ tr>
  • </ tbody>
  • </ table>
  • </ div>

Éléments de table pris en charge dans Bootstrap

Le tableau suivant répertorie les éléments de tableau HTML pris en charge et leur utilisation.

Description de la balise

<table>

Elément wrapper pour l'affichage des données sous forme de tableau.

<légende>

Le titre ou le résumé de ce que la table contient.

<thead>

Elément conteneur pour les lignes d'en-tête de table (<tr>) qui définit les en-têtes pour les colonnes de table.

<tbody>

Elément de conteneur pour les lignes de table (<tr>) qui définit le corps d'une table.

<tr>

Elément conteneur pour un ensemble de cellules de tableau (<td> ou <th>) qui apparaît sur une seule ligne.

<th>

Cellule de tableau spéciale pour les en-têtes de colonne.

<td>

Cellule de tableau par défaut pour le placement de données.

Listes d'amorçage

Dans ce tutoriel, vous apprendrez à styliser des listes HTML avec Bootstrap.

Créer des listes avec Bootstrap

Vous pouvez définir les trois types de listes suivants:

  • Listes non ordonnées: liste d'éléments dans lesquels l'ordre n'a pas d'importance explicite. Les éléments de liste dans les listes non ordonnées sont marqués par des puces.
  • Listes ordonnées: liste d'éléments dans lesquels l'ordre est explicitement important. Les éléments de la liste dans les listes ordonnées sont marqués d'un numéro.
  • Liste de définitions - Une liste de termes avec leurs descriptions associées.

Consultez le didacticiel sur les listes HTML pour en savoir plus sur les différents types de listes.

Listes ordonnées et non ordonnées

Parfois, vous devrez peut-être supprimer le style par défaut des éléments de la liste. Vous pouvez le faire en appliquant simplement la classe .list-unstyled aux éléments <ul> ou <ol> respectifs.

Exemple

Essayez ce code »

  • <ul class = "list-unstyled">
  • <li> Accueil </ li>
  • <li> produits
  • <ul>
  • <li> Gadgets </ li>
  • <li> Accessoires </ li>
  • </ ul>
  • </ li>
  • <li> À propos de nous </ li>
  • <li> Contact </ li>
  • </ ul>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Remarque: La classe .list-unstyled supprime le style de liste par défaut et le remplissage à gauche uniquement des éléments de liste qui sont les enfants immédiats de l'élément <ul> ou <ol>.

Mise en ligne des éléments de la liste commandés et non ordonnés

Si vous souhaitez créer un menu horizontal à l'aide d'une liste ordonnée ou non, vous devez placer tous les éléments de la liste sur une seule ligne, c'est-à-dire côte à côte. Vous pouvez le faire en appliquant simplement la classe .list-inline de Bootstrap aux éléments <ul> ou <ol> respectifs. La classe .list-inline ajoute également un remplissage gauche et droit (5px par défaut) à tous les éléments de la liste.

Exemple

Essayez ce code »

  1. <ul class = "list-inline">
  2. <li> Accueil </ li>
  3. <li> Produits </ li>
  4. <li> À propos de nous </ li>
  5. <li> Contact </ li>
  6. </ ul>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Création de listes de définition horizontales

Les termes et les descriptions dans les listes de définitions peuvent également être placés côte à côte à l'aide de la classe .dl-horizontale du Bootstrap. Les termes des listes de définitions horizontales seront tronqués s'ils sont trop longs pour figurer dans la colonne de gauche (160 pixels par défaut). Toutefois, dans les fenêtres les plus étroites, ils seront remplacés par la présentation empilée par défaut.

Exemple

Essayez ce code »

  • <dl class = "dl-horizontal">
  • <dt> Agent utilisateur </ dt>
  • <dd> Un agent utilisateur HTML est un périphérique qui interprète des documents HTML. </ Dd>
  • <dt> Script côté client </ dt>
  • <dd> Les scripts côté client font généralement référence à la catégorie de programmes informatiques sur le Web exécutés par le navigateur Web de l'utilisateur. </ Dd>
  • <dt> Arbre de document </ dt>
  • <dd> L'arborescence des éléments encodés dans le document source. </ Dd>
  • </ dl>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Remarque: les termes coupés dans les listes de définitions horizontales seront indiqués par des points de suspension (…) à l'aide de la propriété CSS Text-Overflow.

Dans le chapitre suivant, vous apprendrez à créer une liste d’éléments encore plus flexible et complexe à l’aide du composant du groupe de listes Bootstrap.

Groupes de listes d'amorçage

Dans ce tutoriel, vous apprendrez à utiliser le composant du groupe de listes Bootstrap.

Création de groupes de listes avec Bootstrap

Les groupes de listes sont des composants très utiles et flexibles pour afficher des listes d’éléments de manière élégante. Dans la forme la plus simple, un groupe de listes est simplement une liste non ordonnée avec la classe .list-group alors que les éléments de liste ayant la classe .list-group-item.

Exemple

Essayez ce code »

  1. <ul class = "list-group">
  2. <li class = "list-group-item"> Images </ li>
  3. <li class = "item-group-item"> Documents </ li>
  4. <li class = "list-group-item"> Musique </ li>
  5. <li class = "list-group-item"> Vidéos </ li>
  6. </ ul>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Groupe de listes avec éléments liés

Vous pouvez également créer un lien hypertexte entre les éléments du groupe de listes avec le peu de modification du marquage HTML.

Il suffit de remplacer la balise <li> par <a> et d’utiliser l’élément <div> en tant que parent au lieu de <ul>. Vous pouvez également ajouter des icônes et des badges à ce groupe de listes pour le rendre plus élégant. Le composant badges sera automatiquement positionné à droite.

Exemple

Essayez ce code »

  • <div class = "list-group">

<a href="#" class="list-group-item active">

  • <span class = "glyphicon glyphicon-camera"> </ span> Photos <span class = "badge"> 25 </ span>
  • </a>

<a href="#" class="list-group-item">

  • <span class = "glyphicon glyphicon-file"> </ span> Documents <span class = "badge"> 145 </ span>
  • </a>

<a href="#" class="list-group-item">

  • <span class = "glyphicon glyphicon-music"> </ span> Musique <span class = "badge"> 50 </ span>
  • </a>

<a href="#" class="list-group-item">

  • <span class = "glyphicon glyphicon-film"> </ span> Vidéos <span class = "badge"> 8 </ span>
  • </a>
  • </ div>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Conseil: vous pouvez utiliser le composant du groupe de listes Bootstrap pour créer le menu de navigation de la barre latérale, par exemple. affichage de la liste des produits ou des catégories sur votre site web.

Vous pouvez également ajouter d'autres éléments HTML tels que des en-têtes et des paragraphes dans ces groupes de listes.

Exemple

Essayez ce code »

  • <div class = "list-group">

<a href="#" class="list-group-item">

  • <h4 class = "list-group-item-header"> Qu'est-ce que le code HTML? </ H4>
  • <p class = "groupe-article-article-texte"> HTML signifie HyperText Markup Language. HTML est le langage de balisage standard pour décrire la structure des pages Web. </ P>
  • </a>

<a href="#" class="list-group-item active">

  • <h4 class = "list-group-item-header"> Qu'est-ce que Bootstrap? </ H4>

<P class = "list-group-item-text"> Bootstrap est un framework frontal élégant, intuitif et puissant destiné à un développement Web plus rapide et plus simple. C'est une collection de conventions CSS et HTML. </ P>

  • </a>

<a href="#" class="list-group-item">

  • <h4 class = "list-group-item-header"> Qu'est-ce que le CSS? </ H4>
  • <p class = "list-group-item-text"> CSS signifie "feuille de style en cascade". CSS vous permet de spécifier différentes propriétés de style pour un élément HTML donné, telles que les couleurs, les arrière-plans, les polices, etc. </ p>
  • </a>
  • </ div>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Groupe de listes avec états contextuels

Comme la plupart des autres composants, vous pouvez également utiliser des classes contextuelles sur les éléments du groupe de listes pour les mettre davantage en valeur, comme ceci:

Exemple

Essayez ce code »

  1. <ul class = "list-group">
  2. <li class = "élément de groupe de liste élément de groupe de succès"> 200 OK: le serveur a traité la demande avec succès. </ Li>
  3. <li class = "élément de liste-groupe-info de groupe"> 100 Continuer: le client doit poursuivre sa demande. </ Li>
  4. <li class = "élément de groupe de liste avertissement de groupe de groupe"> 503 Service non disponible: le serveur est temporairement incapable de traiter la demande. </ Li>
  5. <li class = "élément de groupe de liste élément de groupe de danger"> 400 requête incorrecte: la requête ne peut pas être remplie en raison d'une syntaxe incorrecte. </ Li>
  6. </ ul>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

De même, vous pouvez utiliser ces classes contextuelles pour les éléments du groupe de listes liées. Vous pouvez également utiliser la classe .active pour spécifier l'élément de groupe de liste actif.

Exemple

Essayez ce code »

  1. <div class = "list-group">
  2. <a href="#" class="list-group-item list-group-item-success"> 200 OK: le serveur a traité la demande avec succès. </a>
  3. <a href="#" class="list-group-item list-group-item-info active"> 100 Continuer: le client doit poursuivre sa demande. </a>
  4. <a href="#" class="list-group-item list-group-item-warning"> Service 503 non disponible: le serveur est temporairement incapable de traiter la demande. </a>
  5. <a href="#" class="list-group-item list-group-item-danger"> 400 demande incorrecte: la demande ne peut pas être remplie en raison d'une syntaxe incorrecte. </a>
  6. </ div>

Formulaires Bootstrap

Dans ce tutoriel, vous apprendrez à créer des formulaires élégants avec Bootstrap.

Créer des formulaires avec Bootstrap

Les formulaires HTML font partie intégrante des pages Web et des applications, mais le style des contrôles de formulaire manuellement, un par un avec CSS, est souvent ennuyeux et fastidieux. Bootstrap simplifie considérablement le processus de style et d'alignement des contrôles de formulaire, tels que les étiquettes, les champs de saisie, les zones de sélection, les zones de texte, les boutons, etc., via un ensemble prédéfini de classes.

Bootstrap fournit trois types différents de dispositions de formulaire:

  • Formulaire vertical (mise en page par défaut)
  • Forme horizontale
  • Formulaire en ligne

La section suivante vous donne un aperçu détaillé de ces dispositions de formulaire, ainsi que des différents composants Bootstrap liés à la forme, un par un.

Création d'une disposition de formulaire verticale

Il s'agit de la disposition de formulaire Bootstrap par défaut dans laquelle les styles sont appliqués aux contrôles de formulaire sans ajouter de classe de base à l'élément <form> ni de modifications importantes dans le balisage.

Les contrôles de formulaire de cette présentation sont empilés avec des étiquettes alignées à gauche en haut.

Exemple

Essayez ce code »

  • <formulaire>
  • <div class = "form-group">
  • <label pour = "inputEmail"> Email </ label>
  • <input type = "email" class = "form-control" id = "inputEmail" placeholder = "Email">
  • </ div>
  • <div class = "form-group">
  • <label for = "inputPassword"> Mot de passe </ label>
  • <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
  • </ div>
  • <div class = "checkbox">
  • <label> <input type = "checkbox"> Mémoriser mes informations </ label>
  • </ div>
  • <button type = "submit" class = "btn btn-primary"> Connexion </ button>
  • </ form>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Remarque: Dans Bootstrap 3, tous les éléments textuels tels que <input>, <textarea> et <select> avec la classe .form-control ont une largeur de 100% par défaut. Pour les utiliser en ligne, vous devez définir une largeur pour l'élément dans lequel les contrôles de formulaire sont utilisés.

Création d'une disposition de formulaire horizontale

Dans une mise en forme de formulaire horizontale, les étiquettes sont alignées à droite et flottantes à gauche pour les faire apparaître sur la même ligne que les contrôles de formulaire. La disposition de formulaire horizontale nécessite les diverses modifications de marquage d'une disposition de formulaire par défaut. Les étapes pour réaliser cette mise en page sont énumérées ci-dessous:

  • Ajoutez la classe .form-horizontale à l'élément <form>.
  • Placez les étiquettes et les contrôles de formulaire dans un élément <div> et appliquez la classe .form-group.
  • Utilisez les classes de grille prédéfinies de Bootstrap pour aligner les étiquettes et les contrôles de formulaire.
  • Ajoutez la classe .control-label à l'élément <label>.

Exemple

Essayez ce code »

  • <form class = "form-horizontal">
  • <div class = "form-group">
  • <label pour = "inputEmail" class = "control-label col-xs-2"> Email </ label>
  • <div class = "col-xs-10">
  • <input type = "email" class = "form-control" id = "inputEmail" placeholder = "Email">
  • </ div>
  • </ div>



1