mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00
Code Issues Releases Wiki Activity

Merge branch 'main' into main-lmp-contextual-theme-switcher

Browse Source
This commit is contained in:
Louis-Maxime Piton
2024-07-23 09:18:00 +02:00
parent 930867b09a e8385b06fd
commit 0816e952ea
330 changed files with 5460 additions and 12414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
site/layouts/_default/_markup/render-heading.html
View File

@@ -1,5 +1,7 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
{{- $id := .Anchor | safeURL -}}
{{- $text := .Text | safeHTML -}}
<h{{ .Level }} id="{{ $id }}">{{ $text }}
{{- if and (ge .Level .Page.Site.Params.anchors.min) (le .Level .Page.Site.Params.anchors.max) }}{{" " -}}
<a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="Link to this section: {{ .Text | safeHTML }}"></a>
<a class="anchor-link" href="#{{ $id }}" aria-label="Link to this section: {{ $text }}"></a>
{{- end -}}
</h{{ .Level }}>

8
site/layouts/_default/_markup/render-image.html Normal file
View File

@@ -0,0 +1,8 @@
{{- $originalSrc := .Destination | safeURL -}}
{{- $localImgPath := path.Join "/site/static/docs" site.Params.docs_version $originalSrc -}}
{{- /* This shouldn't be needed but we have a weird folder structure with version included... */ -}}
{{- $src := urls.JoinPath "/docs" site.Params.docs_version $originalSrc -}}
{{- $config := imageConfig $localImgPath -}}
{{- $classes := "d-block img-fluid" -}}
<img src="{{ $src }}" class="{{ $classes }}" alt="{{ .Text }}" width="{{ $config.Width }}" height="{{ $config.Height }}" loading="lazy">

7
site/layouts/_default/docs.html
View File

@@ -18,8 +18,9 @@
<div class="bd-intro pt-2 ps-lg-2">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<div class="mb-3 mb-md-0 d-flex text-nowrap">
{{- if .Page.Params.added -}}
<small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added }}</small>
{{- /* This is needed because we want to show the badge if show_badge isn't present or is set to false */ -}}
{{- if (or (and (.Page.Params.added) (not (isset .Page.Params.added "show_badge"))) (and (.Page.Params.added) (isset .Page.Params.added "show_badge") (not (eq .Page.Params.added.show_badge false)))) -}}
<small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added.version }}</small>
{{- end -}}
<a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
View on GitHub
@@ -66,7 +67,7 @@
{{ end }}
{{ define "footer" }}
{{ range .Page.Params.extra_js -}}
<script{{ with .async }} async{{ end }} src="{{ .src }}"></script>
<script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"></script>
{{- end -}}
<div class="position-fixed" aria-hidden="true"><input type="text" tabindex="-1"></div>
{{ end }}

70
site/layouts/_default/examples.html
View File

