rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-14 02:24:00 +01:00
Code Issues Actions Packages Releases Activity
59231069e9
Bootstrap/site/layouts/_default/examples.html

172 lines
7.6 KiB
HTML
Raw Normal View History

Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
<!doctype html>
Docs: display examples based on the docs current color mode (#37562) * Docs: display examples based on the docs current color mode * Fix _default/examples.html
2022-12-29 07:58:35 +01:00
<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">
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="{{ .Site.Params.authors }}">
Update hugo-bin to v0.43.1 (Hugo 0.55.1). (#28631)
2019-04-15 10:49:24 +02:00
<meta name="generator" content="Hugo {{ hugo.Version }}">
examples: add the version number in `title` (#32198)
2020-11-19 12:38:48 +01:00
<title>{{ .Page.Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}</title>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
<link rel="canonical" href="{{ .Permalink }}">
Add support for meta robots.
2019-02-21 13:53:14 +01:00
{{ with .Params.robots -}}
<meta name="robots" content="{{ . }}">
{{- end }}
examples.html: Move color mode JS lower
2024-03-03 06:57:55 +01:00
{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
<script src="{{ $colorModeJS }}"></script>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{ partial "stylesheet" . }}
Examples: include favicons. (#28504)
2019-05-02 09:47:48 +02:00
{{ partial "favicons" . }}
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
Docs: group together reusable CSS for examples in a single stylesheet (#35649) * Docs: group together examples reusable CSS in a stylesheet * Use pointer-events utility in sidebars example * Remove @import and move the content into _default/examples.html. Handle 2 sorts of dividers * Remove footers.css extra css declaration * Fix modals example * Review: remove .b-example-hr Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
2022-01-19 12:27:57 +01:00
.b-example-divider {
Update snippet examples for dark mode (#37834) * Update snippet examples for dark mode * Fix markup * Review comments * undo colored links docs from this PR
2023-01-11 01:33:33 +01:00
width: 100%;
Docs: group together reusable CSS for examples in a single stylesheet (#35649) * Docs: group together examples reusable CSS in a stylesheet * Use pointer-events utility in sidebars example * Remove @import and move the content into _default/examples.html. Handle 2 sorts of dividers * Remove footers.css extra css declaration * Fix modals example * Review: remove .b-example-hr Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
2022-01-19 12:27:57 +01:00
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
Docs: replace CSS by utilities in examples (#35699) * Drop .opacity-50 and .opacity-75 redefinition in examples * Drop unused .card-img-right from blog example CSS files * Use line-height utilities when possible * Use rounded-* utilities in examples * Replace .nav-underline by .nav-scroller and use it in examples.html default * Use .mb-1 for .blog-post-title * Remove unused CSS rule and use .fw-* utilities for carousels examples * Use utilities for cheatsheet examples * Extract some CSS to utilities for .nav-masthead .nav-link in cover example * Dashboard group of minor modifications * Dropdowns example: refactoring * Dropdowns example refactoring: fix linting by removing selector by id * Features example refactoring * Headers example refactoring * List groups example refactoring * Sidebars example refactoring * Sign-in example refactoring * Starter template refactoring * Fix RTL examples Co-authored-by: Mark Otto <markd.otto@gmail.com>
2022-02-23 19:31:18 +01:00
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
Examples: color mode enhancement (#38144) * Tool bar proposal inside examples * Some examples fixes * Change appearance and position of the color mode toggler * Proposal * . --------- Co-authored-by: Mark Otto <markdotto@gmail.com>
2023-03-04 20:49:07 +01:00
.btn-bd-primary {
--bd-violet-bg: #712cf9;
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
--bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet-bg);
--bs-btn-border-color: var(--bd-violet-bg);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #6528e0;
--bs-btn-hover-border-color: #6528e0;
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
--bs-btn-active-color: var(--bs-btn-hover-color);
--bs-btn-active-bg: #5a23c8;
--bs-btn-active-border-color: #5a23c8;
}
Fix: make theme selector tick icon visible when active in examples layout (#39177)
2023-09-14 16:01:50 +02:00
Examples: color mode enhancement (#38144) * Tool bar proposal inside examples * Some examples fixes * Change appearance and position of the color mode toggler * Proposal * . --------- Co-authored-by: Mark Otto <markdotto@gmail.com>
2023-03-04 20:49:07 +01:00
.bd-mode-toggle {
z-index: 1500;
}
Fix: make theme selector tick icon visible when active in examples layout (#39177)
2023-09-14 16:01:50 +02:00
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
</style>
{{ 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 }}>
Use `.d-none` instead of inline styling
2023-05-02 22:57:48 +02:00
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
Examples: color mode enhancement (#38144) * Tool bar proposal inside examples * Some examples fixes * Change appearance and position of the color mode toggler * Proposal * . --------- Co-authored-by: Mark Otto <markdotto@gmail.com>
2023-03-04 20:49:07 +01:00
<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>
<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">
Docs: drop unused `.theme-icon` class (#39520)
2023-12-21 17:34:16 +01:00
<svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#sun-fill"></use></svg>
Examples: color mode enhancement (#38144) * Tool bar proposal inside examples * Some examples fixes * Change appearance and position of the color mode toggler * Proposal * . --------- Co-authored-by: Mark Otto <markdotto@gmail.com>
2023-03-04 20:49:07 +01:00
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">
Docs: drop unused `.theme-icon` class (#39520)
2023-12-21 17:34:16 +01:00
<svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
Examples: color mode enhancement (#38144) * Tool bar proposal inside examples * Some examples fixes * Change appearance and position of the color mode toggler * Proposal * . --------- Co-authored-by: Mark Otto <markdotto@gmail.com>
2023-03-04 20:49:07 +01:00
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">
Docs: drop unused `.theme-icon` class (#39520)
2023-12-21 17:34:16 +01:00
<svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#circle-half"></use></svg>
Examples: color mode enhancement (#38144) * Tool bar proposal inside examples * Some examples fixes * Change appearance and position of the color mode toggler * Proposal * . --------- Co-authored-by: Mark Otto <markdotto@gmail.com>
2023-03-04 20:49:07 +01:00
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
{{ .Content }}
More darkmode examples (#38058) * WIP darkmode examples * Fix product css error, redo parts of blog * wip dashboard * updated rtl generated * fix up some examples, namely dashboard * jumbotron and sign-in fixes * more fixes * more * Fixes from code review * Remove duplicate `data-bs-target` in dashboard/index.html * Modify `blog-rtl/index.html` * Modify `dashboard-rtl/index.html` * Modify `carousel-rtl/index.html` * Keep JS on all pages for switcher * Remove Feather from dashboard examples --------- Co-authored-by: Julien Déramond <juderamond@gmail.com>
2023-04-28 03:13:35 +02:00
{{- 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>
{{- else -}}
<script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
Simplify code.
2019-07-19 17:49:52 +02:00
{{- end }}
More darkmode examples (#38058) * WIP darkmode examples * Fix product css error, redo parts of blog * wip dashboard * updated rtl generated * fix up some examples, namely dashboard * jumbotron and sign-in fixes * more fixes * more * Fixes from code review * Remove duplicate `data-bs-target` in dashboard/index.html * Modify `blog-rtl/index.html` * Modify `dashboard-rtl/index.html` * Modify `carousel-rtl/index.html` * Keep JS on all pages for switcher * Remove Feather from dashboard examples --------- Co-authored-by: Julien Déramond <juderamond@gmail.com>
2023-04-28 03:13:35 +02:00
{{ range .Page.Params.extra_js -}}
<script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
{{- end -}}
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-08 17:33:28 +01:00
</body>
</html>
Reference in New Issue Copy Permalink