8.2 KiB
author, title, slug, date, description, tags, thumbnail, photoCredits, photoSource
| author | title | slug | date | description | tags | thumbnail | photoCredits | photoSource | ||
|---|---|---|---|---|---|---|---|---|---|---|
| Mark Dumay | Bootstrap elementen | bootstrap-elementen | 2023-02-17 | Gebruik shortcodes om eenvoudig Bootstrap elementen toe te voegen. |
|
img/boots.jpg | <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a> | <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a> |
Hinode beschikt over meerdere shortcodes om eenvoudig Bootstrap elementen toe te voegen aan je website. De [officiële documentatie]({{< param "links.hinode_docs" >}}) bevat meer details.
Accordion
De volgende shortcode toont een accordion met drie elementen, waarvan de eerste is uitgeklapt.
{{< example lang="hugo" >}}
{{</* accordion />}}
{{</ accordion-item header="Accordion Item #1" show="true" />}}
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.
{{</ /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 */>}}
{{< /example >}}
Alert
De volgende shortcode toont een waarschuwing.
{{< example lang="hugo" >}} {{</* alert color="danger" dismissible="true" />}} Een eenvoudige waarschuwing {{</ /alert */>}} {{< /example >}}
Badge
Gebruik HTML code om een label toe te voegen aan een titel. De Bootstrap [documentatie]({{< param "links.bs_badge_heading" >}}) beschrijft meer opties.
{{< example >}}
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
{{< /example >}}Breadcrumb
De volgende shortcode toont het navigatiepad voor de blog pagina.
{{< example lang="hugo" >}} {{</* breadcrumb path="blog" */>}} {{< /example >}}
Button
De volgende shortcode toont een knop met een label en een aanwijzing.
{{< example lang="hugo" >}} {{</* button color="secondary" tooltip="Toon je ongelezen berichten" href="#!" badge="99+" />}} Inbox {{</ /button */>}} {{< /example>}}
Button group
De volgende shortcode toont een groep van drie knoppen.
{{< example lang="hugo" >}} {{</* 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 */>}} {{< /example >}}
Card
De volgende shortcode toont een kaart dat linkt naar de [over mij]({{< ref "about" >}}) pagina. De kaart bevat een titel.
{{< example lang="hugo" >}} {{</* card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" */>}} {{< /example >}}
Carousel
De volgende shortcode toont een carousel met drie pagina's, in een verhouding van 16x9 voor een breedte van 67% op grotere schermen.
{{< example lang="hugo" >}} {{</* 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 */>}} {{< /example >}}
Collapse
De volgende shortcode toont een knop die een informatiepaneel toont of verbergt.
{{< example lang="hugo" >}} {{</* button collapse="collapse-1" />}} Trigger panel {{</ /button */>}}
{{</* collapse id="collapse-1" class="p-3 border rounded" />}} Dit is een voorbeeldtekst. Het informatiepaneel is standaard verborgen maar wordt getoond als de gebruiker op de bijbehorende knop drukt. {{</ /collapse */>}} {{< /example >}}
Command prompt
De volgende shortcode toont een prompt voor bash.
{{< example lang="hugo" >}} {{</* command />}} export MY_VAR=123 {{</ /command */>}} {{< /example >}}
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.
{{< example lang="hugo" >}}
{{</* 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 */>}}
{{< /example >}}
Docs
Gebruik de volgende shortcode om de inhoud van een toml of scss bestand te tonen.
{{< docs name="theme-colors" file="config/_default/params.toml" >}}
Icon
De volgende shortcodes tonen drie verschillende iconen:
{{< example lang="hugo" >}} {{</* fa square-check />}} {{</ fab linkedin />}} {{</ fas circle-check */>}} {{< /example >}}
Image
De volgende shortcode toont een plaatje met afgeronde hoeken en een 21x9 verhouding.
{{< example lang="hugo" >}} {{</* image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded" */>}} {{< /example >}}
Nav
De volgende shortcode toont een groep met verticale tabbladen.
{{< example lang="hugo" >}}
{{</* 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 show
voor het argument class 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 */>}}
{{< /example >}}
Navbar
De volgende shortcode toont een navigatiemenu.
{{< example lang="hugo" >}} {{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" */>}} {{< /example >}}
Spinner
De volgende shortcode toont een ronddraaiende cirkel.
{{< example lang="hugo" >}} {{</* spinner color="info" class="text-center" />}} Loading... {{</ /spinner */>}} {{< /example>}}
Toast
De volgende shortcode toont een knop die een bericht laat verschijnen op het scherm.
{{< example lang="hugo" >}} {{</* button id="toastButton" />}} Toon bericht {{</ /button */>}}
{{</* toast header="Titel" />}} Dit is een bericht. {{</ /toast */>}} {{< /example >}}
Tooltip
De volgende shortcode toont een uitleg voor een gekleurde link.
{{< example lang="hugo" >}} {{</* tooltip color="primary" title="Tooltip" href="#!" />}}Tooltip{{</ /tooltip */>}} demonstratie {{< /example >}}