@@ -1,9 +1,6 @@
<!doctype html>
<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }} data-bs-theme="auto">
<head>
{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
<script src="{{ $colorModeJS | relURL }}"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
@@ -17,6 +14,9 @@
<meta name="robots" content="{{ . }}">
{{- end }}
{{- $colorModeJS := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/js/color-modes.js" -}}
<script src="{{ $colorModeJS }}"></script>
{{ partial "stylesheet" . }}
{{ partial "favicons" . }}
@@ -94,78 +94,38 @@
z-index: 1500;
}
.bd-mode-toggle .bi {
width: 1em;
height: 1em;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
</style>
{{ range .Page.Params.extra_css }}
{{ range .Page.Params.extra_css -}}
{{ "<!-- Custom styles for this template -->" | safeHTML }}
<link href="{{ . }}" rel="stylesheet">
{{- end }}
</head>
<body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
</svg>
{{ partial "examples/icons" . }}
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
</ul>
{{ partial "theme-toggler" . }}
</div>
{{ .Content }}
{{- if eq hugo.Environment "production" -}}
<script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script>
{{- if hugo.IsProduction -}}
<script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
{{- else -}}
<script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
<script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
{{- end }}
{{ range .Page.Params.extra_js -}}
<script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
<script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
{{- end -}}
</body>
</html>

31
site/layouts/_default/single.html
View File

@@ -5,17 +5,17 @@
<div class="col-xl-8">
<h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
{{ if eq .Title "Examples" }}
{{ if eq .Title "Examples" -}}
<div class="d-flex flex-column flex-md-row gap-3">
<a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">
<a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
<svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
Download examples
</a>
<a href="{{ .Site.Params.download.source }}" class="btn btn-lg bd-btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">
<a href="{{ .Site.Params.download.source }}" class="btn btn-lg bd-btn-lg btn-outline-secondary">
Download source code
</a>
</div>
{{ end }}
{{- end }}
</div>
<div class="col-xl-4 d-lg-flex justify-content-xl-end">
{{ partial "ads" . }}
@@ -28,25 +28,10 @@
<div class="container-xxl bd-gutter">
{{ .Content }}
{{ if eq .Title "Examples" }}
<hr class="my-5">
<div class="container">
<div class="text-center">
<div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p>
<a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
</div>
<img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
</div>
{{ end }}
{{ if eq .Title "Examples" -}}
{{ partial "examples/main" . }}
{{ partial "examples/bs-themes" . }}
{{- end }}
</div>
</main>
{{ end }}

10
site/layouts/partials/analytics.html
View File

@@ -1,9 +1 @@
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script defer src="https://cdn.usefathom.com/script.js" data-site="{{ .Site.Params.analytics.fathom_site }}"></script>

2
site/layouts/partials/callouts/warning-color-assistive-technologies.md
View File

@@ -1 +1 @@
**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [*sufficient* color contrast](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [*sufficient* color contrast](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility/#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.

46
site/layouts/partials/docs-navbar.html
View File

@@ -23,7 +23,7 @@
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
<div class="offcanvas-header px-4 pb-0">
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
@@ -33,19 +33,19 @@
<hr class="d-lg-none text-white-50">
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/">Docs</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.icons }}" target="_blank" rel="noopener">Icons</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.themes }}" target="_blank" rel="noopener">Themes</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.blog }}" target="_blank" rel="noopener">Blog</a>
</li>
</ul>
@@ -83,39 +83,7 @@
</li>
<li class="nav-item dropdown">
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
data-bs-display="static"
aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
</ul>
{{ partial "theme-toggler" . }}
</li>
</ul>
</div>

5
site/layouts/partials/docs-sidebar.html
View File

@@ -28,7 +28,7 @@
{{- range $doc := $group.pages -}}
{{- $doc_slug := $doc.title | urlize -}}
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
{{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
{{- $href := urls.JoinPath "/docs" $.Site.Params.docs_version $group_slug $doc_slug "/" }}
<li><a href="{{ $href }}" class="bd-links-link d-inline-block rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
{{- end }}
</ul>
@@ -36,7 +36,8 @@
{{- else }}
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
<li class="bd-links-span-all">
<a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="bd-links-link d-inline-block rounded small {{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
{{- $href := urls.JoinPath "/docs" $.Site.Params.docs_version $group_slug "/" }}
<a href="{{ $href }}" class="bd-links-link d-inline-block rounded small{{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
{{ $group.title }}
</a>
</li>

18
site/layouts/partials/docs-versions.html
View File

@@ -5,10 +5,14 @@
{{- $versions_link := "" -}}
{{- if and (eq .Layout "docs") (eq $page_version .Site.Params.docs_version) -}}
{{- $versions_link = printf "%s/%s/" $group_slug $page_slug -}}
{{- else if (eq .Layout "single") }}
{{- $versions_link = printf "%s/" $page_slug -}}
{{- end }}
{{- $versions_link = urls.JoinPath $group_slug $page_slug "/" -}}
{{- else if (eq .Layout "single") -}}
{{- $versions_link = urls.JoinPath $page_slug "/" -}}
{{- end -}}
{{- $added_in_51 := eq (string .Page.Params.added.version) "5.1" -}}
{{- $added_in_52 := eq (string .Page.Params.added.version) "5.2" -}}
{{- $added_in_53 := eq (string .Page.Params.added.version) "5.3" -}}
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -23,21 +27,21 @@
</a>
</li>
<li>
{{- if (eq .Page.Params.added "5.3") }}
{{- if ($added_in_53) }}
<div class="dropdown-item disabled">v5.2.3</div>
{{- else }}
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.2/{{ $versions_link }}">v5.2.3</a>
{{- end }}
</li>
<li>
{{- if or (eq .Page.Params.added "5.2") (eq .Page.Params.added "5.3") }}
{{- if (or $added_in_52 $added_in_53) }}
<div class="dropdown-item disabled">v5.1.3</div>
{{- else }}
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/{{ $versions_link }}">v5.1.3</a>
{{- end }}
</li>
<li>
{{- if or (eq .Page.Params.added "5.1") (eq .Page.Params.added "5.2") (eq .Page.Params.added "5.3") }}
{{- if (or $added_in_51 $added_in_52 $added_in_53) }}
<div class="dropdown-item disabled">v5.0.2</div>
{{- else }}
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/{{ $versions_link }}">v5.0.2</a>

17
site/layouts/partials/examples/bs-themes.html Normal file
View File

@@ -0,0 +1,17 @@
<hr class="my-5">
<div class="container">
<div class="text-center">
<div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p>
<a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
</div>
{{ partial "responsive-img" (dict "context" .
"imgPath" "/assets/img/bootstrap-themes-collage.png"
"alt" "Bootstrap Themes"
"classes" "d-block mt-3") }}
</div>

15
site/layouts/partials/examples/icons.html Normal file
View File

@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

63
site/layouts/partials/examples/main.html Normal file
View File

@@ -0,0 +1,63 @@
{{ range $entry := $.Site.Data.examples -}}
<div class="bd-content">
<h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
<p>{{ $entry.description }}</p>
{{ if eq $entry.category "RTL" -}}
<div class="bd-callout bd-callout-warning small">
<p>
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
</p>
<p><a href="{{ urls.JoinPath $.Site.Params.repo "issues/new/choose" }}">Please open an issue.</a></p>
</div>
{{ end -}}
{{ range $i, $example := $entry.examples -}}
{{- $len := len $entry.examples -}}
{{ if (eq $i 0) }}<div class="row">{{ end }}
{{ if $entry.external -}}
<div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
<svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
<div>
<h3 class="h5 mb-1">
<a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.github_org $example.url }}" target="_blank" rel="noopener">
{{ $example.name }}
</a>
</h3>
<p class="text-body-secondary">{{ $example.description }}</p>
<p>
{{- $indexPath := default "index.html" $example.indexPath -}}
{{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }}
<a class="icon-link small link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener">
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
Edit in StackBlitz
</a>
</p>
</div>
</div>
{{ else -}}
<div class="col-sm-6 col-md-3 mb-3">
{{- $exampleNameUrlized := $example.name | urlize -}}
{{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }}
<a class="d-block link-offset-1" href="{{ $exampleUrl }}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
{{ $imageBasePath := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/img/examples" -}}
{{- $imgPath := urls.JoinPath $imageBasePath (printf "%s.png" $exampleNameUrlized) -}}
{{- $imgPath2x := urls.JoinPath $imageBasePath (printf "%s@2x.png" $exampleNameUrlized) -}}
{{- with (imageConfig (path.Join "/site/static" $imgPath)) -}}
<img class="img-thumbnail mb-3"
srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
src="{{ $imgPath }}"
alt=""
width="{{ .Width }}"
height="{{ .Height }}"
loading="lazy">
{{- end }}
<h3 class="h5 mb-1">
{{ $example.name }}
</h3>
</a>
<p class="text-body-secondary">{{ $example.description }}</p>
</div>
{{- end }}
{{ if (eq (add $i 1) $len) }}</div>{{ end -}}
{{ end -}}
</div>
{{ end -}}

1
site/layouts/partials/favicons.html
View File

@@ -1,4 +1,3 @@
{{ "<!-- Favicons -->" | safeHTML }}
<link rel="apple-touch-icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">

2
site/layouts/partials/footer.html
View File

@@ -41,7 +41,7 @@
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons" target="_blank" rel="noopener">Icons</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs" target="_blank" rel="noopener">RFS</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples/" target="_blank" rel="noopener">Examples repo</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples" target="_blank" rel="noopener">Examples repo</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 mb-3">

12
site/layouts/partials/header.html
View File

@@ -7,18 +7,20 @@
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="{{ .Site.Params.docs_version }}">
<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
<link rel="canonical" href="{{ .Permalink }}">
<link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
{{ if (ne .Page.Layout "examples") -}}
<link rel="preconnect" href="https://{{ .Site.Params.algolia.appId | lower }}-dsn.algolia.net" crossorigin>
{{- end }}
<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
{{ with .Params.robots -}}
<meta name="robots" content="{{ . }}">
{{- end }}
{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
<script src="{{ $colorModeJS | relURL }}"></script>
{{- $colorModeJS := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/js/color-modes.js" -}}
<script src="{{ $colorModeJS }}"></script>
{{ partial "stylesheet" . }}
{{ partial "favicons" . }}

2
site/layouts/partials/home/components-utilities.html
View File

@@ -53,7 +53,7 @@
</ul>
`) "html" "" }}
<p class="d-flex justify-content-start mb-md-0">
<a href="/docs/{{ .Site.Params.docs_version }}/examples#snippets" class="icon-link icon-link-hover fw-semibold">
<a href="/docs/{{ .Site.Params.docs_version }}/examples/#snippets" class="icon-link icon-link-hover fw-semibold">
Explore customized components
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
</a>

6
site/layouts/partials/home/get-started.html
View File

@@ -41,15 +41,15 @@
<h4 class="fw-semibold">Read our getting started guides</h4>
<p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p>
<div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack">
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy">
<span class="text-body-secondary">Webpack</span>
</a>
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel">
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy">
<span class="text-body-secondary">Parcel</span>
</a>
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite">
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite/">
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy">
<span class="text-body-secondary">Vite</span>
</a>

8
site/layouts/partials/home/icons.html
View File

@@ -15,9 +15,9 @@
</p>
</div>
<div class="col-lg-6">
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
alt="Bootstrap Icons" width="700" height="425" loading="lazy">
{{ partial "responsive-img" (dict "context" .
"imgPath" "/assets/img/bootstrap-icons.png"
"alt" "Bootstrap Icons"
"classes" "d-block mt-3") }}
</div>
</section>

19
site/layouts/partials/home/masthead.html
View File

@@ -1,11 +1,20 @@
<div class="bd-masthead mb-3" id="content">
<div class="container-xxl bd-gutter">
<div class="col-md-8 mx-auto text-center">
<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://blog.getbootstrap.com/">
<strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.3</strong>
<span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol" rel="noopener" target="_blank">
<span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
<span class="fw-semibold">
New!
</span>
Never-Ending Support for Bootstrap
<svg class="bi" style="width: 20px; height: 20px;"><use xlink:href="#arrow-right-short"></use></svg>
</span>
</a>
<img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-none d-sm-block mx-auto mb-3">
{{ partial "responsive-img" (dict "context" .
"imgPath" "/assets/brand/bootstrap-logo-shadow.png"
"alt" "Bootstrap"
"classes" "d-none d-sm-block mb-3"
"lazyload" false) }}
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
<p class="lead mb-4">
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
@@ -14,7 +23,7 @@
<div class="d-inline-block v-align-middle fs-5">
{{ highlight (printf ("npm i bootstrap@%s") .Site.Params.current_version) "sh" "" }}
</div>
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
<svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
Read the docs
</a>

1
site/layouts/partials/home/plugins.html
View File

@@ -50,6 +50,7 @@
<hr class="my-4">
<div class="row g-3">
{{- range $plugin := .Site.Data.plugins -}}
{{- /* TODO we should use urls.JoinPath here too, but the links include `#` which gets escaped */ -}}
{{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }}
<div class="col-sm-6 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}">

8
site/layouts/partials/home/themes.html
View File

@@ -15,9 +15,9 @@
</p>
</div>
<div class="col-lg-6">
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
alt="Bootstrap Themes" width="700" height="500" loading="lazy">
{{ partial "responsive-img" (dict "context" .
"imgPath" "/assets/img/bootstrap-themes.png"
"alt" "Bootstrap Themes"
"classes" "d-block mt-3") }}
</div>
</section>

3
site/layouts/partials/icons.html
View File

@@ -2,6 +2,9 @@
<symbol id="arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</symbol>
<symbol id="arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/>
</symbol>
<symbol id="book-half" viewBox="0 0 16 16">
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
</symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

22
site/layouts/partials/responsive-img.html Normal file
View File

@@ -0,0 +1,22 @@
{{- /*
Accepts context, classes, imgPath, alt and lazyload
*/ -}}
{{- $lazy := .lazyload | default true -}}
{{- $classes := slice "img-fluid" "mx-auto" | append (slice .classes) -}}
{{- $basePath := path.Join "/docs" .context.Site.Params.docs_version (path.Dir .imgPath) -}}
{{- $basename := path.BaseName .imgPath -}}
{{- $ext := path.Ext .imgPath -}}
{{- $imgPath := path.Join $basePath (printf "%s%s" $basename $ext) -}}
{{- $imgPath2x := path.Join $basePath (printf "%s@2x%s" $basename $ext) -}}
{{- with (imageConfig (path.Join "/site/static" $imgPath)) }}
<img class="{{ delimit $classes " " }}"
srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
src="{{ $imgPath }}"
alt="{{ $.alt }}"{{ if eq $lazy true }}
loading="lazy"{{ end }}
width="{{ .Width }}"
height="{{ .Height }}">
{{- end }}

103
site/layouts/partials/scripts.html
View File

@@ -1,73 +1,40 @@
{{ if eq hugo.Environment "production" -}}
<script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script>
{{ if hugo.IsProduction -}}
<script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
{{ else -}}
<script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
<script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
{{- end }}
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
{{- $esbuildOptions := dict "target" "es2019" -}}
{{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version -}}
{{- if hugo.IsProduction -}}
{{- $esbuildOptions = merge $esbuildOptions (dict "minify" "true") -}}
{{- end }}
{{- $applicationJs := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/application.js") }}
<script defer src="{{ $applicationJs.RelPermalink }}"></script>
{{- if (ne .Page.Layout "examples") -}}
{{- $esbuildParams := dict
"apiKey" .Site.Params.algolia.apiKey
"appId" .Site.Params.algolia.appId
"indexName" .Site.Params.algolia.indexName
-}}
{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
{{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/search.js") }}
<script defer src="{{ $searchJs.RelPermalink }}"></script>
{{- end -}}
{{ if eq .Page.Layout "docs" -}}
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
{{- end }}
{{- $vendor := resources.Match "js/vendor/*.js" -}}
{{- $js := resources.Match "js/*.js" -}}
{{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version "assets/js/docs.js" -}}
{{- $docsJs := append $js $vendor | resources.Concat $targetDocsJSPath -}}
{{- if eq hugo.Environment "production" -}}
{{- $docsJs = $docsJs | resources.Minify -}}
{{- end }}
<script src="{{ $docsJs.Permalink | relURL }}"></script>
{{ if eq .Page.Layout "docs" -}}
<script>
// Open in StackBlitz logic
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
// Get extra classes for this example
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
})
})
StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
const markup = `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ .Site.Params.cdn.css }}" rel="stylesheet">
<link href="https://getbootstrap.com/docs/{{ .Site.Params.docs_version }}/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
<!-- Example Code -->
${htmlSnippet.replace(/^/gm, ' ')}
<!-- End Example Code -->
</body>
</html>`
const jsSnippetContent = jsSnippet ? '{{ os.ReadFile "site/assets/js/snippets.js" }}' : null
const project = {
files: {
'index.html': markup,
'index.js': jsSnippetContent
},
title: 'Bootstrap Example',
description: `Official example from ${window.location.href}`,
template: jsSnippet ? 'javascript' : 'html',
tags: ['bootstrap']
}
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
}
</script>
{{- end }}
{{- /* Disable minify options for snippets.js so that the file's readable on StackBlitz */ -}}
{{- $snippetsFile := resources.Get "js/snippets.js" | js.Build (merge $esbuildOptions (dict "minify" "false")) -}}
{{- $esbuildParams := dict
"cssCdn" .Site.Params.cdn.css
"jsBundleCdn" .Site.Params.cdn.js_bundle
"docsVersion" .Site.Params.docs_version
"jsSnippetFile" $snippetsFile.Content
-}}
{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
{{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }}
<script defer src="{{ $stackblitzJs.RelPermalink }}"></script>
{{- end -}}

6
site/layouts/partials/social.html
View File

@@ -1,11 +1,11 @@
{{- $pageTitle := .Title | markdownify -}}
{{- $pageDescription := .Page.Params.description | default .Site.Params.description | markdownify -}}
{{- $socialImagePath := printf "/docs/%s/assets" .Site.Params.docs_version -}}
{{- $socialImagePath := urls.JoinPath "/docs" .Site.Params.docs_version "assets" -}}
{{- if .Page.Params.thumbnail -}}
{{- $socialImagePath = path.Join $socialImagePath "img/" .Page.Params.thumbnail -}}
{{- $socialImagePath = urls.JoinPath $socialImagePath "img" .Page.Params.thumbnail -}}
{{- else -}}
{{- $socialImagePath = path.Join $socialImagePath "brand/bootstrap-social.png" -}}
{{- $socialImagePath = urls.JoinPath $socialImagePath "brand/bootstrap-social.png" -}}
{{- end -}}
<meta name="twitter:card" content="summary_large_image">

22
site/layouts/partials/stylesheet.html
View File

@@ -1,25 +1,27 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
{{ if eq hugo.Environment "production" -}}
{{ if hugo.IsProduction -}}
{{ if eq .Page.Params.direction "rtl" -}}
<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.rtl.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_rtl_hash | safeHTMLAttr }} crossorigin="anonymous">
<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.rtl.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_rtl_hash | safeHTMLAttr }}>
{{- else -}}
<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_hash | safeHTMLAttr }} crossorigin="anonymous">
<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_hash | safeHTMLAttr }}>
{{- end -}}
{{- else -}}
<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
{{- end }}
{{- if (ne .Page.Layout "examples") }}
{{- $targetDocsCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/docs.css" -}}
{{- $sassOptions := dict "targetPath" $targetDocsCssPath "outputStyle" "expanded" "precision" 6 -}}
{{- $sassOptions := dict "outputStyle" "expanded" "precision" 6 -}}
{{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}}
{{ if eq hugo.Environment "production" -}}
{{- $targetDocsCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/docs.css" -}}
{{- $targetSearchCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/search.css" -}}
{{ if hugo.IsProduction -}}
{{- $sassOptions = merge $sassOptions (dict "outputStyle" "compressed") -}}
{{- end -}}
{{- $style := resources.Get "scss/docs.scss" | toCSS $sassOptions | postCSS $postcssOptions }}
{{- $docsCss := resources.Get "scss/docs.scss" | toCSS (merge (dict "targetPath" $targetDocsCssPath) $sassOptions) | postCSS $postcssOptions -}}
{{- $searchCss := resources.Get "scss/search.scss" | toCSS (merge (dict "targetPath" $targetSearchCssPath) $sassOptions) | postCSS $postcssOptions -}}
<link href="{{ $style.Permalink | relURL }}" rel="stylesheet">
<link href="{{ $docsCss.RelPermalink }}" rel="stylesheet">
<link href="{{ $searchCss.RelPermalink }}" rel="stylesheet">
{{- end }}

34
site/layouts/partials/theme-toggler.html Normal file
View File

@@ -0,0 +1,34 @@
{{- $isExamples := eq .Layout "examples" -}}
<button class="btn {{ if $isExamples }}btn-bd-primary{{ else }}btn-link nav-link px-0 px-lg-2{{ end }} py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
{{ if not $isExamples }}data-bs-display="static"{{ end }}
aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
<span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
</ul>

3
site/layouts/robots.txt
View File

@@ -1,8 +1,7 @@
# www.robotstxt.org
{{- $isProduction := eq hugo.Environment "production" -}}
{{- $isNetlify := eq (getenv "NETLIFY") "true" -}}
{{- $allowCrawling := and (not $isNetlify) $isProduction -}}
{{- $allowCrawling := and (not $isNetlify) hugo.IsProduction -}}
{{ if $allowCrawling }}
# Allow crawling of all content

3
site/layouts/shortcodes/docsref.html
View File

@@ -1 +1,2 @@
{{- relref . ((path.Join "docs" $.Site.Params.docs_version (.Get 0)) | relURL) -}}
{{- $pageToReference := path.Join "docs" $.Site.Params.docs_version (.Get 0) -}}
{{- relref . $pageToReference | relURL -}}

14
site/layouts/shortcodes/example.html
View File

@@ -13,23 +13,23 @@
{{- $id := .Get "id" -}}
{{- $class := .Get "class" -}}
{{- $lang := .Get "lang" | default "html" -}}
{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
{{- $show_markup := .Get "show_markup" | default true -}}
{{- $show_preview := .Get "show_preview" | default true -}}
{{- $input := .Inner -}}
{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
{{- $content := .Inner -}}
<div class="bd-example-snippet bd-code-snippet">
{{- if eq $show_preview true -}}
{{- if eq $show_preview true }}
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
{{- $input -}}
{{ $content }}
</div>
{{- end -}}
{{- end }}
{{- if eq $show_markup true -}}
{{- if eq $show_preview true -}}
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
<small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
<div class="d-flex ms-auto">
<div class="btn-theme dropdown" title="Toggle local theme">
<button class="dropdown-toggle d-flex align-items-center" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
@@ -73,5 +73,5 @@
{{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
{{- end -}}
{{- end }}
</div>

12
site/layouts/sitemap.xml
View File

@@ -1,12 +0,0 @@
{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
{{- range .Data.Pages -}}{{ if and .Permalink (ne .Params.sitemap_exclude true) }}
<url>
<loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
<lastmod>{{ safeHTML (.Lastmod.Format "2006-01-02T15:04:05-07:00") }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
<changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
<priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
<xhtml:link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}"/>{{ end }}
<xhtml:link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}"/>{{ end }}
</url>{{ end }}{{ end }}
</urlset>