--- author: Mark Dumay title: Éléments Bootstrap slug: elements-bootstrap date: 2023-08-12 description: Utilisez des shortcodes pour ajouter facilement des éléments Bootstrap courants. tags: ["bootstrap", "shortcode"] thumbnail: url: img/boots.jpg author: Nathan Dumlao authorURL: https://unsplash.com/@nate_dumlao origin: Unsplash originURL: https://unsplash.com/photos/QLPWQvHvmII --- Hinode propose plusieurs shortcodes qui enveloppent des composants Bootstrap courants. Consultez la [documentation officielle]({{< param "links.hinode_docs" >}}) pour plus de détails. ## Abbr À titre d'exemple, le shortcode suivant affiche le texte complet d'une abréviation lorsque survolé. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Accordéon À titre d'exemple, le shortcode suivant affiche un accordéon avec trois éléments, dont le premier élément est déplié. {{< example lang="hugo" >}} {{}} {{}} Il s'agit du contenu du corps du premier élément de l'accordéon. Il prend en charge le contenu HTML, s'il est activé dans le moteur de rendu goldmark. L'élément est affiché en ajoutant la valeur `show` à l'argument `class`. {{}} {{}} Il s'agit du contenu du corps du deuxième élément de l'accordéon. {{}} {{}} Il s'agit du contenu du corps du troisième élément de l'accordéon. {{}} {{}} {{< /example >}} ## Alerte À titre d'exemple, le shortcode suivant affiche une alerte simple. {{< example lang="hugo" >}} {{}} Une simple alerte de danger — vérifiez-la ! {{}} {{< /example >}} ## Badge Utilisez le shortcode "badge" pour afficher un badge avec un en-tête. {{< example >}} En-tête 1 {{}} {.h1} En-tête 2 {{}} {.h2} En-tête 3 {{}} {.h3} En-tête 4 {{}} {.h4} En-tête 5 {{}} {.h5} En-tête 6 {{}} {.h6} {{< /example >}} ## Fil d'Ariane À titre d'exemple, le shortcode suivant affiche un fil d'Ariane pour la page du blog. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Bouton À titre d'exemple, le shortcode suivant affiche une infobulle pour un bouton sombre avec un badge. {{< example lang="hugo" >}} {{}} Boîte de réception {{}} {{< /example>}} ## Groupe de boutons À titre d'exemple, le shortcode suivant affiche un groupe de trois boutons. {{< example lang="hugo" >}} {{}} {{}}Gauche{{}} {{}}Millieu{{}} {{}}Droite{{}} {{}} {{< /example >}} ## Carte À titre d'exemple, le shortcode suivant affiche une carte empilée qui renvoie à la page [à propos]({{< ref "about" >}}). Elle inclut un en-tête personnalisé. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Groupe de cartes À titre d'exemple, le shortcode suivant affiche un groupe de cartes avec trois éléments. {{< example lang="hugo" >}} {{}} {{}} Créez des sites rapides et réactifs avec Bootstrap 5. Personnalisez facilement votre site avec les fichiers source Sass. {{}} {{}} Recherchez votre site avec FlexSearch, une bibliothèque de recherche en texte intégral avec zéro dépendances. {{}} {{}} Utilisez Node Package Manager pour automatiser le processus de construction et suivre les dépendances. {{}} {{}} {{< /example >}} ## Carrousel À titre d'exemple, le shortcode suivant affiche un carrousel centré avec trois slides, un rapport hauteur/largeur de 16:9 et une largeur relative de 67 % sur les grands écrans. {{< example lang="hugo" >}} {{}} {{}} {{}} {{}} {{}} {{< /example >}} ## Réduire À titre d'exemple, le shortcode suivant affiche un bouton qui, lorsqu'il est cliqué, déclenche l'apparition ou la disparition d'un panneau. {{< example lang="hugo" >}} {{}} Déclencher le panneau {{}} {{}} Un contenu de remplacement destiné au composant de repliement. Ce panneau est initialement masqué, mais il sera révélé lorsque l'utilisateur active le déclencheur correspondant. {{}} {{< /example >}} ## Invite de commandes Utilisez le shortcode `command` pour générer un bloc avec un invite de commandes bash par défaut. {{< example lang="hugo" >}} {{}} export MY_VAR=123 {{}} {{< /example >}} Spécifiez `user` et `host` pour ajouter le contexte de l'utilisateur à l'invite. De plus, utilisez `(out)` pour spécifier une ligne de sortie et utilisez `\` pour indiquer une continuation de ligne. {{< example lang="hugo" >}} {{}} export MY_VAR=123 echo "hello" (out)hello echo one \ two \ three (out)one two three echo "goodbye" (out)goodbye {{}} {{< /example >}} ## Documentation Utilisez le shortcode `docs` pour afficher le contenu d'un fichier `js`, `scss` ou `toml` : {{< docs name="theme-colors" file="config/_default/params.toml" >}} ## Exemple Utilisez le shortcode `example` pour afficher un exemple de code et pour afficher un aperçu de la même entrée. {{< example lang="hugo" >}} {{}} export MY_VAR=123 {{}} {{< /example >}} ## Fichier Utilisez le shortcode `file` pour afficher et mettre en évidence le contenu complet d'un fichier d'entrée donné. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Icon À titre d'exemple, les shortcodes suivants affichent une coche carrée, un logo de marque et une coche circulaire. {{< example lang="hugo" >}} {{}} {{}} {{}} {{< /example >}} ## Image À titre d'exemple, le shortcode suivant affiche une image avec des coins arrondis et un ratio d'aspect de 21:9. {{< example lang="hugo" >}} {{}} {{< /example >}} À titre d'exemple, le shortcode suivant affiche une image vectorielle classique. {{< example lang="hugo" >}} {{}} {{< /example >}} À titre d'exemple, le shortcode suivant affiche une image vectorielle avec une référence de symbole. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Lien À titre d'exemple, les shortcodes suivants rendent des liens dans différents formats. {{< example lang="hugo" >}} - {{}}Lien nommé avec les paramètres par défaut{{< /link */>}} - {{}}Lien nommé s'ouvrant dans l'onglet actuel sans icône{{< /link */>}} - {{}}Lien nommé s'ouvrant dans un nouvel onglet avec icône{{< /link */>}} - {{}} - {{}}Lien externe{{< /link */>}} - {{}}Lien interne avec titre{{< /link */>}} - {{}} - {{}} - {{}} - {{}} - {{}} - {{}}About (Anglais){{< /link */>}} - {{}} - {{}} {{< /example >}} ## Mark Utilisez le shortcode `mark` pour mettre en évidence le texte. Le contenu interne est utilisé en tant qu'entrée. {{< example lang="hugo" >}} Utilisez le shortcode `mark` pour {{}}mettre en évidence{{< /mark */>}} un texte spécifique. {{< /example >}} ## Navigation À titre d'exemple, le shortcode suivant affiche un groupe d'onglets avec des onglets alignés verticalement. {{< example lang="hugo" >}} {{}} {{}} Voici le contenu de navigation du premier élément. Il prend en charge le contenu HTML, s'il est activé dans le moteur de rendu Goldmark. L'élément est affiché en ajoutant la valeur `show` à l'argument `class`. {{}} {{}} Voici le contenu de navigation du deuxième élément. {{}} {{}} Voici le contenu de navigation du troisième élément. {{}} {{}} {{< /example >}} ## Barre de navigation À titre d'exemple, le shortcode suivant affiche un en-tête de navigation clair. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Publication À titre d'exemple, le shortcode suivant affiche un bouton de publication par défaut. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Indicateur de chargement À titre d'exemple, le raccourci suivant affiche un indicateur de chargement centré. {{< example lang="hugo" >}} {{}} Chargement... {{}} {{< /example>}} ## Sub À titre d'exemple, le shortcode suivant affiche du texte en indice. {{< example >}} H{{}}O est un liquide. {{< /example >}} ## Sup À titre d'exemple, le shortcode suivant affiche du texte en exposant. {{< example >}} 2{{}} équivaut à 1024. {{< /example >}} ## Chronologie À titre d'exemple, le shortcode suivant affiche une chronologie avec le fichier `data/timeline-fr.yml` en tant que données. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Notification À titre d'exemple, le shortcode suivant affiche un bouton qui, lorsqu'il est cliqué, déclenche le message de notification. {{< example lang="hugo" >}} {{}} Affiche la notification #1 {{}} {{}} Affiche la notification #1 {{}} {{}} Ceci est le premier message de notification. Il prend en charge le `markdown`. {{}} {{}} Ceci est le deuxième message de notification. Il prend en charge le `markdown`. {{}} {{< /example >}} ## Infobulle À titre d'exemple, le shortcode suivant affiche une infobulle pour un lien hypertexte coloré. {{< example lang="hugo" >}} {{}}Démonstration{{}} d'une infobulle {{< /example >}}