Bootstrap elementen

Gepubliceerd op 17 februari 2023 (Laatst gewijzigd op 23 april 2023) • 5 min leestijd • 1.008 woorden
bootstrap   shortcode  
bootstrap   shortcode  

Gebruik shortcodes om eenvoudig Bootstrap elementen toe te voegen.

Bootstrap elementen
Foto van Nathan Dumlao via Unsplash

Hinode beschikt over meerdere shortcodes om eenvoudig Bootstrap elementen toe te voegen aan je website. De officiële documentatie bevat meer details.

Accordion

De volgende shortcode toont een accordion met drie elementen, waarvan de eerste is uitgeklapt.

Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde show voor het argument class geeft aan dat het element uitgeklapt moet worden.

Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.

Dit is de inhoud van het derde element.
markdown
{{< accordion >}}
  {{< accordion-item header="Accordion Item #1" show="true" >}}
    Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde <code>show</code>
    voor het argument <code>class</code> geeft aan dat het element uitgeklapt moet worden.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #2" >}}
    Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #3" >}}
    Dit is de inhoud van het derde element.
  {{< /accordion-item >}}
{{< /accordion >}}

Alert

De volgende shortcode toont een waarschuwing.

markdown
{{< alert color="danger" dismissible="true" >}}
    Een eenvoudige waarschuwing
{{< /alert >}}

Badge

Gebruik HTML code om een label toe te voegen aan een titel. De Bootstrap documentatie beschrijft meer opties.

Voorbeeldtekst met grootte één Nieuw

Voorbeeldtekst met grootte twee Nieuw

Voorbeeldtekst met grootte drie Nieuw

Voorbeeldtekst met grootte vier Nieuw

Voorbeeldtekst met grootte vijf Nieuw
Voorbeeldtekst met grootte zes Nieuw
html
<h1>Voorbeeldtekst met grootte één <span class="badge bg-secondary">Nieuw</span></h1>
<h2>Voorbeeldtekst met grootte twee <span class="badge bg-secondary">Nieuw</span></h2>
<h3>Voorbeeldtekst met grootte drie <span class="badge bg-secondary">Nieuw</span></h3>
<h4>Voorbeeldtekst met grootte vier <span class="badge bg-secondary">Nieuw</span></h4>
<h5>Voorbeeldtekst met grootte vijf <span class="badge bg-secondary">Nieuw</span></h5>
<h6>Voorbeeldtekst met grootte zes <span class="badge bg-secondary">Nieuw</span></h6>

De volgende shortcode toont het navigatiepad voor de blog pagina.

markdown
{{< breadcrumb path="blog" >}}

Button

De volgende shortcode toont een knop met een label en een aanwijzing.

Inbox 99+
markdown
{{< button color="secondary" tooltip="Toon je ongelezen berichten" href="#!" badge="99+" >}}
    Inbox
{{< /button >}}

Button group

De volgende shortcode toont een groep van drie knoppen.

Links Midden Rechts
markdown
{{< button-group aria-label="Basic example" >}}
  {{< button color="primary" href="#!" >}}Links{{< /button >}}
  {{< button color="primary" href="#!" >}}Midden{{< /button >}}
  {{< button color="primary" href="#!" >}}Rechts{{< /button >}}
{{< /button-group >}}

Card

De volgende shortcode toont een kaart dat linkt naar de over mij pagina. De kaart bevat een titel.

17 februari 2023 • 1 min leestijd

Over mij

Een blog en documentatie thema voor Hugo gebaseerd op Bootstrap 5.

markdown
{{< card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" >}}

De volgende shortcode toont een carousel met drie pagina’s, in een verhouding van 16x9 voor een breedte van 67% op grotere schermen.

markdown
{{< carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" >}}
  {{< img src="img/coffee.jpg" caption="pagina 1" >}}
  {{< img src="img/phone.jpg" caption="pagina 2" >}}
  {{< img src="img/dunes.jpg" caption="pagina 3" >}}
{{< /carousel >}}

Collapse

De volgende shortcode toont een knop die een informatiepaneel toont of verbergt.

Dit is een voorbeeldtekst. Het informatiepaneel is standaard verborgen maar wordt getoond als de gebruiker op de bijbehorende knop drukt.
markdown
{{< button collapse="collapse-1" >}}
    Trigger panel
{{< /button >}}

{{< collapse id="collapse-1" class="p-3 border rounded" >}}
    Dit is een voorbeeldtekst. Het informatiepaneel is <i>standaard verborgen </i> maar wordt getoond als
    de gebruiker op de bijbehorende knop drukt.
{{< /collapse >}}

Command prompt

De volgende shortcode toont een prompt voor bash.

export MY_VAR=123
markdown
{{< command >}}
export MY_VAR=123
{{< /command >}}

Voeg user en host om de gebruikerscontext op te geven. Als aanvulling, (out) definieert een outputregel en \ is een markering die aangeeft dat de regel doorgaat op de volgende regel.

export MY_VAR=123
echo "hello"
hello
echo one \
two \
three
one two three
echo "goodbye"
goodbye
markdown
{{< command user="user" host="localhost" >}}
export MY_VAR=123
echo "hello"
(out)hello
echo one \
two \
three
(out)one two three
echo "goodbye"
(out)goodbye
{{< /command >}}

Docs

Gebruik de volgende shortcode om de inhoud van een toml of scss bestand te tonen.

[style]
    primary = "#d43900"
    secondary = "#6c757d"
    success = "#198754"
    info = "#0dcaf0"
    warning = "#ffc107"
    danger = "#dc3545"
    light = "#f8f9fa"
    dark = "#212529"

Icon

De volgende shortcodes tonen drie verschillende iconen:

markdown
{{< fa square-check >}}
{{< fab linkedin >}}
{{< fas circle-check >}}

Image

De volgende shortcode toont een plaatje met afgeronde hoeken en een 21x9 verhouding.

Onderschrift
markdown
{{< image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded" >}}

De volgende shortcode toont een groep met verticale tabbladen.

markdown
  {{< nav type="pills" vertical="true" >}}
    {{< nav-item header="Nav Item #1" show="true" >}}
    Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde <code>show</code>
    voor het argument <code>class</code> geeft aan dat het element uitgeklapt moet worden.
    {{< /nav-item >}}
    {{< nav-item header="Nav Item #2" >}}
    Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.
    {{< /nav-item >}}
    {{< nav-item header="Nav Item #3" >}}
    Dit is de inhoud van het derde element.
    {{< /nav-item >}}
  {{< /nav >}}

De volgende shortcode toont een navigatiemenu.

markdown
{{< navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" >}}

Spinner

De volgende shortcode toont een ronddraaiende cirkel.

markdown
{{< spinner color="info" class="text-center" >}}
Loading...
{{< /spinner >}}

Toast

De volgende shortcode toont een knop die een bericht laat verschijnen op het scherm.

Toon bericht
markdown
{{< button id="toastButton" >}}
    Toon bericht
{{< /button >}}

{{< toast header="Titel" >}}
    Dit is een bericht.
{{< /toast >}}

Tooltip

De volgende shortcode toont een uitleg voor een gekleurde link.

Tooltip demonstration
markdown
{{< tooltip color="primary" title="Tooltip" href="#!" >}}
    Tooltip demonstration
{{< /tooltip >}}
Inhoudsopgave
Follow us

We do tech, subcuture, relearn the ready known