Bootstrap elementen

Gepubliceerd op 5 augustus 2023 • 7 min leestijd • 1.468 woorden

Delen via

Link gekopieerd naar clipboard

Gebruik shortcodes om eenvoudig Bootstrap elementen toe te voegen.

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.

Een eenvoudige 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" >}}

Carousel

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

pagina 1

pagina 2

pagina 3

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.

Trigger panel

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.

config/_default/params.toml

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

Example

Gebruik de example shortcode om zowel de input als een voorbeeld van code te tonen.

export MY_VAR=123

markdown

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

File

Gebruik de file shortcode om de volledige inhoud van een bestand te tonen, inclusief taalafhankelijke opmaak.

config/_default/languages.toml

# toml-docs-start lang-main
[en]
    languageName = "English"
    contentDir = "content/en"
    weight = 1
# toml-docs-end lang-main
# toml-docs-start lang-param
    [en.params.head]
        tagline = "A Hugo Theme"
    [en.params.feature]
        link = "about"
        caption = "About"
    [en.params.footer]
        license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
        socialTitle = "Follow me"
        socialCaption = "I work on everything coding and tweet developer memes"
# toml-docs-end lang-param

[nl]
    languageName = "Nederlands"
    contentDir = "content/nl"
    weight = 2
    [nl.params.head]
        tagline = "Een Hugo Thema"
    [nl.params.feature]
        link = "over-mij"
        caption = "Over mij"
    [nl.params.footer]
        license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
        socialTitle = "Volg mij"
        socialCaption = "Ik doe aan programmeren en tweet memes"

markdown

{{< file path="./config/_default/languages.toml" id="file-collapse-1" >}}

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.

markdown

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

Nav

De volgende shortcode toont een groep met verticale tabbladen.

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

  {{< 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" >}}

Release

De volgende shortcode toont een knop voor een nieuwe release.

Added in v0.14.1

markdown

{{< release version="v0.14.1" >}}

Spinner

De volgende shortcode toont een ronddraaiende cirkel.

markdown

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

Timeline

De volgende shortcode toont een tijdslijn met het bestand data/timeline-nl.yml als input.

Productlancering

1 juli 2023

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.

Internationalisering

6 mei 2023

Lorem ipsum dolor sit amet.

Nieuwe functie

4 februari 2023

Cupiditate ducimus officiis quod!

Beta release

30 november 2022

Productlancering

1 juli 2023

Internationalisering

6 mei 2023

Lorem ipsum dolor sit amet.

Nieuwe functie

4 februari 2023

Cupiditate ducimus officiis quod!

Beta release

30 november 2022

markdown

{{< timeline data="timeline-nl" >}}

Toast

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

Toon bericht 1

Toon bericht 2

Dit is het eerste bericht.

Dit is het tweede bericht.

markdown

{{< button toast="toast-example-1" >}}
    Toon bericht 1
{{< /button >}}

{{< button toast="toast-example-2" >}}
    Toon bericht 2
{{< /button >}}

{{< toast id="toast-example-1" header="Eerste titel" >}}
    Dit is het eerste bericht.
{{< /toast >}}

{{< toast id="toast-example-2" header="Tweede titel" >}}
    Dit is het tweede bericht.
{{< /toast >}}

De volgende shortcode toont een uitleg voor een gekleurde link.

Tooltip

demonstratie

markdown

{{< tooltip color="primary" title="Tooltip" href="#!" >}}Tooltip{{< /tooltip >}} demonstratie

Componenten

Inhoudsopgave

Volg mij

Ik doe aan programmeren en tweet memes

Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

Alert

Badge

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

Breadcrumb

Button

Button group

Card

Carousel

Collapse

Command prompt

Docs

Example

File

Icon

Image

Nav

Navbar

Release

Spinner

Timeline

Toast

Tooltip