diff --git a/site/content/docs/5.0/examples/_index.md b/site/content/docs/5.0/examples/_index.md index 4d747cd78713..3d5bfab2fb46 100644 --- a/site/content/docs/5.0/examples/_index.md +++ b/site/content/docs/5.0/examples/_index.md @@ -19,7 +19,7 @@ aliases: "/examples/" {{- $len := len $entry.examples -}} {{ if (eq $i 0) }}
{{ end }}
- + Checkout form

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

-
+

- Your cart - 3 + Your cart + 3

- +
diff --git a/site/content/docs/5.0/examples/pricing/pricing.css b/site/content/docs/5.0/examples/pricing/pricing.css index 70afca134bb2..c7304d10be4e 100644 --- a/site/content/docs/5.0/examples/pricing/pricing.css +++ b/site/content/docs/5.0/examples/pricing/pricing.css @@ -1,3 +1,7 @@ +body { + background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); +} + .container { max-width: 960px; } diff --git a/site/content/docs/5.0/examples/sidebars/index.html b/site/content/docs/5.0/examples/sidebars/index.html new file mode 100644 index 000000000000..76feca91703a --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/index.html @@ -0,0 +1,387 @@ +--- +layout: examples +title: Sidebars +extra_css: + - "sidebars.css" +extra_js: + - src: "sidebars.js" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Sidebar + +
+ +
+
+ + +
+
+ +
+ +
+ + + Sidebar + +
+ +
+
+ + +
+
+ +
+ +
+ + + + + +
+ + +
+
+ +
+ +
+ + + Collapsible + + +
+ +
+ +
+ + + List group + +
+ +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ + + +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ +
+
+ +
diff --git a/site/content/docs/5.0/examples/sidebars/sidebars.css b/site/content/docs/5.0/examples/sidebars/sidebars.css new file mode 100644 index 000000000000..d034f3af15f0 --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/sidebars.css @@ -0,0 +1,82 @@ +body { + display: flex; + flex-wrap: nowrap; + height: 100vh; + height: -webkit-fill-available; + overflow-x: auto; + overflow-y: hidden; +} +body > * { + flex-shrink: 0; + min-height: -webkit-fill-available; +} + +.b-example-divider { + width: 1.5rem; + height: 100%; + 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); +} + +.bi { + vertical-align: -.125em; + pointer-events: none; + fill: currentColor; +} + +.dropdown-toggle { outline: 0; } + +.nav-flush .nav-link { + border-radius: 0; +} + +.btn-toggle { + display: inline-flex; + align-items: center; + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); + background-color: transparent; + border: 0; +} +.btn-toggle:hover, +.btn-toggle:focus { + color: rgba(0, 0, 0, .85); + background-color: #d2f4ea; +} + +.btn-toggle::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + transform-origin: .5em 50%; +} + +.btn-toggle[aria-expanded="true"] { + color: rgba(0, 0, 0, .85); +} +.btn-toggle[aria-expanded="true"]::before { + transform: rotate(90deg); +} + +.btn-toggle-nav a { + display: inline-flex; + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: 1.25rem; + text-decoration: none; +} +.btn-toggle-nav a:hover, +.btn-toggle-nav a:focus { + background-color: #d2f4ea; +} + +.scrollarea { + overflow-y: auto; +} + +.fw-semibold { font-weight: 600; } +.lh-tight { line-height: 1.25; } diff --git a/site/content/docs/5.0/examples/sidebars/sidebars.js b/site/content/docs/5.0/examples/sidebars/sidebars.js new file mode 100644 index 000000000000..68384c1633e8 --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/sidebars.js @@ -0,0 +1,8 @@ +/* global bootstrap: false */ +(function () { + 'use strict' + var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) + tooltipTriggerList.forEach(function (tooltipTriggerEl) { + new bootstrap.Tooltip(tooltipTriggerEl) + }) +})() diff --git a/site/content/docs/5.0/examples/sign-in/index.html b/site/content/docs/5.0/examples/sign-in/index.html index 6fefc45e6c66..fb885ba41437 100644 --- a/site/content/docs/5.0/examples/sign-in/index.html +++ b/site/content/docs/5.0/examples/sign-in/index.html @@ -11,10 +11,16 @@

Please sign in

- - - - + +
+ + +
+
+ + +
+
diff --git a/site/content/docs/5.0/examples/starter-template/starter-template.css b/site/content/docs/5.0/examples/starter-template/starter-template.css index 6fb709105168..d03436db03be 100644 --- a/site/content/docs/5.0/examples/starter-template/starter-template.css +++ b/site/content/docs/5.0/examples/starter-template/starter-template.css @@ -1,3 +1,18 @@ -body { - padding-top: 5rem; +.icon-list { + padding-left: 0; + list-style: none; +} +.icon-list li { + display: flex; + align-items: flex-start; + margin-bottom: .25rem; +} +.icon-list li::before { + display: block; + flex-shrink: 0; + width: 1.5em; + height: 1.5em; + margin-right: .5rem; + content: ""; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto; } diff --git a/site/data/examples.yml b/site/data/examples.yml index d243bdad0dcc..9898363d60fb 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -1,3 +1,15 @@ +- category: Snippets + description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more." + examples: + - name: Headers + description: "Display your branding, navigation, search, and more with these header components" + - name: Heroes + description: "Set the stage on your homepage with heroes that feature clear calls to action." + - name: Features + description: "Explain the features, benefits, or other details in your marketing content." + - name: Sidebars + description: "Common navigation patterns ideal for offcanvas or multi-column layouts." + - category: Custom Components description: "Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework." examples: @@ -23,6 +35,8 @@ description: "Attach a footer to the bottom of the viewport when page content is short." - name: Sticky footer navbar description: "Attach a footer to the bottom of the viewport with a fixed top navbar." + - name: Jumbotron + description: "Use utilities to recreate and enhance Bootstrap 4's jumbotron." - category: Framework description: "Examples that focus on implementing uses of built-in components provided by Bootstrap." diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index 33e4f406e936..8ba99c7188af 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -1,15 +1,21 @@ {{ define "main" }}
-

{{ .Title | markdownify }}

-

{{ .Page.Params.Description | markdownify }}

- {{ if eq .Title "Examples" }} -
- Download examples - Download source code +
+
+

{{ .Title | markdownify }}

+

{{ .Page.Params.Description | markdownify }}

+ {{ if eq .Title "Examples" }} +
+ Download examples + Download source code +
+ {{ end }} +
+
+ {{ partial "ads" . }} +
- {{ end }} - {{ partial "ads" . }}
diff --git a/site/static/docs/5.0/assets/img/examples/blog.png b/site/static/docs/5.0/assets/img/examples/blog.png index 6d6c8356bc95..3ce428418e1a 100644 Binary files a/site/static/docs/5.0/assets/img/examples/blog.png and b/site/static/docs/5.0/assets/img/examples/blog.png differ diff --git a/site/static/docs/5.0/assets/img/examples/carousel.png b/site/static/docs/5.0/assets/img/examples/carousel.png index abca5b3db691..b8ea3ce1c7e6 100644 Binary files a/site/static/docs/5.0/assets/img/examples/carousel.png and b/site/static/docs/5.0/assets/img/examples/carousel.png differ diff --git a/site/static/docs/5.0/assets/img/examples/checkout.png b/site/static/docs/5.0/assets/img/examples/checkout.png index 9e4c3fadc57b..cb81ef2d7ca0 100644 Binary files a/site/static/docs/5.0/assets/img/examples/checkout.png and b/site/static/docs/5.0/assets/img/examples/checkout.png differ diff --git a/site/static/docs/5.0/assets/img/examples/checkout@2x.png b/site/static/docs/5.0/assets/img/examples/checkout@2x.png index c3b08d3382d7..79c7b4bb8278 100644 Binary files a/site/static/docs/5.0/assets/img/examples/checkout@2x.png and b/site/static/docs/5.0/assets/img/examples/checkout@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/dashboard.png b/site/static/docs/5.0/assets/img/examples/dashboard.png index 1ef0c39250b6..52988da73952 100644 Binary files a/site/static/docs/5.0/assets/img/examples/dashboard.png and b/site/static/docs/5.0/assets/img/examples/dashboard.png differ diff --git a/site/static/docs/5.0/assets/img/examples/features.png b/site/static/docs/5.0/assets/img/examples/features.png new file mode 100644 index 000000000000..c77ed09bbc03 Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/features.png differ diff --git a/site/static/docs/5.0/assets/img/examples/features@2x.png b/site/static/docs/5.0/assets/img/examples/features@2x.png new file mode 100644 index 000000000000..88bd3301237f Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/features@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/grid.png b/site/static/docs/5.0/assets/img/examples/grid.png index b3b5b35650c3..2c18784c238a 100644 Binary files a/site/static/docs/5.0/assets/img/examples/grid.png and b/site/static/docs/5.0/assets/img/examples/grid.png differ diff --git a/site/static/docs/5.0/assets/img/examples/headers.png b/site/static/docs/5.0/assets/img/examples/headers.png new file mode 100644 index 000000000000..8ad7f6cd2b8a Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/headers.png differ diff --git a/site/static/docs/5.0/assets/img/examples/headers@2x.png b/site/static/docs/5.0/assets/img/examples/headers@2x.png new file mode 100644 index 000000000000..234f9b1e6d9c Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/headers@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/heroes.png b/site/static/docs/5.0/assets/img/examples/heroes.png new file mode 100644 index 000000000000..e9bc3e627af9 Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/heroes.png differ diff --git a/site/static/docs/5.0/assets/img/examples/heroes@2x.png b/site/static/docs/5.0/assets/img/examples/heroes@2x.png new file mode 100644 index 000000000000..fff3a72c7034 Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/heroes@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/jumbotron.png b/site/static/docs/5.0/assets/img/examples/jumbotron.png index afca61a7c5f2..48e0c9c0e0e0 100644 Binary files a/site/static/docs/5.0/assets/img/examples/jumbotron.png and b/site/static/docs/5.0/assets/img/examples/jumbotron.png differ diff --git a/site/static/docs/5.0/assets/img/examples/jumbotron@2x.png b/site/static/docs/5.0/assets/img/examples/jumbotron@2x.png index 4d83dffa6f1a..229b6300761d 100644 Binary files a/site/static/docs/5.0/assets/img/examples/jumbotron@2x.png and b/site/static/docs/5.0/assets/img/examples/jumbotron@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/offcanvas-navbar.png b/site/static/docs/5.0/assets/img/examples/offcanvas-navbar.png index b5073eba40b8..1e75d266315c 100644 Binary files a/site/static/docs/5.0/assets/img/examples/offcanvas-navbar.png and b/site/static/docs/5.0/assets/img/examples/offcanvas-navbar.png differ diff --git a/site/static/docs/5.0/assets/img/examples/pricing.png b/site/static/docs/5.0/assets/img/examples/pricing.png index 3638c9ef3d05..ea7224615a5f 100644 Binary files a/site/static/docs/5.0/assets/img/examples/pricing.png and b/site/static/docs/5.0/assets/img/examples/pricing.png differ diff --git a/site/static/docs/5.0/assets/img/examples/product.png b/site/static/docs/5.0/assets/img/examples/product.png index a8d3dcb8d499..a95eff622120 100644 Binary files a/site/static/docs/5.0/assets/img/examples/product.png and b/site/static/docs/5.0/assets/img/examples/product.png differ diff --git a/site/static/docs/5.0/assets/img/examples/sidebars.png b/site/static/docs/5.0/assets/img/examples/sidebars.png new file mode 100644 index 000000000000..00efb311e73f Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/sidebars.png differ diff --git a/site/static/docs/5.0/assets/img/examples/sidebars@2x.png b/site/static/docs/5.0/assets/img/examples/sidebars@2x.png new file mode 100644 index 000000000000..cb167e5351f6 Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/sidebars@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/sign-in.png b/site/static/docs/5.0/assets/img/examples/sign-in.png index e5a88b60248f..8d57f561ca21 100644 Binary files a/site/static/docs/5.0/assets/img/examples/sign-in.png and b/site/static/docs/5.0/assets/img/examples/sign-in.png differ diff --git a/site/static/docs/5.0/assets/img/examples/sign-in@2x.png b/site/static/docs/5.0/assets/img/examples/sign-in@2x.png index f876ed3dd06b..477335984d85 100644 Binary files a/site/static/docs/5.0/assets/img/examples/sign-in@2x.png and b/site/static/docs/5.0/assets/img/examples/sign-in@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/starter-template.png b/site/static/docs/5.0/assets/img/examples/starter-template.png index 0cbcaa1eb01a..d4b20217acc6 100644 Binary files a/site/static/docs/5.0/assets/img/examples/starter-template.png and b/site/static/docs/5.0/assets/img/examples/starter-template.png differ diff --git a/site/static/docs/5.0/assets/img/examples/starter-template@2x.png b/site/static/docs/5.0/assets/img/examples/starter-template@2x.png index 436c452de1aa..9323837caae2 100644 Binary files a/site/static/docs/5.0/assets/img/examples/starter-template@2x.png and b/site/static/docs/5.0/assets/img/examples/starter-template@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/sticky-footer-navbar.png b/site/static/docs/5.0/assets/img/examples/sticky-footer-navbar.png index f64d666387e5..cc88cfb2db0c 100644 Binary files a/site/static/docs/5.0/assets/img/examples/sticky-footer-navbar.png and b/site/static/docs/5.0/assets/img/examples/sticky-footer-navbar.png differ diff --git a/site/static/docs/5.0/assets/img/examples/sticky-footer.png b/site/static/docs/5.0/assets/img/examples/sticky-footer.png index 203ed62f501b..4b5246d381e1 100644 Binary files a/site/static/docs/5.0/assets/img/examples/sticky-footer.png and b/site/static/docs/5.0/assets/img/examples/sticky-footer.png differ