166 lines
5.7 KiB
HTML
166 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>
|
|
{{ .Title }}
|
|
</title>
|
|
{{/* styles */}}
|
|
<style>
|
|
html {
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
|
|
{{/* Load Bootstrap SCSS. */}}
|
|
{{ $options := dict "enableSourceMap" true }}
|
|
{{ if hugo.IsProduction }}
|
|
{{ $options := dict "enableSourceMap" false "outputStyle" "compressed" }}
|
|
{{ end }}
|
|
{{ $styles := resources.Get "scss/styles.scss" }}
|
|
{{ $styles = $styles | css.Sass $options }}
|
|
{{ if hugo.IsProduction }}
|
|
{{ $styles = $styles | fingerprint }}
|
|
{{ end }}
|
|
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
|
|
|
|
{{/* Load Bootstrap JS. */}}
|
|
{{ $js := resources.Get "js/index.js" }}
|
|
{{ $params := dict }}
|
|
{{ $sourceMap := cond hugo.IsProduction "" "inline" }}
|
|
{{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }}
|
|
{{ $js = $js | js.Build $opts }}
|
|
{{ if hugo.IsProduction }}
|
|
{{ $js = $js | fingerprint }}
|
|
{{ end }}
|
|
<script
|
|
src="{{ $js.RelPermalink }}"
|
|
{{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}
|
|
defer></script>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5 mb-5">
|
|
<h1>Bootstrap v5 Hugo Module</h1>
|
|
<h2 class="mt-4">Dependencies</h2>
|
|
<p class="mt-4">
|
|
<strong>Note:</strong> We have a replacement of
|
|
github.com/gohugoio/hugo-mod-bootstrap-scss/v4 to point to the directory
|
|
one level up (we do this to get correct PR previews when we update
|
|
Bootstrap). The version number reflects the version in
|
|
<code>go.mod</code>.
|
|
</p>
|
|
<table class="table table-striped table-responsive mt-2">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">Owner</th>
|
|
<th scope="col">Path</th>
|
|
<th scope="col">Version</th>
|
|
<th scope="col">Time</th>
|
|
<th scope="col">Vendor</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range $index, $element := hugo.Deps }}
|
|
<tr>
|
|
<th scope="row">{{ add $index 1 }}</th>
|
|
<td>{{ with $element.Owner }}{{ .Path }}{{ end }}</td>
|
|
<td>
|
|
{{ $element.Path }}
|
|
{{ with $element.Replace }}
|
|
=>
|
|
{{ .Path }}
|
|
{{ end }}
|
|
</td>
|
|
<td>{{ $element.Version }}</td>
|
|
<td>{{ with $element.Time }}{{ . }}{{ end }}</td>
|
|
<td>{{ $element.Vendor }}</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
<h2 class="my-4">Toast (JS plugin)</h2>
|
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<strong class="me-auto">Bootstrap</strong>
|
|
<small>11 mins ago</small>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">Hello, world! This is a toast message.</div>
|
|
</div>
|
|
<h2 class="my-4">Popover (JS plugin)</h2>
|
|
<button
|
|
type="button"
|
|
class="btn btn-lg btn-danger"
|
|
data-bs-toggle="popover"
|
|
title="Popover title"
|
|
data-bs-content="And here's some amazing content. It's very engaging. Right?">
|
|
Click to toggle popover
|
|
</button>
|
|
<h2 class="my-4">Buttons</h2>
|
|
<div class="d-grid gap-2 d-md-block">
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
data-bs-toggle="button"
|
|
autocomplete="off">
|
|
Toggle button
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary active"
|
|
data-bs-toggle="button"
|
|
autocomplete="off"
|
|
aria-pressed="true">
|
|
Active toggle button
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
disabled
|
|
data-bs-toggle="button"
|
|
autocomplete="off">
|
|
Disabled toggle button
|
|
</button>
|
|
</div>
|
|
<h2 class="my-4">Carousel</h2>
|
|
<div
|
|
id="carouselExampleControls"
|
|
class="carousel slide"
|
|
data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
{{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg d-block w-100" "color" "#555" "background" "#777" "text" "First slide") }}
|
|
</div>
|
|
<div class="carousel-item">
|
|
{{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg d-block w-100" "color" "#555" "background" "#777" "text" "Second slide") }}
|
|
</div>
|
|
<div class="carousel-item">
|
|
{{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg d-block w-100" "color" "#555" "background" "#777" "text" "Third slide") }}
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="carousel-control-prev"
|
|
type="button"
|
|
data-bs-target="#carouselExampleControls"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button
|
|
class="carousel-control-next"
|
|
type="button"
|
|
data-bs-target="#carouselExampleControls"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|