8.4 KiB
author, title, date, description, tags, thumbnail, photoCredits, photoSource
| author | title | date | description | tags | thumbnail | photoCredits | photoSource | ||
|---|---|---|---|---|---|---|---|---|---|
| Mark Dumay | Bootstrap elements | 2023-02-17 | Use shortcodes to add common Bootstrap elements with ease. |
|
img/boots.jpg | <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a> | <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a> |
Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
Accordion
As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
{{< example lang="hugo" >}}
{{</* accordion />}}
{{</ accordion-item header="Accordion Item #1" show="true" />}}
This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
show to the class argument.
{{</ /accordion-item />}}
{{</ accordion-item header="Accordion Item #2" />}}
This is the second item's accordion body. It supports HTML content too.
{{</ /accordion-item />}}
{{</ accordion-item header="Accordion Item #3" />}}
This is the third item's accordion body.
{{</ /accordion-item />}}
{{</ /accordion */>}}
{{< /example >}}
Alert
As an example, the following shortcode displays a simple alert.
{{< example lang="hugo" >}} {{</* alert color="danger" dismissible="true" />}} A simple danger alert—check it out! {{</ /alert */>}} {{< /example >}}
Badge
Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options.
{{< example >}}
Example heading of size one New
Example heading of size two New
Example heading of size three New
Example heading of size four New
Example heading of size five New
Example heading of size six New
{{< /example >}}Breadcrumb
As an example, the following shortcode displays a breadcrumb for the blog page.
{{< example lang="hugo" >}} {{</* breadcrumb path="blog" */>}} {{< /example >}}
Button
As an example, the following shortcode displays a tooltip for a dark button with a badge.
{{< example lang="hugo" >}} {{</* button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#!" badge="99+" />}} Inbox {{</ /button */>}} {{< /example>}}
Button group
As an example, the following shortcode displays a group of three buttons.
{{< example lang="hugo" >}} {{</* button-group aria-label="Basic example" />}} {{</ button color="primary" href="#!" />}}Left{{</ /button />}} {{</ button color="primary" href="#!" />}}Middle{{</ /button />}} {{</ button color="primary" href="#!" />}}Right{{</ /button />}} {{</ /button-group */>}} {{< /example >}}
Card
As an example, the following shortcode displays a stacked card that links to the [about]({{< ref "about" >}}) page. It includes a custom header.
{{< example lang="hugo" >}} {{</* card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" */>}} {{< /example >}}
Carousel
As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
{{< example lang="hugo" >}} {{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" />}} {{</ img src="img/coffee.jpg" caption="slide 1" />}} {{</ img src="img/phone.jpg" caption="slide 2" />}} {{</ img src="img/dunes.jpg" caption="slide 3" />}} {{</ /carousel */>}} {{< /example >}}
Collapse
As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
{{< example lang="hugo" >}} {{</* button collapse="collapse-1" />}} Trigger panel {{</ /button */>}}
{{</* collapse id="collapse-1" class="p-3 border rounded" />}} Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. {{</ /collapse */>}} {{< /example >}}
Command prompt
Use the command shortcode to generate a block with a default bash command prompt.
{{< example lang="hugo" >}} {{</* command />}} export MY_VAR=123 {{</ /command */>}} {{< /example >}}
Specify user and host to add the user context to the prompt. In addition, use (out) to specify an output line and use \ to denote a line continuation.
{{< 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
Use the docs shortcode to display the content of a js, scss or toml file:
{{< docs name="theme-colors" file="config/_default/params.toml" >}}
Icon
As an example, the following shortcodes show a square check, a brand logo, and a circle check.
{{< example lang="hugo" >}} {{</* fa square-check />}} {{</ fab linkedin />}} {{</ fas circle-check */>}} {{< /example >}}
Image
As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
{{< example lang="hugo" >}} {{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}} {{< /example >}}
Nav
As an example, the following shortcode displays a tab group with vertically aligned pills.
{{< example lang="hugo" >}}
{{</* nav type="pills" vertical="true" />}}
{{</ nav-item header="Nav Item #1" show="true" />}}
This is the first item's nav body. It supports HTML content. The item is shown by adding the value
show to the class argument.
{{</ /nav-item />}}
{{</ nav-item header="Nav Item #2" />}}
This is the second item's nav body. It too supports HTML content.
{{</ /nav-item />}}
{{</ nav-item header="Nav Item #3" />}}
This is the third item's nav body.
{{</ /nav-item />}}
{{</ /nav */>}}
{{< /example >}}
Navbar
As an example, the following shortcode displays a light navigation header.
{{< example lang="hugo" >}} {{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" */>}} {{< /example >}}
Spinner
As an example, the following shortcode displays a centered spinner.
{{< example lang="hugo" >}} {{</* spinner color="info" class="text-center" />}} Loading... {{</ /spinner */>}} {{< /example>}}
Toast
As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
{{< example lang="hugo" >}} {{</* button id="toastButton" />}} Show toast {{</ /button */>}}
{{</* toast header="Custom title" />}} This is a toast message. {{</ /toast */>}} {{< /example >}}
Tooltip
As an example, the following shortcode displays a tooltip for a colored hyperlink.
{{< example lang="hugo" >}} {{</* tooltip color="primary" title="Tooltip" href="#!" />}}Tooltip{{</ /tooltip */>}} demonstration {{< /example >}}