Bootstrap 4 est un cadre populaire pour le développement de sites Web frontaux.
Il s’agit principalement d’une conception CSS mobile-first et comprend des modèles CSS et JavaScript pour des éléments tels que les formulaires, les boutons, la navigation, la typographie, les listes déroulantes, les popovers, les modaux et les carrousels, ainsi que d’autres éléments d’interface. Mais ne vous méprenez pas: Bootstrap offre également beaucoup de place pour la personnalisation et vous pouvez l’utiliser pour coder tout type de site Web.
Ceci est le package de base Bootstrap dont vous aurez besoin pour Télécharger. CSS est un langage de feuille de style pour les informations statiques.
Bootstrap.js
Une bibliothèque JavaScript / jQuery alimente certains composants de Bootstrap tels que l’animation, le défilement et l’interactivité.
Glyphicons
Glyphes sont des symboles élémentaires avec typographie, comme le symbole de la livre anglaise (£). Bootstrap a une énorme liste d’icônes de glyphes intégrés disponibles gratuitement.
Éléments de code source Bootstrap
Le téléchargement du code source Bootstrap comprend les ressources CSS, JavaScript et polices pré-compilées, ainsi que la source Less, JavaScript et la documentation.
Moins/ – une feuille de style de préprocesseur pour CSS qui élimine les tâches de codage répétitives
toupet/ – une version plus récente du préprocesseur qui est plus populaire
js / – se réfère simplement au code source JavaScript, qui permet aux composants Bootstrap de fonctionner
polices / – ce sont des polices d’icônes fournies avec le téléchargement
dist / – un dossier qui contient des fichiers précompilés pour une utilisation directe dans le développement de sites Web
Remarque: Bootstrap nécessite également l’installation de jQuery pour les plug-ins JavaScript de Bootstrap. jQuery est un composant riche en fonctionnalités de la bibliothèque JavaScript, et il réduit beaucoup de code JavaScript et les encapsule dans des actions que vous pouvez accomplir avec une seule ligne.
Les alertes sont des messages aux utilisateurs en cas de problème. Par exemple, si un utilisateur saisit une adresse e-mail ou un numéro de carte de crédit incorrect, il recevra un message d'alerte d'erreur, l'invitant à apporter des corrections.
.alerte-primaire
Vous pouvez créer des alertes colorées pour tous les textes. L'alerte principale (message le plus important) est de couleur bleu clair.
Alerte principale
.alerte-secondaire
Ajouter une alerte secondaire (message moins important) de couleur gris clair.
Je suis une alerte secondaire
.succès-alerte
Cela alertera un utilisateur que son action a réussi.
Alerte de succès!
.alerte-avertissement
Cela enverra un message d'action à venir.
Attention! Attention!
.alerte-danger
Une alerte de danger est similaire à une alerte d'avertissement, mais pour des actions plus négatives (par exemple, se verrouiller après trop d'échecs de mot de passe).
Tu es en grand danger, mon ami!
.lien d'alerte
Vous souhaitez donc ajouter un autre message et un lien vers ce message dans l'alerte d'origine? Vous pouvez intégrer ce message et de la même couleur.
Succès! Vous devriez lire ce message sympa.
.alerte-licenciable
Il fournit une option pour fermer l'alerte après l'avoir lue.
×Succès! Tu as bien fait.
.titre d'alerte
Ajoutez un en-tête rapide à votre alerte. (par exemple, "adresse de livraison" ou "adresse de facturation"). Il peut s'agir d'une page entière ou simplement d'un contenu de cette page.
.lumière d'alerte et .alerte-sombre
Modifie le style d'alerte en une couleur gris clair ou gris foncé.
Je suis l'alerte légère
Et je suis l'alerte sombre (latérale)!
Insignes
Utilisez des badges pour afficher des informations supplémentaires à côté d'une catégorie, d'un bouton ou d'autres éléments. Vous pouvez les créer et les styliser avec d'autres éléments de contexte (par exemple, .badge-warning). De plus, les badges seront mis à l'échelle pour correspondre à la taille de l'élément parent (par exemple, les en-têtes). Enfin, vous pouvez utiliser des badges dans le cadre de boutons ou de liens pour fournir des compteurs.
Exemple: en-têtes
Supposons que vous ayez un certain nombre de titres et que vous ajoutiez un badge. Ce badge s'ajustera en taille pour correspondre au titre.
Exemple d'en-tête Nouveau
Exemple d'en-tête Nouveau
.badge-pilule
Utilisez cette commande pour modifier la forme de vos badges, les rendant plus arrondis.
Lumière
.badge-primaire + .badge secondaire
Vous voudrez peut-être ajouter un badge aux messages principaux (plus importants) et secondaires (moins importants).
PrimaireSecondaire
.insigne transparent
Supposons que vous souhaitiez rendre un bouton transparent pour le faire ressortir du reste. Avec Bootcamp 4, vous n'avez pas besoin d'utiliser un style en ligne. Utilisez plutôt la commande suivante:
.avertissement de badge, .succès de badge, .badge-info, ou .insigne-danger
Ajoute un badge à une alerte d'avertissement, de réussite, d'information ou de danger.
AttentionSuccèsDangerInfo
Créer des badges exploitables avec les états de survol et de focus
Lorsque les utilisateurs déplacent leurs curseurs vers un bouton mais ne l'ont pas encore activé, vous pouvez fournir des éléments de survol et de focus pour encourager l'action.
Pour ce faire, utilisez les classes contextuelles .badge- * sur un élément.
Voici quelques exemples:
Primaire Secondaire Succès Danger Attention
.chapelure
Les fils d'Ariane sont des composants de navigation qui aideront les utilisateurs à passer d'une page à l'autre sans se perdre et leur donneront le moyen de revenir à une page précédente.
Accueil
Accueil
Bibliothèque
Accueil
Bibliothèque
Les données
.boutons
Comme son nom l'indique, la commande .button vous permet de créer et de styliser… un bouton.
.bouton-primaire + .bouton-secondaire
Un bouton principal est couramment utilisé pour une action de l'utilisateur; un bouton secondaire peut ensuite être utilisé pour fermer.
Concevez vos boutons à l'aide des options de style prédéfinies standard:
.contour-btn
Choisissez un contour de bouton suivant ces exemples d'extraits:
.btn-lg + .btn-sm
Changez la taille de vos boutons.
.btn-block
Regroupez vos boutons dans un bloc. Tous les boutons groupés couvriront toute la largeur d'un parent.
.actif
Par défaut, tous les boutons seront affichés comme pressés - avec une bordure sombre, un arrière-plan plus sombre et une ombre incrustée - lorsqu'ils sont actifs.
Remarque: Vous n'avez pas besoin d'ajouter une classe à
Mais, si pour une raison quelconque, vous devez forcer ce même aspect actif, utilisez l'extrait de code suivant:
Lien principal
Remarque: Vous pouvez également ajouter l'attribut booléen désactivé à n'importe quel bouton pour le rendre inactif.
Groupe de boutons
Utilisez cet élément pour créer un groupe de boutons de taille similaire sans les coder séparément.
.btn-group
.btn-group-vertical
Stylisez un groupe vertical de boutons:
.btn-group (Imbriqué)
Vous pouvez également créer des boutons imbriqués avec des menus déroulants.
Lien déroulant Lien déroulant
.btn-toolbar
Organisez les groupes de boutons dans une barre d'outils pour créer des composants plus complexes. Vous pouvez appliquer différentes classes d'utilitaires pour un style supplémentaire.
.bascule-groupe-btn
Installer Plugin Bootstrap Toggle pour modifier les cases à cocher en bascules. Vous pouvez ensuite ajouter data-toggle = "boutons" à un groupe de boutons avec des boutons modifiés pour activer leur comportement de basculement via JavaScrip. Ensuite, utilisez .bascule-groupe-btn pour styliser différentes entrées dans vos boutons.
Cartes
Les cartes sont des conteneurs flexibles avec des options pour les en-têtes / pieds de page, les couleurs et les options d'affichage, et plus encore. Ils ont remplacé plusieurs composants antérieurs (panneaux, puits et miniatures) de Bootstrap 3.
.corps de carte
L'élément principal de la carte. Utilisez-le pour ajouter une section rembourrée dans votre carte.
Votre texte génial
.titre de la carte
Codez un titre pour votre carte. Ajoutez ceci à un étiquette.
Grand titre
.sous-titre de la carte
Vous pouvez également ajouter des sous-titres à chaque carte pour plus de fantaisie.
Sous-titre de carte fantaisie
.lien de carte
Intégrez un lien à l'intérieur de votre carte. Ajoutez cette classe à un étiquette.
Lien vers quelque chose d'amusant
.carte-texte
Ajoutez quelques mots à votre carte. Autant ou aussi peu que vous le souhaitez.
Les roses sont rouges, les violettes sont bleues, J'apprends Bootstrap, Et vous?
.carte-img-top
Vous pouvez également joindre une image sur votre carte. Cet extrait en ajoutera un au-dessus.
Quelle image épique!
.card-img-bottom
Ou vous pouvez avoir l'image affichée en bas de la carte. Ton appel.
Regardez cette photo!
.superposition de carte-img
Utilisez une image comme arrière-plan et superposez tous les textes.
Je suis du texte qui a une image de fond!
.en-tête de carte
Placez un en-tête personnalisé en haut de votre carte. Il sera affiché au dessus de tous les titres et sous-titres.
Un gros en-tête!
.pied de carte
Vous pouvez également coder un pied de page pour votre carte afin de communiquer des informations supplémentaires. Il ira juste après la .corps de carte.
Un peu plus de contenu de carte
.groupe de cartes
Jouez avec la disposition des cartes et créez un groupe de cartes. Un groupe agira comme un seul élément attaché, chaque carte ayant la même largeur et la même hauteur. Vous pouvez également postuler affichage: flex; pour améliorer le dimensionnement.
Remarque: Les présentations de cartes de groupe ne répondent pas!
Carte numéro un
Je suis la première carte du groupe, affichant des informations intéressantes.
Numéro de carte deux
Je suis la carte du milieu dans le groupe et j'offre probablement la meilleure offre
Carte trois
Je suis la troisième carte essayant d'être aussi cool que la première.
.cartes-colonnes
Vous pouvez organiser vos cartes en colonnes de type maçonnerie. Cela vous permet de créer des modèles créatifs en utilisant uniquement CSS.
Remarque: Si vos cartes se répartissent sur plusieurs colonnes, définissez-les sur affichage: bloc en ligne.
.jeu de cartes
Assemblez un jeu de cartes non attachées de hauteur et de largeur égales.
Un titre
Vos textes
Une autre carte
Encore plus de textes que quelqu'un devra écrire.
Je suis aussi une carte!
Quelques mots à ajouter et à arranger
Carrousel
Configurez un diaporama pour parcourir une série de diapositives, de texte ou d'images. Construit avec CSS 3D et certains JS. Vous pouvez ajouter des images, du texte ou un balisage personnalisé, ainsi que ajouter ou supprimer des contrôles précédent / suivant.
Diapositive de carrousel - Création d'une seule diapositive
précédentProchain
.carrousel-fade
Ajoutez cet effet de fondu cool pour une diapositive avant la suivante.
précédentProchain
.indicateurs de carrousel
Ajoutez le contrôle et le support pour le suivant / précédent et des indicateurs tels que le numéro de diapositive.
précédentProchain
.carrousel-caption
Ajoutez une légende funky à chaque ou plusieurs diapositives.
Cool Slide Label
Je suis tellement fier de moi d'avoir codé cette diapositive.
Étiquette Even Cooler
Ouais, totalement bercé par tout ce truc de codage.
précédentProchain
Effondrement et accordéon
Réduire est un plugin JavaScript que vous pouvez utiliser pour masquer le contenu dans le menu «Réduire». L'élément replié animera sa hauteur de zéro à sa valeur normale lorsqu'il est déclenché et vice versa.
.effondrer
Cachez votre contenu.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffieh helvetica, bière artisanale wes anderson cred nesciunt sapiente ea proident.
.effondrement spectacle
Afficher le contenu réduit.
Un texte que vous avez décidé de cacher
.collapse.options
Activez le contenu en tant qu'élément pliable; accepte les objets facultatifs.
Une extension du comportement pliable aux cartes. Vous pouvez utiliser cette fonction pour créer un accordéon.
Remarque: Vous devez utiliser .accordion comme wrapper
Exemple d'extrait d'accordéon avec 2 éléments de groupe
Groupe n ° 1 pliable
Voici la première chose que je veux cacher dans cette carte.
Groupe n ° 2 pliable
Et voici un autre texte que je stylise avec l'accordéon.
Liste déroulante
Utilisez ce plugin pour créer des superpositions contextuelles pour afficher des listes de liens utilisateur. C’est une option pratique pour créer des menus. Les listes déroulantes sont construites via Popper.js, partie d'une bibliothèque tierce. Assurez-vous donc d'inclure popper.min.js avant le propre JavaScript de Bootstrap. Ou vous pouvez simplement utiliser bootstrap.bundle.min.js/ bootstrap.bundle.js. Les deux contiennent Popper.js.
Astuce de style rapide: toutes les listes déroulantes de Bootstrap sont basculées en cliquant, pas en survolant.
.menu déroulant
Ajouter un menu déroulant simple avec des boutons.
action Une autre action
.dropdown-toggle-split
Créer des listes déroulantes de boutons fractionnés avec un espacement approprié autour du curseur déroulant.
action Une autre action
.déposer jusqu'à
Saviez-vous que vous pouvez créer un menu à venir plutôt que vers le bas? Maintenant tu fais!
.dropright
Fournissez le menu à droite du bouton.
.dropleft
… Et vous pouvez également afficher le menu à gauche.
.dropdown-item-text
Ajoutez des éléments déroulants non interactifs à votre menu.
Texte brut Action cliquable Une autre action Tout ce dont vous avez besoin
.élément déroulant désactivé
Vous pouvez également choisir de désactiver tout élément de menu.
Lien actif Lien désactivé Un lien de plus
.liste déroulante
Ajoutez un simple séparateur entre les éléments du menu pour attirer davantage l'attention.
.menu déroulant-droite
Aligner l'ensemble du menu vers la droite.
Formes
Vous pouvez facilement créer des formulaires attrayants et coder des styles personnalisés, des mises en page et des éléments supplémentaires. Dans Bootstrap 4, les formulaires ont également reçu de nouveaux contrôles d'entrée tels que l'élection de numéros, la vérification des e-mails, etc., ainsi qu'un tas de nouvelles classes réactives.
Exemple de .groupe de formulaires
.contrôle de forme
Utilisez cette classe pour styliser tous les contrôles de formulaire textuel tels que les entrées utilisateur, les titres, etc..
.formulaire-contrôle-fichier
Ajoutez cette classe chaque fois que vous devez fournir à l'utilisateur une option pour télécharger un fichier dans le formulaire.
.formulaire-control-lg et .formulaire-control-sm
Créez une hiérarchie visuelle dans votre formulaire en ajoutant .formulaire-control-lg pour faire de plus grandes zones d'entrée et .formulaire-control-sm pour en faire des plus petits.
.formulaire-contrôle-texte en clair
Utilisez cette classe pour afficher correctement éléments de votre formulaire. Il remplacera le style de champ de formulaire par défaut par du texte brut tout en conservant la marge et le remplissage corrects.
.formulaire-control-range
Définissez des entrées de plage de défilement horizontal pour votre formulaire.
.vérification de forme
Ajoutez des cases à cocher à votre formulaire.
Remarque: Vous pouvez également ajouter des boutons radio au lieu de cases à cocher à l'aide de form-check-inputtype = "radio".
.form-check-inline
Créer une liste horizontale de cases à cocher.
.lecture seulement attribut booléen
Spécifiez qu'une certaine forme d'entrée est en lecture seule. Cela empêchera la modification de la valeur de l'entrée.
Formulaires personnalisés
Bootstrap 4 a plusieurs éléments de formulaire personnalisés qui remplacent les paramètres par défaut du navigateur.
.case à cocher personnalisée
Comme son nom l'indique, vous pouvez créer une case à cocher personnalisée pour votre formulaire.
.radio sur mesure
… Et vous pouvez également personnaliser une radio personnalisée!
.interrupteur personnalisé
Enfin, vous pouvez également créer un interrupteur personnalisé élégant.
.sélection personnalisée
Utilisez cette commande pour ajouter un menu de sélection personnalisé.
.fichier personnalisé
Personnalisez le téléchargement de fichiers utilisateur. Pour ce faire, ajoutez .fichier personnalisé classe autour de la contribution avec type = "fichier". Ajoutez ensuite le .entrée de fichier personnalisé à elle.
.gamme personnalisée
Concevoir un menu de gamme personnalisé.
Groupe d'entrée
L'élément de groupe d'entrée vous permet de créer des contrôles de formulaire plus interactifs et attrayants. Utilisez-le pour ajouter du texte, des icônes ou des boutons des deux côtés du champ de saisie.
.input.group - Exemple de base
Nom et prénom
.input-group-prepend
Fournir des textes supplémentaires devant l'entrée.
.entrée-groupe-append
… Ou listez-les derrière l'entrée.
.entrée-groupe-texte
Utilisez cette classe pour styliser des textes spécifiés.
.00
Jumbotron
Un composant flexible qui vous aidera à créer de grandes boîtes pour attirer davantage l'attention sur le contenu ou le message en vedette. Dans Bootstrap, le jumbotron ressemble à une boîte grise avec des coins arrondis qui agrandit automatiquement toutes les tailles de police et les textes à l'intérieur.
Vous pouvez ajouter n'importe quel HTML et autres classes Bootstrap dans un jumbotron.
.jumbotron
Hé, génial toi!
Ceci est une simple unité de héros, montrant que n'importe qui peut être un vrai héros!.
Utilisez des classes utilitaires pour la typographie et espacement
Prêt pour l'action
.jumbotron-fluid
Modifie légèrement l'apparence du jumbotron et le rend pleine page sans coins arrondis.
Jumbotron fluide
Je occupe tout l'espace horizontal de la page.
Groupe de listes
Utilisez des groupes de listes pour afficher une série de contenus, avec de nombreuses options de style et de mise en page.
.groupe de listes - Exemple
Créer un groupe de liste de base avec plusieurs éléments.
Lait
thé
Caramels
.liste-groupe-élément actif
Ajouter une classe active pour mettre en surbrillance la sélection active actuelle dans la liste.
Je veux ceci
Pas ça
Ou ca
.élément de groupe de liste désactivé
Montrez que l'un des éléments de la liste n'est pas disponible / désactivé. Certains éléments actifs (par exemple les liens) nécessiteront un JavaScript personnalisé en plus de .disable pour devenir totalement inactifs.
Ce produit est en rupture de stock
Mais nous avons cela!
Et aussi cette chose cool
.liste-groupe-élément-action
Ajoutez plus d'interactivité à votre liste en ajoutant des effets de style (désactivé, survolé, actif, etc.) à des éléments individuels.
Notre premier choix pour vous! Une bonne offre Aussi une option Quelque chose d'autre sur la liste Et celui-ci n'est pas disponible
.list-group-flush
Changez l'apparence de notre liste en supprimant les bordures et les coins arrondis. Tous les articles seront placés bord à bord.
Chai Latte
Matcha Latte
Thé Earl Grey
Rooibos vanille
Camarade
.liste-groupe-horizontal
Vous pouvez également configurer votre liste horizontalement plutôt que verticalement. Vous pouvez également coder le groupe de listes pour qu'il devienne horizontal à partir de la largeur minimale d'un certain point d'arrêt à l'aide de .liste-groupe-horizontal- {sm | md | lg | xl}.
Remarque: Vous ne pouvez pas utiliser simultanément des groupes de listes horizontales avec des groupes de listes vides.
Appliquer des styles standard aux éléments de liste individuels.
Toutes les couleurs que j'ai
Bleu clair
Gris clair
vert
rouge
Jaune
Sarcelle
blanc
gris
Objet multimédia
Bootstrap 4 vous permet de créer des composants complexes et répétitifs contenant des textes et certains supports. Les objets multimédias sont un outil génial pour créer des éléments de type tweet et des boîtes en vedette. En outre, ils sont ridiculement faciles à utiliser car ils ne nécessitent que deux classes.
.médias
Utilisez le .médias emballage et .corps médiatique autour du contenu pour créer un seul objet multimédia. Voici un exemple de titre.
Votre rubrique
Un message clé que vous souhaitez partager avec le monde!
.corps médiatique
Une classe spécifiant ce qui se trouverait à l'intérieur de votre objet. Vous pouvez coder différents alignements pour votre contenu. La valeur par défaut est top, mais vous pouvez vous aligner au milieu ou à la fin.
Médias alignés en haut
Lisez les textes décrivant l'image ci-dessus
Médias imbriqués
Vous avez également la possibilité d'inclure plusieurs objets multimédias. Les objets sont imbriqués en commençant par la marge de gauche et en tabulant chaque nouvel objet dans.
Voici un extrait pour l'imbrication.
Rubrique média
Voilà du texte.
Une autre rubrique Médias
Quelques autres textes expliquant ce qui se passe ici.
Nav
.nav est une classe de base qui vous aide à créer toutes sortes de composants de navigation, même avec des remplacements de style. Vous avez beaucoup d'options de personnalisation.
.nav exemple
Vous ne pouvez pas cliquer sur ce lien désactivé
Cliquez à la place
.nav-items
Une classe pour spécifier un nouvel élément dans le menu de navigation.
Un élément
.nav justifier-contenu-centre
Alignez votre nav horizontalement au centre.
actif
Lien
.nav justifier-contenu-fin
Ou justifiez votre contenu à droite.
actif
Lien
.nav-tabs
Ajoutez des onglets sympas à votre menu de navigation.
Au lieu de justifier, vous pouvez également forcer vos éléments de menu à remplir tout l'espace disponible à l'aide de cette commande. Cependant, tous les articles n'auront pas la même largeur.
actif
Ce lien est looooong
Lien court
Navbar
Navbar est un en-tête de navigation réactif avec beaucoup de flexibilité et de prise en charge de la marque, des formulaires, des liens, etc..
NavBar - En-têtes de navigation de base en haut de la page
Ma première barre de navigation
Accueil (courant)
Lien 1
Lien désactivé
.navbar-brand
Les barres de navigation sont fournies avec un support pour certains sous-composants. Cet élément fera ressortir davantage votre texte. Il a été pré-conçu pour accueillir un nom de produit ou de société.
Le nom de votre société
.navbar-text
Utilisez cette classe pour ajouter des chaînes de texte centrées verticalement et un espacement horizontal.
Je suis un texte de barre de navigation avec un élément en ligne
.navbar-expand (-sml -mdl -lgl -xl)
Activer l'effondrement réactif.
Navbar
Accueil (courant)
Lien
.navbar-toggler
Programmer différents comportements de basculement de navigation (par exemple, garder les éléments actifs ou les réduire).
Navbar
Accueil (courant)
Lien
.formulaire en ligne
Placer un formulaire (par exemple la barre de recherche) dans l'en-tête de navigation.
.collapse.navbar-collapse
Grouper et réduire le contenu de la barre de navigation par un point d'arrêt parent.
Navbar
Accueil (courant)
Lien
.Navbar Fixed-Top
Définissez une barre de navigation fixe comme couleur principale et foncée.
Dessus fixe
Bootstrap Modal (Plugin)
Il s'agit d'un plugin JavaScript utilisé pour ajouter des boîtes de dialogue à un site, telles que des notifications utilisateur, du contenu personnalisé et des fenêtres contextuelles lightbox.
Les modaux sont constitués de HTML, CSS et JavaScript. Et vous ne pouvez afficher qu'une seule fenêtre modale à la fois, car les créateurs de Bootstrap considèrent les modèles imbriqués comme une mauvaise pratique UX.
Exemple modal
Donnez-lui un titre
Ajoutez un corps de texte modal ici.
.centré sur le dialogue modal
Vous pouvez choisir de centrer tout le contenu verticalement.
Titre modal
Liste quelques textes.
.modal-dialog-scrollable
Lorsque vous devez intégrer plus de contenu dans un modal (par exemple, une longue politique de confidentialité), vous pouvez ajouter cette classe pour la faire défiler indépendamment de la page.
Titre modal
Ceci est un accord de termes et conditions super long que vous accepterez sans le lire.
.fondu modal
Fondu activé pour le contenu.
Titre modal
Je dois bien au moins quelque chose ici.
.modal-lg, .modal-sm, .modal-xl
Vous pouvez également ajuster la taille de vos modaux.
Je suis un grand modal!
Je suis un modal petit et mignon.
Je suis un modal géant!
Remarque: Bootstrap propose une démonstration de tous ces composants au Page modale. Ils valent le coup d'oeil.
Paginateurs
Si vous connaissez le HTML, les paginateurs ne sont pas nouveaux pour vous. Avec Bootstrap, vous avez plusieurs options pour les coiffer.
.pagination - exemple de pagination de base
«précédent
1
2
3
»Prochain
.élément de page désactivé
Vous pouvez choisir de désactiver l'un des éléments de pagination ou plusieurs.
précédent
1
2 (courant)
3
Prochain
.élément de page actif
Actif indique le stade actuel en le surlignant en bleu.
précédent
1
2 (courant)
3
Prochain
.pagination-lg
Rendez votre pagination plus grande et plus audacieuse.
précédent
1
2
3
Prochain
.pagination-sm
Ou le rendre petit et moins visible en taille.
précédent
1
2
3
Prochain
popovers
Le plugin Popover vous permet de créer une boîte pop-up avec du contenu et d'autres éléments, activée chaque fois qu'un utilisateur clique sur l'élément. Les popovers sont similaires aux info-bulles mais s'adaptent à plus de contenu.
Choses à savoir avant de commencer
Vous devez ajouter l'attribut, data-toggle = "popover" à un élément pour créer un popover.
Vous devez utiliser l'attribut title pour spécifier le texte d'en-tête.
Utilisez le contenu des données attribut pour spécifier le contenu à afficher dans le corps du popover.
Basculer le popover
Vous devez utiliser jQuery pour initialiser les popovers - popover ().
Popover
Voici le code qui activera les popovers sur votre page:
Positionnement de vos fenêtres pop-up - haut, bas, gauche ou droite
Spécifiez l'une des quatre positions pour votre popover.
Popover sur le dessus
Popover à droite
Popover en bas
Popover à gauche
Création d'un popover de conteneur
Codez un conteneur personnalisé chaque fois que vous sentez que certains styles d'un élément parent peuvent gâcher son apparence. L'ajout d'un attribut de conteneur «encapsulera» le code HTML du popover dans l'élément parent.
Offrez aux utilisateurs la possibilité de fermer un popover lorsqu'ils cliquent sur l'élément pour la deuxième fois. Vous pouvez organiser la fermeture de la fenêtre contextuelle lorsque l'utilisateur clique également en dehors de l'élément: data-trigger = "focus" attribut.
Par défaut, le popover est fermé lorsque vous cliquez à nouveau sur l'élément. Cependant, vous pouvez utiliser le data-trigger = "focus" attribut qui fermera le popover en cliquant en dehors de l'élément:
Cliquez moi
Le progrès
Développer une barre de progression personnalisée et ajouter des éléments de style supplémentaires tels que des étiquettes d'animation et de texte si vous le souhaitez.
.le progrès
Classe de configuration d'une barre de progression de base. Il agit comme un wrapper, indiquant la valeur maximale de votre barre de progression.
.barre de progression
Utilisez cette commande pour spécifier la progression actuelle.
.barre de progression à rayures
Ajoutez des rayures à la section de la barre de progression.
.barre de progression animée
Maintenant, faites bouger ces rayures, style poteau de barbier.
Ajouter plusieurs barres de progression
Vous pouvez ajouter simultanément plusieurs barres pour indiquer la progression de différents éléments. Ajustez l'allocation pour chacun à votre guise.
Scrollspy
Un plugin pratique que vous pouvez utiliser pour mettre en évidence des liens de navigation ou des éléments dans des groupes de listes pour permettre à un utilisateur de savoir où ils se trouvent actuellement sur une page.
Exemple de Scrollspy de base d'amorçage
Point un
Point deux
Ouais, c'est trois
Point un
Et du contenu à ce sujet..
Point deux
Et une autre explication.
Oui, c'est trois
Qui aurait deviné? :).
Décompressons cela un peu plus loin.
data-spy = "scroll" + cible de données
Pour activer scrollspy dans la navigation de la barre supérieure, ajoutez data-spy = "scroll" attribuer à l'élément que vous souhaitez surveiller. (dans la plupart des cas, votre objectif est le ).
Attribuer le cible de données attribut à l'élément parent dans le .nav pour que les liens de navigation soient ciblés pour la mise en évidence.
...
...
...
décalage de données
Cela spécifie un certain positionnement du défilement et peut être ajusté. La valeur par défaut est 10 pixels.
@graisse
...
@mdo
...
une
...
deux
...
Trois
...
Appel de Scrollspy via JavaScript
Vous disposez également de plusieurs méthodes pour activer ScrollSpy à l'aide de JavaScript. Pour ce faire, ajoutez la commande suivante dans votre CSS, après position: relative;
Lorsque vous ajoutez ou supprimez des éléments du DOM… et essayez d'utiliser scrollspy, vous devrez appeler la méthode d'actualisation à l'aide de la commande suivante:
.scrollspy («disposer»)
Utilisez cette méthode pour supprimer le scrollspy de l'élément.
activate.bs.scrollspy
Cet événement se déclenche sur l'élément scroll chaque fois que scrollspy active un nouvel élément.
$ ('[data-spy = "scroll"]'). on ('activate.bs.scrollspy', function () {
// Faisons cela…
})
Fileur
Utilisez ce plugin pour ajouter ce spinner animé. Les filateurs sont construits uniquement en HTML et CSS, sans JS. Mais… vous pouvez avoir besoin de JavaScript pour certaines options de style, par exemple pour basculer leur visibilité. De plus, vous avez le choix entre plusieurs options intéressantes.
.bordure tournante
Construire un indicateur de chargement noir et blanc.
Ou ajoutez une bordure colorée, en utilisant les attributs de style Bootstrap standard.
Chargement...
Chargement...
Chargement...
Chargement...
Chargement...
Chargement...
Chargement...
Chargement...
Croissant Spinner
Créez un spinner pulsant qui augmente et réduit en taille. Une alternative funky à la fileuse rotative. Encore une fois, il peut être conçu en plusieurs couleurs.
Chargement...
Table
Bootstrap offre un moyen simple de créer des tableaux. Ajouter une classe de base .table à un
et des styles personnalisés supplémentaires.
Remarque: Tous les styles de table sont hérités dans Bootstrap 4. Chaque table imbriquée sera stylée comme le parent.
.table - exemple
#
Première
Dernier
Manipuler
1
marque
Otto
@mdo
2
Jacob
Thornton
@graisse
3
Larry
l'oiseau
@Twitter
.table-sombre
Créer un tableau avec un fond sombre et des textes clairs.
#
Surnom
Suiveurs
Manipuler
1
Minimark
5.000
@minik
2
Gigi_B
24K
@concert
3
Birdie
50K
@bi) rdi
.lumière de la tête et .fil sombre
Vous pouvez également choisir de mettre en surbrillance une seule des entrées du tableau à l'aide de l'attribut dark / light.
#
Épisode
Nom
Évaluation
1
# 4
Un nouvel espoir
10/10
2
# 6
Le retour des Jedi
9/10
3
# 9
Montée du Skywalker
6/10
#
Épisode
Titre
Raiting
1
marque
Otto
@mdo
2
# 2
La vengeance des Sith
7/10
3
# 5
L'empire contre-attaque
10/10
.à rayures
Ajoutez cette classe dans le
faire de votre table un zèbre rayé.
#
Prénom
Nom de famille
1
Dark
Vader
2
Rayon
Juste Ray
.bordé de table
Bordures de style pour toutes les cellules et tous les côtés du tableau.
#
Prénom
Nom de famille
1
P'tit
Kim
2
Kanye
Ouest
.sans bordure de table
Abandonnez les frontières pour donner à votre table une touche minimaliste.
#
Prénom
Nom de famille
1
Indiana
Jones
2
Han
Solo
.survol de la table
Ajouter un état de survol sur les lignes du tableau.
#
Prénom
Nom de famille
1
marque
Twain
2
Henri
James
.table-sm
Réduisez votre table. Cette classe réduira de moitié le rembourrage des cellules.
Peindre des lignes de table individuelles de différentes couleurs.
...
...
...
...
...
...
...
...
...
Toasts
Un plugin qui vous permet d'ajouter des «notifications push» avec Flexbox - très facile à positionner et à aligner. les utiliser comme alternative aux alertes.
.pain grillé - exemple
Amorcer
Il y a 11 minutes
Bravo, je suis un toast message!
Info-bulles
Les info-bulles sont de petites fenêtres contextuelles qui fournissent aux utilisateurs un contexte supplémentaire sur le bouton ou un autre élément de site Web. Dans Bootstrap 4, les info-bulles utilisent la bibliothèque Popper.js pour le positionnement. C'est pourquoi pour les utiliser, vous devez inclure popper.min.js avant bootstrap.js Ou utiliser bootstrap.bundle.min.js/bootstrap.bundle.js.
Pour la plupart des composants, des dispositions et des systèmes de grille, Bootstrap utilise les valeurs de point d'arrêt suivantes:
Super petit < 544px
Petit ≥ 544px
Moyen ≥ 768px
Grand ≥ 992px
Extra-large ≥ 1200px
Grilles et colonnes
Facile à mettre en page et à aligner le contenu via Flexbox; totalement réactif. Vous obtenez un système à 12 colonnes, 5 niveaux par défaut, des classes prédéfinies et de nombreuses variables.
Options de dimensionnement de la grille
col-xs-: largeur du conteneur - auto / aucun; largeur de colonne - auto.
.col-sm-: largeur du conteneur - 750 px; largeur de colonne - ~ 62px
.col-md-: largeur du conteneur - 970 px; largeur de colonne - ~ 81px
.col-lg-: largeur du conteneur - 1170 px; largeur de colonne - ~ 97px
De base .récipient Grille parent
Créez 3 colonnes égales avec des classes de grille prédéfinies.
Une des trois colonnes
Une des trois colonnes
Une des trois colonnes
.conteneur-fluide
Faites évoluer votre conteneur pour couvrir tout le point de vue.
Tailles de colonne
Sélectionnez parmi xs, sm, md, lg. Encore une fois, lorsque vous ajoutez des colonnes, elles doivent s'adapter aux tailles d'écran de tous les appareils ou les utilisateurs seront frustrés.
Voici l'extrait de code - changez simplement l'élément de taille:
.sans gouttières
L'espace standard entre les colonnes est de 15 pixels de chaque côté. Mais vous pouvez le supprimer.
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
Typographie
Tout ce dont vous avez besoin pour les en-têtes, le corps du texte, les listes et bien plus encore.
Alignement du texte - Gauche, Droite, Centré, Justifié
dotnetfunda est un tutoriel en ligne
dotnetfunda est un tutoriel en ligne
dotnetfunda est un tutoriel en ligne
Liste en ligne - Afficher une liste en ligne
thé
Sucre
Lait
Liste sans style - Supprimer le style de liste par défaut
café
thé
Thé noir
Thé vert
Lait
.texte en minuscules
texte en minuscule.
.texte en majuscules
texte en majuscule.
.mettre en majuscule le texte
texte en majuscule.
.texte tronqué
texte tronqué.
.text-nowrap
Aucun texte d'habillage.
.texte-monoscape
C'est en monospace
.masquer le texte
En-tête personnalisé
.texte-décoration-aucun
ce texte n'est pas décoré
.initialisme
Ajouter une taille de police plus petite aux abréviations de style.
Conduire
Lorsque vous souhaitez mettre l'accent sur un paragraphe de contenu spécifique, vous pouvez rendre la police un peu plus grande et même plus fine, de sorte que le paragraphe se démarque visuellement..
Voici les informations auxquelles vous devez vraiment faire attention!
Blockquote
Si vous insérez une citation un peu longue, cette classe vous permettra de la différencier du reste du texte.
Une citation sympa que vous avez trouvée.
Pied de page Blockquote
Ajoutez la source d'un devis en ajoutant l'élément pied de page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.saut de texte
Cela empêche les textes très longs de casser l'apparence de vos autres éléments de conception.
.flotter à gauche - Article flottant à gauche - toutes tailles
Flotter à gauche sur toutes les tailles de fenêtres
Flotter à gauche sur les fenêtres de taille SM (petite) ou plus large
Flotter à gauche sur les fenêtres de taille MD (moyenne) ou plus large
Flotter à gauche sur les fenêtres de taille LG (grande) ou plus large
Flotter à gauche sur les fenêtres de taille XL (extra-large) ou plus large
.Flotter à droite - Article flottant à droite - toutes tailles
Flotter à droite sur toutes les tailles de fenêtres
Flottez à droite sur les fenêtres de taille SM (petite) ou plus large
Flottez à droite sur les fenêtres de taille MD (moyenne) ou plus large
Flottez à droite sur les fenêtres de taille LG (grande) ou plus large
Flottez à droite sur les fenêtres de taille XL (extra-large) ou plus large
.float-none - Enlève le flotteur - toutes tailles
Ne flotte pas sur toutes les tailles de fenêtres
Ne flottez pas sur les fenêtres de taille SM (petite) ou plus large
Ne flottez pas sur les fenêtres de taille MD (moyenne) ou plus large
Ne flottez pas sur les fenêtres de taille LG (grande) ou plus large
Ne flottez pas sur des fenêtres de taille XL (extra-large) ou plus larges
.clearfix - Supprime le flotteur de l'élément parent
...
Fléchir
Vous pouvez gérer facilement et rapidement vos mises en page, alignements, tailles, navs, affichages, couleurs, alignement et bien plus encore avec cet outil utilitaire Bootstrap unique.
Flex - sm-lg-md-xl
Dimensionnez tous vos éléments en utilisant des tailles prédéterminées et soyez pleinement réactif.
...
...
...
...
.flex-row et .flex-row-reverse
Réglez la direction horizontale ou inversez-la pour commencer du côté opposé.
Article flexible 1
Élément flexible 2
Élément flexible 3
Article flexible 1
Élément flexible 2
Élément flexible 3
.colonne flexible et .flex-column-reverse
Définir la direction des colonnes ou inverser pour définir dans la direction opposée.
Article flexible 1
Élément flexible 2
Élément flexible 3
Article flexible 1
Élément flexible 2
Élément flexible 3
.flex-fill
Cet utilitaire force tous les éléments à occuper une largeur égale tout en occupant tout l'espace horizontal disponible.
Article flexible
Article flexible
Article flexible
.flex-grow- *
L'un des éléments flexibles remplira tout l'espace disponible tout en garantissant que les autres disposent également d'un espace minimal suffisant.
Article flexible
Article flexible
Troisième élément flexible
.flex-rétractable- *
Activez la capacité de l'élément à se réduire à la taille la plus minimale pour remplir l'espace disponible.
Article flexible
Article flexible
.flex-nowrap, .flex-wrap-reverse et .flex-wrap
Utilisez ces classes lorsque vous souhaitez que les éléments passent à la ligne suivante ou tiennent sur une seule ligne (nowrap), ou effectuez le retour à la ligne automatique. (retour à la ligne).
...
...
...
.flex justifier-contenu
Ajoutez cette classe lorsque vous souhaitez justifier le texte à droite ou à gauche, et lorsque vous souhaitez que cette justification commence et se termine.
Article flexible 1
Élément flexible 2
Élément flexible 3
Article flexible 1
Élément flexible 2
Élément flexible 3
.flex align-items
Spécifiez quand l'alignement commence et quand il se termine pour une liste d'éléments.
Article flexible 1
Élément flexible 2
Élément flexible 3
Article flexible 1
Élément flexible 2
Élément flexible 3
.flex align-self-start
Vous pouvez également remplacer l'alignement d'un conteneur pour un élément sélectionné dans ce conteneur.
Élément flexible aligné
Alignement
Comment et où voulez-vous aligner votre contenu, vos boutons, etc. - droite, gauche, centre?
.align-baseline
Élément flexible aligné
.align-top, .align-middle, .aligner en bas: placez les boutons où vous voulez.
référenceHautmilieubas
.align-text-top, .align-text-bottom: placez le texte où vous voulez.
texte en hauttexte en bas
Les frontières
Les bordures ajoutent de l'élégance à un site. Utilisez-les pour mettre l'accent ou l'esthétique.
