Bootstrap elementen
Gepubliceerd op 17 februari 2023 • 5 min leestijd • 903 woordenGebruik 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.
show
voor het argument class geeft aan dat het element uitgeklapt moet worden. 1{{< accordion >}}
2 {{< accordion-item header="Accordion Item #1" show="true" >}}
3 Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde <code>show</code>
4 voor het argument <code>class</code> geeft aan dat het element uitgeklapt moet worden.
5 {{< /accordion-item >}}
6 {{< accordion-item header="Accordion Item #2" >}}
7 Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.
8 {{< /accordion-item >}}
9 {{< accordion-item header="Accordion Item #3" >}}
10 Dit is de inhoud van het derde element.
11 {{< /accordion-item >}}
12{{< /accordion >}}Alert
De volgende shortcode toont een waarschuwing.
1{{< alert color="danger" dismissible="true" >}}
2 Een eenvoudige waarschuwing
3{{< /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
1<h1>Voorbeeldtekst met grootte één <span class="badge bg-secondary">Nieuw</span></h1>
2<h2>Voorbeeldtekst met grootte twee <span class="badge bg-secondary">Nieuw</span></h2>
3<h3>Voorbeeldtekst met grootte drie <span class="badge bg-secondary">Nieuw</span></h3>
4<h4>Voorbeeldtekst met grootte vier <span class="badge bg-secondary">Nieuw</span></h4>
5<h5>Voorbeeldtekst met grootte vijf <span class="badge bg-secondary">Nieuw</span></h5>
6<h6>Voorbeeldtekst met grootte zes <span class="badge bg-secondary">Nieuw</span></h6>Breadcrumb
De volgende shortcode toont het navigatiepad voor de blog pagina.
1{{< breadcrumb path="blog" >}}Button
De volgende shortcode toont een knop met een label en een aanwijzing.
1{{< button color="secondary" tooltip="Toon je ongelezen berichten" href="#" badge="99+" >}}
2 Inbox
3{{< /button >}}Button group
De volgende shortcode toont een groep van drie knoppen.
1{{< button-group aria-label="Basic example" >}}
2 {{< button color="primary" href="#" >}}Links{{< /button >}}
3 {{< button color="primary" href="#" >}}Midden{{< /button >}}
4 {{< button color="primary" href="#" >}}Rechts{{< /button >}}
5{{< /button-group >}}Card
De volgende shortcode toont een kaart met een icoon 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.
1{{< card path="about" padding="3" class="w-50" color="light" 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.
1{{< carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" >}}
2 {{< img src="img/coffee.jpg" caption="pagina 1" >}}
3 {{< img src="img/phone.jpg" caption="pagina 2" >}}
4 {{< img src="img/dunes.jpg" caption="pagina 3" >}}
5{{< /carousel >}}Collapse
De volgende shortcode toont een knop die een informatiepaneel toont of verbergt.
1{{< button collapse="collapse-1" >}}
2 Trigger panel
3{{< /button >}}
4
5{{< collapse id="collapse-1" class="p-3 border rounded" >}}
6 Dit is een voorbeeldtekst. Het informatiepaneel is <i>standaard verborgen </i> maar wordt getoond als
7 de gebruiker op de bijbehorende knop drukt.
8{{< /collapse >}}Command prompt
De volgende shortcode toont een prompt voor bash.
1export MY_VAR=1231{{< command >}}
2export MY_VAR=123
3{{< /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.
1export MY_VAR=123
2echo "hello"
3hello
4echo one \
5two \
6three
7one two three
8echo "goodbye"
9goodbye 1{{< command user="user" host="localhost" >}}
2export MY_VAR=123
3echo "hello"
4(out)hello
5echo one \
6two \
7three
8(out)one two three
9echo "goodbye"
10(out)goodbye
11{{< /command >}}Docs
Gebruik de volgende shortcode om de inhoud van een toml of scss bestand te tonen.
1[style]
2 primary = "#d43900"
3 secondary = "#6c757d"
4 success = "#198754"
5 info = "#0dcaf0"
6 warning = "#ffc107"
7 danger = "#dc3545"
8 light = "#f8f9fa"
9 dark = "#212529"Icon
De volgende shortcodes tonen drie verschillende iconen:
1{{< fa square-check >}}
2{{< fab linkedin >}}
3{{< fas circle-check >}}Image
De volgende shortcode toont een plaatje met afgeronde hoeken en een 21x9 verhouding.
1{{< image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded" >}}Navbar
De volgende shortcode toont een navigatiemenu.
1{{< navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" >}}Spinner
De volgende shortcode toont een ronddraaiende cirkel.
1{{< spinner color="info" class="text-center" >}}
2Loading...
3{{< /spinner >}}Toast
De volgende shortcode toont een knop die een bericht laat verschijnen op het scherm.
1{{< button id="toastButton" >}}
2 Toon bericht
3{{< /button >}}
4
5{{< toast header="Titel" >}}
6 Dit is een bericht.
7{{< /toast >}}Tooltip
De volgende shortcode toont een uitleg voor een gekleurde link.
1{{< tooltip color="primary" title="Tooltip" href="#" >}}
2 Tooltip demonstration
3{{< /tooltip >}}