diff --git a/site/content/docs/5.0/examples/dropdowns/dropdowns.css b/site/content/docs/5.0/examples/dropdowns/dropdowns.css new file mode 100644 index 0000000000..4341c59ea4 --- /dev/null +++ b/site/content/docs/5.0/examples/dropdowns/dropdowns.css @@ -0,0 +1,89 @@ +.b-example-divider { + 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); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.dropdown-menu { + position: static; + display: block; + width: auto; + margin: 4rem auto; +} + +.dropdown-menu-macos { + display: grid; + gap: .25rem; + padding: .5rem; + border-radius: .5rem; +} +.dropdown-menu-macos .dropdown-item { + border-radius: .25rem; +} + +.dropdown-item-danger { + color: var(--bs-red); +} +.dropdown-item-danger:hover, +.dropdown-item-danger:focus { + color: #fff; + background-color: var(--bs-red); +} +.dropdown-item-danger.active { + background-color: var(--bs-red); +} + +.btn-hover-light { + text-align: left; + background-color: var(--bs-white); + border-radius: .25rem; +} +.btn-hover-light:hover, +.btn-hover-light:focus { + color: var(--bs-blue); + background-color: var(--bs-light); +} + +.cal-month, +.cal-days, +.cal-weekdays { + display: grid; + grid-template-columns: repeat(7, 1fr); + align-items: center; +} +.cal-month-name { + grid-column-start: 2; + grid-column-end: 7; + text-align: center; +} +.cal-weekday, +.cal-btn { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + height: 3rem; + padding: 0; +} +.cal-btn:not([disabled]) { + font-weight: 500; +} +.cal-btn:hover, +.cal-btn:focus { + background-color: rgba(0, 0, 0, .05); +} +.cal-btn[disabled] { + opacity: .5; +} + +.form-control-dark { + background-color: rgba(255, 255, 255, .05); + border-color: rgba(255, 255, 255, .15); +} diff --git a/site/content/docs/5.0/examples/dropdowns/index.html b/site/content/docs/5.0/examples/dropdowns/index.html new file mode 100644 index 0000000000..5296d1507e --- /dev/null +++ b/site/content/docs/5.0/examples/dropdowns/index.html @@ -0,0 +1,339 @@ +--- +layout: examples +title: Dropdowns +extra_css: + - "dropdowns.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ + +
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+ + +
+ +
+ + + +
+ + \ No newline at end of file diff --git a/site/content/docs/5.0/examples/footers/footers.css b/site/content/docs/5.0/examples/footers/footers.css new file mode 100644 index 0000000000..4e826827ec --- /dev/null +++ b/site/content/docs/5.0/examples/footers/footers.css @@ -0,0 +1,12 @@ +.b-example-divider { + 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); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} diff --git a/site/content/docs/5.0/examples/footers/index.html b/site/content/docs/5.0/examples/footers/index.html new file mode 100644 index 0000000000..b269095742 --- /dev/null +++ b/site/content/docs/5.0/examples/footers/index.html @@ -0,0 +1,188 @@ +--- +layout: examples +title: Footers +extra_css: + - "footers.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
diff --git a/site/content/docs/5.0/examples/list-groups/index.html b/site/content/docs/5.0/examples/list-groups/index.html new file mode 100644 index 0000000000..c16bad944d --- /dev/null +++ b/site/content/docs/5.0/examples/list-groups/index.html @@ -0,0 +1,186 @@ +--- +layout: examples +title: List groups +extra_css: + - "list-groups.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + +
+ + twbs +
+
+
List group item heading
+

Some placeholder content in a paragraph.

+
+ now +
+ + + twbs +
+
+
Another title here
+

Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.

+
+ 3d +
+ + + twbs +
+
+
Third heading
+

Some placeholder content in a paragraph.

