mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-14 05:23:15 +00:00
Clean up old content
This commit is contained in:
mark
@@ -1,505 +0,0 @@
|
||||
---
|
||||
author: "Mark Dumay"
|
||||
title: "Bootstrap Components"
|
||||
date: 2022-12-26
|
||||
description: "Overview of available Bootstrap components."
|
||||
tags: ["bootstrap"]
|
||||
thumbnail: img/boots.jpg
|
||||
photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
|
||||
photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
|
||||
---
|
||||
|
||||
Bootstrap provides several out-of-the-box UI components. The Hinode theme uses several of these components for rendering, such as the navigation menu and scrollspy. A few components are made available as Hugo shortcode, see [Custom Shortcodes]({{< ref "custom-shortcodes" >}} "Custom Shortcodes"). You can embed the Bootstrap components themselves too. The paragraphs below demonstrate the available UI components.
|
||||
|
||||
## Accordion
|
||||
|
||||
The accordion is available as [custom shortcode]({{< ref "custom-shortcodes#accordion" >}} "custom shortcode"). The following shortcode displays an accordion with three items.
|
||||
|
||||
{{< accordion >}}
|
||||
{{< accordion-item header="Accordion Item #1" class="show" >}}
|
||||
This is the first item's accordion body. It supports HTML content. The item is shown by adding the value <code>show</code> to the <code>class</code> argument.
|
||||
{{< /accordion-item >}}
|
||||
{{< accordion-item header="Accordion Item #2" >}}
|
||||
This is the second item's accordion body. It too supports HTML content.
|
||||
{{< /accordion-item >}}
|
||||
{{< accordion-item header="Accordion Item #3" >}}
|
||||
This is the third item's accordion body.
|
||||
{{< /accordion-item >}}
|
||||
{{< /accordion >}}
|
||||
|
||||
## Alerts
|
||||
|
||||
The alert is available as [custom shortcode]({{< ref "custom-shortcodes#alert" >}} "custom shortcode"). The following shortcode displays a simple alert.
|
||||
|
||||
{{< alert color="danger" >}}
|
||||
A simple danger alert—check it out!
|
||||
{{< /alert >}}
|
||||
|
||||
## Badge
|
||||
|
||||
Badges can be added to headings and buttons. The following two sections illustrate how to use them.
|
||||
|
||||
### Headings
|
||||
|
||||
Use HTML code to display a badge for a heading. See the Bootstrap [documentation][bs_badge_heading] for more options. The following example displays a badge for a heading of size six.
|
||||
|
||||
```html
|
||||
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
|
||||
```
|
||||
|
||||
The result looks like this.
|
||||
|
||||
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
|
||||
|
||||
### Buttons
|
||||
|
||||
The badge for a button is available via a [custom shortcode]({{< ref "custom-shortcodes#button" >}} "custom shortcode"). The following example displays a light button with a badge.
|
||||
|
||||
{{< button color="light" href="#" badge="3" >}}
|
||||
Button
|
||||
{{< /button >}}
|
||||
|
||||
## Breadcrumb
|
||||
|
||||
The breadcrumb is available as [custom shortcode]({{< ref "custom-shortcodes#breadcrumb" >}} "custom shortcode"). The following example displays a breadcrumb for the current page.
|
||||
|
||||
{{< breadcrumb >}}
|
||||
|
||||
## Buttons
|
||||
|
||||
The button is available as [custom shortcode]({{< ref "custom-shortcodes#button" >}} "custom shortcode"). The following example displays a tooltip for a dark button with a badge.
|
||||
|
||||
{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" >}}
|
||||
Inbox
|
||||
{{< /button >}}
|
||||
|
||||
## Button Group
|
||||
|
||||
The button group is available as [custom shortcode]({{< ref "custom-shortcodes#button-group" >}} "custom shortcode"). The following example displays a group of three buttons.
|
||||
|
||||
{{< 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 >}}
|
||||
|
||||
## Card
|
||||
|
||||
The card is available as [custom shortcode]({{< ref "custom-shortcodes#card" >}} "custom shortcode"). The following example displays a card that links to the [Rich Content]({{< ref "rich-content" >}} "Rich Content") page.
|
||||
|
||||
{{< card path="rich-content" class="col-sm-12 col-lg-8 mx-auto" layout="rich" >}}
|
||||
|
||||
## Carousel
|
||||
|
||||
The carousel is available as [custom shortcode]({{< ref "custom-shortcodes#carousel" >}} "custom shortcode"). The following example displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
|
||||
|
||||
{{< 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 >}}
|
||||
|
||||
## Close button
|
||||
|
||||
Use HTML code to display a generic close button. See the Bootstrap [documentation][bs_close_button] for more options. The following example displays a button with default styling.
|
||||
|
||||
```html
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
```
|
||||
|
||||
The result looks like this.
|
||||
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
|
||||
## Collapse
|
||||
|
||||
The collapse panel is available as [custom shortcode]({{< ref "custom-shortcodes#collapse" >}} "custom shortcode"). The following example displays a button that reveils a hidden panel:
|
||||
|
||||
{{< 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 <i>hidden by default</i> but revealed when the user activates the relevant trigger.
|
||||
{{< /collapse >}}
|
||||
|
||||
## Dropdowns
|
||||
|
||||
### Single button
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
### Split button
|
||||
|
||||
<!-- Example split danger button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
## List group
|
||||
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||
The current link item
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
|
||||
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
|
||||
</div>
|
||||
|
||||
## Modal
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Navbar
|
||||
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
## Navs & tabs
|
||||
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Offcanvas
|
||||
|
||||
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
|
||||
Button with data-bs-target
|
||||
</button>
|
||||
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<div>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
|
||||
</div>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Pagination
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
## Placeholders
|
||||
|
||||
<div class="card w-50" aria-hidden="true">
|
||||
<img src="/img/bd_placeholder_img.svg" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title placeholder-glow">
|
||||
<span class="placeholder col-6"></span>
|
||||
</h5>
|
||||
<p class="card-text placeholder-glow">
|
||||
<span class="placeholder col-7"></span>
|
||||
<span class="placeholder col-4"></span>
|
||||
<span class="placeholder col-4"></span>
|
||||
<span class="placeholder col-6"></span>
|
||||
<span class="placeholder col-8"></span>
|
||||
</p>
|
||||
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Popovers
|
||||
|
||||
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
|
||||
## Progress
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated w-75" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
## Scrollspy
|
||||
|
||||
### Navbar
|
||||
|
||||
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#scrollspyHeading1">First</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#scrollspyHeading2">Second</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>...</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
<p>...</p>
|
||||
<h4 id="scrollspyHeading3">Third heading</h4>
|
||||
<p>...</p>
|
||||
<h4 id="scrollspyHeading4">Fourth heading</h4>
|
||||
<p>...</p>
|
||||
<h4 id="scrollspyHeading5">Fifth heading</h4>
|
||||
<p>...</p>
|
||||
</div>
|
||||
|
||||
### Nested nav
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
|
||||
<div id="item-1">
|
||||
<h4>Item 1</h4>
|
||||
<p>...</p>
|
||||
</div>
|
||||
<div id="item-1-1">
|
||||
<h5>Item 1-1</h5>
|
||||
<p>...</p>
|
||||
</div>
|
||||
<div id="item-1-2">
|
||||
<h5>Item 1-2</h5>
|
||||
<p>...</p>
|
||||
</div>
|
||||
<div id="item-2">
|
||||
<h4>Item 2</h4>
|
||||
<p>...</p>
|
||||
</div>
|
||||
<div id="item-3">
|
||||
<h4>Item 3</h4>
|
||||
<p>...</p>
|
||||
</div>
|
||||
<div id="item-3-1">
|
||||
<h5>Item 3-1</h5>
|
||||
<p>...</p>
|
||||
</div>
|
||||
<div id="item-3-2">
|
||||
<h5>Item 3-2</h5>
|
||||
<p>...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### List group
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="list-item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-4">Item 4</h4>
|
||||
<p>...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Simple anchors
|
||||
|
||||
<!-- TODO: fix Simple anchors -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
|
||||
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
|
||||
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
|
||||
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
|
||||
<a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
|
||||
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="simple-list-item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h4 id="simple-list-item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="simple-list-item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h4 id="simple-list-item-4">Item 4</h4>
|
||||
<p>...</p>
|
||||
<h4 id="simple-list-item-5">Item 5</h4>
|
||||
<p>...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Spinners
|
||||
|
||||
The spinner is available as [custom shortcode]({{< ref "custom-shortcodes#spinner" >}} "custom shortcode"). The following example displays a centered spinner:
|
||||
|
||||
{{< spinner color="info" class="text-center" >}}
|
||||
Loading...
|
||||
{{< /spinner >}}
|
||||
|
||||
## Toasts
|
||||
|
||||
The toast is available as [custom shortcode]({{< ref "custom-shortcodes#toast" >}} "custom shortcode"). The following example displays a button that triggers a toast message:
|
||||
|
||||
{{< button id="toastButton" >}}
|
||||
Show toast
|
||||
{{< /button >}}
|
||||
|
||||
{{< toast >}}
|
||||
This is a toast message.
|
||||
{{< /toast >}}
|
||||
|
||||
## Tooltips
|
||||
|
||||
The tooltip is available as [custom shortcode]({{< ref "custom-shortcodes#tooltip" >}} "custom shortcode"). The following example displays a tooltip for a colored hyperlink:
|
||||
|
||||
{{< tooltip color="warning" title="Tooltip" href="#" >}}
|
||||
Tooltip demonstration
|
||||
{{< /tooltip >}}
|
||||
|
||||
<!-- MARKDOWN PUBLIC LINKS -->
|
||||
[bs_badge_heading]: https://getbootstrap.com/docs/5.2/components/badge/#headings
|
||||
[bs_close_button]: https://getbootstrap.com/docs/5.2/components/close-button/
|
||||
@@ -1,491 +0,0 @@
|
||||
---
|
||||
author: "Mark Dumay"
|
||||
title: "Custom Shortcodes"
|
||||
date: 2022-12-05
|
||||
modified: 2022-12-31
|
||||
description: "Available shortcodes using Bootstrap components and styling."
|
||||
tags: ["bootstrap", "shortcode"]
|
||||
thumbnail: img/sketch.jpg
|
||||
photoCredits: <a href="https://www.pexels.com/@picjumbo-com-55570/">picjumbo.com</a>
|
||||
photoSource: <a href="https://www.pexels.com/photo/white-printer-paper-196645/">Pexels</a>
|
||||
---
|
||||
|
||||
Bootstrap is an open-source web development framework originally created by Twitter. It uses a responsive, mobile-first approach that scales seamlessly across different screen sizes. Bootstrap includes an extensive collection of ready-to-use components, such as navigation bars, pagination controls, buttons, and much more. The Hinode theme exposes several of those components as Hugo shortcodes to simplify their usage within markdown content. The below paragraphs illustrate the available shortcodes and how to use them.
|
||||
|
||||
## Accordion
|
||||
|
||||
Use the `accordion` shortcode to show a group of vertically collapsing and expanding items. Add `accordion-item` inner elements for each accordion item. The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-------------|----------|-------------|
|
||||
| class | No | Optional class attribute of the accordion element, e.g. “w-50”. |
|
||||
{.table}
|
||||
|
||||
Add an inner `accordion-item` element for each item of the accordion. The `accordion-item` element supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-----------|----------|-------------|
|
||||
| header | Yes | Required header of the accordion element. |
|
||||
| class | No | Optional class attribute of the inner accordion element, e.g. “show”. |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
|
||||
|
||||
```html
|
||||
{{</* accordion */>}}
|
||||
{{</* accordion-item header="Accordion Item #1" class="show" */>}}
|
||||
This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
|
||||
<code>show</code> to the <code>class</code> argument.
|
||||
{{</* /accordion-item */>}}
|
||||
{{</* accordion-item header="Accordion Item #2" */>}}
|
||||
This is the second item's accordion body. It too supports HTML content.
|
||||
{{</* /accordion-item */>}}
|
||||
{{</* accordion-item header="Accordion Item #3" */>}}
|
||||
This is the third item's accordion body.
|
||||
{{</* /accordion-item */>}}
|
||||
{{</* /accordion */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< accordion >}}
|
||||
{{< accordion-item header="Accordion Item #1" class="show" >}}
|
||||
This is the first item's accordion body. It supports HTML content. The item is shown by adding the value <code>show</code> to the <code>class</code> argument.
|
||||
{{< /accordion-item >}}
|
||||
{{< accordion-item header="Accordion Item #2" >}}
|
||||
This is the second item's accordion body. It too supports HTML content.
|
||||
{{< /accordion-item >}}
|
||||
{{< accordion-item header="Accordion Item #3" >}}
|
||||
This is the third item's accordion body.
|
||||
{{< /accordion-item >}}
|
||||
{{< /accordion >}}
|
||||
|
||||
## Alert
|
||||
|
||||
Use the `alert` shortcode to display a contextual feedback message. The inner content is used as alert text. The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-------------|----------|-------------|
|
||||
| color | No | Optional theme color of the alert, either "primary" (default), "secondary", "success", "danger", "warning", "info", "light", or "dark". |
|
||||
| dismissible | No | Optional flag to indicate the alert is dismissible, defaults to false. |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays a simple alert.
|
||||
|
||||
```html
|
||||
{{</* alert color="danger" */>}}
|
||||
A simple danger alert—check it out!
|
||||
{{</* /alert */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< alert color="danger" >}}
|
||||
A simple danger alert—check it out!
|
||||
{{< /alert >}}
|
||||
|
||||
## Breadcrumb
|
||||
|
||||
Use the `breadcrumb` shortcode to display the current page’s location within the site's navigational hierarchy. The shortcode requires no arguments, see the following example.
|
||||
|
||||
```html
|
||||
{{</* breadcrumb */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< breadcrumb >}}
|
||||
|
||||
## Button
|
||||
|
||||
Use the `button` shortcode to display a button with a hyperlink. The inner content is used as button title. The button supports an optional badge and tooltip. The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-------------|----------|-------------|
|
||||
| href | No | Optional address for the button or hyperlink. Automatically assigned when using collapse. |
|
||||
| state | No | Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive". |
|
||||
| size | No | Optional size of the button, either "sm", "md" (default), or "lg". |
|
||||
| color | No | Optional theme color of the element, either "primary" (default), "secondary", "success", "danger", "warning", "info", "light", or "dark". |
|
||||
| badge | No | Optional positioned badge to display on top of the button. |
|
||||
| outline | No | Optional flag indicating the button should be outlined, either "false" (default) or "true". |
|
||||
| aria-label | No | Optional label for the badge. |
|
||||
| tooltip | No | Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/inactive buttons. |
|
||||
| collapse | No | Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons. |
|
||||
| placement | No | How to position the tooltip: "top" (default), "bottom", "left", or "right". |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays a tooltip for a dark button with a badge.
|
||||
|
||||
```html
|
||||
{{</* button color="dark" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" */>}}
|
||||
Inbox
|
||||
{{</* /button */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" >}}
|
||||
Inbox
|
||||
{{< /button >}}
|
||||
|
||||
## Button Group
|
||||
|
||||
Use the `button-group` shortcode to display a group of buttons. Add inner `<button>` elements for each [button](#button). The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-------------|----------|-------------|
|
||||
| aria-label | No | Optional assistive label for the button group. |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays a group of three buttons.
|
||||
|
||||
```html
|
||||
{{</* 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 */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< 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 >}}
|
||||
|
||||
## Card
|
||||
|
||||
Use the `card` shortcode to display a card that links to a content page. When using a rich layout, the card includes a thumbnail and a header.
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-------------|----------|-------------|
|
||||
| path | Yes | Required path of the page. |
|
||||
| class | No | Optional class attribute of the card element, e.g. “w-50”. |
|
||||
| color | No | Optional theme color of the card, either "primary", "secondary", "success", "danger", "warning", "info", "light", or "dark". By default, no color is specified. |
|
||||
| padding | No | Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default). |
|
||||
| header | No | Optional header components of the card, displayed in small caps. Supported values are "full" (default), "publication", "tags", and "none". |
|
||||
| footer | No | Optional footer components of the card, displayed in small caps. Supported values are "full", "publication", "tags", and "none" (default). |
|
||||
| orientation | No | Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none". |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays a colored, borderless horizontal card that links to the [Rich Content]({{< ref "rich-content" >}} "Rich Content") page. It includes a custom header and footer.
|
||||
|
||||
```html
|
||||
{{</* ccard path="rich-content" class="w-100 border-0" orientation="horizontal" color="info" header="publication" footer="tags */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< card path="rich-content" class="w-100 border-0" orientation="horizontal" color="info" header="publication" footer="tags" >}}
|
||||
|
||||
## Carousel
|
||||
|
||||
Use the `carousel` shortcode to display a carousel of several images, with similar behavior as the [Image Shortcode](#image-shortcode). The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-----------|----------|-------------|
|
||||
| ratio | No | Aspect ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9". |
|
||||
| class | No | Optional class attribute of the `carousel` element, e.g. "w-75". |
|
||||
{.table}
|
||||
|
||||
Add an inner `img` element for each slide of the carousel. The `img` element supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-----------|----------|-------------|
|
||||
| src | Yes | Required url of the image, e.g. "img/boots.jpg" or "https://picsum.photos/id/27/3264/1836". |
|
||||
| caption | No | Optional image caption. If set, the image is darkened to improve the contrast. The caption is hidden on smaller screens. |
|
||||
{.table}
|
||||
|
||||
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.
|
||||
|
||||
```html
|
||||
{{</* 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 */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< 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 >}}
|
||||
|
||||
## Collapse
|
||||
|
||||
Use the `collapse` shortcode to reveil or hide a panel. The panel can contain both HTML code and plain text. Link a button to the panel by assigning it's ID to the `collapse` attribute. The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-------------|----------|-------------|
|
||||
| id | Yes | Required unique id of the collapse element, e.g. "collapse-1". |
|
||||
| class | No | Optional class attribute of the inner panel element, e.g. “p-3”. |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
|
||||
|
||||
```html
|
||||
{{</* 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 <i>hidden by default</i> but
|
||||
revealed when the user activates the relevant trigger.
|
||||
{{</* /collapse */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< 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 <i>hidden by default</i> but revealed when the user activates the relevant trigger.
|
||||
{{< /collapse >}}
|
||||
|
||||
## Command Prompt
|
||||
|
||||
The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages. The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-----------|----------|-------------|
|
||||
| user | No | Optional user to add to the prompt, e.g. "user". |
|
||||
| host | No | Optional host to add to the prompt, e.g. "localhost". |
|
||||
| prompt | No | Optional prompt override, e.g. "PS C:\Users\User>". |
|
||||
| shell | No | Type of shell, either "bash" (default), "powershell", or "sql". |
|
||||
{.table}
|
||||
|
||||
### Bash (default shell)
|
||||
|
||||
Use the `command` shortcode to generate a block with a default bash command prompt.
|
||||
|
||||
```html
|
||||
{{%/* command */%}}
|
||||
export MY_VAR=123
|
||||
{{%/* /command */%}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
{{% command %}}
|
||||
export MY_VAR=123
|
||||
{{% /command %}}
|
||||
|
||||
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.
|
||||
|
||||
```html
|
||||
{{%/* 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 */%}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
{{% 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 %}}
|
||||
|
||||
### PowerShell
|
||||
|
||||
Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
|
||||
|
||||
```html
|
||||
{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
|
||||
Write-Host `
|
||||
'Hello' `
|
||||
'from' `
|
||||
'PowerShell!'
|
||||
(out)Hello from PowerShell!
|
||||
Write-Host 'Goodbye from PowerShell!'
|
||||
(out)Goodbye from PowerShell!
|
||||
{{%/* /command */%}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
|
||||
Write-Host `
|
||||
'Hello' `
|
||||
'from' `
|
||||
'PowerShell!'
|
||||
(out)Hello from PowerShell!
|
||||
Write-Host 'Goodbye from PowerShell!'
|
||||
(out)Goodbye from PowerShell!
|
||||
{{% /command %}}
|
||||
|
||||
### SQL
|
||||
|
||||
Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
|
||||
|
||||
```html
|
||||
{{%/* command prompt="mysql>" shell="sql" */%}}
|
||||
set @my_var = 'foo';
|
||||
set @my_other_var = 'bar';
|
||||
CREATE TABLE people ((con)
|
||||
first_name VARCHAR(30) NOT NULL,(con)
|
||||
last_name VARCHAR(30) NOT NULL(con)
|
||||
);
|
||||
(out)Query OK, 0 rows affected (0.09 sec)
|
||||
insert into people(con)
|
||||
values ('John', 'Doe');
|
||||
(out)Query OK, 1 row affected (0.02 sec)
|
||||
select *(con)
|
||||
from people(con)
|
||||
order by last_name;
|
||||
(out)+------------+-----------+
|
||||
(out)| first_name | last_name |
|
||||
(out)+------------+-----------+
|
||||
(out)| John | Doe |
|
||||
(out)+------------+-----------+
|
||||
(out)1 row in set (0.00 sec)
|
||||
{{%/* /command */%}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{% command prompt="mysql>" shell="sql" %}}
|
||||
set @my_var = 'foo';
|
||||
set @my_other_var = 'bar';
|
||||
CREATE TABLE people ((con)
|
||||
first_name VARCHAR(30) NOT NULL,(con)
|
||||
last_name VARCHAR(30) NOT NULL(con)
|
||||
);
|
||||
(out)Query OK, 0 rows affected (0.09 sec)
|
||||
insert into people(con)
|
||||
values ('John', 'Doe');
|
||||
(out)Query OK, 1 row affected (0.02 sec)
|
||||
select *(con)
|
||||
from people(con)
|
||||
order by last_name;
|
||||
(out)+------------+-----------+
|
||||
(out)| first_name | last_name |
|
||||
(out)+------------+-----------+
|
||||
(out)| John | Doe |
|
||||
(out)+------------+-----------+
|
||||
(out)1 row in set (0.00 sec)
|
||||
{{% /command %}}
|
||||
|
||||
## Image
|
||||
|
||||
Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called [image set][mozilla_image] to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). The images are processed using the quality setting specified in the `[imaging]` section of the main [config file][hugo_imaging] (defaults to 75). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. A fallback image of type `.jpeg` is provided for older browsers.The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-----------|----------|-------------|
|
||||
| src | Yes | Required url of the image, e.g. "img/boots.jpg" or "https://picsum.photos/id/27/3264/1836". |
|
||||
| ratio | No | Optional aspect ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is resized and cropped to match the ratio. Else the original aspect ratio of the image is kept. |
|
||||
| class | No | Optional class attribute of the inner `img` element, e.g. "rounded". |
|
||||
| title | No | Optional alternate text of the image. |
|
||||
| caption | No | Optional figure caption. |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
|
||||
|
||||
```html
|
||||
{{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
|
||||
|
||||
## Spinner
|
||||
|
||||
Use the `spinner` shortcode to indicate the loading state of a component or page. The inner content is used as alternative description. The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-------------|----------|-------------|
|
||||
| color | No | Optional theme color of the spinner, either "primary" (default), "secondary", "success", "danger", "warning", "info", "light", or "dark". |
|
||||
| grow | No | Optional flag to indicate the spinner is growing instead of rotating, defaults to false. |
|
||||
| class | No | Optional class attribute of the spinner wrapping element, e.g. “text-center”. |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays a centered spinner.
|
||||
|
||||
```html
|
||||
{{</* spinner color="info" class="text-center" */>}}
|
||||
Loading...
|
||||
{{</* /spinner */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
{{< spinner color="info" class="text-center" >}}
|
||||
Loading...
|
||||
{{< /spinner >}}
|
||||
|
||||
## Toast
|
||||
|
||||
Use the `toast` shortcode to display a dismissable message in the bottom-right corner of the screen. The Hinode theme defines a click event for a button with id `toastButton`. Modify the file `assets/js/toast.js` if needed. The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-------------|----------|-------------|
|
||||
| header | No | Optional header of the toast message. Uses the site title by default. |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
|
||||
|
||||
```html
|
||||
{{</* button id="toastButton" */>}}
|
||||
Show toast
|
||||
{{</* /button */>}}
|
||||
|
||||
{{</* toast */>}}
|
||||
This is a toast message.
|
||||
{{</* /toast */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< button id="toastButton" >}}
|
||||
Show toast
|
||||
{{< /button >}}
|
||||
|
||||
{{< toast >}}
|
||||
This is a toast message.
|
||||
{{< /toast >}}
|
||||
|
||||
## Tooltip
|
||||
|
||||
Use the `tooltip` shortcode to display a tooltip for a hyperlink. Refer to the [button shortcode]({{< ref "#button" >}} "button shortcode") on how to display a tooltip for a button instead. The inner content is used as hyperlink text. The shortcode supports the following arguments:
|
||||
|
||||
| Argument | Required | Description |
|
||||
|-------------|----------|-------------|
|
||||
| color | No | Optional theme color of the element, either "primary" (default), "secondary", "success", "danger", "warning", "info", "light", or "dark". |
|
||||
| title | Yes | Title to display in the tooltip. |
|
||||
| href | Yes | Address for the button or hyperlink. |
|
||||
| placement | No | How to position the tooltip: "top" (default), "bottom", "left", or "right". |
|
||||
{.table}
|
||||
|
||||
As an example, the following shortcode displays a tooltip for a colored hyperlink.
|
||||
|
||||
```html
|
||||
{{</* tooltip color="warning" title="Tooltip" href="#" */>}}
|
||||
Tooltip demonstration
|
||||
{{</* /tooltip */>}}
|
||||
```
|
||||
|
||||
The result looks like this:
|
||||
|
||||
{{< tooltip color="warning" title="Tooltip" href="#" >}}
|
||||
Tooltip demonstration
|
||||
{{< /tooltip >}}
|
||||
|
||||
[mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
|
||||
[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration
|
||||
Reference in New Issue
Block a user