+
+ 1w +
+ +
+ +
+ +
+
+ + + +
+ +
+ + + +
+
+ +
+ +
+ + + + +
+ +
+ +
+ + + + + + + + + + + +
\ No newline at end of file diff --git a/site/content/docs/5.0/examples/list-groups/list-groups.css b/site/content/docs/5.0/examples/list-groups/list-groups.css new file mode 100644 index 0000000000..11351f87e2 --- /dev/null +++ b/site/content/docs/5.0/examples/list-groups/list-groups.css @@ -0,0 +1,61 @@ +.b-example-divider { + 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); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.opacity-50 { opacity: .5; } +.opacity-75 { opacity: .75; } + +.list-group { + width: auto; + max-width: 460px; + margin: 4rem auto; +} + +.form-check-input:checked + .form-checked-content { + opacity: .5; +} + +.form-check-input-placeholder { + pointer-events: none; + border-style: dashed; +} +[contenteditable]:focus { + outline: 0; +} + +.list-group-checkable { + display: grid; + gap: .5rem; + border: 0; +} +.list-group-checkable .list-group-item { + cursor: pointer; + border-radius: .5rem; +} +.list-group-item-check { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} +.list-group-item-check:hover + .list-group-item { + background-color: var(--bs-light); +} +.list-group-item-check:checked + .list-group-item { + color: #fff; + background-color: var(--bs-blue); +} +.list-group-item-check[disabled] + .list-group-item, +.list-group-item-check:disabled + .list-group-item { + pointer-events: none; + filter: none; + opacity: .5; +} diff --git a/site/content/docs/5.0/examples/modals/index.html b/site/content/docs/5.0/examples/modals/index.html new file mode 100644 index 0000000000..cc0feff873 --- /dev/null +++ b/site/content/docs/5.0/examples/modals/index.html @@ -0,0 +1,173 @@ +--- +layout: examples +title: Modals +extra_css: + - "modals.css" +body_class: "" +--- + + + + Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
diff --git a/site/content/docs/5.0/examples/modals/modals.css b/site/content/docs/5.0/examples/modals/modals.css new file mode 100644 index 0000000000..8fda8212ab --- /dev/null +++ b/site/content/docs/5.0/examples/modals/modals.css @@ -0,0 +1,34 @@ +.b-example-divider { + 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); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.rounded-4 { border-radius: .5rem; } +.rounded-5 { border-radius: .75rem; } +.rounded-6 { border-radius: 1rem; } + +.modal-sheet .modal-dialog { + width: 380px; + transition: bottom .75s ease-in-out; +} +.modal-sheet .modal-footer { + padding-bottom: 2rem; +} + +.modal-alert .modal-dialog { + width: 380px; +} + +.border-right { border-right: 1px solid #eee; } + +.modal-tour .modal-dialog { + width: 380px; +} diff --git a/site/data/examples.yml b/site/data/examples.yml index 9898363d60..6d6419d218 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -9,6 +9,14 @@ 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." + - name: Footers + description: "Finish every page strong with an awesome footer, big or small." + - name: Dropdowns + description: "Enhance your dropdowns with filters, icons, custom styles, and more." + - name: List groups + description: "Extend list groups with utilities and custom styles for any content." + - name: Modals + description: "Transform modals to serve any purpose, from feature tours to dialogs." - 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." diff --git a/site/static/docs/5.0/assets/img/examples/dropdowns.png b/site/static/docs/5.0/assets/img/examples/dropdowns.png new file mode 100644 index 0000000000..46444814ad Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/dropdowns.png differ diff --git a/site/static/docs/5.0/assets/img/examples/dropdowns@2x.png b/site/static/docs/5.0/assets/img/examples/dropdowns@2x.png new file mode 100644 index 0000000000..7ac8e1ecc8 Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/dropdowns@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/footers.png b/site/static/docs/5.0/assets/img/examples/footers.png new file mode 100644 index 0000000000..4f083748a7 Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/footers.png differ diff --git a/site/static/docs/5.0/assets/img/examples/footers@2x.png b/site/static/docs/5.0/assets/img/examples/footers@2x.png new file mode 100644 index 0000000000..dc06aef792 Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/footers@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/list-groups.png b/site/static/docs/5.0/assets/img/examples/list-groups.png new file mode 100644 index 0000000000..67be951c5f Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/list-groups.png differ diff --git a/site/static/docs/5.0/assets/img/examples/list-groups@2x.png b/site/static/docs/5.0/assets/img/examples/list-groups@2x.png new file mode 100644 index 0000000000..000eb33287 Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/list-groups@2x.png differ diff --git a/site/static/docs/5.0/assets/img/examples/modals.png b/site/static/docs/5.0/assets/img/examples/modals.png new file mode 100644 index 0000000000..ac3bdd0b8a Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/modals.png differ diff --git a/site/static/docs/5.0/assets/img/examples/modals@2x.png b/site/static/docs/5.0/assets/img/examples/modals@2x.png new file mode 100644 index 0000000000..49163c80a9 Binary files /dev/null and b/site/static/docs/5.0/assets/img/examples/modals@2x.png differ