diff options
Diffstat (limited to 'site/content/docs')
121 files changed, 4657 insertions, 1602 deletions
diff --git a/site/content/docs/5.0/components/accordion.md b/site/content/docs/5.0/components/accordion.md index 3974a957f..a4ef8272e 100644 --- a/site/content/docs/5.0/components/accordion.md +++ b/site/content/docs/5.0/components/accordion.md @@ -31,7 +31,7 @@ Click the accordions below to expand/collapse the accordion content. </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> - <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. + <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> @@ -75,7 +75,7 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a </button> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample"> - <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> + <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div> </div> </div> <div class="accordion-item"> @@ -85,7 +85,7 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample"> - <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> + <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div> </div> </div> <div class="accordion-item"> @@ -95,7 +95,52 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a </button> </h2> <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample"> - <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> + <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div> + </div> + </div> +</div> +{{< /example >}} + +### Always open + +Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened. + +{{< example >}} +<div class="accordion" id="accordionPanelsStayOpenExample"> + <div class="accordion-item"> + <h2 class="accordion-header" id="panelsStayOpen-headingOne"> + <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne"> + Accordion Item #1 + </button> + </h2> + <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne"> + <div class="accordion-body"> + <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. + </div> + </div> + </div> + <div class="accordion-item"> + <h2 class="accordion-header" id="panelsStayOpen-headingTwo"> + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo"> + Accordion Item #2 + </button> + </h2> + <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo"> + <div class="accordion-body"> + <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. + </div> + </div> + </div> + <div class="accordion-item"> + <h2 class="accordion-header" id="panelsStayOpen-headingThree"> + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree"> + Accordion Item #3 + </button> + </h2> + <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree"> + <div class="accordion-body"> + <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. + </div> </div> </div> </div> @@ -104,3 +149,9 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a ## Accessibility Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information. + +## Sass + +### Variables + +{{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index f35a044ae..42853f2e0 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -49,6 +49,62 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d </div> {{< /example >}} +### Icons + +Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) and [Bootstrap Icons]({{ .Site.Params.icons }}) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. + +{{< example >}} +<div class="alert alert-primary d-flex align-items-center" role="alert"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16"> + <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </svg> + <div> + An example alert with an icon + </div> +</div> +{{< /example >}} + +Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly. + +{{< example >}} +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16"> + <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/> + </symbol> + <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16"> + <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/> + </symbol> + <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16"> + <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </symbol> +</svg> + +<div class="alert alert-primary d-flex align-items-center" role="alert"> + <svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#info-fill"/></svg> + <div> + An example alert with an icon + </div> +</div> +<div class="alert alert-success d-flex align-items-center" role="alert"> + <svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#check-circle-fill"/></svg> + <div> + An example success alert with an icon + </div> +</div> +<div class="alert alert-warning d-flex align-items-center" role="alert"> + <svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#exclamation-triangle-fill"/></svg> + <div> + An example warning alert with an icon + </div> +</div> +<div class="alert alert-danger d-flex align-items-center" role="alert"> + <svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#exclamation-triangle-fill"/></svg> + <div> + An example danger alert with an icon + </div> +</div> +{{< /example >}} + ### Dismissing Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: @@ -71,6 +127,24 @@ You can see this in action with a live demo: When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element. {{< /callout >}} +## Sass + +### Variables + +{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} + +### Variant mixin + +Used in combination with `$theme-colors` to create contextual modifier classes for our alerts. + +{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} + +### Loop + +Loop that generates the modifier classes with the `alert-variant()` mixin. + +{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} + ## JavaScript behavior ### Triggers diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md index 44c85d717..50571d885 100644 --- a/site/content/docs/5.0/components/badge.md +++ b/site/content/docs/5.0/components/badge.md @@ -63,3 +63,9 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger <span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}} {{< /badge.inline >}} {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="badge-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/components/breadcrumb.md b/site/content/docs/5.0/components/breadcrumb.md index 3395fbf67..9143e7612 100644 --- a/site/content/docs/5.0/components/breadcrumb.md +++ b/site/content/docs/5.0/components/breadcrumb.md @@ -88,3 +88,9 @@ $breadcrumb-divider: none; Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page. For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). + +## Sass + +### Variables + +{{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index b53263a88..063bae1c4 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -205,3 +205,25 @@ buttons.forEach(function (button) { button.toggle() }) ``` + +## Sass + +### Variables + +{{< scss-docs name="btn-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin. + +{{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}} + +{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}} + +{{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}} + +### Loops + +Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`. + +{{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}} diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md index 89608628b..48f54f0c2 100644 --- a/site/content/docs/5.0/components/card.md +++ b/site/content/docs/5.0/components/card.md @@ -81,9 +81,9 @@ Create lists of content in a card with a flush list group. {{< example >}} <div class="card" style="width: 18rem;"> <ul class="list-group list-group-flush"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> </div> {{< /example >}} @@ -94,9 +94,9 @@ Create lists of content in a card with a flush list group. Featured </div> <ul class="list-group list-group-flush"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> </div> {{< /example >}} @@ -104,9 +104,9 @@ Create lists of content in a card with a flush list group. {{< example >}} <div class="card" style="width: 18rem;"> <ul class="list-group list-group-flush"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> <div class="card-footer"> Card footer @@ -126,9 +126,9 @@ Mix and match multiple content types to create the card you need, or throw every <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="list-group list-group-flush"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> <div class="card-body"> <a href="#" class="card-link">Card link</a> @@ -174,7 +174,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements. </div> <div class="card-body"> <blockquote class="blockquote mb-0"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> @@ -417,7 +417,7 @@ Cards include various options for customizing their backgrounds, borders, and co ### Background and color -Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to change the appearance of a card. +Use [text color]({{< docsref "/utilities/colors" >}}) and [background utilities]({{< docsref "/utilities/background" >}}) to change the appearance of a card. {{< example >}} {{< card.inline >}} @@ -721,3 +721,9 @@ Just like with card groups, card footers will automatically line up. ### Masonry In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started. + +## Sass + +### Variables + +{{< scss-docs name="card-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 85ee9eb44..9ad7294ec 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -22,7 +22,7 @@ Please be aware that nested carousels are not supported, and carousels are gener Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. -**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the id of the `.carousel` element. +**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element. ### Slides only @@ -46,7 +46,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w- ### With controls -Adding in the previous and next controls: +Adding in the previous and next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`. {{< example >}} <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> @@ -61,14 +61,14 @@ Adding in the previous and next controls: {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev"> + <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> - </a> - <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next"> + </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> - </a> + </button> </div> {{< /example >}} @@ -78,11 +78,11 @@ You can also add the indicators to the carousel, alongside the controls, too. {{< example >}} <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li> - <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}} @@ -94,14 +94,14 @@ You can also add the indicators to the carousel, alongside the controls, too. {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> - </a> - <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next"> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> - </a> + </button> </div> {{< /example >}} @@ -111,42 +111,42 @@ Add captions to your slides easily with the `.carousel-caption` element within a {{< example >}} <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> - <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> + <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class="carousel-item"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class="carousel-item"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> + <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> - <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> - </a> - <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> - </a> + </button> </div> {{< /example >}} @@ -167,14 +167,14 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> - </a> - <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next"> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> - </a> + </button> </div> {{< /example >}} @@ -195,14 +195,42 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} </div> </div> - <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> - </a> - <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next"> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> - </a> + </button> +</div> +{{< /example >}} + +### Disable touch swiping + +Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute and has `data-bs-interval="false"` so it doesn't autoplay. + +{{< example >}} +<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false"> + <div class="carousel-inner"> + <div class="carousel-item active"> + {{< placeholder 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"> + {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}} + </div> + <div class="carousel-item"> + {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} + </div> + </div> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" data-bs-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="visually-hidden">Next</span> + </button> </div> {{< /example >}} @@ -212,45 +240,55 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap {{< example >}} <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li> - <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="10000"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#aaa" background="#f5f5f5" text="First slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> - <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> + <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class="carousel-item" data-bs-interval="2000"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#bbb" background="#eee" text="Second slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class="carousel-item"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#999" background="#e5e5e5" text="Third slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> + <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> - <a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> - </a> - <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next"> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> - </a> + </button> </div> {{< /example >}} +## Custom transition + +The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`). + +## Sass + +### Variables + +{{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}} + ## Usage ### Via data attributes @@ -286,7 +324,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td><code>interval</code></td> <td>number</td> <td><code>5000</code></td> - <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> + <td>The amount of time to delay between automatically cycling an item. If <code>false</code>, carousel will not automatically cycle.</td> </tr> <tr> <td><code>keyboard</code></td> @@ -297,15 +335,15 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <tr> <td><code>pause</code></td> <td>string | boolean</td> - <td><code>"hover"</code></td> - <td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p> - <p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td> + <td><code>'hover'</code></td> + <td><p>If set to <code>'hover'</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p> + <p>On touch-enabled devices, when set to <code>'hover'</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td> </tr> <tr> - <td><code>slide</code></td> + <td><code>ride</code></td> <td>string | boolean</td> <td><code>false</code></td> - <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td> + <td>Autoplays the carousel after the user manually cycles the first item. If set to <code>'carousel'</code>, autoplays the carousel on load.</td> </tr> <tr> <td><code>wrap</code></td> @@ -418,7 +456,3 @@ myCarousel.addEventListener('slide.bs.carousel', function () { // do something... }) ``` - -### Change transition duration - -The transition duration of `.carousel-item` can be changed with the `$carousel-transition` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`). diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md index a6bb3f4c0..f4a3ed071 100644 --- a/site/content/docs/5.0/components/close-button.md +++ b/site/content/docs/5.0/components/close-button.md @@ -30,3 +30,9 @@ Change the default `.btn-close` to be white with the `.btn-close-white` class. T <button type="button" class="btn-close btn-close-white" aria-label="Close"></button> <button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="close-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index 0c23133b6..fe26918c1 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -22,7 +22,7 @@ Click the buttons below to show and hide another element via class changes: - `.collapsing` is applied during transitions - `.collapse.show` shows content -You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="collapse"` is required. +Generally, we recommend using a button with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use a link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required. {{< example >}} <p> @@ -35,7 +35,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> {{< /example >}} @@ -55,14 +55,14 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> @@ -77,6 +77,18 @@ If your control element is targeting a single collapsible element – i.e. the ` Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript. +## Sass + +### Variables + +{{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}} + +### Classes + +Collapse transition classes can be found in `scss/_transitions.scss` as these are shared across multiple components (collapse and accordion). + +{{< scss-docs name="collapse-classes" file="scss/_transitions.scss" >}} + ## Usage The collapse plugin utilizes a few classes to handle the heavy lifting: diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index 69a7783dc..3ab91f807 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -30,10 +30,10 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. {{< example >}} <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> @@ -635,16 +635,18 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. ## Menu alignment -By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side. +By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional `.drop*` classes, but you can also control them with additional modifier classes. + +Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side. {{< callout info >}} -**Heads up!** Dropdowns are positioned thanks to Popper (except when they are contained in a navbar). +**Heads up!** Dropdowns are positioned thanks to Popper except when they are contained in a navbar. {{< /callout >}} {{< example >}} <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> - Right-aligned menu + Right-aligned menu example </button> <ul class="dropdown-menu dropdown-menu-end"> <li><button class="dropdown-item" type="button">Action</button></li> @@ -690,6 +692,89 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d Note that you don't need to add a `data-bs-display="static"` attribute to dropdown buttons in navbars, since Popper isn't used in navbars. +### Alignment options + +Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place. + +{{< example >}} +<div class="btn-group"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> + Dropdown + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + Right-aligned menu + </button> + <ul class="dropdown-menu dropdown-menu-end"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> + Left-aligned, right-aligned lg + </button> + <ul class="dropdown-menu dropdown-menu-lg-end"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> + Right-aligned, left-aligned lg + </button> + <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group dropstart"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + Dropstart + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group dropend"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + Dropend + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group dropup"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + Dropup + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> +{{< /example >}} + ## Menu content ### Headers @@ -818,6 +903,78 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo </div> {{< /example >}} +### Auto close behavior + +By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown. + +{{< example >}} +<div class="btn-group"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> + Default dropdown + </button> + <ul class="dropdown-menu" aria-labelledby="defaultDropdown"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false"> + Clickable outside + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> + Clickable inside + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false"> + Manual close + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> +{{< /example >}} + +## Sass + +### Variables + +Variables for all dropdowns: + +{{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}} + +Variables for the [dark dropdown](#dark-dropdowns): + +{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}} + +Variables for the CSS-based carets that indicate a dropdown's interactivity: + +{{< scss-docs name="caret-variables" file="scss/_variables.scss" >}} + +### Mixins + +Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`. + +{{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}} + ## Usage Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. @@ -860,7 +1017,7 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-autoClose="false"`, use `data-bs-auto-close="false"`. <table class="table"> <thead> @@ -873,32 +1030,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </thead> <tbody> <tr> - <td><code>offset</code></td> - <td>number | string | function</td> - <td><code>0</code></td> - <td> - <p>Offset of the dropdown relative to its target.</p> - <p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p> - <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p> - </td> - </tr> - <tr> - <td><code>flip</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.enabled">flip docs</a>.</td> - </tr> - <tr> <td><code>boundary</code></td> <td>string | element</td> - <td><code>'scrollParent'</code></td> - <td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td> + <td><code>'clippingParents'</code></td> + <td>Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td> </tr> <tr> <td><code>reference</code></td> - <td>string | element</td> + <td>string | element | object</td> <td><code>'toggle'</code></td> - <td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#referenceObject">referenceObject docs</a>.</td> + <td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, an HTMLElement reference or an object providing <code>getBoundingClientRect</code>. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/constructors/#createpopper">constructor docs</a> and <a href="https://popper.js.org/docs/v2/virtual-elements/">virtual element docs</a>.</td> </tr> <tr> <td><code>display</code></td> @@ -907,15 +1048,52 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td>By default, we use Popper for dynamic positioning. Disable this with <code>static</code>.</td> </tr> <tr> + <td><code>offset</code></td> + <td>array | string | function</td> + <td><code>[0, 2]</code></td> + <td> + <p>Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p> + <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p> + <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p> + </td> + </tr> + <tr> + <td><code>autoClose</code></td> + <td>boolean | string</td> + <td><code>true</code></td> + <td> + <p>Configure the auto close behavior of the dropdown:</p> + <ul> + <li><code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li> + <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li> + <li><code>'inside'</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li> + <li><code>'outside'</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li> + </ul> + </td> + </tr> + <tr> <td><code>popperConfig</code></td> - <td>null | object</td> + <td>null | object | function</td> <td><code>null</code></td> - <td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td> + <td> + <p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p> + <p>When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.</p> + </td> </tr> </tbody> </table> -Note when `boundary` is set to any value other than `'scrollParent'`, the style `position: static` is applied to the `.dropdown` container. +#### Using function with `popperConfig` + +```js +var dropdown = new bootstrap.Dropdown(element, { + popperConfig: function (defaultBsPopperConfig) { + // var newPopperConfig = {...} + // use defaultBsPopperConfig if needed... + // return newPopperConfig + } +}) +``` ### Methods @@ -968,8 +1146,7 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style ### Events -All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element. -`hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. +All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`'s parent element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. <table class="table"> <thead> diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index e148bd4e6..4b450939e 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -12,11 +12,11 @@ The most basic list group is an unordered list with list items and the proper cl {{< example >}} <ul class="list-group"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Morbi leo risus</li> - <li class="list-group-item">Porta ac consectetur ac</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> </ul> {{< /example >}} @@ -26,11 +26,11 @@ Add `.active` to a `.list-group-item` to indicate the current active selection. {{< example >}} <ul class="list-group"> - <li class="list-group-item active" aria-current="true">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Morbi leo risus</li> - <li class="list-group-item">Porta ac consectetur ac</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item active" aria-current="true">An active item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> </ul> {{< /example >}} @@ -40,11 +40,11 @@ Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that {{< example >}} <ul class="list-group"> - <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Morbi leo risus</li> - <li class="list-group-item">Porta ac consectetur ac</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item disabled" aria-disabled="true">A disabled item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> </ul> {{< /example >}} @@ -57,12 +57,12 @@ Be sure to **not use the standard `.btn` classes here**. {{< example >}} <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> - Cras justo odio + The current link item </a> - <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> - <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> - <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> - <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a> + <a href="#" class="list-group-item list-group-item-action">A second link item</a> + <a href="#" class="list-group-item list-group-item-action">A third link item</a> + <a href="#" class="list-group-item list-group-item-action">A fourth link item</a> + <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a> </div> {{< /example >}} @@ -71,12 +71,12 @@ With `<button>`s, you can also make use of the `disabled` attribute instead of t {{< example >}} <div class="list-group"> <button type="button" class="list-group-item list-group-item-action active" aria-current="true"> - Cras justo odio + The current button </button> - <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button> - <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button> - <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button> - <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button> + <button type="button" class="list-group-item list-group-item-action">A second item</button> + <button type="button" class="list-group-item list-group-item-action">A third button item</button> + <button type="button" class="list-group-item list-group-item-action">A fourth button item</button> + <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button> </div> {{< /example >}} @@ -86,14 +86,56 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis {{< example >}} <ul class="list-group list-group-flush"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Morbi leo risus</li> - <li class="list-group-item">Porta ac consectetur ac</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> </ul> {{< /example >}} +## Numbered + +Add the `.list-group-numbered` modifier class (and optionally use an `<ol>` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization. + +Numbers are generated by `counter-reset` on the `<ol>`, and then styled and placed with a `::before` pseudo-element on the `<li>` with `counter-increment` and `content`. + +{{< example >}} +<ol class="list-group list-group-numbered"> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Cras justo odio</li> +</ol> +{{< /example >}} + +These work great with custom content as well. + +{{< example >}} +<ol class="list-group list-group-numbered"> + <li class="list-group-item d-flex justify-content-between align-items-start"> + <div class="ms-2 me-auto"> + <div class="fw-bold">Subheading</div> + Cras justo odio + </div> + <span class="badge bg-primary rounded-pill">14</span> + </li> + <li class="list-group-item d-flex justify-content-between align-items-start"> + <div class="ms-2 me-auto"> + <div class="fw-bold">Subheading</div> + Cras justo odio + </div> + <span class="badge bg-primary rounded-pill">14</span> + </li> + <li class="list-group-item d-flex justify-content-between align-items-start"> + <div class="ms-2 me-auto"> + <div class="fw-bold">Subheading</div> + Cras justo odio + </div> + <span class="badge bg-primary rounded-pill">14</span> + </li> +</ol> +{{< /example >}} + ## Horizontal Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.** @@ -104,9 +146,9 @@ Add `.list-group-horizontal` to change the layout of list group items from verti {{< list-group.inline >}} {{- range $.Site.Data.breakpoints }} <ul class="list-group list-group-horizontal{{ .abbr }}"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Morbi leo risus</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> {{- end -}} {{< /list-group.inline >}} @@ -118,7 +160,7 @@ Use contextual classes to style list items with a stateful background and color. {{< example >}} <ul class="list-group"> - <li class="list-group-item">Dapibus ac facilisis in</li> + <li class="list-group-item">A simple default list group item</li> {{< list.inline >}} {{- range (index $.Site.Data "theme-colors") }} <li class="list-group-item list-group-item-{{ .name }}">A simple {{ .name }} list group item</li> @@ -131,7 +173,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o {{< example >}} <div class="list-group"> - <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> + <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a> {{< list.inline >}} {{- range (index $.Site.Data "theme-colors") }} <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a> @@ -151,15 +193,15 @@ Add badges to any list group item to show unread counts, activity, and more with {{< example >}} <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> - Cras justo odio + A list item <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> - Dapibus ac facilisis in + A second list item <span class="badge bg-primary rounded-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> - Morbi leo risus + A third list item <span class="badge bg-primary rounded-pill">1</span> </li> </ul> @@ -176,24 +218,24 @@ Add nearly any HTML within, even for linked list groups like the one below, with <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> </div> - <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> - <small>Donec id elit non mi porta.</small> + <p class="mb-1">Some placeholder content in a paragraph.</p> + <small>And some small print.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> - <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> - <small class="text-muted">Donec id elit non mi porta.</small> + <p class="mb-1">Some placeholder content in a paragraph.</p> + <small class="text-muted">And some muted small print.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> - <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> - <small class="text-muted">Donec id elit non mi porta.</small> + <p class="mb-1">Some placeholder content in a paragraph.</p> + <small class="text-muted">And some muted small print.</small> </a> </div> {{< /example >}} @@ -206,23 +248,23 @@ Place Bootstrap's checkboxes and radios within list group items and customize as <ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Cras justo odio + First checkbox </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Dapibus ac facilisis in + Second checkbox </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Morbi leo risus + Third checkbox </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Porta ac consectetur ac + Fourth checkbox </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" aria-label="..."> - Vestibulum at eros + Fifth checkbox </li> </ul> {{< /example >}} @@ -233,27 +275,44 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca <div class="list-group"> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> - Cras justo odio + First checkbox </label> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> - Dapibus ac facilisis in + Second checkbox </label> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> - Morbi leo risus + Third checkbox </label> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> - Porta ac consectetur ac + Fourth checkbox </label> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> - Vestibulum at eros + Fifth checkbox </label> </div> {{< /example >}} +## Sass + +### Variables + +{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}} + +### Mixins + +Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s. + +{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}} + +### Loop + +Loop that generates the modifier classes with the `list-group-item-variant()` mixin. + +{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}} ## JavaScript behavior @@ -272,16 +331,16 @@ Use the tab JavaScript plugin—include it individually or through the compiled <div class="col-8"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> - <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p> + <p>Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p> </div> <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"> - <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p> + <p>Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p> </div> <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"> - <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.</p> + <p>Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p> </div> <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list"> - <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.</p> + <p>Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p> </div> </div> </div> @@ -292,10 +351,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> - <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> - <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> - <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> - <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a> + <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a> + <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a> + <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a> + <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a> </div> </div> <div class="col-8"> diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 7fd5ec617..7bae85a75 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -186,7 +186,6 @@ When backdrop is set to static, the modal will not close when clicking outside i </div> ``` - ### Scrolling long content When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. @@ -198,25 +197,8 @@ When modals become too long for the user's viewport or device, they scroll indep <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> - <div class="modal-body"> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <div class="modal-body" style="min-height: 1500px"> + <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> @@ -242,24 +224,9 @@ You can also create a scrollable modal that allows scroll the modal body by addi <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <p>This content should appear at the bottom after you scroll.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> @@ -294,7 +261,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>This is a vertically centered modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> @@ -312,11 +279,9 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p> + <br><br><br><br><br><br><br><br><br><br> + <p>Just like that.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> @@ -531,6 +496,46 @@ exampleModal.addEventListener('show.bs.modal', function (event) { }) ``` +### Toggle between modals + +Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals. + +{{< example >}} +<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"> + <div class="modal-dialog modal-dialog-centered"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + Show a second modal and hide this one with the button below. + </div> + <div class="modal-footer"> + <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button> + </div> + </div> + </div> +</div> +<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1"> + <div class="modal-dialog modal-dialog-centered"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + Hide this modal and show the first with the button below. + </div> + <div class="modal-footer"> + <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button> + </div> + </div> + </div> +</div> +<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a> +{{< /example >}} + ### Change animation The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation. @@ -714,24 +719,14 @@ Another override is the option to pop up a modal that covers the user viewport, <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.</p> + <p>Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.</p> + <p>Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.</p> + <p>Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.</p> + <p>I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.</p> + <p>Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.</p> + <p>Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.</p> + <p>We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> @@ -825,6 +820,18 @@ Another override is the option to pop up a modal that covers the user viewport, </div> </div> +## Sass + +### Variables + +{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} + +### Loop + +[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. + +{{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}} + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. @@ -912,6 +919,13 @@ Manually opens a modal. **Returns to the caller before the modal has actually be myModal.show() ``` +Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). + +```js +var modalToggle = document.getElementById('toggleMyModal') // relatedTarget +myModal.show(modalToggle) +``` + #### hide Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index 87d2a653a..7b57fd5c6 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -31,6 +31,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from - Flex and spacing utilities for any form controls and actions. - `.navbar-text` for adding vertically centered strings of text. - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint. +- Add an optional `.navbar-scroll` to set a `max-height` and [scroll expanded navbar content](#scrolling). Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. @@ -73,12 +74,16 @@ Here's an example of all the sub-components included in a responsive light-theme </nav> {{< /example >}} -This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `me-sm-0`, `my-sm-0`) utility classes. +This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `me-sm-0`, `my-sm-0`) utility classes. ### Brand The `.navbar-brand` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles. +#### Text + +Add your text within an element with the `.navbar-brand` class. + {{< example >}} <!-- As a link --> <nav class="navbar navbar-light bg-light"> @@ -95,10 +100,11 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best, a </nav> {{< /example >}} -Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate. +#### Image + +You can replace the text within the `.navbar-brand` with an `<img>`. {{< example >}} -<!-- Just an image --> <nav class="navbar navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#"> @@ -108,12 +114,15 @@ Adding images to the `.navbar-brand` will likely always require custom styles or </nav> {{< /example >}} +#### Image and text + +You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`. + {{< example >}} -<!-- Image and text --> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#"> - <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-top"> + <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top"> Bootstrap </a> </div> @@ -124,9 +133,9 @@ Adding images to the `.navbar-brand` will likely always require custom styles or Navbar navigation links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned. -Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s. +Add the `.active` class on `.nav-link` to indicate the current page. -Please note that you should also add the `aria-current` attribute on the `.nav-link` itself. +Please note that you should also add the `aria-current` attribute on the active `.nav-link`. {{< example >}} <nav class="navbar navbar-expand-lg navbar-light bg-light"> @@ -477,6 +486,53 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo </nav> {{< /example >}} +## Scrolling + +Add `.navbar-nav-scroll` to a `.navbar-nav` (or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at `75vh` (or 75% of the viewport height), but you can override that with the local CSS custom property `--bs-navbar-height` or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar. + +Please note that this behavior comes with a potential drawback of `overflow`—when setting `overflow-y: auto` (required to scroll the content here), `overflow-x` is the equivalent of `auto`, which will crop some horizontal content. + +Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing. + +{{< example >}} +<nav class="navbar navbar-expand-lg navbar-light bg-light"> + <div class="container-fluid"> + <a class="navbar-brand" href="#">Navbar scroll</a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarScroll"> + <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + Link + </a> + <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a> + </li> + </ul> + <form class="d-flex"> + <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success" type="submit">Search</button> + </form> + </div> + </div> +</nav> +{{< /example >}} + ## Responsive behaviors Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements. @@ -598,3 +654,17 @@ Sometimes you want to use the collapse plugin to trigger a container element for {{< /example >}} When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy. + +## Sass + +### Variables + +{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}} + +### Loop + +[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. + +{{< scss-docs name="navbar-expand-loop" file="scss/_navbar.scss" >}} diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md index e7f481be9..522dfd1ce 100644 --- a/site/content/docs/5.0/components/navs-tabs.md +++ b/site/content/docs/5.0/components/navs-tabs.md @@ -304,35 +304,41 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin </ul> {{< /example >}} +## Sass + +### Variables + +{{< scss-docs name="nav-variables" file="scss/_variables.scss" >}} + ## JavaScript behavior -Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus. +Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content. -Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). +Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location. Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies. <div class="bd-example"> <ul class="nav nav-tabs mb-3" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> + <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> - <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> + <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> - <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> + <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> </div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> - <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> + <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p> </div> </div> </div> @@ -340,13 +346,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, ```html <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> + <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="myTabContent"> @@ -361,20 +367,20 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or <div class="bd-example"> <nav> <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button> + <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button> + <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> - <p>Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p> + <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> - <p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p> + <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> - <p>Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p> + <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p> </div> </div> </div> @@ -382,9 +388,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or ```html <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button> + <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button> + <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button> </div> </nav> <div class="tab-content" id="nav-tabContent"> @@ -399,24 +405,24 @@ The tabs plugin also works with pills. <div class="bd-example"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> + <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> + <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> + <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> - <p>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p> + <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> - <p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p> + <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> - <p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p> + <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p> </div> </div> </div> @@ -424,13 +430,13 @@ The tabs plugin also works with pills. ```html <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> + <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> + <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> + <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="pills-tabContent"> @@ -445,23 +451,23 @@ And with vertical pills. <div class="bd-example"> <div class="d-flex align-items-start"> <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> - <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> + <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button> + <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button> + <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button> + <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> - <p>Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.</p> + <p>Placeholder content for the tab panel. This one relates to the home tab. Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that wears the crown. Yes, we make angels cry, raining down on earth from up above. Wanna see the show in 3D, a movie. Do you ever feel, feel so paper thin. It’s a yes or no, no maybe.</p> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> - <p>Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.</p> + <p>Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> - <p>Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.</p> + <p>Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> - <p>Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.</p> + <p>Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p> </div> </div> </div> @@ -470,10 +476,10 @@ And with vertical pills. ```html <div class="d-flex align-items-start"> <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> - <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> - <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> - <a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> + <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button> + <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button> + <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button> + <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div> @@ -492,16 +498,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="messages-tab" data-bs-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> + <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="settings-tab" data-bs-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> + <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button> </li> </ul> @@ -561,21 +567,21 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a #### constructor -Activates a tab element and content container. Tab should have either a `data-bs-target` or an `href` targeting a container node in the DOM. +Activates a tab element and content container. Tab should have either a `data-bs-target` or, if using a link, an `href` attribute, targeting a container node in the DOM. ```html <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> + <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> + <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="messages-tab" data-bs-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> + <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" id="settings-tab" data-bs-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> + <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button> </li> </ul> @@ -657,7 +663,7 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events </table> ```js -var tabEl = document.querySelector('a[data-bs-toggle="tab"]') +var tabEl = document.querySelector('button[data-bs-toggle="tab"]') tabEl.addEventListener('shown.bs.tab', function (event) { event.target // newly activated tab event.relatedTarget // previous active tab diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md new file mode 100644 index 000000000..b9dbd7ce8 --- /dev/null +++ b/site/content/docs/5.0/components/offcanvas.md @@ -0,0 +1,264 @@ +--- +layout: docs +title: Offcanvas +description: Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. +group: components +toc: true +--- + +## How it works + +Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript. + +- Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins. +- Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables. +- When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas. +- Similar to modals, only one offcanvas can be shown at a time. + +**Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element. + +{{< callout info >}} +{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< /callout >}} + +## Examples + +### Offcanvas components + +Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action. + +{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}} +<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. + </div> +</div> +{{< /example >}} + +### Live demo + +Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the `.show` class on an element with the `.offcanvas` class. + +- `.offcanvas` hides content (default) +- `.offcanvas.show` shows content + +You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="offcanvas"` is required. + +{{< example >}} +<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample"> + Link with href +</a> +<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> + Button with data-bs-target +</button> + +<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + <div class=""> + Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. + </div> + <div class="dropdown mt-3"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> + Dropdown button + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </div> + </div> +</div> +{{< /example >}} + +## Placement + +There's no default placement for offcanvas components, so you must add one of the modifier classes below; + +- `.offcanvas-start` places offcanvas on the left of the viewport (shown above) +- `.offcanvas-end` places offcanvas on the right of the viewport +- `.offcanvas-top` places offcanvas on the top of the viewport +- `.offcanvas-bottom` places offcanvas on the bottom of the viewport + +Try the top, right, and bottom examples out below. + +{{< example >}} +<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button> + +<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel"> + <div class="offcanvas-header"> + <h5 id="offcanvasTopLabel">Offcanvas top</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + ... + </div> +</div> +{{< /example >}} + +{{< example >}} +<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button> + +<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"> + <div class="offcanvas-header"> + <h5 id="offcanvasRightLabel">Offcanvas right</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + ... + </div> +</div> +{{< /example >}} + +{{< example >}} +<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button> + +<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body small"> + ... + </div> +</div> +{{< /example >}} + +## Backdrop + +Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to toggle `<body>` scrolling and `data-bs-backdrop` to toggle the backdrop. + +{{< example >}} +<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button> +<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button> +<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button> + +<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + <p>Try scrolling the rest of the page to see this option in action.</p> + </div> +</div> +<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + <p>.....</p> + </div> +</div> +<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + <p>Try scrolling the rest of the page to see this option in action.</p> + </div> +</div> +{{< /example >}} + +## Accessibility + +Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `.offcanvas`. Note that you don’t need to add `role="dialog"` since we already add it via JavaScript. + +## Sass + +### Variables + +{{< scss-docs name="offcanvas-variables" file="scss/_variables.scss" >}} + +## Usage + +The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting: + +- `.offcanvas` hides the content +- `.offcanvas.show` shows the content +- `.offcanvas-start` hides the offcanvas on the left +- `.offcanvas-end` hides the offcanvas on the right +- `.offcanvas-bottom` hides the offcanvas on the bottom + +Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. + +### Via data attributes + +Add `data-bs-toggle="offcanvas"` and a `data-bs-target` or `href` to the element to automatically assign control of one offcanvas element. The `data-bs-target` attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class `offcanvas` to the offcanvas element. If you'd like it to default open, add the additional class `show`. + +### Via JavaScript + +Enable manually with: + +```js +var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas')) +var offcanvasList = offcanvasElementList.map(function (offcanvasEl) { + return new bootstrap.Offcanvas(offcanvasEl) +}) +``` + +### Options + +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`. + +{{< bs-table "table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `backdrop` | boolean | `true` | Apply a backdrop on body while offcanvas is open | +| `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed | +| `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open | +{{< /bs-table >}} + +### Methods + +{{< callout danger >}} +{{< partial "callout-danger-async-methods.md" >}} +{{< /callout >}} + +Activates your content as an offcanvas element. Accepts an optional options `object`. + +You can create an offcanvas instance with the constructor, for example: + +```js +var myOffcanvas = document.getElementById('myOffcanvas') +var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas) +``` + +{{< bs-table "table" >}} +| Method | Description | +| --- | --- | +| `toggle` | Toggles an offcanvas element to shown or hidden. **Returns to the caller before the offcanvas element has actually been shown or hidden** (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs). | +| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs).| +| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs).| +| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element | +{{< /bs-table >}} + +### Events + +Bootstrap's offcanvas class exposes a few events for hooking into offcanvas functionality. + +{{< bs-table "table" >}} +| Event type | Description | +| --- | --- | +| `show.bs.offcanvas` | This event fires immediately when the `show` instance method is called. | +| `shown.bs.offcanvas` | This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). | +| `hide.bs.offcanvas` | This event is fired immediately when the `hide` method has been called. | +| `hidden.bs.offcanvas` | This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). | +{{< /bs-table >}} + +```js +var myOffcanvas = document.getElementById('myOffcanvas') +myOffcanvas.addEventListener('hidden.bs.offcanvas', function () { + // do something... +}) +``` diff --git a/site/content/docs/5.0/components/pagination.md b/site/content/docs/5.0/components/pagination.md index 23b474589..6b7c7a3da 100644 --- a/site/content/docs/5.0/components/pagination.md +++ b/site/content/docs/5.0/components/pagination.md @@ -155,3 +155,13 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr </ul> </nav> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}} + +### Mixins + +{{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}} diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index fb0f92f4a..039a47cc1 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -22,6 +22,10 @@ Things to know when using the popover plugin: - Popovers can be triggered thanks to an element inside a shadow DOM. {{< callout info >}} +{{< partial "callout-info-sanitizer.md" >}} +{{< /callout >}} + +{{< callout info >}} {{< partial "callout-info-prefersreducedmotion.md" >}} {{< /callout >}} @@ -58,40 +62,20 @@ var popover = new bootstrap.Popover(document.querySelector('.example-popover'), Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL. -<div class="bd-example popover-demo"> - <div class="bd-example-popovers"> - <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> - Popover on top - </button> - <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> - Popover on right - </button> - <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> - Popover on bottom - </button> - <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> - Popover on left - </button> - </div> -</div> - -```html -<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> +{{< example >}} +<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover"> Popover on top </button> - -<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> +<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover"> Popover on right </button> - -<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> +<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover"> Popover on bottom </button> - -<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> +<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover"> Popover on left </button> -``` +{{< /example >}} ### Dismiss on next click @@ -115,16 +99,22 @@ var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), ### Disabled elements -Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>` and override the `pointer-events` on the disabled element. +Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`. -For disabled popover triggers, you may also prefer `data-bs-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element. +For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element. {{< example >}} -<span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover"> - <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button> +<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover"> + <button class="btn btn-primary" type="button" disabled>Disabled button</button> </span> {{< /example >}} +## Sass + +### Variables + +{{< scss-docs name="popover-variables" file="scss/_variables.scss" >}} + ## Usage Enable popovers via JavaScript: @@ -146,7 +136,7 @@ Additionally, while it is possible to also include interactive controls (such as ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`. {{< callout warning >}} Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. @@ -244,23 +234,17 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. <code>manual</code> cannot be combined with any other trigger.</td> </tr> <tr> - <td><code>offset</code></td> - <td>number | string</td> - <td><code>0</code></td> - <td>Offset of the popover relative to its target. For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</td> - </tr> - <tr> - <td><code>fallbackPlacement</code></td> - <td>string | array</td> - <td><code>'flip'</code></td> - <td>Allow to specify which position Popper will use on fallback. For more information refer to - Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td> + <td><code>fallbackPlacements</code></td> + <td>array</td> + <td><code>['top', 'right', 'bottom', 'left']</code></td> + <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to + Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td> </tr> <tr> <td><code>boundary</code></td> <td>string | element</td> - <td><code>'scrollParent'</code></td> - <td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td> + <td><code>'clippingParents'</code></td> + <td>Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td> </tr> <tr> <td><code>customClass</code></td> @@ -275,7 +259,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt <td><code>sanitize</code></td> <td>boolean</td> <td><code>true</code></td> - <td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.</td> + <td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized. See the <a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">sanitizer section in our JavaScript documentation</a>.</td> </tr> <tr> <td><code>allowList</code></td> @@ -290,10 +274,23 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td> </tr> <tr> + <td><code>offset</code></td> + <td>array | string | function</td> + <td><code>[0, 8]</code></td> + <td> + <p>Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p> + <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p> + <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p> + </td> + </tr> + <tr> <td><code>popperConfig</code></td> - <td>null | object</td> + <td>null | object | function</td> <td><code>null</code></td> - <td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td> + <td> + <p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p> + <p>When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.</p> + </td> </tr> </tbody> </table> @@ -304,6 +301,18 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt Options for individual popovers can alternatively be specified through the use of data attributes, as explained above. {{< /callout >}} +#### Using function with `popperConfig` + +```js +var popover = new bootstrap.Popover(element, { + popperConfig: function (defaultBsPopperConfig) { + // var newPopperConfig = {...} + // use defaultBsPopperConfig if needed... + // return newPopperConfig + } +}) +``` + ### Methods {{< callout danger >}} diff --git a/site/content/docs/5.0/components/progress.md b/site/content/docs/5.0/components/progress.md index 92834bebf..1b59dc97a 100644 --- a/site/content/docs/5.0/components/progress.md +++ b/site/content/docs/5.0/components/progress.md @@ -137,3 +137,15 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> ``` + +## Sass + +### Variables + +{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}} + +### Keyframes + +Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`. + +{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}} diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.0/components/scrollspy.md index 0d099c08c..d7b9b73be 100644 --- a/site/content/docs/5.0/components/scrollspy.md +++ b/site/content/docs/5.0/components/scrollspy.md @@ -31,35 +31,33 @@ Scroll the area below the navbar and watch the active class change. The dropdown <a class="navbar-brand" href="#">Navbar</a> <ul class="nav nav-pills"> <li class="nav-item"> - <a class="nav-link" href="#fat">@fat</a> + <a class="nav-link" href="#scrollspyHeading1">First</a> </li> <li class="nav-item"> - <a class="nav-link" href="#mdo">@mdo</a> + <a class="nav-link" href="#scrollspyHeading2">Second</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu"> - <li><a class="dropdown-item" href="#one">one</a></li> - <li><a class="dropdown-item" href="#two">two</a></li> + <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li> + <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li> <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#three">three</a></li> + <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li> </ul> </li> </ul> </nav> <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0"> - <h4 id="fat">@fat</h4> - <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> - <h4 id="mdo">@mdo</h4> - <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p> - <h4 id="one">one</h4> - <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p> - <h4 id="two">two</h4> - <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p> - <h4 id="three">three</h4> - <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> - <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. - </p> + <h4 id="scrollspyHeading1">First heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> + <h4 id="scrollspyHeading2">Second heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> + <h4 id="scrollspyHeading3">Thidd heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> + <h4 id="scrollspyHeading4">Fourth heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> + <h4 id="scrollspyHeading5">Fifth heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> </div> </div> @@ -68,32 +66,32 @@ Scroll the area below the navbar and watch the active class change. The dropdown <a class="navbar-brand" href="#">Navbar</a> <ul class="nav nav-pills"> <li class="nav-item"> - <a class="nav-link" href="#fat">@fat</a> + <a class="nav-link" href="#scrollspyHeading1">First</a> </li> <li class="nav-item"> - <a class="nav-link" href="#mdo">@mdo</a> + <a class="nav-link" href="#scrollspyHeading2">Second</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu dropdown-menu-end"> - <li><a class="dropdown-item" href="#one">one</a></li> - <li><a class="dropdown-item" href="#two">two</a></li> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li> + <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li> <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#three">three</a></li> + <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li> </ul> </li> </ul> </nav> -<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0"> - <h4 id="fat">@fat</h4> +<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0"> + <h4 id="scrollspyHeading1">First heading</h4> <p>...</p> - <h4 id="mdo">@mdo</h4> + <h4 id="scrollspyHeading2">Second heading</h4> <p>...</p> - <h4 id="one">one</h4> + <h4 id="scrollspyHeading3">Thidd heading</h4> <p>...</p> - <h4 id="two">two</h4> + <h4 id="scrollspyHeading4">Fourth heading</h4> <p>...</p> - <h4 id="three">three</h4> + <h4 id="scrollspyHeading5">Fifth heading</h4> <p>...</p> </div> ``` @@ -105,7 +103,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p <div class="bd-example"> <div class="row"> <div class="col-4"> - <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column"> + <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3"> <a class="navbar-brand" href="#">Navbar</a> <nav class="nav nav-pills flex-column"> <a class="nav-link" href="#item-1">Item 1</a> @@ -125,26 +123,26 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p <div class="col-8"> <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0"> <h4 id="item-1">Item 1</h4> - <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h5 id="item-1-1">Item 1-1</h5> - <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h5 id="item-1-2">Item 1-2</h5> - <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="item-2">Item 2</h4> - <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="item-3">Item 3</h4> - <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h5 id="item-3-1">Item 3-1</h5> - <p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h5 id="item-3-2">Item 3-2</h5> - <p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> </div> </div> </div> </div> ```html -<nav id="navbar-example3" class="navbar navbar-light bg-light"> +<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3"> <a class="navbar-brand" href="#">Navbar</a> <nav class="nav nav-pills flex-column"> <a class="nav-link" href="#item-1">Item 1</a> @@ -196,13 +194,13 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group <div class="col-8"> <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="list-item-1">Item 1</h4> - <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="list-item-2">Item 2</h4> - <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="list-item-3">Item 3</h4> - <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="list-item-4">Item 4</h4> - <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> </div> </div> </div> @@ -227,7 +225,6 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group </div> ``` - ## Usage ### Via data attributes diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md index d2495b420..37908f5b6 100644 --- a/site/content/docs/5.0/components/spinners.md +++ b/site/content/docs/5.0/components/spinners.md @@ -171,6 +171,20 @@ Use spinners within buttons to indicate an action is currently processing or tak </button> {{< /example >}} +## Sass + +### Variables + +{{< scss-docs name="spinner-variables" file="scss/_variables.scss" >}} + +### Keyframes + +Used for creating the CSS animations for our spinners. Included in `scss/_spinners.scss`. + +{{< scss-docs name="spinner-border-keyframes" file="scss/_spinners.scss" >}} + +{{< scss-docs name="spinner-grow-keyframes" file="scss/_spinners.scss" >}} + [color]: {{< docsref "/utilities/colors" >}} [display]: {{< docsref "/utilities/display" >}} diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index be368c76e..57bcd319b 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -13,7 +13,6 @@ Toasts are lightweight notifications designed to mimic the push notifications th Things to know when using the toast plugin: - Toasts are opt-in for performance reasons, so **you must initialize them yourself**. -- **Please note that you are responsible for positioning toasts.** - Toasts will automatically hide if you do not specify `autohide: false`. {{< callout info >}} @@ -42,9 +41,49 @@ Toasts are as flexible as you need and have very little required markup. At a mi </div> {{< /example >}} +### Live + +Click the button the below to show as toast (positioning with our utilities in the lower right corner) that has been hidden by default with `.hide`. + +<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5"> + <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast-header"> + {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} + <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> +</div> + +<div class="bd-example"> + <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button> +</div> + +```html +<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button> + +<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5"> + <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast-header"> + <img src="..." class="rounded me-2" alt="..."> + <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> +</div> +``` + ### Translucent -Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast. +Toasts are slightly translucent, too, so they blend over whatever they might appear over. {{< example class="bg-dark" >}} <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> @@ -62,30 +101,32 @@ Toasts are slightly translucent, too, so they blend over whatever they might app ### Stacking -When you have multiple toasts, we default to vertically stacking them in a readable manner. +You can stack toasts by wrapping them in a toast container, which will vertically add some spacing. {{< example class="bg-light" >}} -<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> - <div class="toast-header"> - {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} - <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">just now</small> - <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> - </div> - <div class="toast-body"> - See? Just like this. +<div class="toast-container"> + <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast-header"> + {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} + <strong class="me-auto">Bootstrap</strong> + <small class="text-muted">just now</small> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> + </div> + <div class="toast-body"> + See? Just like this. + </div> </div> -</div> -<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> - <div class="toast-header"> - {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} - <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">2 seconds ago</small> - <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> - </div> - <div class="toast-body"> - Heads up, toasts will stack automatically + <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast-header"> + {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} + <strong class="me-auto">Bootstrap</strong> + <small class="text-muted">2 seconds ago</small> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> + </div> + <div class="toast-body"> + Heads up, toasts will stack automatically + </div> </div> </div> {{< /example >}} @@ -95,11 +136,13 @@ When you have multiple toasts, we default to vertically stacking them in a reada Customize your toasts by removing sub-components, tweaking with [utilities]({{< docsref "/utilities/api" >}}), or adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout. {{< example class="bg-light" >}} -<div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true"> - <div class="toast-body"> +<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="d-flex"> + <div class="toast-body"> Hello, world! This is a toast message. + </div> + <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button> </div> - <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button> </div> {{< /example >}} @@ -119,14 +162,16 @@ Alternatively, you can also add additional controls and components to toasts. ### Color schemes -Building on the above example, you can create different toast color schemes with our [color utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.text-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. +Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. {{< example class="bg-light" >}} -<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true"> - <div class="toast-body"> - Hello, world! This is a toast message. +<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="d-flex"> + <div class="toast-body"> + Hello, world! This is a toast message. + </div> + <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button> </div> - <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button> </div> {{< /example >}} @@ -134,17 +179,35 @@ Building on the above example, you can create different toast color schemes with Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`. -{{< example class="bg-dark" >}} -<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"> - <div class="toast" style="position: absolute; top: 0; right: 0;"> - <div class="toast-header"> - {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} - <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. +{{< example >}} +<form> + <div class="mb-3"> + <label for="selectToastPlacement">Toast placement</label> + <select class="form-select mt-2" id="selectToastPlacement"> + <option value="" selected>Select a position...</option> + <option value="top-0 start-0">Top left</option> + <option value="top-0 start-50 translate-middle-x">Top center</option> + <option value="top-0 end-0">Top right</option> + <option value="top-50 start-0 translate-middle-y">Middle left</option> + <option value="top-50 start-50 translate-middle">Middle center</option> + <option value="top-50 end-0 translate-middle-y">Middle right</option> + <option value="bottom-0 start-0">Bottom left</option> + <option value="bottom-0 start-50 translate-middle-x">Bottom center</option> + <option value="bottom-0 end-0">Bottom right</option> + </select> + </div> +</form> +<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts"> + <div class="toast-container position-absolute p-3" id="toastPlacement"> + <div class="toast"> + <div class="toast-header"> + {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} + <strong class="me-auto">Bootstrap</strong> + <small>11 mins ago</small> + </div> + <div class="toast-body"> + Hello, world! This is a toast message. + </div> </div> </div> </div> @@ -152,10 +215,13 @@ Place toasts with custom CSS as you need them. The top right is often used for n For systems that generate more notifications, consider using a wrapping element so they can easily stack. -{{< example class="bg-dark" >}} -<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"> - <!-- Position it --> - <div style="position: absolute; top: 0; right: 0;"> +{{< example class="bg-dark bd-example-toasts p-0" >}} +<div aria-live="polite" aria-atomic="true" class="position-relative"> + <!-- Position it: --> + <!-- - `.toast-container` for spacing between toasts --> + <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner --> + <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container --> + <div class="toast-container position-absolute top-0 end-0 p-3"> <!-- Then put toasts within --> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> @@ -187,9 +253,9 @@ For systems that generate more notifications, consider using a wrapping element You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically. -{{< example class="bg-dark" >}} +{{< example class="bg-dark bd-example-toasts d-flex" >}} <!-- Flexbox container for aligning the toasts --> -<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;"> +<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100"> <!-- Then put toasts within --> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> @@ -238,9 +304,13 @@ When using `autohide: false`, you must add a close button to allow users to dism </div> {{< /example >}} -## JavaScript behavior +## Sass + +### Variables + +{{< scss-docs name="toast-variables" file="scss/_variables.scss" >}} -### Usage +## Usage Initialize toasts via JavaScript: diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index 2ab684a22..80a679fd6 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -21,6 +21,10 @@ Things to know when using the tooltip plugin: - Tooltips can be triggered thanks to an element inside a shadow DOM. {{< callout info >}} +{{< partial "callout-info-sanitizer.md" >}} +{{< /callout >}} + +{{< callout info >}} {{< partial "callout-info-prefersreducedmotion.md" >}} {{< /callout >}} @@ -42,7 +46,7 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { Hover over the links below to see tooltips: <div class="bd-example tooltip-demo"> - <p class="muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. + <p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project. </p> </div> @@ -92,6 +96,12 @@ With an SVG: </a> </div> +## Sass + +### Variables + +{{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}} + ## Usage The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. @@ -106,12 +116,12 @@ var tooltip = new bootstrap.Tooltip(exampleEl, options) {{< callout warning >}} ##### Overflow `auto` and `scroll` -Tooltip position attempts to automatically change when a parent container has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`: +Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`: ```js var exampleEl = document.getElementById('example') var tooltip = new bootstrap.Tooltip(exampleEl, { - boundary: 'window' + boundary: document.body // or document.querySelector('#boundary') }) ``` {{< /callout >}} @@ -141,19 +151,19 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo ### Disabled elements -Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`, and override the `pointer-events` on the disabled element. +Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`. <div class="tooltip-demo"> {{< example >}} <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip"> - <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button> + <button class="btn btn-primary" type="button" disabled>Disabled button</button> </span> {{< /example >}} </div> ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`. {{< callout warning >}} Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. @@ -249,27 +259,17 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt </td> </tr> <tr> - <td><code>offset</code></td> - <td>number | string | function</td> - <td><code>0</code></td> - <td> - <p>Offset of the tooltip relative to its target.</p> - <p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p> - <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p> - </td> - </tr> - <tr> - <td><code>fallbackPlacement</code></td> - <td>string | array</td> - <td><code>'flip'</code></td> - <td>Allow to specify which position Popper will use on fallback. For more information refer to - Popper's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td> + <td><code>fallbackPlacements</code></td> + <td>array</td> + <td><code>['top', 'right', 'bottom', 'left']</code></td> + <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to + Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td> </tr> <tr> <td><code>boundary</code></td> <td>string | element</td> - <td><code>'scrollParent'</code></td> - <td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td> + <td><code>'clippingParents'</code></td> + <td>Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td> </tr> <tr> <td><code>customClass</code></td> @@ -284,7 +284,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt <td><code>sanitize</code></td> <td>boolean</td> <td><code>true</code></td> - <td>Enable or disable the sanitization. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized.</td> + <td>Enable or disable the sanitization. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized. See the <a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">sanitizer section in our JavaScript documentation</a>.</td> </tr> <tr> <td><code>allowList</code></td> @@ -299,10 +299,23 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td> </tr> <tr> + <td><code>offset</code></td> + <td>array | string | function</td> + <td><code>[0, 0]</code></td> + <td> + <p>Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p> + <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p> + <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p> + </td> + </tr> + <tr> <td><code>popperConfig</code></td> - <td>null | object</td> + <td>null | object | function</td> <td><code>null</code></td> - <td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td> + <td> + <p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p> + <p>When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.</p> + </td> </tr> </tbody> </table> @@ -313,6 +326,18 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above. {{< /callout >}} +#### Using function with `popperConfig` + +```js +var tooltip = new bootstrap.Tooltip(element, { + popperConfig: function (defaultBsPopperConfig) { + // var newPopperConfig = {...} + // use defaultBsPopperConfig if needed... + // return newPopperConfig + } +}) +``` + ### Methods {{< callout danger >}} diff --git a/site/content/docs/5.0/content/figures.md b/site/content/docs/5.0/content/figures.md index f5956614f..29a38d723 100644 --- a/site/content/docs/5.0/content/figures.md +++ b/site/content/docs/5.0/content/figures.md @@ -3,6 +3,7 @@ layout: docs title: Figures description: Documentation and examples for displaying related images and text with the figure component in Bootstrap. group: content +toc: true --- Anytime you need to display a piece of content—like an image with an optional caption, consider using a `<figure>`. @@ -24,3 +25,9 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut <figcaption class="figure-caption text-end">A caption for the above image.</figcaption> </figure> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/content/images.md b/site/content/docs/5.0/content/images.md index 271b08e30..f1012efbf 100644 --- a/site/content/docs/5.0/content/images.md +++ b/site/content/docs/5.0/content/images.md @@ -53,3 +53,11 @@ If you are using the `<picture>` element to specify multiple `<source>` elements <img src="..." class="img-fluid img-thumbnail" alt="..."> </picture> ``` + +## Sass + +### Variables + +Variables are available for image thumbnails. + +{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md index 60564c152..6529e5ef2 100644 --- a/site/content/docs/5.0/content/reboot.md +++ b/site/content/docs/5.0/content/reboot.md @@ -33,6 +33,8 @@ Bootstrap utilizes a "native font stack" or "system font stack" for optimum text ```scss $font-family-sans-serif: + // Cross-platform generic font family (default user interface font) + system-ui, // Safari for macOS and iOS (San Francisco) -apple-system, // Chrome < 56 for macOS (San Francisco) @@ -113,27 +115,17 @@ All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a ` <div class="bd-example"> {{< markdown >}} -* Lorem ipsum dolor sit amet -* Consectetur adipiscing elit -* Integer molestie lorem at massa -* Facilisis in pretium nisl aliquet -* Nulla volutpat aliquam velit - * Phasellus iaculis neque - * Purus sodales ultricies - * Vestibulum laoreet porttitor sem - * Ac tristique libero volutpat at -* Faucibus porta lacus fringilla vel -* Aenean sit amet erat nunc -* Eget porttitor lorem - -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa -4. Facilisis in pretium nisl aliquet -5. Nulla volutpat aliquam velit -6. Faucibus porta lacus fringilla vel -7. Aenean sit amet erat nunc -8. Eget porttitor lorem +* All lists have their top margin removed +* And their bottom margin normalized +* Nested lists have no bottom margin + * This way they have a more even appearance + * Particularly when followed by more list items +* The left padding has also been reset + +1. Here's an ordered list +2. With a few list items +3. It has the same overall look +4. As the previous unordered list {{< /markdown >}} </div> @@ -143,11 +135,11 @@ For simpler styling, clear hierarchy, and better spacing, description lists have <dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> - <dt>Euismod</dt> - <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd> - <dd>Donec id elit non mi porta gravida at eget metus.</dd> - <dt>Malesuada porta</dt> - <dd>Etiam porta sem malesuada magna mollis euismod.</dd> + <dt>Term</dt> + <dd>Definition for the term.</dd> + <dd>A second definition for the same term.</dd> + <dt>Another term</dt> + <dd>Definition for this other term.</dd> </dl> </div> @@ -256,7 +248,7 @@ These changes, and more, are demonstrated below. </p> <p> <label for="email">Example email</label> - <input type="email" id="email" placeholder="[email protected]"> + <input type="email" id="email" placeholder="[email protected]"> </p> <p> <label for="tel">Example telephone</label> @@ -407,7 +399,7 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem <div class="bd-example"> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <p>Someone famous in <cite title="Source Title">Source Title</cite></p> </div> diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md index 26f213172..7ec00201b 100644 --- a/site/content/docs/5.0/content/tables.md +++ b/site/content/docs/5.0/content/tables.md @@ -213,7 +213,7 @@ Highlight a table row or cell by adding a `.table-active` class. For the accented tables ([striped rows](#striped-rows), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds. -- Then we add a gradient on the table cells with `background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));` to layer on top of any specified `background-color`. Since `--bs-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default. +- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow. - When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color. - Text and border colors are generated the same way, and their colors are inherited by default. @@ -270,19 +270,19 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> - <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td> + <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td> </tr> <tr class="align-bottom"> <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> - <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td> + <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td> </tr> <tr> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <td class="align-top">This cell is aligned to the top.</td> - <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td> + <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td> </tr> </tbody> </table> @@ -290,31 +290,29 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells </div> ```html -<table class="table table-sm table-dark"> - <div class="table-responsive"> - <table class="table align-middle"> - <thead> - <tr> - ... - </tr> - </thead> - <tbody> - <tr> - ... - </tr> - <tr class="align-bottom"> - ... - </tr> - <tr> - <td>...</td> - <td>...</td> - <td class="align-top">This cell is aligned to the top.</td> - <td>...</td> - </tr> - </tbody> - </table> - </div> -</table> +<div class="table-responsive"> + <table class="table align-middle"> + <thead> + <tr> + ... + </tr> + </thead> + <tbody> + <tr> + ... + </tr> + <tr class="align-bottom"> + ... + </tr> + <tr> + <td>...</td> + <td>...</td> + <td class="align-top">This cell is aligned to the top.</td> + <td>...</td> + </tr> + </tbody> + </table> +</div> ``` ## Nesting @@ -497,7 +495,6 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `. </table> ``` - ### Table foot <div class="bd-example"> @@ -776,9 +773,17 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< /tables.inline >}} {{< /highlight >}} -## Customizing in Sass +## Sass -- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. -- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable. +### Variables {{< scss-docs name="table-variables" file="scss/_variables.scss" >}} + +### Loop + +{{< scss-docs name="table-loop" file="scss/_variables.scss" >}} + +### Customizing + +- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. +- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable. diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md index d5c1a37df..7d41f04de 100644 --- a/site/content/docs/5.0/content/typography.md +++ b/site/content/docs/5.0/content/typography.md @@ -132,7 +132,7 @@ Make a paragraph stand out by adding `.lead`. {{< example >}} <p class="lead"> - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. + This is a lead paragraph. It stands out from regular paragraphs. </p> {{< /example >}} @@ -188,7 +188,7 @@ For quoting blocks of content from another source within your document. Wrap `<b {{< example >}} <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> {{< /example >}} @@ -199,7 +199,7 @@ The HTML spec requires that blockquote attribution be placed outside the `<block {{< example >}} <figure> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite> @@ -214,7 +214,7 @@ Use text utilities as needed to change the alignment of your blockquote. {{< example >}} <figure class="text-center"> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite> @@ -225,7 +225,7 @@ Use text utilities as needed to change the alignment of your blockquote. {{< example >}} <figure class="text-end"> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite> @@ -241,21 +241,18 @@ Remove the default `list-style` and left margin on list items (immediate childre {{< example >}} <ul class="list-unstyled"> - <li>Lorem ipsum dolor sit amet</li> - <li>Consectetur adipiscing elit</li> - <li>Integer molestie lorem at massa</li> - <li>Facilisis in pretium nisl aliquet</li> - <li>Nulla volutpat aliquam velit + <li>This is a list.</li> + <li>It appears completely unstyled.</li> + <li>Structurally, it's still a list.</li> + <li>However, this style only applies to immediate child elements.</li> + <li>Nested lists: <ul> - <li>Phasellus iaculis neque</li> - <li>Purus sodales ultricies</li> - <li>Vestibulum laoreet porttitor sem</li> - <li>Ac tristique libero volutpat at</li> + <li>are unaffected by this style</li> + <li>will still show a bullet</li> + <li>and have appropriate left margin</li> </ul> </li> - <li>Faucibus porta lacus fringilla vel</li> - <li>Aenean sit amet erat nunc</li> - <li>Eget porttitor lorem</li> + <li>This may still come in handy in some situations.</li> </ul> {{< /example >}} @@ -265,9 +262,9 @@ Remove a list's bullets and apply some light `margin` with a combination of two {{< example >}} <ul class="list-inline"> - <li class="list-inline-item">Lorem ipsum</li> - <li class="list-inline-item">Phasellus iaculis</li> - <li class="list-inline-item">Nulla volutpat</li> + <li class="list-inline-item">This is a list item.</li> + <li class="list-inline-item">And another one.</li> + <li class="list-inline-item">But they're displayed inline.</li> </ul> {{< /example >}} @@ -280,23 +277,23 @@ Align terms and descriptions horizontally by using our grid system's predefined <dt class="col-sm-3">Description lists</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> - <dt class="col-sm-3">Euismod</dt> + <dt class="col-sm-3">Term</dt> <dd class="col-sm-9"> - <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> - <p>Donec id elit non mi porta gravida at eget metus.</p> + <p>Definition for the term.</p> + <p>And some more placeholder definition text.</p> </dd> - <dt class="col-sm-3">Malesuada porta</dt> - <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> + <dt class="col-sm-3">Another term</dt> + <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd> <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> - <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> + <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd> <dt class="col-sm-3">Nesting</dt> <dd class="col-sm-9"> <dl class="row"> <dt class="col-sm-4">Nested definition list</dt> - <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> + <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd> </dl> </dd> </dl> @@ -305,3 +302,19 @@ Align terms and descriptions horizontally by using our grid system's predefined ## Responsive font sizes In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works. + +## Sass + +### Variables + +Headings have some dedicated variables for sizing and spacing. + +{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}} + +Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables. + +{{< scss-docs name="type-variables" file="scss/_variables.scss" >}} + +### Mixins + +There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}). diff --git a/site/content/docs/5.0/customize/color.md b/site/content/docs/5.0/customize/color.md index 452b3d77c..7d1615589 100644 --- a/site/content/docs/5.0/customize/color.md +++ b/site/content/docs/5.0/customize/color.md @@ -105,4 +105,4 @@ Here's how you can use these in your Sass: } ``` -[Color utility classes]({{< docsref "/utilities/colors" >}}) are also available for setting `color` and `background-color` using the `500` color values. +[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values. diff --git a/site/content/docs/5.0/customize/optimize.md b/site/content/docs/5.0/customize/optimize.md index fbf3f6b05..0911667d0 100644 --- a/site/content/docs/5.0/customize/optimize.md +++ b/site/content/docs/5.0/customize/optimize.md @@ -72,8 +72,21 @@ Whenever possible, be sure to compress all the code you serve to your visitors. ## Nonblocking files -_Help wanted with this section, please consider opening a PR. Thanks!_ +While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough. -## Always use https +If you are using a [Lighthouse](https://developers.google.com/web/tools/lighthouse/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. -_Help wanted with this section, please consider opening a PR. Thanks!_ +You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don't need to be present on the first paint of your page should be marked with `async` or `defer` attributes. + +This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles. + +If you want to learn more about this, there are already a lot of great articles about it: + +- <https://web.dev/render-blocking-resources/> +- <https://web.dev/defer-non-critical-css/> + +## Always use HTTPS + +Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and [there is no such thing as non-sensitive web traffic](https://https.cio.gov/everything/). The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs. + +Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you'll be sending users [mixed active content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content), leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you're getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections. diff --git a/site/content/docs/5.0/customize/options.md b/site/content/docs/5.0/customize/options.md index d818d6d4a..0d846270b 100644 --- a/site/content/docs/5.0/customize/options.md +++ b/site/content/docs/5.0/customize/options.md @@ -14,7 +14,7 @@ You can find and customize these variables for key global options in Bootstrap's | ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- | | `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). | | `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | -| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | +| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. | | `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. | @@ -24,6 +24,6 @@ You can find and customize these variables for key global options in Bootstrap's | `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). | | `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | | `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). | -| `$enable-deprecation-messages` | `true` or `false` (default) | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. | +| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. | | `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | {{< /bs-table >}} diff --git a/site/content/docs/5.0/customize/overview.md b/site/content/docs/5.0/customize/overview.md index 16847589e..07431575a 100644 --- a/site/content/docs/5.0/customize/overview.md +++ b/site/content/docs/5.0/customize/overview.md @@ -34,3 +34,18 @@ While we cannot go into details here on how to use every package manager, we can For those who want to use the distribution files, review the [getting started page]({{< docsref "/getting-started/introduction" >}}) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you'd like to use. As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap. + +## CSPs and embedded SVGs + +Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we've documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options. + +- [Accordion]({{< docsref "/components/accordion" >}}) +- [Close button]({{< docsref "/components/close-button" >}}) (used in alerts and modals) +- [Form checkboxes and radio buttons]({{< docsref "/forms/checks-radios" >}}) +- [Form switches]({{< docsref "/forms/checks-radios#switches" >}}) +- [Form validation icons]({{< docsref "/forms/validation#server-side" >}}) +- [Select menus]({{< docsref "/forms/select" >}}) +- [Carousel controls]({{< docsref "/components/carousel#with-controls" >}}) +- [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}}) + +Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on a best path forward, if necessary. diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.0/customize/sass.md index 46b822525..98a6429fb 100644 --- a/site/content/docs/5.0/customize/sass.md +++ b/site/content/docs/5.0/customize/sass.md @@ -6,7 +6,7 @@ group: customize toc: true --- -Utilize our source Sass files to take advantage of variables, maps, mixins, and more. In our build we've increased the Sass rounding precision to 6 (by default it's 5) to prevent issues with browser rounding. +Utilize our source Sass files to take advantage of variables, maps, mixins, and more. ## File structure @@ -41,25 +41,35 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two // Custom.scss // Option A: Include all of Bootstrap +// Include any default variable overrides here (though functions won't be available) + @import "../node_modules/bootstrap/scss/bootstrap"; + +// Then add additional custom code here ``` ```scss // Custom.scss // Option B: Include parts of Bootstrap -// Required +// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; + +// 2. Include any default variable overrides here + +// 3. Include remainder of required Bootstrap stylesheets @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; -// Optional +// 4. Include any optional Bootstrap components as you like @import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; + +// 5. Add additional custom code here ``` With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point. @@ -70,21 +80,37 @@ Every Sass variable in Bootstrap includes the `!default` flag allowing you to ov You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. -Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files. +Variable overrides must come after our functions, variables, and mixins are imported, but before the rest of the imports. Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm: ```scss -// Your variable overrides +// Required +@import "../node_modules/bootstrap/scss/functions"; + +// Default variable overrides $body-bg: #000; $body-color: #111; +// Required +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/mixins"; + // Bootstrap and its default variables -@import "../node_modules/bootstrap/scss/bootstrap"; + +// Optional Bootstrap components here +@import "../node_modules/bootstrap/scss/root"; +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/type"; +// etc ``` Repeat as necessary for any variable in Bootstrap, including the global options below. +{{< callout info >}} +{{< partial "callout-info-npm-starter.md" >}} +{{< /callout >}} + ## Maps and loops Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended. @@ -139,7 +165,7 @@ $theme-colors: map-remove($theme-colors, "info", "light", "dark"); @import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; -... +// etc ``` ## Required keys @@ -250,3 +276,25 @@ $border-width: 0; border-radius: subtract($border-radius, $border-width); } ``` + +## Mixins + +Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project. + +### Color schemes + +A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. + +{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}} + +```scss +.custom-element { + @include color-scheme(dark) { + // Insert dark mode styles here + } + + @include color-scheme(custom-named-scheme) { + // Insert custom color scheme styles here + } +} +``` diff --git a/site/content/docs/5.0/examples/_index.md b/site/content/docs/5.0/examples/_index.md index 4d747cd78..3d5bfab2f 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) }}<div class="row">{{ end }} <div class="col-sm-6 col-md-4 col-xl-3 mb-3"> - <a href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> + <a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png, /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x" src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png" diff --git a/site/content/docs/5.0/examples/album-rtl/index.html b/site/content/docs/5.0/examples/album-rtl/index.html index 5142c4cec..3408056bc 100644 --- a/site/content/docs/5.0/examples/album-rtl/index.html +++ b/site/content/docs/5.0/examples/album-rtl/index.html @@ -10,14 +10,14 @@ direction: rtl <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-white">حول</h4> - <p class="text-muted">أضف بعض المعلومات حول الألبوم أدناه أو المؤلف أو أي سياق خلفية آخر. اجعلها بضع جمل طويلة حتى يتمكن الناس من التقاط بعض الحكايات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p> + <p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p> </div> <div class="col-sm-4 offset-md-1 py-4"> - <h4 class="text-white">اتصل</h4> + <h4 class="text-white">تواصل معي</h4> <ul class="list-unstyled"> - <li><a href="#" class="text-white">تابع على تويتر</a></li> - <li><a href="#" class="text-white">مثل في الفيسبوك</a></li> - <li><a href="#" class="text-white">راسلني</a></li> + <li><a href="#" class="text-white">تابعني على تويتر</a></li> + <li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li> + <li><a href="#" class="text-white">راسلني على البريد الإلكتروني</a></li> </ul> </div> </div> @@ -41,8 +41,8 @@ direction: rtl <section class="py-5 text-center container"> <div class="row py-lg-5"> <div class="col-lg-6 col-md-8 mx-auto"> - <h1 class="font-weight-light">مثال الألبوم</h1> - <p class="lead text-muted">شيء قصير وقائد حول المجموعة أدناه - محتوياتها ، ومنشئها ، وما إلى ذلك. اجعلها قصيرة ولطيفة ، ولكن ليست قصيرة جدًا حتى لا يتخطى الناس ببساطة هذه المجموعة تمامًا.</p> + <h1 class="fw-light">مثال الألبوم</h1> + <p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p> <p> <a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a> <a href="#" class="btn btn-secondary my-2">عمل ثانوي</a> @@ -57,12 +57,12 @@ direction: rtl <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> <div class="col"> <div class="card shadow-sm"> - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} <div class="card-body"> <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button> + <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> <small class="text-muted">9 دقائق</small> @@ -72,12 +72,12 @@ direction: rtl </div> <div class="col"> <div class="card shadow-sm"> - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} <div class="card-body"> <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button> + <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> <small class="text-muted">9 دقائق</small> @@ -87,12 +87,12 @@ direction: rtl </div> <div class="col"> <div class="card shadow-sm"> - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} <div class="card-body"> <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button> + <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> <small class="text-muted">9 دقائق</small> @@ -103,12 +103,12 @@ direction: rtl <div class="col"> <div class="card shadow-sm"> - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} <div class="card-body"> <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button> + <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> <small class="text-muted">9 دقائق</small> @@ -118,12 +118,12 @@ direction: rtl </div> <div class="col"> <div class="card shadow-sm"> - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} <div class="card-body"> <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button> + <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> <small class="text-muted">9 دقائق</small> @@ -133,12 +133,12 @@ direction: rtl </div> <div class="col"> <div class="card shadow-sm"> - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} <div class="card-body"> <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button> + <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> <small class="text-muted">9 دقائق</small> @@ -149,12 +149,12 @@ direction: rtl <div class="col"> <div class="card shadow-sm"> - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} <div class="card-body"> <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button> + <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> <small class="text-muted">9 دقائق</small> @@ -164,12 +164,12 @@ direction: rtl </div> <div class="col"> <div class="card shadow-sm"> - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} <div class="card-body"> <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button> + <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> <small class="text-muted">9 دقائق</small> @@ -179,12 +179,12 @@ direction: rtl </div> <div class="col"> <div class="card shadow-sm"> - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}} + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} <div class="card-body"> <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button> + <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> <small class="text-muted">9 دقائق</small> diff --git a/site/content/docs/5.0/examples/blog-rtl/index.html b/site/content/docs/5.0/examples/blog-rtl/index.html index 883ef7b44..8fb4d05b4 100644 --- a/site/content/docs/5.0/examples/blog-rtl/index.html +++ b/site/content/docs/5.0/examples/blog-rtl/index.html @@ -12,7 +12,7 @@ include_js: false <header class="blog-header py-3"> <div class="row flex-nowrap justify-content-between align-items-center"> <div class="col-4 pt-1"> - <a class="link-secondary" href="#">الإشتراك</a> + <a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a> </div> <div class="col-4 text-center"> <a class="blog-header-logo text-dark" href="#">كبير</a> @@ -21,24 +21,24 @@ include_js: false <a class="link-secondary" href="#" aria-label="بحث"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>بحث</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg> </a> - <a class="btn btn-sm btn-outline-secondary" href="#">سجل</a> + <a class="btn btn-sm btn-outline-secondary" href="#">إنشاء حساب</a> </div> </div> </header> <div class="nav-scroller py-1 mb-2"> <nav class="nav d-flex justify-content-between"> - <a class="p-2 link-secondary" href="#">العالمية</a> - <a class="p-2 link-secondary" href="#">نحن.</a> - <a class="p-2 link-secondary" href="#">تقنية</a> + <a class="p-2 link-secondary" href="#">العالم</a> + <a class="p-2 link-secondary" href="#">الولايات المتحدة</a> + <a class="p-2 link-secondary" href="#">التقنية</a> <a class="p-2 link-secondary" href="#">التصميم</a> - <a class="p-2 link-secondary" href="#">حضاره</a> - <a class="p-2 link-secondary" href="#">اعمال</a> - <a class="p-2 link-secondary" href="#">سياسة</a> - <a class="p-2 link-secondary" href="#">رأي</a> - <a class="p-2 link-secondary" href="#">علم</a> + <a class="p-2 link-secondary" href="#">الحضارة</a> + <a class="p-2 link-secondary" href="#">المال والأعمال</a> + <a class="p-2 link-secondary" href="#">السياسة</a> + <a class="p-2 link-secondary" href="#">الرأي العام</a> + <a class="p-2 link-secondary" href="#">العلوم</a> <a class="p-2 link-secondary" href="#">الصحة</a> - <a class="p-2 link-secondary" href="#">أسلوب</a> + <a class="p-2 link-secondary" href="#">الموضة</a> <a class="p-2 link-secondary" href="#">السفر</a> </nav> </div> @@ -47,9 +47,9 @@ include_js: false <main class="container"> <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark"> <div class="col-md-6 px-0"> - <h1 class="display-4 font-italic">عنوان مشاركة مدونة مميزة أطول</h1> - <p class="lead my-3">أسطر نصية متعددة تشكل الجزء الأمامي ، لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه المشاركة.</p> - <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">أكمل القراءة...</a></p> + <h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1> + <p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p> + <p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p> </div> </div> @@ -57,14 +57,14 @@ include_js: false <div class="col-md-6"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> - <strong class="d-inline-block mb-2 text-primary">العالمية</strong> + <strong class="d-inline-block mb-2 text-primary">العالم</strong> <h3 class="mb-0">مشاركة مميزة</h3> - <div class="mb-1 text-muted">12 نوفمبر</div> + <div class="mb-1 text-muted">نوفمبر 12</div> <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <a href="#" class="stretched-link">أكمل القراءة</a> </div> <div class="col-auto d-none d-lg-block"> - {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}} + {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} </div> </div> </div> @@ -73,12 +73,12 @@ include_js: false <div class="col p-4 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-success">التصميم</strong> <h3 class="mb-0">عنوان الوظيفة</h3> - <div class="mb-1 text-muted">11 نوفمبر</div> + <div class="mb-1 text-muted">نوفمبر 11</div> <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <a href="#" class="stretched-link">أكمل القراءة</a> </div> <div class="col-auto d-none d-lg-block"> - {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}} + {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} </div> </div> </div> @@ -86,84 +86,87 @@ include_js: false <div class="row"> <div class="col-md-8"> - <h3 class="pb-4 mb-4 font-italic border-bottom"> + <h3 class="pb-4 mb-4 fst-italic border-bottom"> من Firehose </h3> <article class="blog-post"> - <h2 class="blog-post-title">عينة مشاركة مدونة</h2> + <h2 class="blog-post-title">مثال على تدوينة</h2> <p class="blog-post-meta">1 يناير 2014 بواسطة <a href="#"> Mark </a></p> - <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. الطباعة الأساسية والصور والرموز كلها مدعومة.</p> + <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p> <hr> - <p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p> + <p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p> <blockquote> - <p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p> + <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p> </blockquote> - <p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p> + <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p> <h2>عنوان</h2> - <p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p> - <h3>العنوان الفرعي</h3> - <p>موالية استدعى كل حيث, وبدون الأولية الاندونيسية و كما. فعل قد لعدم اليابانية, اليميني الساحلية أن جهة. جُل ما اليميني العسكري الدنمارك. إذ وفي الموسوعة الأمريكي, سابق الأمريكية ثم مدن. تم وفي أوروبا بلديهما ماليزيا،, ويتّفق بالجانب وقد أي.</p> + <p>تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!</p> + <h3>عنوان فرعي</h3> + <p>ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.</p> <pre><code>Example code block</code></pre> - <p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p> - <h3>العنوان الفرعي</h3> - <p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p> + <p>وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.</p> + <h3>عنوان فرعي</h3> + <p>بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.</p> + <p>يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:</p> <ul> - <li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li> - <li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li> - <li>ذات مئات المشترك بالمحور عن وشعار.</li> + <li>البروتينات</li> + <li>الكربوهيدرات</li> + <li>الدهون</li> </ul> - <p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p> + <p>وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:</p> <ol> - <li>عرض قتيل، الجنرال الأوروبي ما, ثم تعد بقعة.</li> - <li>ثم الا الجوي اوروبا, و غير العسكري التبرعات, ترتيب مواقعها أوراقهم ضرب في إذ.</li> - <li>علاقة يتعلّق وبلجيكا، على مع, الجنود الخطّة جُل عل, فقد ان سقوط.</li> + <li>الكربون</li> + <li>الهيدروجين</li> + <li>الأكسجين</li> + <li>النيتروجين</li> </ol> - <p>الشرق، وصافرات الساحلية بل بلا. ٠٨٠٤ ودول العناد انه أن. في تونس أوزار مقاومة وصل, قد وقد حلّت دأبوا رجوعهم. أفاق والعتاد لم قبل, عن كلّ منتصف محاولات. المشترك الأولية ان كلا, ألمّ إحتار التقليدية و مدن. عن عدد تسمّى المسرح الطرفين.</p> + <p>ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.</p> </article><!-- /.blog-post --> <article class="blog-post"> - <h2 class="blog-post-title">مشاركة مدونة أخرى</h2> + <h2 class="blog-post-title">تدوينة أخرى</h2> <p class="blog-post-meta">23 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p> - <p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p> + <p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p> <blockquote> - <p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p> + <p>تم تصنيع اللحوم بأنواع عديدة</p> </blockquote> - <p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p> - <p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p> + <p>إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.</p> + <p> وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.</p> </article><!-- /.blog-post --> <article class="blog-post"> <h2 class="blog-post-title">ميزة جديدة</h2> <p class="blog-post-meta">14 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p> - <p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p> - <p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p> + <p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p> + <p>وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.</p> + <p>وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:</p> <ul> - <li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li> - <li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li> - <li>ذات مئات المشترك بالمحور عن وشعار.</li> + <li>توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء</li> + <li>تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة</li> + <li>تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م</li> </ul> - <p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p> + <p>فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!</p> </article><!-- /.blog-post --> <nav class="blog-pagination" aria-label="Pagination"> - <a class="btn btn-outline-primary" href="#">أقدم الوظائف</a> - <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">أحدث المشاركات</a> + <a class="btn btn-outline-primary" href="#">تدوينات أقدم</a> + <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">تدوينات أحدث</a> </nav> </div> <div class="col-md-4"> <div class="p-4 mb-3 bg-light rounded"> - <h4 class="font-italic">حول</h4> - <p class="mb-0">بل مدن وإعلان بتخصيص إيطاليا. حيث عقبت أساسي وتنامت و, وباءت وايرلندا وقد بـ, مرمى سقطت إحكام يكن و. كل ومن تصفح بالرّغم الاندونيسية. ٣٠ انتباه والروسية كلّ, الوراء ولكسمبورغ عن لكل. الخاصّة والإتحاد لان بل, وقد الهجوم وتنامت و.</p> + <h4 class="fst-italic">حول</h4> + <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p> </div> <div class="p-4"> - <h4 class="font-italic">أرشيف</h4> + <h4 class="fst-italic">الأرشيف</h4> <ol class="list-unstyled mb-0"> <li><a href="#">مارس 2014</a></li> <li><a href="#">شباط 2014</a></li> @@ -181,7 +184,7 @@ include_js: false </div> <div class="p-4"> - <h4 class="font-italic">في مكان آخر</h4> + <h4 class="fst-italic">في مكان آخر</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> @@ -195,7 +198,7 @@ include_js: false </main><!-- /.container --> <footer class="blog-footer"> - <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/"> Bootstrap </a> بواسطة <a href="https://twitter.com/mdo">mdo </a>.</p> + <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p> <p> <a href="#">عد إلى الأعلى</a> </p> diff --git a/site/content/docs/5.0/examples/blog/index.html b/site/content/docs/5.0/examples/blog/index.html index e7db04a63..e25d740b9 100644 --- a/site/content/docs/5.0/examples/blog/index.html +++ b/site/content/docs/5.0/examples/blog/index.html @@ -46,7 +46,7 @@ include_js: false <main class="container"> <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark"> <div class="col-md-6 px-0"> - <h1 class="display-4 font-italic">Title of a longer featured blog post</h1> + <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1> <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p> <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p> </div> @@ -85,7 +85,7 @@ include_js: false <div class="row"> <div class="col-md-8"> - <h3 class="pb-4 mb-4 font-italic border-bottom"> + <h3 class="pb-4 mb-4 fst-italic border-bottom"> From the Firehose </h3> @@ -95,57 +95,56 @@ include_js: false <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p> <hr> - <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p> + <p>Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, <a href="#">you're a firework</a>. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.</p> <blockquote> - <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p>Bikinis, zucchinis, Martinis, no weenies. I know there will be sacrifice but that's the price. <strong>This is how we do it</strong>. I'm not sticking around to watch you go down. You think you're so rock and roll, but you're really just a joke. I know one spark will shock the world, yeah yeah. Can't replace you with a million rings.</p> </blockquote> - <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> + <p>Trying to connect the dots, don't know what to tell my boss. Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine. Glitter all over the room <em>pink flamingos</em> in the pool. </p> <h2>Heading</h2> - <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Suiting up for my crowning battle. If you only knew what the future holds. Bring the beat back. Peach-pink lips, yeah, everybody stares.</p> <h3>Sub-heading</h3> - <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + <p>You give a hundred reasons why, and you say you're really gonna try. Straight stuntin' yeah we do it like that. Calling out my name. ‘Cause I, I’m capable of anything.</p> <pre><code>Example code block</code></pre> - <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> + <p>Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine.</p> <h3>Sub-heading</h3> - <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p>You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out.</p> <ul> - <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li> - <li>Donec id elit non mi porta gravida at eget metus.</li> - <li>Nulla vitae elit libero, a pharetra augue.</li> + <li>Got a motel and built a fort out of sheets.</li> + <li>Your kiss is cosmic, every move is magic.</li> + <li>Suiting up for my crowning battle.</li> </ul> - <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> + <p>Takes you miles high, so high, 'cause she’s got that one international smile.</p> <ol> - <li>Vestibulum id ligula porta felis euismod semper.</li> - <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> - <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li> + <li>Scared to rock the boat and make a mess.</li> + <li>I could have rewrite your addiction.</li> + <li>I know you get me so I let my walls come down.</li> </ol> - <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> + <p>After a hurricane comes a rainbow.</p> </article><!-- /.blog-post --> <article class="blog-post"> <h2 class="blog-post-title">Another blog post</h2> <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p> - <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p> + <p>I am ready for the road less traveled. Already <a href="#">brushing off the dust</a>. Yeah, you're lucky if you're on her plane. I used to bite my tongue and hold my breath. Uh, She’s a beast. I call her Karma (come back). Black ray-bans, you know she's with the band. I can't sleep let's run away and don't ever look back, don't ever look back.</p> <blockquote> - <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p>Growing fast into a <strong>bolt of lightning</strong>. Be careful Try not to lead her on</p> </blockquote> - <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> - <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>I'm intrigued, for a peek, heard it's fascinating. Oh oh! Wanna be a victim ready for abduction. She's got that international smile, oh yeah, she's got that one international smile. Do you ever feel, feel so paper thin. I’m gon’ put her in a coma. Sun-kissed skin so hot we'll melt your popsicle.</p> + <p>This is transcendental, on another level, boy, you're my lucky star.</p> </article><!-- /.blog-post --> <article class="blog-post"> <h2 class="blog-post-title">New feature</h2> <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p> - <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p>From Tokyo to Mexico, to Rio. Yeah, you take me to utopia. I'm walking on air. We'd make out in your Mustang to Radiohead. I mean the ones, I mean like she's the one. Sun-kissed skin so hot we'll melt your popsicle. Slow cooking pancakes for my boy, still up, still fresh as a Daisy.</p> <ul> - <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li> - <li>Donec id elit non mi porta gravida at eget metus.</li> - <li>Nulla vitae elit libero, a pharetra augue.</li> + <li>I hope you got a healthy appetite.</li> + <li>You're never gonna be unsatisfied.</li> + <li>Got a motel and built a fort out of sheets.</li> </ul> - <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> - <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> + <p>Don't need apologies. Boy, you're an alien your touch so foreign, it's <em>supernatural</em>, extraterrestrial. Talk about our future like we had a clue. I can feel a phoenix inside of me.</p> </article><!-- /.blog-post --> <nav class="blog-pagination" aria-label="Pagination"> @@ -157,12 +156,12 @@ include_js: false <div class="col-md-4"> <div class="p-4 mb-3 bg-light rounded"> - <h4 class="font-italic">About</h4> - <p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> + <h4 class="fst-italic">About</h4> + <p class="mb-0">Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that <em>wears the crown</em>. Yes, we make angels cry, raining down on earth from up above.</p> </div> <div class="p-4"> - <h4 class="font-italic">Archives</h4> + <h4 class="fst-italic">Archives</h4> <ol class="list-unstyled mb-0"> <li><a href="#">March 2014</a></li> <li><a href="#">February 2014</a></li> @@ -180,7 +179,7 @@ include_js: false </div> <div class="p-4"> - <h4 class="font-italic">Elsewhere</h4> + <h4 class="fst-italic">Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> diff --git a/site/content/docs/5.0/examples/carousel-rtl/index.html b/site/content/docs/5.0/examples/carousel-rtl/index.html index 7555fc783..4e0285686 100644 --- a/site/content/docs/5.0/examples/carousel-rtl/index.html +++ b/site/content/docs/5.0/examples/carousel-rtl/index.html @@ -1,6 +1,6 @@ --- layout: examples -title: قالب دائري +title: قالب شرائح العرض direction: rtl extra_css: - "../carousel/carousel.rtl.css" @@ -9,20 +9,20 @@ extra_css: <header> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <div class="container-fluid"> - <a class="navbar-brand" href="#">دائري</a> + <a class="navbar-brand" href="#">شرائح العرض</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">الصفحة الرئيسية</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a> </li> <li class="nav-item"> <a class="nav-link" href="#">حلقة الوصل</a> </li> <li class="nav-item"> - <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معاق</a> + <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">رابط غير مفعل</a> </li> </ul> <form class="d-flex"> @@ -37,19 +37,19 @@ extra_css: <main> <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} <div class="container"> <div class="carousel-caption text-start"> <h1>عنوان المثال.</h1> - <p> نهاية الأوضاع ان أضف, هو مما رجوعهم وقدّموا. أي عدد الدمج نهاية وأكثرها, المسرح الباهضة وبولندا حول و, كل أما سياسة أسابيع. مع حيث قُدُماً الكونجرس, بها و خيار ٢٠٠٤, كلا في مكّن وقام. مع يكن زهاء بالفشل, الجوي الصين الشمال إذ على.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">سجل اليوم</a></p> + <p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p> + <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p> </div> </div> </div> @@ -58,8 +58,8 @@ extra_css: <div class="container"> <div class="carousel-caption"> <h1>عنوان مثال آخر.</h1> - <p>ثم تزامناً الفرنسي الإقتصادية دار. لكل عن الضغوط المتّبعة, أن حتى إختار المدن بالإنزال. عن الشمل بالفشل تلك, بل أراض أوزار بلديهما حول. دون لكون والتي ثم, كُلفة ويعزى استطاعوا أن لمّ. جُل بخطوط واحدة البشريةً.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">أعرف أكثر</a></p> + <p>حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.</p> + <p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p> </div> </div> </div> @@ -68,20 +68,20 @@ extra_css: <div class="container"> <div class="carousel-caption text-end"> <h1>واحد أكثر لقياس جيد.</h1> - <p>قررت العصبة إيطاليا وتم أن, عن سكان وقامت الحكومة وفي. كان بـ اوروبا اليابانية, ثمّة بوابة يتعلّق عل بعض. عدم رئيس الآلاف أن حدى.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">تصفح المعرض</a></p> + <p>الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.</p> + <p><a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a></p> </div> </div> </div> </div> - <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">السابق</span> - </a> - <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> - <span class="visually-hidden">التالى</span> - </a> + <span class="visually-hidden">التالي</span> + </button> </div> @@ -96,20 +96,20 @@ extra_css: <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} <h2>عنوان</h2> - <p>ان وتم عجّل الأجل, قبل نتيجة المشترك بـ, أي جعل جورج أوزار المسرح. أن وإعلان الساحل تلك, مكن ان استبدال الباهضة التكاليف. الى ماذا اليميني الحكومة في, إجلاء نتيجة قبل تم. مساعدة بولندا، أي هذه الحكم.</p> - <p><a class="btn btn-secondary" href="#" role="button">عرض التفاصيل</a></p> + <p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p> + <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} - <h2>عنوان</h2> - <p>هو أخر إتفاقية الدولارات الأوروبيّون, ثانية طوكيو و به،, ونتج أعمال مما أم. عن الا يونيو أفريقيا, السيطرة التقليدي ومن ٣٠. هو الغالي الإتفاقية ويكيبيديا، مكن, و الى هُزم اعتداء وايرلندا. وقبل بمباركة الأوروبيّون عن فقد, بتحدّي والفلبين ما كلا.</p> - <p><a class="btn btn-secondary" href="#" role="button">عرض التفاصيل</a></p> + <h2>عنوان آخر</h2> + <p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p> + <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} - <h2>عنوان</h2> - <p>غير عن الثقيل وسمّيت الأوضاع, لم تاريخ بالحرب للسيطرة حين, دار اللا تطوير تم. الى بشرية اليابان في. أما الشهيرة الإثنان وايرلندا ما, لإعلان واشتدّت و مدن. في غير والحزب للسيطرة الإكتفاء. ثانية الكونجرس الا من, جُل ٣٠ وبداية الشرقية.</p> - <p><a class="btn btn-secondary" href="#" role="button">عرض التفاصيل</a></p> + <h2>عنوان ثالث لتأكيد المعلومة</h2> + <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p> + <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p> </div><!-- /.col-lg-4 --> </div><!-- /.row --> @@ -121,7 +121,7 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> <h2 class="featurette-heading">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2> - <p class="lead">في التخطيط التجارية هذا, إذ هذه الشمل موالية الخاطفة. أحدث وبدون اتفاق من غير, جعل عل أطراف مشاركة الأعمال. بل الى قادة واحدة, لهيمنة التجارية حتى ثم. هو وبالرغم ابتدعها بال. بوابة ماشاء أما أي, ما وفي أحكم غريمه التقليدية.</p> + <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p> </div> <div class="col-md-5"> {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} @@ -132,8 +132,8 @@ extra_css: <div class="row featurette"> <div class="col-md-7 order-md-2"> - <h2 class="featurette-heading">أوه نعم ، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2> - <p class="lead">صفحة وحرمان الأراضي أم أخذ, قد ذلك الثقيلة المتاخمة وبريطانيا. أخذ أن اللا لإعلان لهيمنة, وفي كل موالية الشّعبين. تكاليف الخاسرة لمّ لم, إذ بحق موالية الثقيلة. العظمى والفلبين تم عرض, جمعت شعار الحرة حيث بل. عرض و وترك اللازمة.</p> + <h2 class="featurette-heading">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2> + <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p> </div> <div class="col-md-5 order-md-1"> {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} @@ -144,8 +144,8 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> - <h2 class="featurette-heading">وأخيرًا ، هذا. <span class="text-muted"> كش ملك. </span></h2> - <p class="lead">تحرّك أراضي هذا عن, كرسي وكسبت يتم بل. بحق بل القوى وفنلندا, الجو واُسدل التكاليف وتم تم, بسبب ا السادس كان أن. وبعد ميناء من بلا, تصفح يتبقّ تلك هو. ان دول بخطوط وإعلان ومطالبة, المزيفة الأوروبية، عل حدى قام.</p> + <h2 class="featurette-heading">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2> + <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p> </div> <div class="col-md-5"> {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} @@ -162,6 +162,6 @@ extra_css: <!-- FOOTER --> <footer class="container"> <p class="float-end"><a href="#">عد إلى الأعلى</a></p> - <p>© 2017-{{< year >}} Company, Inc. · <a href="#">خصوصية</a> · <a href="#">شروط</a></p> + <p>© 2017–{{< year >}} Company, Inc. · <a href="#">سياسة الخصوصية</a> · <a href="#">شروط الاستخدام</a></p> </footer> </main> diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html index 54cd34bc3..da5f3ab7a 100644 --- a/site/content/docs/5.0/examples/carousel/index.html +++ b/site/content/docs/5.0/examples/carousel/index.html @@ -14,8 +14,8 @@ extra_css: </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -36,19 +36,19 @@ extra_css: <main> <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} <div class="container"> <div class="carousel-caption text-start"> <h1>Example headline.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> + <p>Some representative placeholder content for the first slide of the carousel.</p> + <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p> </div> </div> </div> @@ -57,8 +57,8 @@ extra_css: <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> + <p>Some representative placeholder content for the second slide of the carousel.</p> + <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p> </div> </div> </div> @@ -67,20 +67,20 @@ extra_css: <div class="container"> <div class="carousel-caption text-end"> <h1>One more for good measure.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> + <p>Some representative placeholder content for the third slide of this carousel.</p> + <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p> </div> </div> </div> </div> - <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> - </a> - <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> - </a> + </button> </div> @@ -95,20 +95,20 @@ extra_css: <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} <h2>Heading</h2> - <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p> + <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} <h2>Heading</h2> - <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p> + <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} <h2>Heading</h2> - <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + <p>And lastly this, the third column of representative placeholder content.</p> + <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> </div><!-- /.row --> @@ -120,7 +120,7 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p> </div> <div class="col-md-5"> {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} @@ -132,7 +132,7 @@ extra_css: <div class="row featurette"> <div class="col-md-7 order-md-2"> <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p> </div> <div class="col-md-5 order-md-1"> {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} @@ -144,7 +144,7 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p> </div> <div class="col-md-5"> {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} @@ -161,6 +161,6 @@ extra_css: <!-- FOOTER --> <footer class="container"> <p class="float-end"><a href="#">Back to top</a></p> - <p>© 2017-{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> + <p>© 2017–{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> </main> diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html index e01b15bfd..7728e5036 100644 --- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html @@ -1,6 +1,6 @@ --- layout: examples -title: ورقة غش +title: ورقة الغش extra_css: - "../cheatsheet/cheatsheet.rtl.css" extra_js: @@ -13,7 +13,7 @@ direction: rtl <div class="container-fluid d-flex align-items-center"> <h1 class="d-flex align-items-center fs-4 text-white mb-0"> <img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap"> - ورقة غش + ورقة الغش </h1> <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a> </div> @@ -23,68 +23,68 @@ direction: rtl <nav class="small" id="toc"> <ul class="list-unstyled"> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">محتويات</button> + <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button> <ul class="list-unstyled ps-3 collapse" id="contents-collapse"> - <li><a class="d-inline-flex align-items-center rounded" href="#typography">الطباعة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#images">صور</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#tables">جدول</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#figures">رقم</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#typography">النصوص</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#images">الصور</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#tables">الجداول</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#figures">النماذج البيانية</a></li> </ul> </li> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">نماذج</button> + <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button> <ul class="list-unstyled ps-3 collapse" id="forms-collapse"> <li><a class="d-inline-flex align-items-center rounded" href="#overview">نظرة عامة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">أشكال المعطلين</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#sizing">تحجيم</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">الحقول المعطلة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#sizing">الأحجام</a></li> <li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">تسميات عائمة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li> <li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li> </ul> </li> <li class="my-2"> <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button> <ul class="list-unstyled ps-3 collapse" id="components-collapse"> - <li><a class="d-inline-flex align-items-center rounded" href="#accordion">الأكورديون</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#alerts">إنذار</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#badge">شارة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#buttons">أزرار</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#accordion">المطوية</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#alerts">الإنذارات</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#badge">الشارة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل التفصيلي</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#buttons">الأزرار</a></li> <li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#card">بطاقة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح عرض</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">هبوط قطرة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة القوائم</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#modal">مشروط</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#card">البطاقة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح العرض</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">القوائم المنسدلة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة العناصر</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#modal">الصندوق العائم</a></li> <li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li> <li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li> <li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#popovers">بوبوفيرس</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#popovers">الصناديق المنبثقة</a></li> <li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">مخطوطة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#spinners">المغازل</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#toasts">نخب</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">تلميحات الأدوات</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">المخطوطة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#spinners">الدوائر المتحركة</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#toasts">الإشعارات</a></li> + <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">التلميحات</a></li> </ul> </li> </ul> </nav> </aside> -<div class="bd-cheatsheet container-fluid bg-white"> +<div class="bd-cheatsheet container-fluid bg-body"> <section id="content"> - <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">المحتوى</h2> <article class="my-3" id="typography"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>الطباعة</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/typography" >}}">توثيق</a> + <h3>النصوص</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/typography" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} <p class="display-1">العرض 1</p> <p class="display-2">العرض 2</p> - <p class="display-3 ">العرض 3</p> + <p class="display-3">العرض 3</p> <p class="display-4">العرض 4</p> <p class="display-5">العرض 5</p> <p class="display-6">العرض 6</p> @@ -101,61 +101,58 @@ direction: rtl {{< example show_markup="false" >}} <p class="lead"> - حيث وبدون الساحة وقوعها، أي, فقد عل مكّن تمهيد قتيل،. ولم والحزب الشرقي و, أضف بالفشل الخاسر استمرار ان. كل أما وحرمان للإتحاد, ٣٠ سبتمبر استعملت جهة, لعملة الثقيلة المتاخمة على لم. أي نفس دارت والفلبين. + هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى. </p> {{< /example >}} {{< example show_markup="false" >}} - <p>يمكنك استخدام علامة <mark>العلامة</mark> لتحديد نص .</p> + <p>يمكنك استخدام تصنيف mark <mark>لتحديد</mark> نص.</p> <p><del>من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.</del></p> <p><s>من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.</s></p> <p><ins>من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.</ins></p> - <p><u>سيتم عرض هذا السطر كما هو مسطر.</u></p> - <p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة.</small></p> - <p><strong>تم تقديم هذا السطر كنص عريض.</strong></p> - <p><em>تم تقديم هذا السطر كنص مائل.</em></p> + <p><u>سيتم عرض النص في هذا السطر كما وتحته خط.</u></p> + <p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.</small></p> + <p><strong>هذا السطر يحوي نص عريض.</strong></p> + <p><em>هذا السطر يحوي نص مائل.</em></p> {{< /example >}} {{< example show_markup="false" >}} <blockquote class="blockquote"> - <p>بين كرسي والمعدات بالولايات تم. الذود اتّجة التقليدية يتم و, حيث وقرى.</p> + <p>إقتباس مبهر، موضوع في عنصر blockquote</p> <footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer> </blockquote> {{< /example >}} {{< example show_markup="false" >}} <ul class="list-unstyled"> - <li>معقل الطريق واقتصار أم قام.</li> - <li>أمّا ولكسمبورغ ثم جُل, هو.</li> - <li>ان وبحلول لمحاكم الخارجية ومن.</li> - <li>بها بل العظمى إيطاليا الساحلية.</li> - <li>مدن قد وبحلول وأكثرها الدنمارك. + <li>هذه قائمة عناصر.</li> + <li>بالرغم من أنها مصممة كي لا تظهر كذلك.</li> + <li>إلا أنها مجهزة كـ قائمة خلف الكواليس</li> + <li>هذا التصميم ينطبق فقد على القائمة الرئيسية</li> + <li>القوائم الفرعية <ul> - <li>به، المشترك إتفاقية.</li> - <li>لإعادة الواقعة و.</li> - <li>وترك وانتهاءً ضرب.</li> - <li>الشتاء العالم، أي.</li> + <li>لا تتأثر بهذا التصميم</li> + <li>فهي تظهر عليها علامات الترقيم</li> + <li>وتحتوي على مساحة فارغة بجوارها</li> </ul> </li> - <li>ودول يتسنّى بتطويق لمّ في.</li> - <li>بعض و مرمى يتسنّى, في.</li> - <li>أسيا اعلان ومحاولة عل انه.</li> + <li>قد يكون هذا التصميم مفيدًا في بعض الأحيان.</li> </ul> {{< /example >}} {{< example show_markup="false" >}} <ul class="list-inline"> - <li class="list-inline-item">لمّ مع.</li> - <li class="list-inline-item">أم دون.</li> - <li class="list-inline-item">ذات بل.</li> + <li class="list-inline-item">هذا عنصر في قائمة.</li> + <li class="list-inline-item">وهذا أيضًا.</li> + <li class="list-inline-item">لكنهم يظهرون متجاورين.</li> </ul> {{< /example >}} </div> </article> <article class="my-3" id="images"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>صور</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/images" >}}">توثيق</a> + <h3>الصور</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/images" >}}">دليل الإستخدام</a> </div> <div> @@ -170,8 +167,8 @@ direction: rtl </article> <article class="my-3" id="tables"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>جدول</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/tables" >}}">توثيق</a> + <h3>الجداول</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/tables" >}}">دليل الإستخدام</a> </div> <div> @@ -182,7 +179,7 @@ direction: rtl <th scope="col">#</th> <th scope="col">الاسم الاول</th> <th scope="col">الكنية</th> - <th scope="col">اسم مستعار</th> + <th scope="col">الاسم المستعار</th> </tr> </thead> <tbody> @@ -190,18 +187,18 @@ direction: rtl <th scope="row">1</th> <td>Mark</td> <td>Otto</td> - <td>@mdo</td> + <td><bdo lang="en" dir="ltr">@mdo</bdo></td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> - <td>@fat</td> + <td><bdo lang="en" dir="ltr">@fat</bdo></td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> - <td>@twitter</td> + <td><bdo lang="en" dir="ltr">@twitter</bdo></td> </tr> </tbody> </table> @@ -214,7 +211,7 @@ direction: rtl <th scope="col">#</th> <th scope="col">الاسم الاول</th> <th scope="col">الكنية</th> - <th scope="col">اسم مستعار</th> + <th scope="col">الاسم المستعار</th> </tr> </thead> <tbody> @@ -222,18 +219,18 @@ direction: rtl <th scope="row">1</th> <td>Mark</td> <td>Otto</td> - <td>@mdo</td> + <td><bdo lang="en" dir="ltr">@mdo</bdo></td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> - <td>@fat</td> + <td><bdo lang="en" dir="ltr">@fat</bdo></td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> - <td>@twitter</td> + <td><bdo lang="en" dir="ltr">@twitter</bdo></td> </tr> </tbody> </table> @@ -251,15 +248,15 @@ direction: rtl <tbody> <tr> <th scope="row">Default</th> - <td>زنزانة</td> - <td>زنزانة</td> + <td>خلية</td> + <td>خلية</td> </tr> {{< table.inline >}} {{- range (index $.Site.Data "theme-colors") }} <tr class="table-{{ .name }}"> <th scope="row">{{ .name | title }}</th> - <td>زنزانة</td> - <td>زنزانة</td> + <td>خلية</td> + <td>خلية</td> </tr> {{- end -}} {{< /table.inline >}} @@ -274,7 +271,7 @@ direction: rtl <th scope="col">#</th> <th scope="col">الاسم الاول</th> <th scope="col">الكنية</th> - <th scope="col">اسم مستعار</th> + <th scope="col">الاسم المستعار</th> </tr> </thead> <tbody> @@ -282,18 +279,18 @@ direction: rtl <th scope="row">1</th> <td>Mark</td> <td>Otto</td> - <td>@mdo</td> + <td><bdo lang="en" dir="ltr">@mdo</bdo></td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> - <td>@fat</td> + <td><bdo lang="en" dir="ltr">@fat</bdo></td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> - <td>@twitter</td> + <td><bdo lang="en" dir="ltr">@twitter</bdo></td> </tr> </tbody> </table> @@ -302,8 +299,8 @@ direction: rtl </article> <article class="my-3" id="figures"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>رقم</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/figures" >}}">توثيق</a> + <h3>النماذج البيانية</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/figures" >}}">دليل الإستخدام</a> </div> <div> @@ -318,39 +315,39 @@ direction: rtl </section> <section id="forms"> - <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">نماذج</h2> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">النماذج</h2> <article class="my-3" id="overview"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> <h3>نظرة عامة</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}">توثيق</a> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} <form> <div class="mb-3"> - <label for="exampleInputEmail1" class="form-label">عنوان البريد الالكترونى</label> + <label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> - <div id="emailHelp" class="form-text">لن نشارك بريدك الإلكتروني مع أي شخص آخر.</div> + <div id="emailHelp" class="form-text">لن نقوم بمشاركة بريدك الإلكتروني مع أي شخص آخر.</div> </div> <div class="mb-3"> - <label for="exampleInputPassword1" class="form-label">كلمه السر</label> + <label for="exampleInputPassword1" class="form-label">كلمة السر</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> - <label class="form-check-label" for="exampleCheck1">تفقدني</label> + <label class="form-check-label" for="exampleCheck1">اخترني</label> </div> <fieldset class="mb-3"> - <legend>أزرار الراديو</legend> + <legend>أزرار الاختيار الأحادي</legend> <div class="form-check"> - <input type="radio" name="radios" class="form-check-input" id="exampleRadio1"> - <label class="form-check-label" for="exampleRadio1">الراديو الافتراضي</label> + <input type="radio" name="radios" class="form-check-input" id="exampleRadio1" checked> + <label class="form-check-label" for="exampleRadio1">الخيار الافتراضي</label> </div> <div class="mb-3 form-check"> <input type="radio" name="radios" class="form-check-input" id="exampleRadio2"> - <label class="form-check-label" for="exampleRadio2">راديو آخر</label> + <label class="form-check-label" for="exampleRadio2">خيار آخر</label> </div> </fieldset> <div class="mb-3"> @@ -359,10 +356,10 @@ direction: rtl </div> <div class="mb-3 form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> - <label class="form-check-label" for="flexSwitchCheckChecked">تم تحديد إدخال خانة الاختيار التبديل</label> + <label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label> </div> <div class="mb-3"> - <label for="customRange3" class="form-label">نطاق المثال</label> + <label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label> <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> </div> <button type="submit" class="btn btn-primary">إرسال</button> @@ -372,8 +369,8 @@ direction: rtl </article> <article class="my-3" id="disabled-forms"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>أشكال المعطلين</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}#disabled-forms">توثيق</a> + <h3>الحقول المعطلة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}#disabled-forms">دليل الإستخدام</a> </div> <div> @@ -381,44 +378,44 @@ direction: rtl <form> <fieldset disabled aria-label="مثال على مجموعة الحقول المعطلة"> <div class="mb-3"> - <label for="disabledTextInput" class="form-label">إدخال معطل</label> - <input type="text" id="disabledTextInput" class="form-control" placeholder="إدخال معطل"> + <label for="disabledTextInput" class="form-label">حقل إدخال معطل</label> + <input type="text" id="disabledTextInput" class="form-control" placeholder="حقل إدخال معطل"> </div> <div class="mb-3"> - <label for="disabledSelect" class="form-label">حدد القائمة معطل</label> + <label for="disabledSelect" class="form-label">قائمة اختيار معطلة</label> <select id="disabledSelect" class="form-select"> - <option>حدد معطل</option> + <option>خيار معطل</option> </select> </div> <div class="mb-3"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled> <label class="form-check-label" for="disabledFieldsetCheck"> - لا يمكن التحقق من هذا + زر اختيار معطل </label> </div> </div> <fieldset class="mb-3"> - <legend>أزرار اختيار المعوقين</legend> + <legend>أزرار اختيار أحادي معطلين</legend> <div class="form-check"> <input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled> - <label class="form-check-label" for="disabledRadio1">راديو معطل</label> + <label class="form-check-label" for="disabledRadio1">خيار معطل</label> </div> <div class="mb-3 form-check"> <input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled> - <label class="form-check-label" for="disabledRadio2">راديو آخر</label> + <label class="form-check-label" for="disabledRadio2">خيار آخر معطل</label> </div> </fieldset> <div class="mb-3"> - <label class="form-label" for="disabledCustomFile">تحميل معطل</label> + <label class="form-label" for="disabledCustomFile">رفع معطل</label> <input type="file" class="form-control" id="disabledCustomFile" disabled> </div> <div class="mb-3 form-check form-switch"> <input class="form-check-input" type="checkbox" id="disabledSwitchCheckChecked" checked disabled> - <label class="form-check-label" for="disabledSwitchCheckChecked">تم تعطيل إدخال خانة الاختيار التبديل</label> + <label class="form-check-label" for="disabledSwitchCheckChecked">زر معطل على شكل مفتاح اختيار.</label> </div> <div class="mb-3"> - <label for="disabledRange" class="form-label">نطاق المعوقين</label> + <label for="disabledRange" class="form-label">حقل اختيار نطاقي معطل</label> <input type="range" class="form-range" min="0" max="5" step="0.5" id="disabledRange"> </div> <button type="submit" class="btn btn-primary">إرسال</button> @@ -429,18 +426,18 @@ direction: rtl </article> <article class="my-3" id="sizing"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>تحجيم</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/form-control" >}}#sizing">توثيق</a> + <h3>الأحجام</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/form-control" >}}#sizing">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} <div class="mb-3"> - <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg مثال"> + <input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال"> </div> <div class="mb-3"> <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg مثال"> - <option selected>افتح قائمة التحديد هذه</option> + <option selected>افتح قائمة الاختيار هذه</option> <option value="1">واحد</option> <option value="2">اثنان</option> <option value="3">ثلاثة</option> @@ -453,11 +450,11 @@ direction: rtl {{< example show_markup="false" >}} <div class="mb-3"> - <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm مثال"> + <input class="form-control form-control-sm" type="text" placeholder="حقل إدخال صغير" aria-label=".form-control-sm مثال"> </div> <div class="mb-3"> <select class="form-select form-select-sm" aria-label=".form-select-sm مثال"> - <option selected>افتح قائمة التحديد هذه</option> + <option selected>افتح قائمة الاختيار هذه</option> <option value="1">واحد</option> <option value="2">اثنان</option> <option value="3">ثلاثة</option> @@ -472,28 +469,28 @@ direction: rtl <article class="my-3" id="input-group"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> <h3>مجموعة الإدخال</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/input-group" >}}">توثيق</a> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/input-group" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} <div class="input-group mb-3"> - <span class="input-group-text" id="basic-addon1">@</span> - <input type="text" class="form-control" placeholder="Username" aria-label="اسم المستخدم" aria-describedby="basic-addon1"> + <span class="input-group-text" id="basic-addon1">أنا اسمي</span> + <input type="text" class="form-control" placeholder="فلان الفلاني" aria-label="الاسم" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> - <input type="text" class="form-control" placeholder="Recipient's username" aria-label="اسم مستخدم المستلم" aria-describedby="basic-addon2"> - <span class="input-group-text" id="basic-addon2">@example.com</span> + <input type="text" class="form-control" placeholder="أنا أحب الكعك والقهوة" aria-label="الطعام المفضل" aria-describedby="basic-addon2"> + <span class="input-group-text" id="basic-addon2">وغيرها</span> </div> - <label for="basic-url" class="form-label">عنوان URL المخصص الخاص بك</label> + <label for="basic-url" class="form-label">عنوان حسابك الشخصي</label> <div class="input-group mb-3"> - <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> + <span class="input-group-text" id="basic-addon3"><bdo lang="en" dir="ltr">https://example.com/users/</bdo></span> </div> <div class="input-group mb-3"> - <span class="input-group-text">$</span> + <span class="input-group-text"><bdo lang="en" dir="ltr">.00</bdo></span> <input type="text" class="form-control" aria-label="المبلغ (لأقرب دولار)"> - <span class="input-group-text">.00</span> + <span class="input-group-text">$</span> </div> <div class="input-group"> <span class="input-group-text">مع textarea</span> @@ -504,8 +501,8 @@ direction: rtl </article> <article class="my-3" id="floating-labels"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>تسميات عائمة</h3> - <a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">Documentation</a> + <h3>الحقول ذوي العناوين العائمة</h3> + <a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">دليل الإستخدام</a> </div> <div> @@ -513,11 +510,11 @@ direction: rtl <form> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]"> - <label for="floatingInput">عنوان بريد الكتروني</label> + <label for="floatingInput">البريد الالكتروني</label> </div> <div class="form-floating"> - <input type="password" class="form-control" id="floatingPassword" placeholder="كلمه السر"> - <label for="floatingPassword">كلمه السر</label> + <input type="password" class="form-control" id="floatingPassword" placeholder="كلمة السر"> + <label for="floatingPassword">كلمة السر</label> </div> </form> {{< /example >}} @@ -526,7 +523,7 @@ direction: rtl <article class="my-3" id="validation"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> <h3>التحقق</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/validation" >}}">توثيق</a> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/validation" >}}">دليل الإستخدام</a> </div> <div> @@ -536,23 +533,23 @@ direction: rtl <label for="validationServer01" class="form-label">الاسم الاول</label> <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required> <div class="valid-feedback"> - تبدو جيدا! + يبدو صحيحًا! </div> </div> <div class="col-md-4"> <label for="validationServer02" class="form-label">الكنية</label> <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required> <div class="valid-feedback"> - تبدو جيدا! + يبدو صحيحًا! </div> </div> <div class="col-md-4"> <label for="validationServerUsername" class="form-label">اسم المستخدم</label> <div class="input-group has-validation"> - <span class="input-group-text" id="inputGroupPrepend3">@</span> <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required> + <span class="input-group-text" id="inputGroupPrepend3">@</span> <div class="invalid-feedback"> - يرجى اختيار اسم المستخدم. + يرجى اختيار اسم مستخدم. </div> </div> </div> @@ -560,39 +557,39 @@ direction: rtl <label for="validationServer03" class="form-label">مدينة</label> <input type="text" class="form-control is-invalid" id="validationServer03" required> <div class="invalid-feedback"> - الرجاء إدخال مدينة صالحة. + يرجى إدخال مدينة صحيحة. </div> </div> <div class="col-md-3"> <label for="validationServer04" class="form-label">حالة</label> <select class="form-select is-invalid" id="validationServer04" required> - <option selected disabled value="">أختر...</option> + <option selected disabled value="">اختر...</option> <option>...</option> </select> <div class="invalid-feedback"> - الرجاء تحديد ولاية صالحة. + يرجى اختيار ولاية صحيحة. </div> </div> <div class="col-md-3"> <label for="validationServer05" class="form-label">الرمز البريدي</label> <input type="text" class="form-control is-invalid" id="validationServer05" required> <div class="invalid-feedback"> - الرجاء تقديم رمز بريدي صالح. + يرجى إدخال رمز بريدي صحيح. </div> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required> <label class="form-check-label" for="invalidCheck3"> - وافق على الشروط والأحكام + أوافق على الشروط والأحكام </label> <div class="invalid-feedback"> - يجب أن توافق قبل التقديم. + تجب الموافقة قبل إرسال النموذج. </div> </div> </div> <div class="col-12"> - <button class="btn btn-primary" type="submit">تقديم النموذج</button> + <button class="btn btn-primary" type="submit">إرسال النموذج</button> </div> </form> {{< /example >}} @@ -601,12 +598,12 @@ direction: rtl </section> <section id="components"> - <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">مكونات</h2> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">العناصر</h2> <article class="my-3" id="accordion"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>انهيارالأكورديون</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/accordion" >}}">توثيق</a> + <h3>المطوية</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/accordion" >}}">دليل الإستخدام</a> </div> <div> @@ -615,36 +612,36 @@ direction: rtl <div class="accordion-item"> <h4 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - عنصر الأكورديون #1 + عنصر المطوية الأول </button> </h4> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> - أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة. + <strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. </div> </div> </div> <div class="accordion-item"> <h4 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> - عنصر الأكورديون #2 + عنصر المطوية الثاني </button> </h4> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> - أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة. + <strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. </div> </div> </div> <div class="accordion-item"> <h4 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> - عنصر الأكورديون #3 + عنصر المطوية الثالث </button> </h4> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> - أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة. + <strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. </div> </div> </div> @@ -654,8 +651,8 @@ direction: rtl </article> <article class="my-3" id="alerts"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>إنذار</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/alerts" >}}">توثيق</a> + <h3>الإنذارات</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/alerts" >}}">دليل الإستخدام</a> </div> <div> @@ -681,20 +678,20 @@ direction: rtl </article> <article class="my-3" id="badge"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>شارة</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/badge" >}}">توثيق</a> + <h3>الشارة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/badge" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} - <p class="h1">عنوان المثال <span class="badge bg-primary">جديد</span></p> - <p class="h2">عنوان المثال <span class="badge bg-secondary">جديد</span></p> - <p class="h3">عنوان المثال <span class="badge bg-success">جديد</span></p> - <p class="h4">عنوان المثال <span class="badge bg-danger">جديد</span></p> - <p class="h5">عنوان المثال <span class="badge bg-warning text-dark">جديد</span></p> - <p class="h6">عنوان المثال <span class="badge bg-info text-dark">جديد</span></p> - <p class="h6">عنوان المثال <span class="badge bg-light text-dark">جديد</span></p> - <p class="h6">عنوان المثال <span class="badge bg-dark">جديد</span></p> + <p class="h1">مثال على عنوان <span class="badge bg-primary">جديد</span></p> + <p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p> + <p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p> + <p class="h4">مثال على عنوان <span class="badge bg-danger">جديد</span></p> + <p class="h5">مثال على عنوان <span class="badge bg-warning text-dark">جديد</span></p> + <p class="h6">مثال على عنوان <span class="badge bg-info text-dark">جديد</span></p> + <p class="h6">مثال على عنوان <span class="badge bg-light text-dark">جديد</span></p> + <p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p> {{< /example >}} {{< example show_markup="false" >}} @@ -707,16 +704,16 @@ direction: rtl </article> <article class="my-3" id="breadcrumb"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>مسار التنقل</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/breadcrumb" >}}">توثيق</a> + <h3>مسار التنقل التفصيلي (فتات الخبز)</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/breadcrumb" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} - <nav aria-label="مسار الخبز"> + <nav aria-label="فتات الخبز"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">الصفحة الرئيسية</a></li> - <li class="breadcrumb-item"><a href="#">مكتبة</a></li> + <li class="breadcrumb-item"><a href="#">المكتبة</a></li> <li class="breadcrumb-item active" aria-current="page">البيانات</li> </ol> </nav> @@ -725,8 +722,8 @@ direction: rtl </article> <article class="my-3" id="buttons"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>أزرار</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/buttons" >}}">توثيق</a> + <h3>الأزرار</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/buttons" >}}">دليل الإستخدام</a> </div> <div> @@ -737,7 +734,7 @@ direction: rtl {{- end -}} {{< /buttons.inline >}} - <button type="button" class="btn btn-link">حلقة الوصل</button> + <button type="button" class="btn btn-link">رابط</button> {{< /example >}} {{< example show_markup="false" >}} @@ -758,12 +755,12 @@ direction: rtl <article class="my-3" id="button-group"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> <h3>مجموعة الأزرار</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/button-group" >}}">توثيق</a> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/button-group" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} - <div class="btn-toolbar" role="toolbar" aria-label="شريط الأدوات مع مجموعات الأزرار"> + <div class="btn-toolbar" role="toolbar" aria-label="شريط أدوات مع مجموعات أزرار"> <div class="btn-group me-2" role="group" aria-label="المجموعة الأولى"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> @@ -784,8 +781,8 @@ direction: rtl </article> <article class="my-3" id="card"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>بطاقة</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/card" >}}">توثيق</a> + <h3>البطاقة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/card" >}}">دليل الإستخدام</a> </div> <div> @@ -812,7 +809,7 @@ direction: rtl <a href="#" class="btn btn-primary">اذهب لمكان ما</a> </div> <div class="card-footer text-muted"> - 2 منذ أيام + منذ يومان </div> </div> </div> @@ -823,9 +820,9 @@ direction: rtl <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> </div> <ul class="list-group list-group-flush"> - <li class="list-group-item">أسر كل أراض.</li> - <li class="list-group-item">شرسة مشارف واستمرت.</li> - <li class="list-group-item">مكن إذ كانتا.</li> + <li class="list-group-item">عنصر</li> + <li class="list-group-item">عنصر آخر</li> + <li class="list-group-item">عنصر ثالث</li> </ul> <div class="card-body"> <a href="#" class="card-link">رابط البطاقة</a> @@ -842,7 +839,7 @@ direction: rtl <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">عنوان البطاقة</h5> - <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> + <p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p> </div> </div> @@ -855,57 +852,57 @@ direction: rtl </article> <article class="my-3" id="carousel"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>شرائح عرض</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/carousel" >}}">توثيق</a> + <h3>شرائح العرض</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/carousel" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="الشريحة الأولى"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="الشريحة الثانية"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="الشريحة الثالثة"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" >}} <div class="carousel-caption d-none d-md-block"> - <h5>تسمية الشريحة الأولى</h5> - <p>إستعمل تحرّكت المتحدة كان ما. لم وفي الشرقي المتاخمة تعد.</p> + <h5>عنوان الشريحة الأولى</h5> + <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p> </div> </div> <div class="carousel-item"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="الشريحة الثانية" >}} <div class="carousel-caption d-none d-md-block"> - <h5>تسمية الشريحة الثانية</h5> - <p>أجزاء الخاسرة التّحول ٣٠ انه, وصل أن عالمية التحالف التجارية.</p> + <h5>عنوان الشريحة الثانية</h5> + <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p> </div> </div> <div class="carousel-item"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="الشريحة الثالثة" >}} <div class="carousel-caption d-none d-md-block"> - <h5>تسمية الشريحة الثالثة</h5> - <p>ان فقد ترتيب والديون. وتتحمّل الحيلولة أخذ قد. ضرب بل.</p> + <h5>عنوان الشريحة الثالثة</h5> + <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p> </div> </div> </div> - <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">السابق</span> - </a> - <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> - <span class="visually-hidden">التالى</span> - </a> + <span class="visually-hidden">التالي</span> + </button> </div> {{< /example >}} </div> </article> <article class="my-3" id="dropdowns"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>هبوط قطرة</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/dropdowns" >}}">توثيق</a> + <h3>القوائم المنسدلة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/dropdowns" >}}">دليل الإستخدام</a> </div> <div> @@ -916,7 +913,7 @@ direction: rtl زر القائمة المنسدلة </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM"> - <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> @@ -929,7 +926,7 @@ direction: rtl زر القائمة المنسدلة </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> - <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> @@ -942,7 +939,7 @@ direction: rtl زر القائمة المنسدلة </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG"> - <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> @@ -1026,10 +1023,10 @@ direction: rtl <div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <div class="dropend"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - زر Dropend + زر القائمة المنسدلة لليسار </button> <ul class="dropdown-menu" aria-labelledby="dropendMenuButton"> - <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> @@ -1039,10 +1036,10 @@ direction: rtl </div> <div class="dropup"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - زر Dropup + زر القائمة المنسدلة للأعلى </button> <ul class="dropdown-menu" aria-labelledby="dropupMenuButton"> - <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> @@ -1052,10 +1049,10 @@ direction: rtl </div> <div class="dropstart"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - زر Dropstart + زر القائمة المنسدلة لليمين </button> <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton"> - <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> @@ -1070,10 +1067,10 @@ direction: rtl <div class="btn-group"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - قائمة بمحاذاة النهاية + قائمة منسدلة بمحاذاة نهاية الزر </button> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton"> - <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">عمل</a></li> <li><a class="dropdown-item" href="#">عمل آخر</a></li> <li><hr class="dropdown-divider"></li> @@ -1086,34 +1083,34 @@ direction: rtl </article> <article class="my-3" id="list-group"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>مجموعة القوائم</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/list-group" >}}">توثيق</a> + <h3>مجموعة العناصر</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/list-group" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} <ul class="list-group"> - <li class="list-group-item active" aria-current="true">الفرنسية الأثناء، أي.</li> - <li class="list-group-item disabled" aria-disabled="true">كلّ في تعداد.</li> - <li class="list-group-item">وتم الأخذ أساسي.</li> - <li class="list-group-item">لدحر بشرية ابتدعها.</li> - <li class="list-group-item">لكون أسيا ولاتّساع.</li> + <li class="list-group-item disabled" aria-disabled="true">عنصر معطل</li> + <li class="list-group-item">عنصر ثاني</li> + <li class="list-group-item">عنصر ثالث</li> + <li class="list-group-item">عنصر رابع</li> + <li class="list-group-item">وعنصر خامس أيضًا</li> </ul> {{< /example >}} {{< example show_markup="false" >}} <ul class="list-group list-group-flush"> - <li class="list-group-item">الفرنسية الأثناء، أي.</li> - <li class="list-group-item">كلّ في تعداد.</li> - <li class="list-group-item">وتم الأخذ أساسي.</li> - <li class="list-group-item">لدحر بشرية ابتدعها.</li> - <li class="list-group-item">لكون أسيا ولاتّساع.</li> + <li class="list-group-item">عنصر</li> + <li class="list-group-item">عنصر ثاني</li> + <li class="list-group-item">عنصر ثالث</li> + <li class="list-group-item">عنصر رابع</li> + <li class="list-group-item">وعنصر خامس أيضًا</li> </ul> {{< /example >}} {{< example show_markup="false" >}} <div class="list-group"> - <a href="#" class="list-group-item list-group-item-action">كلّ في تعداد.</a> + <a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة default بسيط</a> {{< list.inline >}} {{- range (index $.Site.Data "theme-colors") }} <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">عنصر مجموعة قائمة {{ .name }} بسيط</a> @@ -1125,24 +1122,24 @@ direction: rtl </article> <article class="my-3" id="modal"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>مشروط</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/modal" >}}">توثيق</a> + <h3>الصندوق العائم</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/modal" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} <div class="d-flex justify-content-between flex-wrap"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault"> - إطلاق نموذج تجريبي + إطلاق صندوق عائم تجريبي </button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive"> - إطلاق مشروط خلفية ثابتة + إطلاق صندوق عائم عالق </button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable"> - مشروط قابل للتمرير تتمركز عموديًا + صندوق عائم متنصف عاموديًا وقابل للتمرير </button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen"> - شاشة كاملة + صندوق عائم يملأ الشاشة </button> </div> {{< /example >}} @@ -1151,15 +1148,15 @@ direction: rtl <article class="my-3" id="navs"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> <h3>التنقل</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navs-tabs" >}}">توثيق</a> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navs-tabs" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} <nav class="nav"> - <a class="nav-link active" aria-current="page" href="#">نشيط</a> - <a class="nav-link" href="#">حلقة الوصل</a> - <a class="nav-link" href="#">حلقة الوصل</a> + <a class="nav-link active" aria-current="page" href="#">نشط</a> + <a class="nav-link" href="#">رابط</a> + <a class="nav-link" href="#">رابط</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معطل</a> </nav> {{< /example >}} @@ -1167,20 +1164,20 @@ direction: rtl {{< example show_markup="false" >}} <nav> <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</a> - <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</a> - <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل</a> + <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</button> + <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</button> + <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل بنا</button> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> - <p class="px-3">هو أسيا والإتحاد أضف, فشكّل الإتفاقية ذلك في. اكتوبر والعتاد و لمّ, وفي أم ٢٠٠٤ وإقامة الانجليزية. وجزر المضي التقليدي ان أما. كلا لإنعدام استراليا، بـ, ٣٠ أضف بوابة أوزار مساعدة. ما السيطرة الأرضية دار, هو بال الساحة الموسوعة.</p> + <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الصفحة الرئيسية. إذن، أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، لإخراجنا من هذه الورطة، لا سيّما أنها نفسها، مقرونة بالافتقار إلى البصيرة، هي التي أودت بنا إلى هذا التبدُّل المناخي في الدرجة الأولى.</p> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> - <p class="px-3">بفرض البشريةً ذلك أي, ٣٠ تنفّس ليركز الإطلاق جُل. يكن ألمّ أمام في. بفرض الصينية الخاسرة هو لها. ومن معاملة وحلفاؤها كل. بلا يعادل العظمى مع. بـ بحث وجزر الصعداء الأعمال, لكون نتيجة هذا من. مع ثانية أوروبا بحث, كلّ بتطويق واستمرت أن.</p> + <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الملف الشخصي. معظم البشر في بلدان العالَم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظًا بالسكان في العالم.</p> </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> - <p class="px-3">كلا تم وزارة الأسيوي, جهة خطّة سنغافورة إذ. فقد أن قبضتهم شواطيء, مسارح أوزار إبّان كلّ أي. أحكم استمرار مدن تم, الى إتفاقية الإنذار، ان, ما هذه أراض وصغار استمرار. دنو هو تجهيز أصقاع الأعمال. و وأزيز إيطاليا ومن, بـ يبق السفن أدوات, اتفاق شواطيء الأوروبي ذلك عن.</p> + <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.</p> </div> </div> {{< /example >}} @@ -1188,13 +1185,13 @@ direction: rtl {{< example show_markup="false" >}} <ul class="nav nav-pills"> <li class="nav-item"> - <a class="nav-link active" aria-current="page" href="#">نشيط</a> + <a class="nav-link active" aria-current="page" href="#">نشط</a> </li> <li class="nav-item"> - <a class="nav-link" href="#">حلقة الوصل</a> + <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> - <a class="nav-link" href="#">حلقة الوصل</a> + <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معطل</a> @@ -1206,7 +1203,7 @@ direction: rtl <article class="my-3" id="navbar"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> <h3>شريط التنقل</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navbar" >}}">توثيق</a> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navbar" >}}">دليل الإستخدام</a> </div> <div> @@ -1226,11 +1223,11 @@ direction: rtl <a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a> </li> <li class="nav-item"> - <a class="nav-link" href="#">حلقة الوصل</a> + <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> - اسقاط + قائمة منسدلة </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">عمل</a></li> @@ -1265,11 +1262,11 @@ direction: rtl <a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a> </li> <li class="nav-item"> - <a class="nav-link" href="#">حلقة الوصل</a> + <a class="nav-link" href="#">رابط</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false"> - اسقاط + قائمة منسدلة </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown2"> <li><a class="dropdown-item" href="#">عمل</a></li> @@ -1295,7 +1292,7 @@ direction: rtl <article class="my-3" id="pagination"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> <h3>ترقيم الصفحات</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/pagination" >}}">توثيق</a> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/pagination" >}}">دليل الإستخدام</a> </div> <div> @@ -1304,7 +1301,7 @@ direction: rtl <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> - <a class="page-link" href="#">2 <span class="visually-hidden">(تيار)</span></a> + <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> @@ -1323,7 +1320,7 @@ direction: rtl <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> - <a class="page-link" href="#" aria-label="التالى"> + <a class="page-link" href="#" aria-label="التالي"> <span aria-hidden="true">»</span> </a> </li> @@ -1339,7 +1336,7 @@ direction: rtl </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> - <a class="page-link" href="#">2 <span class="visually-hidden">(تيار)</span></a> + <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> @@ -1352,27 +1349,29 @@ direction: rtl </article> <article class="my-3" id="popovers"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>بوبوفيرس</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/popovers" >}}">توثيق</a> + <h3>الصناديق المنبثقة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/popovers" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" >}} - <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان Popover" data-bs-content="وإليك بعض المحتويات الرائعة. إنه ممتع للغاية. حق؟">انقر لتبديل المنبثقة</button> + <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان الصندوق المنبثق" data-bs-content="وإليك بعض المحتويات الرائعة. إنه آسر للغاية. أليس كذلك؟"> + انقر لعرض/إخفاء الصندوق المنبثق + </button> {{< /example >}} {{< example show_markup="false" >}} - <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق."> - انبثاق في الأعلى + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!"> + انبثاق إلى الأعلى </button> - <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق."> - popover في النهاية + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!"> + انبثاق إلى اليسار </button> - <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق."> - انبثاق في الأسفل + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!"> + انبثاق إلى الأسفل </button> - <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق."> - popover عند البدء + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!"> + انبثاق إلى اليمين </button> {{< /example >}} </div> @@ -1380,7 +1379,7 @@ direction: rtl <article class="my-3" id="progress"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> <h3>شريط التقدم</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/progress" >}}">توثيق</a> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/progress" >}}">دليل الإستخدام</a> </div> <div> @@ -1412,8 +1411,8 @@ direction: rtl </article> <article class="my-3" id="scrollspy"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>مخطوطة</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/scrollspy" >}}">توثيق</a> + <h3>المخطوطة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/scrollspy" >}}">دليل الإستخدام</a> </div> <div> @@ -1422,13 +1421,13 @@ direction: rtl <a class="navbar-brand" href="#">شريط التنقل</a> <ul class="nav nav-pills"> <li class="nav-item"> - <a class="nav-link" href="#fat">@fat</a> + <a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a> </li> <li class="nav-item"> - <a class="nav-link" href="#mdo">@mdo</a> + <a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">اسقاط</a> + <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#one">واحد</a></li> <li><a class="dropdown-item" href="#two">اثنان</a></li> @@ -1439,25 +1438,25 @@ direction: rtl </ul> </nav> <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example"> - <h4 id="fat">@fat</h4> - <p>إنطلاق العالمي ما هذه, لم فسقط عُقر الهادي جُل. بعد ٣٠ شرسة النزاع اليميني. عن بحث اتّجة الصينية, مع وأزيز الفرنسية مدن, عدد مرجع العالمية لبلجيكا، أن. طوكيو أعلنت حيث بل. الأخذ واندونيسيا، إذ ذلك, به، قد معاملة وقوعها،. ولم التي إبّان بالفشل ٣٠, جنوب مشاركة حيث أم.</p> - <h4 id="mdo">@mdo</h4> - <p>بل الشتاء، بمحاولة جُل, فعل ببعض الأراضي مع. أما لم الأولى تكاليف, في بحشد جنوب الدول دون. في لمحاكم الإنزال تلك, أي بين الصفحة النزاع. عن دول فسقط احداث. وباءت التقليدي أم حيث, دنو ماذا واستمرت بل, غير ٣٠ بقعة هناك وفنلندا.</p> + <h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4> + <p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p> + <h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4> + <p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p> <h4 id="one">واحد</h4> - <p>وزارة العاصمة الأوربيين حتى بـ. إذ دول مقاطعة بالرغم الأوروبي, كلّ هو نهاية لبولندا،, إذ مما ماشاء إتفاقية. إذ جهة تسبب وانتهاءً, تم تعد الذود أعلنت الأمريكية. ضرب نقطة حالية أن, ثم مارد للصين جديداً بين, بعد بل العظمى ابتدعها والفرنسي. ثم جعل يذكر ووصف, أثره، وعُرفت هو كان, بها قُدُماً البولندي ان. العالمي الجديدة، الفرنسية عرض كل.</p> + <p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p> <h4 id="two">اثنان</h4> - <p>إذ قِبل أعلنت عرض. ما به، هاربر قتيل، الإكتفاء, أوزار المنتصر لبولندا، بلا بـ. وبدون بزمام وبحلول جُل أن, مكن أي لعدم مشارف. تم أخر دفّة وصغار وبالتحديد،, وقد اعلان العالم واشتدّت عن. أي حين الأولية لبولندا،, كما مايو وحتّى فرنسا ثم.</p> + <p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p> <h4 id="three">ثلاثة</h4> - <p>لم هذا تسمّى إعادة مليون, ان يذكر فرنسا كما. إذ الدول الشتوية وأكثرها مدن. عرض بفرض بتحدّي الأوضاع تم. أحدث شاسعة تكبّد أخر من, ٣٠ حتى الخاطفة العالمية, هناك عالمية وقد لم. بشرية إتفاقية عل جهة, كل هُزم كانتا ضرب.</p> - <p>أن كلّ صفحة إعادة الأمريكية. بحث تشكيل ويعزى وتزويده بل. وحتّى وإعلان أن دار, من مكّن الصينية المشتّتون مكن, وبحلول للمجهود الأمريكي أن بحق. أم جهة وجهان الأرض.</p> + <p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p> + <p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p> </div> </div> </div> </article> <article class="my-3" id="spinners"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>المغازل</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/spinners" >}}">توثيق</a> + <h3>الدوائر المتحركة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/spinners" >}}">دليل الإستخدام</a> </div> <div> @@ -1484,8 +1483,8 @@ direction: rtl </article> <article class="my-3" id="toasts"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>نخب</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/toasts" >}}">توثيق</a> + <h3>الإشعارات</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/toasts" >}}">دليل الإستخدام</a> </div> <div> @@ -1498,7 +1497,7 @@ direction: rtl <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button> </div> <div class="toast-body"> - مرحبا بالعالم! هذه رسالة نخب. + مرحبا بالعالم! هذه رسالة إشعار. </div> </div> {{< /example >}} @@ -1506,16 +1505,16 @@ direction: rtl </article> <article class="mt-3 mb-5 pb-5" id="tooltips"> <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> - <h3>تلميحات الأدوات</h3> - <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/tooltips" >}}">توثيق</a> + <h3>التلميحات</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/tooltips" >}}">دليل الإستخدام</a> </div> <div> {{< example show_markup="false" class="tooltip-demo" >}} - <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح في الأعلى">تلميح في الأعلى</button> - <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح في النهاية">تلميح في النهاية</button> - <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح في الأسفل">تلميح في الأسفل</button> - <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح عند البدء">تلميح عند البدء</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح يظهر في الأعلى">تلميح يظهر في الأعلى</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح يظهر على اليسار">تلميح يظهر على اليسار</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح يظهر في الأسفل">تلميح يظهر في الأسفل</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح يظهر على اليمين">تلميح يظهر على اليمين</button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>تلميح</em> <u>مع</u> <b>HTML</b>">تلميح مع HTML</button> {{< /example >}} </div> @@ -1527,15 +1526,15 @@ direction: rtl <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLabel">عنوان مشروط</h5> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button> + <h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button> - <button type="button" class="btn btn-primary">احفظ التغييرات</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> + <button type="button" class="btn btn-primary">حفظ التغيرات</button> </div> </div> </div> @@ -1544,36 +1543,38 @@ direction: rtl <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="staticBackdropLiveLabel">عنوان مشروط</h5> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button> + <h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> - <p>لن أغلق إذا نقرت خارج لي. لا تحاول حتى الضغط على مفتاح الهروب.</p> + <p>لن أغلق إذا نقرت خارجي. لا تحاول حتى الضغط على مفتاح الهروب.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button> - <button type="button" class="btn btn-primary">فهمت</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> + <button type="button" class="btn btn-primary">حسنًا</button> </div> </div> </div> </div> <div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true"> - <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable"> + <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان مشروط</h5> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button> + <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> - <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p> - <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p> - <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p> - <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p> - <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p> + <p>نص لتوضيح عمل الصندوق العائم المتنصّف عاموديًا القابل للتمرير</p> + <p>في هذه الحالة، هذا الصندوق يحتوي على محتوى أكثر قليلًا، ولذلك لتوضيح كيف يمكن إضافة خاصية الإنتصاف العامودي لصندوق عائم قابل للتمرير.</p> + <p>يعتبر كوب أو فنجان القهوة عادة يومية عند غالبية سكان الكرة الأرضية في الصباح والمساء، وفي حين تكثر الدراسات حول إيجابياتها هناك أيضا سلبيات كثيرة للمشروب المفضل للكثيرين.</p> + <p>وفي هذا الشأن، أظهرت دراسة جديدة أن تناول الكافيين بانتظام يقلل من حجم المادة الرمادية في الدماغ، مما يشير إلى أن تناول القهوة يمكن أن يضعف القدرة على معالجة المعلومات، وفقاً لما نشرته "ديلي ميل" البريطانية.</p> + <p>وأعطى باحثون سويسريون متطوعين ثلاث حصص من الكافيين 150 ملغم يوميًا لمدة 10 أيام - وهو مقدار كافيين يعادل حوالي أربعة أو خمسة أكواب صغيرة من القهوة المخمرة يوميًا، أو سبعة إسبريسو فردي.</p> + <p>وتبين حدوث انخفاض في المادة الرمادية، والتي توجد غالبًا في الطبقة الخارجية للدماغ، أو القشرة، وتعمل على معالجة المعلومات.</p> + <p>كما كان الانخفاض مذهلاً بشكل خاص في الفص الصدغي الإنسي الأيمن، بما في ذلك الحُصين، وهي منطقة من الدماغ ضرورية لتقوية الذاكرة.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button> - <button type="button" class="btn btn-primary">احفظ التغييرات</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> + <button type="button" class="btn btn-primary">حفظ التغيرات</button> </div> </div> </div> @@ -1582,32 +1583,22 @@ direction: rtl <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenLabel">مشروط ملء الشاشة</h5> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button> + <h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> - <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p> - <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p> - <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p> - <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p> - <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p> - <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p> - <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p> - <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p> - <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p> - <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p> - <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p> - <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p> - <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p> - <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p> - <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p> - <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p> - <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p> - <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p> - <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p> + <p>في ما يلي، نص طويل لتعبئة كامل الشاشة. قد يبدو أنني أثرثر كثيرًا، لذا سأقوم بنسخ مقالة من إحدى الصحف العربية.</p> + <p>تكييف الهواء هو من التكنولوجيا التي ما إن نمتلكها حتى نصبح عاجزين عن تخيّل العيش من دونها. وتكييف الهواء في مناطق عديدة من العالم ليس ترفاً يمكن الاستغناء عنه. ولكن هذه الحاجة الحيوية تثير تحديات كبيرة على مستوى استهلاك الطاقة في معظم بلدان العالم. ويُتوقع أن تتفاقم هذه التحديات خلال العقود الثلاثة المقبلة، مع توقُّع ارتفاع عدد المكيفات في العالم نحو ثلاثة أضعاف. وفي حين أن الابتكارات التكنولوجية تحقِّق كل يوم إنجازاً جديداً، وعلى الرغم من بعض التحسينات والتدابير المحدودة التي طرأت على صناعة المكيفات، “فإن تكنولوجيتها الأساسية لا تزال تعمل كما كانت، منذ اعتمادها قبل نحو قرن من السنين"، حسبما جاء في تقرير لمعهد ماساشوستس للتكنولوجيا (MIT)، في الأول من سبتمبر 2020م. ولمعالجة هذه المشكلات الخطيرة، لا مفر من إعادة التفكير بجد.</p> + <p>التكييف حاجة حيويّة. فالتعرّض للحرارة لمدة طويلة ضارٌ بالصحة. ووفقاً لمنظمة الصحة العالميّة يمكن للتعرُّض الطويل للحرارة أيضاً أن يؤدي إلى "إعياء حراري، وضربة شمس، وتورّم في الرجلين، وطفح جلدي على العنق، وتشنج، وصداع، وحساسيّة، والخمول والوهَن. ويمكن للحرارة أن تسبِّب جفافاً خطراً، وأعراضاً حادة في أوعية الدماغ الدمويّة، وتسهم في تكوّن الجلطات".</p> + <p>وموجات الحر أيضاً من أشد المخاطر الطبيعيّة المميتة. إذ يقدَّر أن بين عامي 1998 و2017م، توفي نحو 166 ألف شخص من موجات الحر. ومات 70 ألفاً من هؤلاء في أوروبا سنة 2003م وحدها. ومن دون أن يصل الخطر إلى الموت، تتسبَّب الحرارة العالية بانخفاض الأداء المعرفي لدى الشبان البالغين في المباني غير المكيّفة. فقد بيّنت دراسة أجرتها "كليّة ت. هـ. تشان" للصحة العامة في جامعة هارفرد، نشرتها "بلوس ميديسين" في 10 يوليو 2018م، أن التلاميذ الذين ينامون في مهاجع غير مكيّفة، يقل أداؤهم عن أولئك الذين ينامون في مهاجع مكيّفة. ولتجنّب مخاطر التعرّض للحرارة، يلتفت الناس إلى استخدام التكييف.</p> + <p>يتطلّب التكييف كثيراً من الطاقة. فنحو %10 من استهلاك الكهرباء في العالم يُنفَق في تشغيل المكيّفات. وتصل هذه النسبة إلى %50 في المملكة حسب "المركز السعودي لكفاءة الطاقة". أضف إلى ذلك أن معظم البشر في بلدان العالم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظاً بالسكان في العالم. وجاء في تقرير لوكالة الطاقة الدوليّة بعنوان "مستقبل التبريد"، ونُشر في مايو 2018م، أن في أجزاء من أمريكا الجنوبيّة وإفريقيا وآسيا والشرق الأوسط، يعيش 2.8 مليار نسمة، ولا يملك وحدات تكييف سوى %8 من المنازل. في حين الدول المتقدِّمة مثل كوريا الجنوبيّة، واليابان، والولايات المتحدة، فإن %89 من المنازل تملك مكيفات، وفي الصين %60 من البيوت تملكها أيضاً.</p> + <p>ولكن مع تنامي الدخل في بلدان الاقتصاد الصاعد، يتوقّع أن تزداد المنازل التي تقتني مكيّفاً. وبحسب مقالة نُشرت في صحيفة "نيويورك تايمز"، في 15 مايو 2018م، سيرتفع عدد المكيّفات في العالم من نحو 1.6 مليار حالياً، إلى 5.6 مليارات عام 2050م، طبقاً لمعدَّلات النمو الاقتصادي.</p> + <p>ومع الافتقار إلى الابتكار وتطوير النظم لفرض معايير الجدوى الأعلى، فسيتضاعف استهلاك الطاقة لتشغيل المكيّفات ثلاثة أضعاف. وسينتج من ذلك طلب إضافي للطاقة يساوي مجموع إنتاج الطاقة في الصين حالياً. فمبيعات المكيّفات ترتفع اليوم في البلدان النامية، لكن فعاليّة هذه الوحدات مشكوك فيها. فمثلاً، أوسع وحدات التكييف انتشاراً في بعض الأسواق الآسيوية تتطلّب ضعفي ما تتطلّبه وحدات تكييف أجدى. والمكيّفات التي تباع في اليابان والاتحاد الأوروبي أجدى بنسبة %25 عادة، من تلك التي تباع في الصين والولايات المتحدة.</p> + <p>وبصرف النظر عن كثير من الطاقة التي يحتاج إليها المكيّف، فإنه يبث مقادير وفيرة من غازات الدفيئة نفسها. وطبقاً لموقع تكييف الهواء (airconditioning.com)، فإن المبرِّدات في معظم المكيّفات مثل مواد مركبات الكربون الكلورية فلورية أو مواد هيدروفلوروولفينات، ومركبات ثاني أكسيد الكربون الهيدروكلورية فلورية، أسوأ بكثير للبيئة من ثاني أكسيد الكربون، لأنها تحتبس من الحرارة مقادير أكبر حين تتسرّب إلى الجو.</p> + <p>وبالإضافة إلى ظاهرة الدفيئة، فهذه الغازات تسهم أيضاً بالإضرار بطبقة الأوزون. ويمكن لهذه المواد الكيميائية أن تتسرّب خلال عملية التصنيع أو التصليح. ويعرف كل من يملك في منزله مكيّفاً كم تتكرر أعطال هذه الأجهزة. ثم إن المكيف يُرمَى حين يتعطّل نهائياً ولا يعود قابلاً للإصلاح، والمواد المبرِّدة فيه ستتسرّب على الأرجح لتلوث الهواء.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> </div> </div> </div> diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css index 16ffb65be..77aa0f23c 100644 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css +++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css @@ -63,6 +63,10 @@ body { 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; + + /* rtl:raw: + transform: rotate(180deg) translateX(-2px); + */ transform-origin: .5em 50%; } diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js index bafea8e92..541cf9350 100644 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js +++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js @@ -28,8 +28,8 @@ // Disable empty links document.querySelectorAll('[href="#"]') .forEach(function (link) { - link.addEventListener('click', function (e) { - e.preventDefault() + link.addEventListener('click', function (event) { + event.preventDefault() }) }) diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css index 6d66a1d5d..c1a4a1ccc 100644 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css +++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css @@ -63,6 +63,7 @@ body { 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: rotate(180deg) translateX(-2px); transform-origin: .5em 50%; } diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html index 790bf546b..de9817845 100644 --- a/site/content/docs/5.0/examples/cheatsheet/index.html +++ b/site/content/docs/5.0/examples/cheatsheet/index.html @@ -69,7 +69,7 @@ body_class: "bg-light" </ul> </nav> </aside> -<div class="bd-cheatsheet container-fluid bg-white"> +<div class="bd-cheatsheet container-fluid bg-body"> <section id="content"> <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2> @@ -83,7 +83,7 @@ body_class: "bg-light" {{< example show_markup="false" >}} <p class="display-1">Display 1</p> <p class="display-2">Display 2</p> - <p class="display-3 ">Display 3</p> + <p class="display-3">Display 3</p> <p class="display-4">Display 4</p> <p class="display-5">Display 5</p> <p class="display-6">Display 6</p> @@ -100,7 +100,7 @@ body_class: "bg-light" {{< example show_markup="false" >}} <p class="lead"> - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. + This is a lead paragraph. It stands out from regular paragraphs. </p> {{< /example >}} @@ -117,36 +117,33 @@ body_class: "bg-light" {{< example show_markup="false" >}} <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> {{< /example >}} {{< example show_markup="false" >}} <ul class="list-unstyled"> - <li>Lorem ipsum dolor sit amet</li> - <li>Consectetur adipiscing elit</li> - <li>Integer molestie lorem at massa</li> - <li>Facilisis in pretium nisl aliquet</li> - <li>Nulla volutpat aliquam velit + <li>This is a list.</li> + <li>It appears completely unstyled.</li> + <li>Structurally, it's still a list.</li> + <li>However, this style only applies to immediate child elements.</li> + <li>Nested lists: <ul> - <li>Phasellus iaculis neque</li> - <li>Purus sodales ultricies</li> - <li>Vestibulum laoreet porttitor sem</li> - <li>Ac tristique libero volutpat at</li> + <li>are unaffected by this style</li> + <li>will still show a bullet</li> + <li>and have appropriate left margin</li> </ul> </li> - <li>Faucibus porta lacus fringilla vel</li> - <li>Aenean sit amet erat nunc</li> - <li>Eget porttitor lorem</li> + <li>This may still come in handy in some situations.</li> </ul> {{< /example >}} {{< example show_markup="false" >}} <ul class="list-inline"> - <li class="list-inline-item">Lorem ipsum</li> - <li class="list-inline-item">Phasellus iaculis</li> - <li class="list-inline-item">Nulla volutpat</li> + <li class="list-inline-item">This is a list item.</li> + <li class="list-inline-item">And another one.</li> + <li class="list-inline-item">But they're displayed inline.</li> </ul> {{< /example >}} </div> @@ -619,7 +616,7 @@ body_class: "bg-light" </h4> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> @@ -631,7 +628,7 @@ body_class: "bg-light" </h4> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> @@ -643,7 +640,7 @@ body_class: "bg-light" </h4> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> @@ -822,9 +819,9 @@ body_class: "bg-light" <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="list-group list-group-flush"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> <div class="card-body"> <a href="#" class="card-link">Card link</a> @@ -861,42 +858,42 @@ body_class: "bg-light" <div> {{< example show_markup="false" >}} <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> - <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> + <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class="carousel-item"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class="carousel-item"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> + <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> - <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> - </a> - <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> - </a> + </button> </div> {{< /example >}} </div> @@ -1092,27 +1089,27 @@ body_class: "bg-light" <div> {{< example show_markup="false" >}} <ul class="list-group"> - <li class="list-group-item active" aria-current="true">Cras justo odio</li> - <li class="list-group-item disabled" aria-disabled="true">Dapibus ac facilisis in</li> - <li class="list-group-item">Morbi leo risus</li> - <li class="list-group-item">Porta ac consectetur ac</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item disabled" aria-disabled="true">A disabled item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> </ul> {{< /example >}} {{< example show_markup="false" >}} <ul class="list-group list-group-flush"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Morbi leo risus</li> - <li class="list-group-item">Porta ac consectetur ac</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> </ul> {{< /example >}} {{< example show_markup="false" >}} <div class="list-group"> - <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> + <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a> {{< list.inline >}} {{- range (index $.Site.Data "theme-colors") }} <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a> @@ -1166,20 +1163,20 @@ body_class: "bg-light" {{< example show_markup="false" >}} <nav> <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button> + <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button> + <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> - <p class="px-3">Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p> + <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> - <p class="px-3">Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p> + <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> - <p class="px-3">Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p> + <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p> </div> </div> {{< /example >}} @@ -1303,7 +1300,7 @@ body_class: "bg-light" <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> - <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a> + <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> @@ -1338,7 +1335,7 @@ body_class: "bg-light" </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> - <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a> + <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> @@ -1437,19 +1434,18 @@ body_class: "bg-light" </li> </ul> </nav> - <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example"> + <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="fat">@fat</h4> - <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> + <p>Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> <h4 id="mdo">@mdo</h4> - <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p> + <p>Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.</p> <h4 id="one">one</h4> - <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p> + <p>Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> <h4 id="two">two</h4> - <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p> + <p>Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.</p> <h4 id="three">three</h4> - <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> - <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. - </p> + <p>Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.</p> + <p>And some more placeholder content, for good measure.</p> </div> </div> </div> @@ -1558,18 +1554,17 @@ body_class: "bg-light" </div> </div> <div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true"> - <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable"> + <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Placeholder text for this demonstration of a vertically centered modal dialog.</p> + <p>In this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.</p> + <p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p> + <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> @@ -1586,24 +1581,14 @@ body_class: "bg-light" <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.</p> + <p>Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.</p> + <p>Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.</p> + <p>Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.</p> + <p>I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.</p> + <p>Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.</p> + <p>Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.</p> + <p>We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> diff --git a/site/content/docs/5.0/examples/checkout-rtl/index.html b/site/content/docs/5.0/examples/checkout-rtl/index.html index c4a60443d..e0ca621b1 100644 --- a/site/content/docs/5.0/examples/checkout-rtl/index.html +++ b/site/content/docs/5.0/examples/checkout-rtl/index.html @@ -1,6 +1,6 @@ --- layout: examples -title: مثال الخروج +title: مثال إتمام الشراء direction: rtl extra_css: - "../checkout/form-validation.css" @@ -13,14 +13,14 @@ body_class: "bg-light" <main> <div class="py-5 text-center"> <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> - <h2>نموذج الخروج</h2> + <h2>نموذج إتمام الشراء</h2> <p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p> </div> <div class="row g-3"> <div class="col-md-5 col-lg-4 order-md-last"> <h4 class="d-flex justify-content-between align-items-center mb-3"> - <span class="text-muted">عربتك</span> + <span class="text-muted">عربة التسوق</span> <span class="badge bg-secondary rounded-pill">3</span> </h4> <ul class="list-group mb-3"> @@ -61,33 +61,33 @@ body_class: "bg-light" <form class="card p-2"> <div class="input-group"> <input type="text" class="form-control" placeholder="رمز ترويجي"> - <button type="submit" class="btn btn-secondary">افتدى</button> + <button type="submit" class="btn btn-secondary">تحقق</button> </div> </form> </div> <div class="col-md-7 col-lg-8"> - <h4 class="mb-3">عنوان وصول الفواتير</h4> + <h4 class="mb-3">عنوان الفوترة</h4> <form class="needs-validation" novalidate> <div class="row g-3"> <div class="col-sm-6"> - <label for="firstName" class="form-label">الاسم الاول</label> + <label for="firstName" class="form-label">الاسم الأول</label> <input type="text" class="form-control" id="firstName" placeholder="" value="" required> <div class="invalid-feedback"> - مطلوب الاسم الأول صالح. + يرجى إدخال اسم أول صحيح. </div> </div> <div class="col-sm-6"> - <label for="lastName" class="form-label">الكنية</label> + <label for="lastName" class="form-label">اسم العائلة</label> <input type="text" class="form-control" id="lastName" placeholder="" value="" required> <div class="invalid-feedback"> - مطلوب اسم أخير صالح. + يرجى إدخال اسم عائلة صحيح. </div> </div> <div class="col-12"> <label for="username" class="form-label">اسم المستخدم</label> - <div class="input-group"> + <div class="input-group has-validation"> <span class="input-group-text">@</span> <input type="text" class="form-control" id="username" placeholder="اسم المستخدم" required> <div class="invalid-feedback"> @@ -97,45 +97,45 @@ body_class: "bg-light" </div> <div class="col-12"> - <label for="email" class="form-label"><span class="text-muted">(اختياري)</span>البريد الإلكتروني </label> + <label for="email" class="form-label">البريد الإلكتروني <span class="text-muted">(اختياري)</span></label> <input type="email" class="form-control" id="email" placeholder="[email protected]"> <div class="invalid-feedback"> - يرجى إدخال عنوان بريد إلكتروني صالح لتحديثات الشحن. + يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن. </div> </div> <div class="col-12"> - <label for="address" class="form-label">عنوان</label> - <input type="text" class="form-control" id="address" placeholder="1234 Main St" required> + <label for="address" class="form-label">العنوان</label> + <input type="text" class="form-control" id="address" placeholder="1234 الشارع الأول" required> <div class="invalid-feedback"> يرجى إدخال عنوان الشحن الخاص بك. </div> </div> <div class="col-12"> - <label for="address2" class="form-label"><span class="text-muted">(اختياري)</span>عنوان 2 </label> - <input type="text" class="form-control" id="address2" placeholder="Apartment or suite"> + <label for="address2" class="form-label">عنوان 2 <span class="text-muted">(اختياري)</span></label> + <input type="text" class="form-control" id="address2" placeholder="شقة 24"> </div> <div class="col-md-5"> - <label for="country" class="form-label">بلد</label> + <label for="country" class="form-label">البلد</label> <select class="form-select" id="country" required> - <option value="">أختر...</option> + <option value="">اختر...</option> <option>الولايات المتحدة الأمريكية</option> </select> <div class="invalid-feedback"> - يرجى تحديد بلد صالح. + يرجى اختيار بلد صحيح. </div> </div> <div class="col-md-4"> - <label for="state" class="form-label">حالة</label> + <label for="state" class="form-label">المنطقة</label> <select class="form-select" id="state" required> - <option value="">أختر...</option> + <option value="">اختر...</option> <option>كاليفورنيا</option> </select> <div class="invalid-feedback"> - يرجى تقديم حالة صالحة. + يرجى اختيار اسم منطقة صحيح. </div> </div> @@ -152,7 +152,7 @@ body_class: "bg-light" <div class="form-check"> <input type="checkbox" class="form-check-input" id="same-address"> - <label class="form-check-label" for="same-address">عنوان الشحن هو نفس عنوان الفاتورة الخاص بي</label> + <label class="form-check-label" for="same-address">عنوان الشحن هو نفس عنوان الفوترة الخاص بي</label> </div> <div class="form-check"> @@ -162,16 +162,16 @@ body_class: "bg-light" <hr class="my-4"> - <h4 class="mb-3">دفع</h4> + <h4 class="mb-3">طريقة الدفع</h4> <div class="my-3"> <div class="form-check"> <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required> - <label class="form-check-label" for="credit">بطاقة الائتمان</label> + <label class="form-check-label" for="credit">بطاقة ائتمان</label> </div> <div class="form-check"> - <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required> - <label class="form-check-label" for="debit">بطاقة ائتمان</label> + <input id="cash" name="paymentMethod" type="radio" class="form-check-input" required> + <label class="form-check-label" for="cash">نقد</label> </div> <div class="form-check"> <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required> @@ -190,7 +190,7 @@ body_class: "bg-light" </div> <div class="col-md-6"> - <label for="cc-number" class="form-label">رقم بطاقه الائتمان</label> + <label for="cc-number" class="form-label">رقم البطاقة</label> <input type="text" class="form-control" id="cc-number" placeholder="" required> <div class="invalid-feedback"> رقم بطاقة الائتمان مطلوب @@ -198,7 +198,7 @@ body_class: "bg-light" </div> <div class="col-md-3"> - <label for="cc-expiration" class="form-label">انتهاء الصلاحية</label> + <label for="cc-expiration" class="form-label">تاريخ انتهاء الصلاحية</label> <input type="text" class="form-control" id="cc-expiration" placeholder="" required> <div class="invalid-feedback"> تاريخ انتهاء الصلاحية مطلوب @@ -206,7 +206,7 @@ body_class: "bg-light" </div> <div class="col-md-3"> - <label for="cc-cvv" class="form-label">CVV</label> + <label for="cc-cvv" class="form-label">الرمز الثلاثي (CVV)</label> <input type="text" class="form-control" id="cc-cvv" placeholder="" required> <div class="invalid-feedback"> رمز الحماية مطلوب @@ -216,7 +216,7 @@ body_class: "bg-light" <hr class="my-4"> - <button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار في الخروج</button> + <button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار بالدفع</button> </form> </div> </div> @@ -224,9 +224,9 @@ body_class: "bg-light" <footer class="my-5 pt-5 text-muted text-center text-small"> <p class="mb-1">© {{< year >}}-2017 اسم الشركة</p> <ul class="list-inline"> - <li class="list-inline-item"><a href="#">خصوصية</a></li> - <li class="list-inline-item"><a href="#">شروط</a></li> - <li class="list-inline-item"><a href="#">الدعم</a></li> + <li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li> + <li class="list-inline-item"><a href="#">اتفاقية الاستخدام</a></li> + <li class="list-inline-item"><a href="#">الدعم الفني</a></li> </ul> </footer> </div> diff --git a/site/content/docs/5.0/examples/checkout/index.html b/site/content/docs/5.0/examples/checkout/index.html index a8bf348b2..4809dc4bb 100644 --- a/site/content/docs/5.0/examples/checkout/index.html +++ b/site/content/docs/5.0/examples/checkout/index.html @@ -16,11 +16,11 @@ body_class: "bg-light" <p class="lead">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.</p> </div> - <div class="row g-3"> + <div class="row g-5"> <div class="col-md-5 col-lg-4 order-md-last"> <h4 class="d-flex justify-content-between align-items-center mb-3"> - <span class="text-muted">Your cart</span> - <span class="badge bg-secondary rounded-pill">3</span> + <span class="text-primary">Your cart</span> + <span class="badge bg-primary rounded-pill">3</span> </h4> <ul class="list-group mb-3"> <li class="list-group-item d-flex justify-content-between lh-sm"> @@ -86,7 +86,7 @@ body_class: "bg-light" <div class="col-12"> <label for="username" class="form-label">Username</label> - <div class="input-group"> + <div class="input-group has-validation"> <span class="input-group-text">@</span> <input type="text" class="form-control" id="username" placeholder="Username" required> <div class="invalid-feedback"> diff --git a/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js b/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js index 2a511ef8b..2e348137c 100644 --- a/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js +++ b/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js @@ -17,8 +17,8 @@ 'الثلاثاء', 'الأربعاء', 'الخميس', - 'يوم الجمعة', - 'يوم السبت' + 'الجمعة', + 'السبت' ], datasets: [{ data: [ diff --git a/site/content/docs/5.0/examples/dashboard-rtl/index.html b/site/content/docs/5.0/examples/dashboard-rtl/index.html index 848c67c0b..a92704159 100644 --- a/site/content/docs/5.0/examples/dashboard-rtl/index.html +++ b/site/content/docs/5.0/examples/dashboard-rtl/index.html @@ -14,13 +14,13 @@ extra_js: <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">اسم الشركة</a> - <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل"> + <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل"> <span class="navbar-toggler-icon"></span> </button> <input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث"> <ul class="navbar-nav px-3"> <li class="nav-item text-nowrap"> - <a class="nav-link" href="#">خروج</a> + <a class="nav-link" href="#">تسجيل الخروج</a> </li> </ul> </header> @@ -39,13 +39,13 @@ extra_js: <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="file"></span> - أوامر + الطلبات </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="shopping-cart"></span> - منتجات + المنتجات </a> </li> <li class="nav-item"> @@ -63,14 +63,14 @@ extra_js: <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="layers"></span> - التكامل + التكاملات </a> </li> </ul> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <span>التقارير المحفوظة</span> - <a class="link-secondary" href="#" aria-label="أضف تقرير جديد"> + <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد"> <span data-feather="plus-circle"></span> </a> </h6> @@ -90,13 +90,13 @@ extra_js: <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="file-text"></span> - ارتباط اجتماعي + التفاعل الإجتماعي </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="file-text"></span> - بيع نهاية العام + مبيعات نهاية العام </a> </li> </ul> @@ -108,12 +108,12 @@ extra_js: <h1 class="h2">لوحة القيادة</h1> <div class="btn-toolbar mb-2 mb-md-0"> <div class="btn-group me-2"> - <button type="button" class="btn btn-sm btn-outline-secondary">شارك</button> + <button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button> <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button> </div> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"> <span data-feather="calendar"></span> - هذا الاسبوع + هذا الأسبوع </button> </div> </div> @@ -126,124 +126,124 @@ extra_js: <thead> <tr> <th>#</th> - <th>العنوان</th> - <th>العنوان</th> - <th>العنوان</th> - <th>العنوان</th> + <th>عنوان</th> + <th>عنوان</th> + <th>عنوان</th> + <th>عنوان</th> </tr> </thead> <tbody> <tr> <td>1,001</td> - <td>أم.</td> - <td>و.</td> - <td>ثمّة.</td> - <td>ويتّفق.</td> + <td>بيانات</td> + <td>عشوائية</td> + <td>تثري</td> + <td>الجدول</td> </tr> <tr> <td>1,002</td> - <td>أضف.</td> - <td>ما.</td> - <td>من.</td> - <td>أم.</td> + <td>تثري</td> + <td>مبهة</td> + <td>تصميم</td> + <td>تنسيق</td> </tr> <tr> <td>1,003</td> - <td>دار.</td> - <td>ذلك.</td> - <td>يبق.</td> - <td>المتحدة.</td> + <td>عشوائية</td> + <td>غنية</td> + <td>قيمة</td> + <td>مفيدة</td> </tr> <tr> <td>1,003</td> - <td>فكانت.</td> - <td>الخارجية.</td> - <td>الآخر.</td> - <td>حتى.</td> + <td>معلومات</td> + <td>تثري</td> + <td>توضيحية</td> + <td>عشوائية</td> </tr> <tr> <td>1,004</td> - <td>أم.</td> - <td>و.</td> - <td>ثمّة.</td> - <td>ويتّفق.</td> + <td>الجدول</td> + <td>بيانات</td> + <td>تنسيق</td> + <td>قيمة</td> </tr> <tr> <td>1,005</td> - <td>أضف.</td> - <td>ما.</td> - <td>من.</td> - <td>أم.</td> + <td>قيمة</td> + <td>مبهة</td> + <td>الجدول</td> + <td>تثري</td> </tr> <tr> <td>1,006</td> - <td>دار.</td> - <td>ذلك.</td> - <td>يبق.</td> - <td>المتحدة.</td> + <td>قيمة</td> + <td>توضيحية</td> + <td>غنية</td> + <td>عشوائية</td> </tr> <tr> <td>1,007</td> - <td>أم.</td> - <td>و.</td> - <td>ثمّة.</td> - <td>ويتّفق.</td> + <td>تثري</td> + <td>مفيدة</td> + <td>معلومات</td> + <td>مبهة</td> </tr> <tr> <td>1,008</td> - <td>أضف.</td> - <td>ما.</td> - <td>من.</td> - <td>أم.</td> + <td>بيانات</td> + <td>عشوائية</td> + <td>تثري</td> + <td>الجدول</td> </tr> <tr> <td>1,009</td> - <td>دار.</td> - <td>ذلك.</td> - <td>يبق.</td> - <td>المتحدة.</td> + <td>تثري</td> + <td>مبهة</td> + <td>تصميم</td> + <td>تنسيق</td> </tr> <tr> <td>1,010</td> - <td>أم.</td> - <td>و.</td> - <td>ثمّة.</td> - <td>ويتّفق.</td> + <td>عشوائية</td> + <td>غنية</td> + <td>قيمة</td> + <td>مفيدة</td> </tr> <tr> <td>1,011</td> - <td>أضف.</td> - <td>ما.</td> - <td>من.</td> - <td>أم.</td> + <td>معلومات</td> + <td>تثري</td> + <td>توضيحية</td> + <td>عشوائية</td> </tr> <tr> <td>1,012</td> - <td>دار.</td> - <td>ذلك.</td> - <td>يبق.</td> - <td>المتحدة.</td> + <td>الجدول</td> + <td>تثري</td> + <td>تنسيق</td> + <td>قيمة</td> </tr> <tr> <td>1,013</td> - <td>أم.</td> - <td>و.</td> - <td>ثمّة.</td> - <td>ويتّفق.</td> + <td>قيمة</td> + <td>مبهة</td> + <td>الجدول</td> + <td>تصميم</td> </tr> <tr> <td>1,014</td> - <td>أضف.</td> - <td>ما.</td> - <td>من.</td> - <td>أم.</td> + <td>قيمة</td> + <td>توضيحية</td> + <td>غنية</td> + <td>عشوائية</td> </tr> <tr> <td>1,015</td> - <td>دار.</td> - <td>ذلك.</td> - <td>يبق.</td> - <td>المتحدة.</td> + <td>بيانات</td> + <td>مفيدة</td> + <td>معلومات</td> + <td>الجدول</td> </tr> </tbody> </table> diff --git a/site/content/docs/5.0/examples/dashboard/index.html b/site/content/docs/5.0/examples/dashboard/index.html index ab324331a..21d78e47f 100644 --- a/site/content/docs/5.0/examples/dashboard/index.html +++ b/site/content/docs/5.0/examples/dashboard/index.html @@ -134,115 +134,115 @@ extra_js: <tbody> <tr> <td>1,001</td> - <td>Lorem</td> - <td>ipsum</td> - <td>dolor</td> - <td>sit</td> + <td>random</td> + <td>data</td> + <td>placeholder</td> + <td>text</td> </tr> <tr> <td>1,002</td> - <td>amet</td> - <td>consectetur</td> - <td>adipiscing</td> - <td>elit</td> + <td>placeholder</td> + <td>irrelevant</td> + <td>visual</td> + <td>layout</td> </tr> <tr> <td>1,003</td> - <td>Integer</td> - <td>nec</td> - <td>odio</td> - <td>Praesent</td> + <td>data</td> + <td>rich</td> + <td>dashboard</td> + <td>tabular</td> </tr> <tr> <td>1,003</td> - <td>libero</td> - <td>Sed</td> - <td>cursus</td> - <td>ante</td> + <td>information</td> + <td>placeholder</td> + <td>illustrative</td> + <td>data</td> </tr> <tr> <td>1,004</td> - <td>dapibus</td> - <td>diam</td> - <td>Sed</td> - <td>nisi</td> + <td>text</td> + <td>random</td> + <td>layout</td> + <td>dashboard</td> </tr> <tr> <td>1,005</td> - <td>Nulla</td> - <td>quis</td> - <td>sem</td> - <td>at</td> + <td>dashboard</td> + <td>irrelevant</td> + <td>text</td> + <td>placeholder</td> </tr> <tr> <td>1,006</td> - <td>nibh</td> - <td>elementum</td> - <td>imperdiet</td> - <td>Duis</td> + <td>dashboard</td> + <td>illustrative</td> + <td>rich</td> + <td>data</td> </tr> <tr> <td>1,007</td> - <td>sagittis</td> - <td>ipsum</td> - <td>Praesent</td> - <td>mauris</td> + <td>placeholder</td> + <td>tabular</td> + <td>information</td> + <td>irrelevant</td> </tr> <tr> <td>1,008</td> - <td>Fusce</td> - <td>nec</td> - <td>tellus</td> - <td>sed</td> + <td>random</td> + <td>data</td> + <td>placeholder</td> + <td>text</td> </tr> <tr> <td>1,009</td> - <td>augue</td> - <td>semper</td> - <td>porta</td> - <td>Mauris</td> + <td>placeholder</td> + <td>irrelevant</td> + <td>visual</td> + <td>layout</td> </tr> <tr> <td>1,010</td> - <td>massa</td> - <td>Vestibulum</td> - <td>lacinia</td> - <td>arcu</td> + <td>data</td> + <td>rich</td> + <td>dashboard</td> + <td>tabular</td> </tr> <tr> <td>1,011</td> - <td>eget</td> - <td>nulla</td> - <td>Class</td> - <td>aptent</td> + <td>information</td> + <td>placeholder</td> + <td>illustrative</td> + <td>data</td> </tr> <tr> <td>1,012</td> - <td>taciti</td> - <td>sociosqu</td> - <td>ad</td> - <td>litora</td> + <td>text</td> + <td>placeholder</td> + <td>layout</td> + <td>dashboard</td> </tr> <tr> <td>1,013</td> - <td>torquent</td> - <td>per</td> - <td>conubia</td> - <td>nostra</td> + <td>dashboard</td> + <td>irrelevant</td> + <td>text</td> + <td>visual</td> </tr> <tr> <td>1,014</td> - <td>per</td> - <td>inceptos</td> - <td>himenaeos</td> - <td>Curabitur</td> + <td>dashboard</td> + <td>illustrative</td> + <td>rich</td> + <td>data</td> </tr> <tr> <td>1,015</td> - <td>sodales</td> - <td>ligula</td> - <td>in</td> - <td>libero</td> + <td>random</td> + <td>tabular</td> + <td>information</td> + <td>text</td> </tr> </tbody> </table> diff --git a/site/content/docs/5.0/examples/features/features.css b/site/content/docs/5.0/examples/features/features.css new file mode 100644 index 000000000..33942f7f1 --- /dev/null +++ b/site/content/docs/5.0/examples/features/features.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; +} + +.feature-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 4rem; + height: 4rem; + margin-bottom: 1rem; + font-size: 2rem; + color: #fff; + border-radius: .75rem; +} + +.icon-link { + display: inline-flex; + align-items: center; +} +.icon-link > .bi { + margin-top: .125rem; + margin-left: .125rem; + transition: transform .25s ease-in-out; + fill: currentColor; +} +.icon-link:hover > .bi { + transform: translate(.25rem); +} + +.icon-square { + display: inline-flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + font-size: 1.5rem; + border-radius: .75rem; +} + +.rounded-4 { border-radius: .5rem; } +.rounded-5 { border-radius: 1rem; } + +.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); } +.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); } +.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); } + +.card-cover { + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} diff --git a/site/content/docs/5.0/examples/features/index.html b/site/content/docs/5.0/examples/features/index.html new file mode 100644 index 000000000..1e331f00a --- /dev/null +++ b/site/content/docs/5.0/examples/features/index.html @@ -0,0 +1,288 @@ +--- +layout: examples +title: Features +extra_css: + - "features.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="home" viewBox="0 0 16 16"> + <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> + </symbol> + <symbol id="speedometer2" viewBox="0 0 16 16"> + <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/> + </symbol> + <symbol id="table" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/> + </symbol> + <symbol id="people-circle" viewBox="0 0 16 16"> + <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> + <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> + </symbol> + <symbol id="grid" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + </symbol> + <symbol id="collection" viewBox="0 0 16 16"> + <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/> + </symbol> + <symbol id="calendar3" viewBox="0 0 16 16"> + <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> + <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> + </symbol> + <symbol id="chat-quote-fill" viewBox="0 0 16 16"> + <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> + </symbol> + <symbol id="cpu-fill" viewBox="0 0 16 16"> + <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/> + </symbol> + <symbol id="gear-fill" viewBox="0 0 16 16"> + <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/> + </symbol> + <symbol id="speedometer" viewBox="0 0 16 16"> + <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/> + </symbol> + <symbol id="toggles2" viewBox="0 0 16 16"> + <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/> + <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/> + <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/> + </symbol> + <symbol id="tools" viewBox="0 0 16 16"> + <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/> + </symbol> + <symbol id="chevron-right" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> + </symbol> + <symbol id="geo-fill" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/> + </symbol> +</svg> +<main> + <h1 class="visually-hidden">Features examples</h1> + + <div class="container px-4 py-5" id="featured-3"> + <h2 class="pb-2 border-bottom">Columns with icons</h2> + <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> + <div class="feature col"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> + </div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + <div class="feature col"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> + </div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + <div class="feature col"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container px-4 py-5" id="hanging-icons"> + <h2 class="pb-2 border-bottom">Hanging icons</h2> + <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> + <div class="col d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + <div class="col d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + <div class="col d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container px-4 py-5" id="custom-cards"> + <h2 class="pb-2 border-bottom">Custom cards</h2> + + <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5"> + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>Earth</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>3d</small> + </li> + </ul> + </div> + </div> + </div> + + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>Pakistan</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>4d</small> + </li> + </ul> + </div> + </div> + </div> + + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>California</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>5d</small> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container px-4 py-5" id="icon-grid"> + <h2 class="pb-2 border-bottom">Icon grid</h2> + + <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + </div> + </div> +</main> diff --git a/site/content/docs/5.0/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.0/examples/features/unsplash-photo-1.jpg Binary files differnew file mode 100644 index 000000000..ed2e36a78 --- /dev/null +++ b/site/content/docs/5.0/examples/features/unsplash-photo-1.jpg diff --git a/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg Binary files differnew file mode 100644 index 000000000..b66864a00 --- /dev/null +++ b/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg diff --git a/site/content/docs/5.0/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.0/examples/features/unsplash-photo-3.jpg Binary files differnew file mode 100644 index 000000000..c411b17ec --- /dev/null +++ b/site/content/docs/5.0/examples/features/unsplash-photo-3.jpg diff --git a/site/content/docs/5.0/examples/headers/headers.css b/site/content/docs/5.0/examples/headers/headers.css new file mode 100644 index 000000000..661a74d55 --- /dev/null +++ b/site/content/docs/5.0/examples/headers/headers.css @@ -0,0 +1,32 @@ +.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); +} + +.form-control-dark { + color: #fff; + background-color: var(--bs-dark); + border-color: var(--bs-gray); +} +.form-control-dark:focus { + color: #fff; + background-color: var(--bs-dark); + border-color: #fff; + box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.text-small { + font-size: 85%; +} + +.dropdown-toggle { + outline: 0; +} diff --git a/site/content/docs/5.0/examples/headers/index.html b/site/content/docs/5.0/examples/headers/index.html new file mode 100644 index 000000000..e15b47e5f --- /dev/null +++ b/site/content/docs/5.0/examples/headers/index.html @@ -0,0 +1,295 @@ +--- +layout: examples +title: Headers +extra_css: + - "headers.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="home" viewBox="0 0 16 16"> + <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> + </symbol> + <symbol id="speedometer2" viewBox="0 0 16 16"> + <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/> + </symbol> + <symbol id="table" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/> + </symbol> + <symbol id="people-circle" viewBox="0 0 16 16"> + <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> + <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> + </symbol> + <symbol id="grid" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + </symbol> +</svg> + +<main> + <h1 class="visually-hidden">Headers examples</h1> + + <div class="container"> + <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Simple header</span> + </a> + + <ul class="nav nav-pills"> + <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link">About</a></li> + </ul> + </header> + </div> + + <div class="b-example-divider"></div> + + <div class="container"> + <header class="d-flex justify-content-center py-3"> + <ul class="nav nav-pills"> + <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link">About</a></li> + </ul> + </header> + </div> + + <div class="b-example-divider"></div> + + <div class="container"> + <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Features</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li> + <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li> + <li><a href="#" class="nav-link px-2 link-dark">About</a></li> + </ul> + + <div class="col-md-3 text-end"> + <button type="button" class="btn btn-outline-primary me-2">Login</button> + <button type="button" class="btn btn-primary">Sign-up</button> + </div> + </header> + </div> + + <div class="b-example-divider"></div> + + <header class="p-3 bg-dark text-white"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li> + <li><a href="#" class="nav-link px-2 text-white">Features</a></li> + <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li> + <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li> + <li><a href="#" class="nav-link px-2 text-white">About</a></li> + </ul> + + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search"> + </form> + + <div class="text-end"> + <button type="button" class="btn btn-outline-light me-2">Login</button> + <button type="button" class="btn btn-warning">Sign-up</button> + </div> + </div> + </div> + </header> + + <div class="b-example-divider"></div> + + <header class="p-3 mb-3 border-bottom"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Products</a></li> + </ul> + + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + + <div class="dropdown text-end"> + <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + </div> + </header> + + <div class="b-example-divider"></div> + + <header class="py-3 mb-3 border-bottom"> + <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink"> + <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li> + <li><a class="dropdown-item" href="#">Inventory</a></li> + <li><a class="dropdown-item" href="#">Customers</a></li> + <li><a class="dropdown-item" href="#">Products</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Reports</a></li> + <li><a class="dropdown-item" href="#">Analytics</a></li> + </ul> + </div> + + <div class="d-flex align-items-center"> + <form class="w-100 me-3"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + + <div class="flex-shrink-0 dropdown"> + <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + </div> + </header> + + <div class="container-fluid pb-3"> + <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;"> + <div class="bg-light border rounded-3"> + <br><br><br><br><br><br><br><br><br><br> + </div> + <div class="bg-light border rounded-3"> + <br><br><br><br><br><br><br><br><br><br> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <nav class="py-2 bg-light border-bottom"> + <div class="container d-flex flex-wrap"> + <ul class="nav me-auto"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li> + </ul> + <ul class="nav"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li> + </ul> + </div> + </nav> + <header class="py-3 mb-4 border-bottom"> + <div class="container d-flex flex-wrap justify-content-center"> + <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Double header</span> + </a> + <form class="col-12 col-lg-auto mb-3 mb-lg-0"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + </div> + </header> + + <div class="b-example-divider"></div> + + <header> + <div class="px-3 py-2 bg-dark text-white"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small"> + <li> + <a href="#" class="nav-link text-secondary"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + </div> + </div> + </div> + <div class="px-3 py-2 border-bottom mb-3"> + <div class="container d-flex flex-wrap justify-content-center"> + <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + + <div class="text-end"> + <button type="button" class="btn btn-light text-dark me-2">Login</button> + <button type="button" class="btn btn-primary">Sign-up</button> + </div> + </div> + </div> + </header> + + <div class="b-example-divider"></div> +</main> diff --git a/site/content/docs/5.0/examples/heroes/bootstrap-docs.png b/site/content/docs/5.0/examples/heroes/bootstrap-docs.png Binary files differnew file mode 100644 index 000000000..471a9eddf --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/bootstrap-docs.png diff --git a/site/content/docs/5.0/examples/heroes/bootstrap-themes.png b/site/content/docs/5.0/examples/heroes/bootstrap-themes.png Binary files differnew file mode 100644 index 000000000..13c32337d --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/bootstrap-themes.png diff --git a/site/content/docs/5.0/examples/heroes/heroes.css b/site/content/docs/5.0/examples/heroes/heroes.css new file mode 100644 index 000000000..380b70a4a --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/heroes.css @@ -0,0 +1,11 @@ +.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); +} + +@media (min-width: 992px) { + .rounded-lg-3 { border-radius: .3rem; } +} diff --git a/site/content/docs/5.0/examples/heroes/index.html b/site/content/docs/5.0/examples/heroes/index.html new file mode 100644 index 000000000..4d97292a8 --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/index.html @@ -0,0 +1,127 @@ +--- +layout: examples +title: Heroes +extra_css: + - "heroes.css" +body_class: "" +--- + +<main> + <h1 class="visually-hidden">Heroes examples</h1> + + <div class="px-4 py-5 my-5 text-center"> + <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> + <h1 class="display-5 fw-bold">Centered hero</h1> + <div class="col-lg-6 mx-auto"> + <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> + <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="px-4 pt-5 my-5 text-center border-bottom"> + <h1 class="display-4 fw-bold">Centered screenshot</h1> + <div class="col-lg-6 mx-auto"> + <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"> + <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> + </div> + </div> + <div class="overflow-hidden" style="max-height: 30vh;"> + <div class="container px-5"> + <img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy"> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container col-xxl-8 px-4 py-5"> + <div class="row flex-lg-row-reverse align-items-center g-5 py-5"> + <div class="col-10 col-sm-8 col-lg-6"> + <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"> + </div> + <div class="col-lg-6"> + <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1> + <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-md-flex justify-content-md-start"> + <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + </div> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container col-xl-10 col-xxl-8 px-4 py-5"> + <div class="row align-items-center g-lg-5 py-5"> + <div class="col-lg-7 text-center text-lg-start"> + <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1> + <p class="col-lg-10 fs-4">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.</p> + </div> + <div class="col-md-10 mx-auto col-lg-5"> + <form class="p-4 p-md-5 border rounded-3 bg-light"> + <div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating mb-3"> + <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + <div class="checkbox mb-3"> + <label> + <input type="checkbox" value="remember-me"> Remember me + </label> + </div> + <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button> + <hr class="my-4"> + <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> + </form> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container my-5"> + <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> + <div class="col-lg-7 p-3 p-lg-5 pt-lg-3"> + <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1> + <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3"> + <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + </div> + </div> + <div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg"> + <div class="position-lg-absolute top-0 left-0 overflow-hidden"> + <img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="" width="720"> + </div> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="bg-dark text-secondary px-4 py-5 text-center"> + <div class="py-5"> + <h1 class="display-5 fw-bold text-white">Dark mode hero</h1> + <div class="col-lg-6 mx-auto"> + <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> + <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button> + <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button> + </div> + </div> + </div> + </div> + + <div class="b-example-divider mb-0"></div> +</main> diff --git a/site/content/docs/5.0/examples/jumbotron/index.html b/site/content/docs/5.0/examples/jumbotron/index.html new file mode 100644 index 000000000..99cc61dee --- /dev/null +++ b/site/content/docs/5.0/examples/jumbotron/index.html @@ -0,0 +1,45 @@ +--- +layout: examples +title: Jumbotron example +include_js: false +--- + +<main> + <div class="container py-4"> + <header class="pb-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Jumbotron example</span> + </a> + </header> + + <div class="p-5 mb-4 bg-light rounded-3"> + <div class="container-fluid py-5"> + <h1 class="display-5 fw-bold">Custom jumbotron</h1> + <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> + <button class="btn btn-primary btn-lg" type="button">Example button</button> + </div> + </div> + + <div class="row align-items-md-stretch"> + <div class="col-md-6"> + <div class="h-100 p-5 text-white bg-dark rounded-3"> + <h2>Change the background</h2> + <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p> + <button class="btn btn-outline-light" type="button">Example button</button> + </div> + </div> + <div class="col-md-6"> + <div class="h-100 p-5 bg-light border rounded-3"> + <h2>Add borders</h2> + <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p> + <button class="btn btn-outline-secondary" type="button">Example button</button> + </div> + </div> + </div> + + <footer class="pt-3 mt-4 text-muted border-top"> + © {{< year >}} + </footer> + </div> +</main> diff --git a/site/content/docs/5.0/examples/masonry/index.html b/site/content/docs/5.0/examples/masonry/index.html index 2dc091df9..9061d7cce 100644 --- a/site/content/docs/5.0/examples/masonry/index.html +++ b/site/content/docs/5.0/examples/masonry/index.html @@ -35,7 +35,7 @@ extra_js: <div class="card p-3"> <figure class="p-3 mb-0"> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer mb-0 text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> @@ -57,7 +57,7 @@ extra_js: <div class="card bg-primary text-white text-center p-3"> <figure class="mb-0"> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer mb-0 text-white"> Someone famous in <cite title="Source Title">Source Title</cite> @@ -83,7 +83,7 @@ extra_js: <div class="card p-3 text-end"> <figure class="mb-0"> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer mb-0 text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> diff --git a/site/content/docs/5.0/examples/navbar-bottom/index.html b/site/content/docs/5.0/examples/navbar-bottom/index.html index 8f4e2635c..aee772e20 100644 --- a/site/content/docs/5.0/examples/navbar-bottom/index.html +++ b/site/content/docs/5.0/examples/navbar-bottom/index.html @@ -18,8 +18,8 @@ title: Bottom navbar example </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/5.0/examples/navbar-fixed/index.html b/site/content/docs/5.0/examples/navbar-fixed/index.html index 9b09b713c..848137eff 100644 --- a/site/content/docs/5.0/examples/navbar-fixed/index.html +++ b/site/content/docs/5.0/examples/navbar-fixed/index.html @@ -13,8 +13,8 @@ extra_css: </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/5.0/examples/navbar-static/index.html b/site/content/docs/5.0/examples/navbar-static/index.html index 51010d7ed..fe95dab47 100644 --- a/site/content/docs/5.0/examples/navbar-static/index.html +++ b/site/content/docs/5.0/examples/navbar-static/index.html @@ -13,8 +13,8 @@ extra_css: </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/5.0/examples/navbars/index.html b/site/content/docs/5.0/examples/navbars/index.html index b4a29bdae..38281f3dd 100644 --- a/site/content/docs/5.0/examples/navbars/index.html +++ b/site/content/docs/5.0/examples/navbars/index.html @@ -15,8 +15,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample01"> <ul class="navbar-nav me-auto mb-2"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -49,8 +49,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample02"> <ul class="navbar-nav me-auto"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -72,8 +72,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample03"> <ul class="navbar-nav me-auto mb-2 mb-sm-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -106,8 +106,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample04"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -140,8 +140,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample05"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -174,8 +174,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample06"> <ul class="navbar-nav me-auto mb-2 mb-xl-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -208,8 +208,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExampleXxl"> <ul class="navbar-nav me-auto mb-2 mb-xl-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -242,8 +242,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample07"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -276,8 +276,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample07XL"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -313,8 +313,8 @@ extra_css: <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08"> <ul class="navbar-nav"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Centered nav only</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Centered nav only</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -345,8 +345,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample09"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -378,8 +378,8 @@ extra_css: <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10"> <ul class="navbar-nav"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Centered nav only</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Centered nav only</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/5.0/examples/offcanvas/index.html b/site/content/docs/5.0/examples/offcanvas-navbar/index.html index 3fce0cc51..5d6b2f3d3 100644 --- a/site/content/docs/5.0/examples/offcanvas/index.html +++ b/site/content/docs/5.0/examples/offcanvas-navbar/index.html @@ -1,11 +1,12 @@ --- layout: examples -title: Offcanvas template +title: Offcanvas navbar template extra_css: - "offcanvas.css" extra_js: - src: "offcanvas.js" body_class: "bg-light" +aliases: "/docs/5.0/examples/offcanvas/" --- <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation"> @@ -17,8 +18,8 @@ body_class: "bg-light" <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Dashboard</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Dashboard</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Notifications</a> @@ -46,7 +47,7 @@ body_class: "bg-light" </div> </nav> -<div class="nav-scroller bg-white shadow-sm"> +<div class="nav-scroller bg-body shadow-sm"> <nav class="nav nav-underline" aria-label="Secondary navigation"> <a class="nav-link active" aria-current="page" href="#">Dashboard</a> <a class="nav-link" href="#"> @@ -72,27 +73,27 @@ body_class: "bg-light" </div> </div> - <div class="my-3 p-3 bg-white rounded shadow-sm"> + <div class="my-3 p-3 bg-body rounded shadow-sm"> <h6 class="border-bottom pb-2 mb-0">Recent updates</h6> <div class="d-flex text-muted pt-3"> {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} <p class="pb-3 mb-0 small lh-sm border-bottom"> <strong class="d-block text-gray-dark">@username</strong> - Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. + Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps? </p> </div> <div class="d-flex text-muted pt-3"> {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}} <p class="pb-3 mb-0 small lh-sm border-bottom"> <strong class="d-block text-gray-dark">@username</strong> - Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. + Some more representative placeholder content, related to this other user. Another status update, perhaps. </p> </div> <div class="d-flex text-muted pt-3"> {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}} <p class="pb-3 mb-0 small lh-sm border-bottom"> <strong class="d-block text-gray-dark">@username</strong> - Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. + This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates. </p> </div> <small class="d-block text-end mt-3"> @@ -100,7 +101,7 @@ body_class: "bg-light" </small> </div> - <div class="my-3 p-3 bg-white rounded shadow-sm"> + <div class="my-3 p-3 bg-body rounded shadow-sm"> <h6 class="border-bottom pb-2 mb-0">Suggestions</h6> <div class="d-flex text-muted pt-3"> {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.css b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.css index 29e26b11b..29e26b11b 100644 --- a/site/content/docs/5.0/examples/offcanvas/offcanvas.css +++ b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.css diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.js b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.js index 793ea86cd..793ea86cd 100644 --- a/site/content/docs/5.0/examples/offcanvas/offcanvas.js +++ b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.js diff --git a/site/content/docs/5.0/examples/pricing/index.html b/site/content/docs/5.0/examples/pricing/index.html index 714283bad..c62c68c70 100644 --- a/site/content/docs/5.0/examples/pricing/index.html +++ b/site/content/docs/5.0/examples/pricing/index.html @@ -6,112 +6,182 @@ extra_css: include_js: false --- -<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"> - <p class="h5 my-0 me-md-auto fw-normal">Company name</p> - <nav class="my-2 my-md-0 me-md-3"> - <a class="p-2 text-dark" href="#">Features</a> - <a class="p-2 text-dark" href="#">Enterprise</a> - <a class="p-2 text-dark" href="#">Support</a> - <a class="p-2 text-dark" href="#">Pricing</a> - </nav> - <a class="btn btn-outline-primary" href="#">Sign up</a> -</header> +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="check" viewBox="0 0 16 16"> + <title>Check</title> + <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> +</svg> -<main class="container"> - <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> - <h1 class="display-4">Pricing</h1> - <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> - </div> +<div class="container py-3"> + <header> + <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Pricing example</span> + </a> - <div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <h4 class="my-0 fw-normal">Free</h4> - </div> - <div class="card-body"> - <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1> - <ul class="list-unstyled mt-3 mb-4"> - <li>10 users included</li> - <li>2 GB of storage</li> - <li>Email support</li> - <li>Help center access</li> - </ul> - <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button> - </div> + <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto"> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a> + <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a> + </nav> </div> + + <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> + <h1 class="display-4 fw-normal">Pricing</h1> + <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> </div> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <h4 class="my-0 fw-normal">Pro</h4> + </header> + + <main> + <div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> + <div class="col"> + <div class="card mb-4 rounded-3 shadow-sm"> + <div class="card-header py-3"> + <h4 class="my-0 fw-normal">Free</h4> + </div> + <div class="card-body"> + <h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1> + <ul class="list-unstyled mt-3 mb-4"> + <li>10 users included</li> + <li>2 GB of storage</li> + <li>Email support</li> + <li>Help center access</li> + </ul> + <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button> + </div> + </div> </div> - <div class="card-body"> - <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1> - <ul class="list-unstyled mt-3 mb-4"> - <li>20 users included</li> - <li>10 GB of storage</li> - <li>Priority email support</li> - <li>Help center access</li> - </ul> - <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button> + <div class="col"> + <div class="card mb-4 rounded-3 shadow-sm"> + <div class="card-header py-3"> + <h4 class="my-0 fw-normal">Pro</h4> + </div> + <div class="card-body"> + <h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1> + <ul class="list-unstyled mt-3 mb-4"> + <li>20 users included</li> + <li>10 GB of storage</li> + <li>Priority email support</li> + <li>Help center access</li> + </ul> + <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button> + </div> + </div> </div> - </div> - </div> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <h4 class="my-0 fw-normal">Enterprise</h4> - </div> - <div class="card-body"> - <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1> - <ul class="list-unstyled mt-3 mb-4"> - <li>30 users included</li> - <li>15 GB of storage</li> - <li>Phone and email support</li> - <li>Help center access</li> - </ul> - <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button> + <div class="col"> + <div class="card mb-4 rounded-3 shadow-sm border-primary"> + <div class="card-header py-3 text-white bg-primary border-primary"> + <h4 class="my-0 fw-normal">Enterprise</h4> + </div> + <div class="card-body"> + <h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1> + <ul class="list-unstyled mt-3 mb-4"> + <li>30 users included</li> + <li>15 GB of storage</li> + <li>Phone and email support</li> + <li>Help center access</li> + </ul> + <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button> + </div> + </div> </div> </div> + + <h2 class="display-6 text-center mb-4">Compare plans</h2> + + <div class="table-responsive"> + <table class="table text-center"> + <thead> + <tr> + <th style="width: 34%;"></th> + <th style="width: 22%;">Free</th> + <th style="width: 22%;">Pro</th> + <th style="width: 22%;">Enterprise</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" class="text-start">Public</th> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Private</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + </tbody> + + <tbody> + <tr> + <th scope="row" class="text-start">Permissions</th> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Sharing</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Unlimited members</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Extra security</th> + <td></td> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + </tbody> + </table> </div> - </div> + </main> <footer class="pt-4 my-md-5 pt-md-5 border-top"> <div class="row"> <div class="col-12 col-md"> <img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19"> - <small class="d-block mb-3 text-muted">© 2017-{{< year >}}</small> + <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small> </div> <div class="col-6 col-md"> <h5>Features</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Cool stuff</a></li> - <li><a class="link-secondary" href="#">Random feature</a></li> - <li><a class="link-secondary" href="#">Team feature</a></li> - <li><a class="link-secondary" href="#">Stuff for developers</a></li> - <li><a class="link-secondary" href="#">Another one</a></li> - <li><a class="link-secondary" href="#">Last time</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Resource</a></li> - <li><a class="link-secondary" href="#">Resource name</a></li> - <li><a class="link-secondary" href="#">Another resource</a></li> - <li><a class="link-secondary" href="#">Final resource</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li> </ul> </div> <div class="col-6 col-md"> <h5>About</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Team</a></li> - <li><a class="link-secondary" href="#">Locations</a></li> - <li><a class="link-secondary" href="#">Privacy</a></li> - <li><a class="link-secondary" href="#">Terms</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li> </ul> </div> </div> </footer> -</main> +</div> diff --git a/site/content/docs/5.0/examples/pricing/pricing.css b/site/content/docs/5.0/examples/pricing/pricing.css index 70afca134..c7304d10b 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/product/index.html b/site/content/docs/5.0/examples/product/index.html index 8a25fe1dd..291901efa 100644 --- a/site/content/docs/5.0/examples/product/index.html +++ b/site/content/docs/5.0/examples/product/index.html @@ -71,14 +71,14 @@ extra_css: <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 py-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> </div> @@ -88,14 +88,14 @@ extra_css: <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 py-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> </div> </main> @@ -104,7 +104,7 @@ extra_css: <div class="row"> <div class="col-12 col-md"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> - <small class="d-block mb-3 text-muted">© 2017-{{< year >}}</small> + <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small> </div> <div class="col-6 col-md"> <h5>Features</h5> 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 000000000..cdb7d8eac --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/index.html @@ -0,0 +1,391 @@ +--- +layout: examples +title: Sidebars +extra_css: + - "sidebars.css" +extra_js: + - src: "sidebars.js" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="home" viewBox="0 0 16 16"> + <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> + </symbol> + <symbol id="speedometer2" viewBox="0 0 16 16"> + <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/> + </symbol> + <symbol id="table" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/> + </symbol> + <symbol id="people-circle" viewBox="0 0 16 16"> + <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> + <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> + </symbol> + <symbol id="grid" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + </symbol> + <symbol id="collection" viewBox="0 0 16 16"> + <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/> + </symbol> + <symbol id="calendar3" viewBox="0 0 16 16"> + <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> + <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> + </symbol> + <symbol id="chat-quote-fill" viewBox="0 0 16 16"> + <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> + </symbol> + <symbol id="cpu-fill" viewBox="0 0 16 16"> + <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/> + </symbol> + <symbol id="gear-fill" viewBox="0 0 16 16"> + <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/> + </symbol> + <symbol id="speedometer" viewBox="0 0 16 16"> + <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/> + </symbol> + <symbol id="toggles2" viewBox="0 0 16 16"> + <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/> + <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/> + <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/> + </symbol> + <symbol id="tools" viewBox="0 0 16 16"> + <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/> + </symbol> + <symbol id="chevron-right" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> + </symbol> + <symbol id="geo-fill" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/> + </symbol> +</svg> + +<main> + <h1 class="visually-hidden">Sidebars examples</h1> + + <div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> + </a> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active" aria-current="page"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + <hr> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> + <strong>mdo</strong> + </a> + <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="d-flex flex-column p-3 bg-light" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> + </a> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active" aria-current="page"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + <hr> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> + <strong>mdo</strong> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="d-flex flex-column bg-light" style="width: 4.5rem;"> + <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="visually-hidden">Icon-only</span> + </a> + <ul class="nav nav-pills nav-flush flex-column mb-auto text-center"> + <li class="nav-item"> + <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#speedometer2"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#table"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#grid"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#people-circle"/></svg> + </a> + </li> + </ul> + <div class="dropdown border-top"> + <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="p-3 bg-white" style="width: 280px;"> + <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> + <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + <span class="fs-5 fw-semibold">Collapsible</span> + </a> + <ul class="list-unstyled ps-0"> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true"> + Home + </button> + <div class="collapse show" id="home-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">Overview</a></li> + <li><a href="#" class="link-dark rounded">Updates</a></li> + <li><a href="#" class="link-dark rounded">Reports</a></li> + </ul> + </div> + </li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false"> + Dashboard + </button> + <div class="collapse" id="dashboard-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">Overview</a></li> + <li><a href="#" class="link-dark rounded">Weekly</a></li> + <li><a href="#" class="link-dark rounded">Monthly</a></li> + <li><a href="#" class="link-dark rounded">Annually</a></li> + </ul> + </div> + </li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false"> + Orders + </button> + <div class="collapse" id="orders-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">New</a></li> + <li><a href="#" class="link-dark rounded">Processed</a></li> + <li><a href="#" class="link-dark rounded">Shipped</a></li> + <li><a href="#" class="link-dark rounded">Returned</a></li> + </ul> + </div> + </li> + <li class="border-top my-3"></li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false"> + Account + </button> + <div class="collapse" id="account-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">New...</a></li> + <li><a href="#" class="link-dark rounded">Profile</a></li> + <li><a href="#" class="link-dark rounded">Settings</a></li> + <li><a href="#" class="link-dark rounded">Sign out</a></li> + </ul> + </div> + </li> + </ul> + </div> + + <div class="b-example-divider"></div> + + <div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;"> + <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom"> + <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + <span class="fs-5 fw-semibold">List group</span> + </a> + <div class="list-group list-group-flush border-bottom scrollarea"> + <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small>Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + </div> + </div> + + <div class="b-example-divider"></div> +</main> 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 000000000..22678b93a --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/sidebars.css @@ -0,0 +1,82 @@ +main { + display: flex; + flex-wrap: nowrap; + height: 100vh; + height: -webkit-fill-available; + overflow-x: auto; + overflow-y: hidden; +} +main > * { + 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 000000000..68384c163 --- /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 ac5b6104b..fb885ba41 100644 --- a/site/content/docs/5.0/examples/sign-in/index.html +++ b/site/content/docs/5.0/examples/sign-in/index.html @@ -11,16 +11,22 @@ include_js: false <form> <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> <h1 class="h3 mb-3 fw-normal">Please sign in</h1> - <label for="inputEmail" class="visually-hidden">Email address</label> - <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> - <label for="inputPassword" class="visually-hidden">Password</label> - <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> + + <div class="form-floating"> + <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating"> + <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> - <p class="mt-5 mb-3 text-muted">© 2017-{{< year >}}</p> + <p class="mt-5 mb-3 text-muted">© 2017–{{< year >}}</p> </form> </main> diff --git a/site/content/docs/5.0/examples/sign-in/signin.css b/site/content/docs/5.0/examples/sign-in/signin.css index eaa08ba61..4732d1fb9 100644 --- a/site/content/docs/5.0/examples/sign-in/signin.css +++ b/site/content/docs/5.0/examples/sign-in/signin.css @@ -17,24 +17,21 @@ body { padding: 15px; margin: auto; } + .form-signin .checkbox { font-weight: 400; } -.form-signin .form-control { - position: relative; - box-sizing: border-box; - height: auto; - padding: 10px; - font-size: 16px; -} -.form-signin .form-control:focus { + +.form-signin .form-floating:focus-within { z-index: 2; } + .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; diff --git a/site/content/docs/5.0/examples/starter-template/index.html b/site/content/docs/5.0/examples/starter-template/index.html index ed2151447..48a5cbfad 100644 --- a/site/content/docs/5.0/examples/starter-template/index.html +++ b/site/content/docs/5.0/examples/starter-template/index.html @@ -5,46 +5,47 @@ extra_css: - "starter-template.css" --- -<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> - <div class="container-fluid"> - <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> +<div class="col-lg-8 mx-auto p-3 py-md-5"> + <header class="d-flex align-items-center pb-3 mb-5 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Starter template</span> + </a> + </header> - <div class="collapse navbar-collapse" id="navbarsExampleDefault"> - <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown01"> - <li><a class="dropdown-item" href="#">Action</a></li> - <li><a class="dropdown-item" href="#">Another action</a></li> - <li><a class="dropdown-item" href="#">Something else here</a></li> - </ul> - </li> - </ul> - <form class="d-flex"> - <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success" type="submit">Search</button> - </form> + <main> + <h1>Get started with Bootstrap</h1> + <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p> + + <div class="mb-5"> + <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a> </div> - </div> -</nav> -<main class="container"> + <hr class="col-3 col-md-2 mb-5"> - <div class="starter-template text-center py-5 px-3"> - <h1>Bootstrap starter template</h1> - <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> - </div> + <div class="row g-5"> + <div class="col-md-6"> + <h2>Starter projects</h2> + <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p> + <ul class="icon-list"> + <li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li> + <li class="text-muted">Bootstrap Parcel starter (coming soon!)</li> + </ul> + </div> -</main><!-- /.container --> + <div class="col-md-6"> + <h2>Guides</h2> + <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p> + <ul class="icon-list"> + <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li> + <li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li> + <li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li> + <li><a href="{{< docsref "/getting-started/build-tools" >}}">Contributing to Bootstrap</a></li> + </ul> + </div> + </div> + </main> + <footer class="pt-5 my-5 text-muted border-top"> + Created by the Bootstrap team · © {{< year >}} + </footer> +</div> 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 6fb709105..d03436db0 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/content/docs/5.0/examples/sticky-footer-navbar/index.html b/site/content/docs/5.0/examples/sticky-footer-navbar/index.html index 0b51fee5a..ce036dc09 100644 --- a/site/content/docs/5.0/examples/sticky-footer-navbar/index.html +++ b/site/content/docs/5.0/examples/sticky-footer-navbar/index.html @@ -17,8 +17,8 @@ body_class: "d-flex flex-column h-100" </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/5.0/extend/approach.md b/site/content/docs/5.0/extend/approach.md index 552b5f29b..32efbf541 100644 --- a/site/content/docs/5.0/extend/approach.md +++ b/site/content/docs/5.0/extend/approach.md @@ -76,3 +76,11 @@ Specifically regarding custom CSS, utilities can help combat increasing file siz ## Flexible HTML While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (`>`). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific. + +## Code conventions + +[Code Guide](https://codeguide.co/) (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more. + +We use [Stylelint](https://stylelint.io/) to enforce these standards and more in our Sass/CSS. [Our custom Stylelint config](https://github.com/twbs/stylelint-config-twbs-bootstrap) is open source and available for others to use and extend. + +We use [vnu-jar](https://www.npmjs.com/package/vnu-jar) to enforce standard and semantic HTML, as well as detecting common errors. diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.0/forms/checks-radios.md index ae89f5ee3..7fefb6aa6 100644 --- a/site/content/docs/5.0/forms/checks-radios.md +++ b/site/content/docs/5.0/forms/checks-radios.md @@ -269,3 +269,9 @@ Different variants of `.btn`, such at the various outlined styles, are supported <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off"> <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md index 3163ea8e0..941055089 100644 --- a/site/content/docs/5.0/forms/floating-labels.md +++ b/site/content/docs/5.0/forms/floating-labels.md @@ -61,7 +61,7 @@ To set a custom height on your `<textarea>`, do not use the `rows` attribute. In ## Selects -Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they'll always show the `<label>` in its floated state. +Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they'll always show the `<label>` in its floated state. **Selects with `size` and `multiple` are not supported.** {{< example >}} <div class="form-floating"> @@ -100,3 +100,9 @@ When working with the Bootstrap grid system, be sure to place form elements with </div> </div> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md index e35f09967..41fd759d7 100644 --- a/site/content/docs/5.0/forms/form-control.md +++ b/site/content/docs/5.0/forms/form-control.md @@ -130,3 +130,17 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist). <option value="Chicago"> </datalist> {{< /example >}} + +## Sass + +### Variables + +`$input-*` are shared across most of our form controls (and not buttons). + +{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}} + +`$form-label-*` and `$form-text-*` are for our `<label>`s and `.form-text` component. + +{{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="form-text-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md index 0e0836b5f..00e9eeec9 100644 --- a/site/content/docs/5.0/forms/input-group.md +++ b/site/content/docs/5.0/forms/input-group.md @@ -81,19 +81,19 @@ Add the relative form sizing classes to the `.input-group` itself and contents w ## Checkboxes and radios -Place any checkbox or radio option within an input group's addon instead of text. +Place any checkbox or radio option within an input group's addon instead of text. We recommend adding `.mt-0` to the `.form-check-input` when there's no visible text next to the input. {{< example >}} <div class="input-group mb-3"> <div class="input-group-text"> - <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input"> + <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input"> </div> <input type="text" class="form-control" aria-label="Text input with checkbox"> </div> <div class="input-group"> <div class="input-group-text"> - <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input"> + <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input"> </div> <input type="text" class="form-control" aria-label="Text input with radio button"> </div> @@ -308,3 +308,9 @@ Input groups include support for custom selects and custom file inputs. Browser <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button> </div> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/forms/layout.md b/site/content/docs/5.0/forms/layout.md index f0fc0b582..47e2f8ab7 100644 --- a/site/content/docs/5.0/forms/layout.md +++ b/site/content/docs/5.0/forms/layout.md @@ -292,7 +292,7 @@ You can then remix that once again with size-specific column classes. ## Inline forms -Use the `.col-auto` class to create horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly. +Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly. {{< example >}} <form class="row row-cols-lg-auto g-3 align-items-center"> diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.0/forms/overview.md index dcd8e8ccd..40e9b6b4f 100644 --- a/site/content/docs/5.0/forms/overview.md +++ b/site/content/docs/5.0/forms/overview.md @@ -142,3 +142,13 @@ For situations where it's not possible to include a visible `<label>` or appropr If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches. While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability. + +## Sass + +Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$btn-input-*` and `$input-*` variables. + +### Variables + +`$btn-input-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables. + +{{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/forms/range.md b/site/content/docs/5.0/forms/range.md index 7e95e0edf..302d6ce68 100644 --- a/site/content/docs/5.0/forms/range.md +++ b/site/content/docs/5.0/forms/range.md @@ -41,3 +41,9 @@ By default, range inputs "snap" to integer values. To change this, you can speci <label for="customRange3" class="form-label">Example range</label> <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/forms/select.md b/site/content/docs/5.0/forms/select.md index e2b0bd6a8..7f0c255ef 100644 --- a/site/content/docs/5.0/forms/select.md +++ b/site/content/docs/5.0/forms/select.md @@ -73,3 +73,9 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara <option value="3">Three</option> </select> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md index dfdd72c9f..128f6b408 100644 --- a/site/content/docs/5.0/forms/validation.md +++ b/site/content/docs/5.0/forms/validation.md @@ -349,16 +349,34 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas </form> {{< /example >}} -## Customizing +## Sass -Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is looped over to generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback. +### Variables -Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin. +{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}} -This is the Sass map from `_variables.scss`. Override this and recompile your Sass to generate different states: +### Mixins + +Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles. + +{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} + +### Map + +This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. {{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}} -This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop: +Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. + +### Loop + +Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. {{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}} + +### Customizing + +Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback. + +Please note that **we do not recommend customizing `$form-validation-states` values without also modifying the `form-validation-state` mixin**. diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index c55df5026..e9f1cb316 100644 --- a/site/content/docs/5.0/getting-started/accessibility.md +++ b/site/content/docs/5.0/getting-started/accessibility.md @@ -10,7 +10,7 @@ Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, ## Overview and limitations -The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1](https://www.w3.org/TR/WCAG21/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements. +The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements. ### Structural markup @@ -24,7 +24,7 @@ Because Bootstrap's components are purposely designed to be fairly generic, auth ### Color contrast -Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG21/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios. +Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios. ### Visually hidden content @@ -45,17 +45,18 @@ For visually hidden interactive controls, such as traditional "skip" links, use ### Reduced motion -Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down. +Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down. On browsers that support `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), Bootstrap enables smooth scrolling using the `scroll-behavior` property. ## Additional resources -- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) +- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/) - [The A11Y Project](https://www.a11yproject.com/) - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility) - [Tenon.io Accessibility Checker](https://tenon.io/) -- [Color Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/) +- [Color Contrast Analyser (CCA)](https://www.tpgi.com/color-contrast-checker/) - ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer) - [Microsoft Accessibility Insights](https://accessibilityinsights.io/) - [Deque Axe testing tools](https://www.deque.com/axe/) +- [Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/) diff --git a/site/content/docs/5.0/getting-started/build-tools.md b/site/content/docs/5.0/getting-started/build-tools.md index 46ad928d4..d0286375e 100644 --- a/site/content/docs/5.0/getting-started/build-tools.md +++ b/site/content/docs/5.0/getting-started/build-tools.md @@ -65,6 +65,16 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag </tbody> </table> +{{< callout info >}} +{{< partial "callout-info-npm-starter.md" >}} +{{< /callout >}} + +## Sass + +Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). + +Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don't lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding. + ## Autoprefixer Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3. diff --git a/site/content/docs/5.0/getting-started/download.md b/site/content/docs/5.0/getting-started/download.md index e053eac39..48578572b 100644 --- a/site/content/docs/5.0/getting-started/download.md +++ b/site/content/docs/5.0/getting-started/download.md @@ -21,10 +21,10 @@ This doesn't include documentation, source files, or any optional JavaScript dep Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling: -- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS. +- [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) for compiling Sass source files into CSS files - [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing -Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes. +Should you require our full set of [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes. <a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a> @@ -52,7 +52,7 @@ If you're using our compiled JavaScript and prefer to include Popper separately, ## Package managers -Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. +Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. ### npm @@ -70,6 +70,10 @@ Bootstrap's `package.json` contains some additional metadata under the following - `sass` - path to Bootstrap's main [Sass](https://sass-lang.com/) source file - `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization) +{{< callout info >}} +{{< partial "callout-info-npm-starter.md" >}} +{{< /callout >}} + ### yarn Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap): diff --git a/site/content/docs/5.0/getting-started/introduction.md b/site/content/docs/5.0/getting-started/introduction.md index 9cd0890c3..9cb85e6c5 100644 --- a/site/content/docs/5.0/getting-started/introduction.md +++ b/site/content/docs/5.0/getting-started/introduction.md @@ -24,7 +24,7 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee ### JS -Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper](https://popper.js.org/). Place **one of following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them. +Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper](https://popper.js.org/). Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them. #### Bundle @@ -101,7 +101,7 @@ Be sure to have your pages set up with the latest design and development standar </html> ``` -That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components. +For next steps, visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components. ## Important globals @@ -130,7 +130,7 @@ You can see an example of this in action in the [starter template](#starter-temp ### Box-sizing -For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine. +For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine. On the rare occasion you need to override it, use something like the following: @@ -152,11 +152,10 @@ For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/rebo Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources. -- Follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}). - Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}). - Join [the official Slack room]({{< param slack >}}). - Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel. - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)). -- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability. +- Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability. You can also follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}) for the latest gossip and awesome music videos. diff --git a/site/content/docs/5.0/getting-started/javascript.md b/site/content/docs/5.0/getting-started/javascript.md index 53845fdfc..f57a3aedf 100644 --- a/site/content/docs/5.0/getting-started/javascript.md +++ b/site/content/docs/5.0/getting-started/javascript.md @@ -93,6 +93,15 @@ var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized w If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. In order to retrieve it directly from an element, do this: `bootstrap.Popover.getInstance(myPopoverEl)`. +### CSS selectors in constructors + +You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin. Currently the element for the plugin is found by the `querySelector` method since our plugins support a single element only. + +```js +var modal = new bootstrap.Modal('#myModal') +var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]') +``` + ### Asynchronous functions and transitions All programmatic API methods are **asynchronous** and return to the caller once the transition is started but **before it ends**. diff --git a/site/content/docs/5.0/getting-started/parcel.md b/site/content/docs/5.0/getting-started/parcel.md new file mode 100644 index 000000000..23aab0054 --- /dev/null +++ b/site/content/docs/5.0/getting-started/parcel.md @@ -0,0 +1,99 @@ +--- +layout: docs +title: Parcel +description: Learn how to include Bootstrap in your project using Parcel. +group: getting-started +toc: true +--- + +## Install Parcel + +Install [Parcel Bundler](https://en.parceljs.org/getting_started.html). + +## Install Bootstrap + +[Install bootstrap]({{< docsref "/getting-started/download#npm" >}}) as a Node.js module using npm. + +Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property. This means that you will have to make sure to add both of them to your `package.json` using `npm install @popperjs/core`. + +When all will be completed, your project will be structured like this: + +```text +project-name/ +├── build/ +├── node_modules/ +│ └── bootstrap/ +│ └── popper.js/ +├── scss/ +│ └── custom.scss +├── src/ +│ └── index.html +│ └── index.js +└── package.json +``` + +## Importing JavaScript + +Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) in your app's entry point (usually `src/index.js`). You can import all our plugins in one file or separately if you require only a subset of them. + +```js +// Import all plugins +import * as bootstrap from 'bootstrap'; + +// Or import only needed plugins +import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap'; + +// Or import just one +import Alert as Alert from '../node_modules/bootstrap/js/dist/alert'; +``` + +## Importing CSS + +To utilize the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process. + +Create your own `scss/custom.scss` to [import Bootstrap's Sass files]({{< docsref "/customize/sass#importing" >}}) and then override the [built-in custom variables]({{< docsref "/customize/sass#variable-defaults" >}}). + +## Build app + +Include `src/index.js` before the closing `</body>` tag. + +```html +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + </head> + <body> + <script src="./index.js"></script> + </body> +</html> +``` + +### Edit `package.json` + +Add `dev` and `build` scripts in your `package.json` file. + +```json +"scripts": { + "dev": "parcel ./src/index.html", + "prebuild": "npx rimraf build", + "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build" +} +``` + +### Run dev script + +Your app will be accessible at `http://127.0.0.1:1234`. + +```sh +npm run dev +``` + +### Build app files + +Built files are in the `build/` folder. + +```sh +npm run build +``` diff --git a/site/content/docs/5.0/getting-started/rtl.md b/site/content/docs/5.0/getting-started/rtl.md index 62287a341..3e1f7a207 100644 --- a/site/content/docs/5.0/getting-started/rtl.md +++ b/site/content/docs/5.0/getting-started/rtl.md @@ -53,10 +53,10 @@ You can see the above requirements reflected in this modified RTL starter templa <!-- Optional JavaScript; choose one of the two! --> - <!-- Option 1: Bootstrap Bundle with Popper.js --> + <!-- Option 1: Bootstrap Bundle with Popper --> <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script> - <!-- Option 2: Separate Popper.js and Bootstrap JS --> + <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script> <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script> @@ -93,7 +93,7 @@ Using [RTLCSS value directives](https://rtlcss.com/learn/usage-guide/value-direc $font-weight-bold: 700 #{/* rtl:600 */} !default; ``` -Which would ouput to the following for our default CSS and RTL CSS: +Which would output to the following for our default CSS and RTL CSS: ```css /* bootstrap.css */ @@ -116,6 +116,8 @@ For example, to switch from `Helvetica Neue Webfont` for LTR to `Helvetica Neue ```scss $font-family-sans-serif: Helvetica Neue #{"/* rtl:insert:Arabic */"}, + // Cross-platform generic font family (default user interface font) + system-ui, // Safari for macOS and iOS (San Francisco) -apple-system, // Chrome < 56 for macOS (San Francisco) @@ -134,6 +136,42 @@ $font-family-sans-serif: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; ``` +### LTR and RTL at the same time + +Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://rtlcss.com/learn/usage-guide/string-map/), this is pretty straightforward. Wrap your `@import`s with a class, and set a custom rename rule for RTLCSS: + +```scss +/* rtl:begin:options: { + "autoRename": true, + "stringMap":[ + "name": "ltr-rtl", + "priority": 100, + "search": ["ltr"], + "replace": ["rtl"], + "options": { + "scope": "*", + "ignoreCase": false + } + ] +} */ +.ltr { + @import "../node_modules/bootstrap/scss/bootstrap"; +} +/*rtl:end:options*/ +``` + +After running Sass then RTLCSS, each selector in your CSS files will be prepended by `.ltr`, and `.rtl` for RTL files. Now you're able to use both files on the same page, and simply use `.ltr` or `.rtl` on your components wrappers to use one or the other direction. + +{{< callout warning >}} +#### Edge cases and known limitations + +While this approach is understandable, please pay attention to the following: + +1. When switching `.ltr` and `.rtl`, make sure you add `dir` and `lang` attributes accordingly. +2. Loading both files can be a real performance bottleneck: consider some [optimization]({{< docsref "/customize/optimize" >}}), and maybe try to [load one of those files asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/). +3. Nesting styles this way will prevent our `form-validation-state()` mixin from working as intended, thus require you tweak it a bit by yourself. [See #31223](https://github.com/twbs/bootstrap/issues/31223). +{{< /callout >}} + ## The breadcrumb case The [breadcrumb separator]({{< docsref "/components/breadcrumb" >}}/#changing-the-separator) is the only case requiring its own brand new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`. diff --git a/site/content/docs/5.0/getting-started/webpack.md b/site/content/docs/5.0/getting-started/webpack.md index 4b9c525dd..6998e1e99 100644 --- a/site/content/docs/5.0/getting-started/webpack.md +++ b/site/content/docs/5.0/getting-started/webpack.md @@ -27,7 +27,7 @@ import Alert from 'bootstrap/js/dist/alert'; ``` Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property. -This means that you will have to make sure to add it to your `package.json` using `npm install popper.js`. +This means that you will have to make sure to add it to your `package.json` using `npm install @popperjs/core`. ## Importing Styles diff --git a/site/content/docs/5.0/helpers/colored-links.md b/site/content/docs/5.0/helpers/colored-links.md index ffaf7cdba..e940196ff 100644 --- a/site/content/docs/5.0/helpers/colored-links.md +++ b/site/content/docs/5.0/helpers/colored-links.md @@ -6,7 +6,7 @@ group: helpers toc: false --- -You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors#colors" >}}), these classes have a `:hover` and `:focus` state. +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. {{< example >}} {{< colored-links.inline >}} diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md index 62e173ff1..771bc07cb 100644 --- a/site/content/docs/5.0/helpers/ratio.md +++ b/site/content/docs/5.0/helpers/ratio.md @@ -49,10 +49,10 @@ Aspect ratios can be customized with modifier classes. By default the following Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part. -For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`. +For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`. {{< example class="bd-example-ratios" >}} -<div class="ratio" style="--aspect-ratio: 50%;"> +<div class="ratio" style="--bs-aspect-ratio: 50%;"> <div>2x1</div> </div> {{< /example >}} @@ -62,7 +62,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T ```scss .ratio-4x3 { @include media-breakpoint-up(md) { - --aspect-ratio: 50%; // 2x1 + --bs-aspect-ratio: 50%; // 2x1 } } ``` diff --git a/site/content/docs/5.0/helpers/stretched-link.md b/site/content/docs/5.0/helpers/stretched-link.md index 743796850..93bffeb31 100644 --- a/site/content/docs/5.0/helpers/stretched-link.md +++ b/site/content/docs/5.0/helpers/stretched-link.md @@ -5,7 +5,7 @@ description: Make any HTML element or Bootstrap component clickable by "stretchi group: helpers --- -Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. +Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. Please note given [how CSS `position` works](https://www.w3.org/TR/CSS21/visuren.html#propdef-position), `.stretched-link` cannot be mixed with most table elements. Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes. @@ -29,13 +29,12 @@ Most custom components do not have `position: relative` by default, so we need t {{< placeholder width="144" height="144" class="flex-shrink-0 me-3" text="false" title="Generic placeholder image" >}} <div> <h5 class="mt-0">Custom component with stretched link</h5> - <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> + <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p> <a href="#" class="stretched-link">Go somewhere</a> </div> </div> {{< /example >}} - {{< example >}} <div class="row g-0 bg-light position-relative"> <div class="col-md-6 mb-md-0 p-md-4"> @@ -43,7 +42,7 @@ Most custom components do not have `position: relative` by default, so we need t </div> <div class="col-md-6 p-4 ps-md-0"> <h5 class="mt-0">Columns with stretched link</h5> - <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> + <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p> <a href="#" class="stretched-link">Go somewhere</a> </div> </div> diff --git a/site/content/docs/5.0/helpers/visually-hidden.md b/site/content/docs/5.0/helpers/visually-hidden.md index f80160edd..d8148b3f3 100644 --- a/site/content/docs/5.0/helpers/visually-hidden.md +++ b/site/content/docs/5.0/helpers/visually-hidden.md @@ -6,13 +6,16 @@ group: helpers aliases: "/docs/5.0/helpers/screen-readers/" --- -Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. +Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus. {{< example >}} <h2 class="visually-hidden">Title for screen readers</h2> <a class="visually-hidden-focusable" href="#content">Skip to main content</a> +<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div> {{< /example >}} +Both `visually-hidden` and `visually-hidden-focusable` can also be used as mixins. + ```scss // Usage as a mixin diff --git a/site/content/docs/5.0/layout/breakpoints.md b/site/content/docs/5.0/layout/breakpoints.md index 5c701e403..ce1df6bb7 100644 --- a/site/content/docs/5.0/layout/breakpoints.md +++ b/site/content/docs/5.0/layout/breakpoints.md @@ -1,7 +1,7 @@ --- layout: docs title: Breakpoints -description: Breakpoints are the triggers in Bootstrap for how your layout responsive changes across device or viewport sizes. +description: Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap. group: layout aliases: "/docs/5.0/layout/" toc: true diff --git a/site/content/docs/5.0/layout/columns.md b/site/content/docs/5.0/layout/columns.md index 9d4f538b5..5c859065a 100644 --- a/site/content/docs/5.0/layout/columns.md +++ b/site/content/docs/5.0/layout/columns.md @@ -303,15 +303,15 @@ The classes can be used together with utilities to create responsive floated ima {{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" >}} <p> - Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image. </p> <p> - Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Id nullam tellus relem amet commodo telemque olemit. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. + As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read. </p> <p> - Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lantaarnpaal quam venenatis vestibulum. Donec sed odio dui. Maecenas faucibus mollis interdum. Nullam quis risus eget urna salsa tequila vel eu leo. Donec id elit non mi porta gravida at eget metus. + And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here. </p> </div> {{< /example >}} diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md index 76b65c1bc..d0c7a80f7 100644 --- a/site/content/docs/5.0/layout/grid.md +++ b/site/content/docs/5.0/layout/grid.md @@ -17,14 +17,14 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout {{< example class="bd-example-row" >}} <div class="container"> <div class="row"> - <div class="col-sm"> - One of three columns + <div class="col"> + Column </div> - <div class="col-sm"> - One of three columns + <div class="col"> + Column </div> - <div class="col-sm"> - One of three columns + <div class="col"> + Column </div> </div> </div> @@ -434,6 +434,9 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS // Make the element grid-ready (applying everything but the width) @include make-col-ready(); + +// Without optional size values, the mixin will create equal columns (similar to using .col) +@include make-col(); @include make-col($size, $columns: $grid-columns); // Get fancy by offsetting, or changing the sort order diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 0cf0618e4..3ee604d44 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -7,6 +7,50 @@ aliases: "/migration/" toc: true --- +## v5.0.0 + +### JavaScript + +- Dropdowns now have one more option (`autoClose`) to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive. + +## v5.0.0-beta3 + +### Components + +- Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups. + +### JavaScript + +- All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin: + + ```js + var modal = new bootstrap.Modal('#myModal') + var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]') + ``` + +- Dropped `flip` option for dropdown plugin in favor of native popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier. + +### Utilities + +- Dropped the `0` entry in `$border-widths` map to remove the duplicated `.border-0` class. + +## v5.0.0-beta2 + +### Utilities + +- Renamed `--aspect-ratio` to `--bs-aspect-ratio` to be consistent with other custom properties. +- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`. +- `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore. +- Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757). + +### JavaScript + +- Restored `offset` option for Dropdown, Popover and Tooltip plugins. +- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements. +- All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element. +- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static and `data-bs-popper="none"` when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning. +- `popperConfig` can be passed as a function that accepts the Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way. + ## v5.0.0-beta1 ### RTL @@ -19,7 +63,7 @@ Horizontal direction sensitive variables, utilities and mixins are renamed with ##### Components -- Renamed `.dropleft` and `.dropright` to `.dropstart` and `dropend`. +- Renamed `.dropleft` and `.dropright` to `.dropstart` and `.dropend`. - Renamed `.dropdown-menu-*-left` and `.dropdown-menu-*-right` to `.dropdown-menu-*-start` and `.dropdown-menu-*-end`. - Renamed `.bs-popover-left` and `.bs-popover-right` to `.bs-popover-start` and `.bs-popover-end`. - Renamed `.bs-tooltip-left` and `.bs-tooltip-right` to `.bs-tooltip-start` and `.bs-tooltip-end`. @@ -35,7 +79,9 @@ Horizontal direction sensitive variables, utilities and mixins are renamed with - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`. - Renamed `.text-left` and `.text-right` to `.text-start` and `.text-end`. -Breakpoints specific variants are consequently renamed too (eg. `.text-md-start` replaces `.text-md-left`). +Breakpoints specific variants are consequently renamed too (e.g. `.text-md-start` replaces `.text-md-left`). + +**Note**: if you used v4 to make RTL pages, ensure to reverse changes mentioned above: e.g. use `.*-start` where you used `.*-right`. ##### Mixins @@ -52,15 +98,21 @@ Breakpoints specific variants are consequently renamed too (eg. `.text-md-start` - Renamed `$form-check-inline-margin-right` to `$form-check-inline-margin-end`. - Renamed `$form-select-feedback-icon-padding-right` to `$form-select-feedback-icon-padding-end`. - ### JavaScript - Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`. +- Updated Popper to v2.x: + - Removed `offset` option from our Tooltip/Popover and Dropdown plugins; this can still be achieved using the `popperConfig` parameter. + - The `fallbackPlacement` option has become `fallbackPlacements`. ### Sass - Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function. +### Utilities + +- Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements. + ### Components #### Breadcrumbs @@ -68,6 +120,10 @@ Breakpoints specific variants are consequently renamed too (eg. `.text-md-start` - Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`. - Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS. +#### Toasts + +- Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}). + ## v5.0.0-alpha3 ### Browser support @@ -102,6 +158,7 @@ Breakpoints specific variants are consequently renamed too (eg. `.text-md-start` - Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency. - Added `.d-grid` to display utilities - Added new `gap` utilities (`.gap`) for CSS Grid layouts +- Removed `.rounded-sm` and `rounded-lg`, and introduced `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687). ## v5.0.0-alpha2 @@ -288,7 +345,7 @@ We've updated the color system that powers Bootstrap to improve color contrast a Changes to any layout tools and our grid system. -- Dropped the `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265). +- Dropped the `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}). - Remove `position: relative` from grid columns. - The horizontal padding is added to the direct children in a row instead of the columns themselves. - This simplifies our codebase. @@ -296,6 +353,7 @@ Changes to any layout tools and our grid system. - The responsive gutter classes can be used to control the gutter width in horizontal, vertical or both directions. - The gutter width is now set in `rem` and decreased from `30px` to `1.5rem` (24px). - `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way the grid system can be used, even if `box-sizing: border-box` is not applied to each element. +- Removed `.no-gutters` in favor of new gutter spacing classes. Use `.g-0` instead. [Read the gutter docs for more details.]({{< docsref "/layout/gutters" >}}) ### Content, Reboot, etc @@ -346,6 +404,7 @@ Changes to Reboot, typography, tables, and more. - Dropped support for `.form-control-plaintext` inside `.input-group`s. - Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. - Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476) +- `.form-text` no longer sets `display`, but does set `color` and `font-size`. So instead of `<small class="form-text text-muted">` you should now use `<div class="form-text">`. ### Components diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md index 70e4c3aad..6610f9ee0 100644 --- a/site/content/docs/5.0/utilities/api.md +++ b/site/content/docs/5.0/utilities/api.md @@ -83,7 +83,7 @@ Output: .o-100 { opacity: 1; } ``` -## States +### States Use the `state` option to generate pseudo-class variations. Example pseudo-classes are `:hover` and `:focus`. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add `state: hover` and you'll get `.opacity-hover:hover` in your compiled CSS. @@ -244,9 +244,11 @@ Now that you're familiar with how the utilities API works, learn how to add your ### Add utilities -New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our `_utilities.scss` is imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values. +New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our required Sass files and `_utilities.scss` are imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values. ```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; $utilities: map-merge( @@ -254,7 +256,7 @@ $utilities: map-merge( ( "cursor": ( property: cursor, - class: cursor + class: cursor, responsive: true, values: auto pointer grab, ) @@ -267,6 +269,8 @@ $utilities: map-merge( Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values. ```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; $utilities: map-merge( @@ -285,11 +289,32 @@ $utilities: map-merge( ); ``` +#### Rename utilities + +Missing v4 utilities, or used to another naming convention? The utilities API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to oldish `.ml-*`: + +```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/utilities"; + +$utilities: map-merge( + $utilities, ( + "margin-start": map-merge( + map-get($utilities, "margin-start"), + ( class: ml ), + ), + ) +); +``` + ### Remove utilities Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within. ```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; $utilities: map-merge( diff --git a/site/content/docs/5.0/utilities/background.md b/site/content/docs/5.0/utilities/background.md new file mode 100644 index 000000000..7b1b48140 --- /dev/null +++ b/site/content/docs/5.0/utilities/background.md @@ -0,0 +1,78 @@ +--- +layout: docs +title: Background +description: Convey meaning through `background-color` and add decoration with gradients. +group: utilities +toc: true +--- + +## Background color + +Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` [color utilities]({{< docsref "/utilities/colors" >}}). + +{{< example >}} +{{< colors.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div> +{{- end -}} +{{< /colors.inline >}} +<div class="p-3 mb-2 bg-body text-dark">.bg-body</div> +<div class="p-3 mb-2 bg-white text-dark">.bg-white</div> +<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div> +{{< /example >}} + +## Background gradient + +By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom. + +Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`. + +{{< markdown >}} +{{< colors.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<div class="p-3 mb-2 bg-{{ .name }} bg-gradient{{ with .contrast_color }} text-{{ . }}{{ else }} text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div> +{{- end -}} +{{< /colors.inline >}} +{{< /markdown >}} + +## Sass + +In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. + +### Variables + +Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables. + +{{< scss-docs name="color-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}} + +Grayscale colors are also available, but only a subset are used to generate any utilities. + +{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} + +### Map + +Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. + +{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} + +Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** + +{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}} + +### Mixins + +**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients. + +{{< scss-docs name="gradient-bg-mixin" file="scss/mixins/_gradients.scss" >}} + +{{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}} + +### Utilities API + +Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-bg-color" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md index 459ca4e72..6ba1174c9 100644 --- a/site/content/docs/5.0/utilities/borders.md +++ b/site/content/docs/5.0/utilities/borders.md @@ -77,3 +77,23 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from {{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}} {{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}} {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="border-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}} + +### Mixins + +{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}} + +### Utilities API + +Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-borders" file="scss/_utilities.scss" >}} + +{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index ede13df06..266f671f6 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -1,22 +1,12 @@ --- layout: docs title: Colors -description: Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too. +description: Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too. group: utilities toc: true --- -{{< callout info >}} -##### Dealing with specificity - -Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class. -{{< /callout >}} - -{{< callout info >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} - -## Color +## Colors Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states. @@ -33,30 +23,42 @@ Colorize text with color utilities. If you want to colorize links, you can use t <p class="text-white-50 bg-dark">.text-white-50</p> {{< /example >}} -## Background color +{{< callout info >}} +{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< /callout >}} -Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities. +## Specificity -{{< example >}} -{{< colors.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div> -{{- end -}} -{{< /colors.inline >}} -<div class="p-3 mb-2 bg-white text-dark">.bg-white</div> -<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div> -{{< /example >}} +Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class. -## Background gradient +## Sass -By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom. +In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. -Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`. +### Variables -{{< markdown >}} -{{< colors.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -<div class="p-3 mb-2 bg-{{ .name }} bg-gradient{{ with .contrast_color }} text-{{ . }}{{ else }} text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div> -{{- end -}} -{{< /colors.inline >}} -{{< /markdown >}} +Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. + +{{< scss-docs name="color-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}} + +Grayscale colors are also available, but only a subset are used to generate any utilities. + +{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} + +### Map + +Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. + +{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} + +Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** + +{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}} + +### Utilities API + +Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-color" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/display.md b/site/content/docs/5.0/utilities/display.md index 2d033ba85..9e5a5dfb2 100644 --- a/site/content/docs/5.0/utilities/display.md +++ b/site/content/docs/5.0/utilities/display.md @@ -86,7 +86,7 @@ To show an element only on a given interval of screen sizes you can combine one </tr> <tr> <td>Hidden only on xl</td> - <td><code>.d-xl-none</code></td> + <td><code>.d-xl-none .d-xxl-block</code></td> </tr> <tr> <td>Hidden only on xxl</td> @@ -150,3 +150,11 @@ The print and display classes can be combined. <div class="d-none d-print-block">Print Only (Hide on screen only)</div> <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div> {{< /example >}} + +## Sass + +### Utilities API + +Display utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-display" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/flex.md b/site/content/docs/5.0/utilities/flex.md index 0d773272d..bbb1824b4 100644 --- a/site/content/docs/5.0/utilities/flex.md +++ b/site/content/docs/5.0/utilities/flex.md @@ -101,7 +101,7 @@ Use `justify-content` utilities on flexbox containers to change the alignment of <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> </div> - <div class="d-flex justify-content-around bd-highlight"> + <div class="d-flex justify-content-around bd-highlight mb-3"> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> @@ -627,3 +627,39 @@ Responsive variations also exist for `align-content`. {{- end -}} {{< /flex.inline >}} {{< /markdown >}} + +## Media object + +Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before. + +{{< example >}} +<div class="d-flex"> + <div class="flex-shrink-0"> + {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}} + </div> + <div class="flex-grow-1 ms-3"> + This is some content from a media component. You can replace this with any content and adjust it as needed. + </div> +</div> +{{< /example >}} + +And say you want to vertically center the content next to the image: + +{{< example >}} +<div class="d-flex align-items-center"> + <div class="flex-shrink-0"> + {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}} + </div> + <div class="flex-grow-1 ms-3"> + This is some content from a media component. You can replace this with any content and adjust it as needed. + </div> +</div> +{{< /example >}} + +## Sass + +### Utilities API + +Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-flex" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/float.md b/site/content/docs/5.0/utilities/float.md index 4d27c00d2..a18c21471 100644 --- a/site/content/docs/5.0/utilities/float.md +++ b/site/content/docs/5.0/utilities/float.md @@ -38,3 +38,11 @@ Here are all the support classes: {{- end -}} {{< /float.inline >}} {{< /markdown >}} + +## Sass + +### Utilities API + +Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-float" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/interactions.md b/site/content/docs/5.0/utilities/interactions.md index fdb6e1a48..b95b98a10 100644 --- a/site/content/docs/5.0/utilities/interactions.md +++ b/site/content/docs/5.0/utilities/interactions.md @@ -29,3 +29,11 @@ Bootstrap provides `.pe-none` and `.pe-auto` classes to prevent or add element i {{< callout warning >}} The `.pe-none` class (and the `pointer-events` CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with `.pe-none` are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as `tabindex="-1"` (to prevent them from receiving keyboard focus) and `aria-disabled="true"` (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the `disabled` HTML attribute instead. {{< /callout >}} + +## Sass + +### Utilities API + +Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-interaction" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/overflow.md b/site/content/docs/5.0/utilities/overflow.md index f05df6800..a36374cd5 100644 --- a/site/content/docs/5.0/utilities/overflow.md +++ b/site/content/docs/5.0/utilities/overflow.md @@ -30,3 +30,11 @@ Adjust the `overflow` property on the fly with four default values and classes. ``` Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`. + +## Sass + +### Utilities API + +Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md index 3e84ce557..bc57eb028 100644 --- a/site/content/docs/5.0/utilities/position.md +++ b/site/content/docs/5.0/utilities/position.md @@ -68,6 +68,22 @@ This class applies the transformations `translateX(-50%)` and `translateY(-50%)` </div> {{< /example >}} +By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can be positioned only in horizontal or vertical direction. + +{{< example class="bd-example-position-utils" >}} +<div class="position-relative"> + <div class="position-absolute top-0 start-0"></div> + <div class="position-absolute top-0 start-50 translate-middle-x"></div> + <div class="position-absolute top-0 end-0"></div> + <div class="position-absolute top-50 start-0 translate-middle-y"></div> + <div class="position-absolute top-50 start-50 translate-middle"></div> + <div class="position-absolute top-50 end-0 translate-middle-y"></div> + <div class="position-absolute bottom-0 start-0"></div> + <div class="position-absolute bottom-0 start-50 translate-middle-x"></div> + <div class="position-absolute bottom-0 end-0"></div> +</div> +{{< /example >}} + ## Examples Here are some real life examples of these classes: @@ -99,3 +115,16 @@ You can use these classes with existing components to create new ones. Remember </div> {{< /example >}} +## Sass + +### Maps + +Default position utility values are declared in a Sass map, then used to generate our utilities. + +{{< scss-docs name="position-map" file="scss/_variables.scss" >}} + +### Utilities API + +Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-position" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/shadows.md b/site/content/docs/5.0/utilities/shadows.md index 2803031d6..bb5ef44ab 100644 --- a/site/content/docs/5.0/utilities/shadows.md +++ b/site/content/docs/5.0/utilities/shadows.md @@ -3,6 +3,7 @@ layout: docs title: Shadows description: Add or remove shadows to elements with box-shadow utilities. group: utilities +toc: true --- ## Examples @@ -11,7 +12,19 @@ While shadows on components are disabled by default in Bootstrap and can be enab {{< example >}} <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div> -<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div> -<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div> -<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div> +<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div> +<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div> +<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}} + +### Utilities API + +Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-shadow" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/sizing.md b/site/content/docs/5.0/utilities/sizing.md index 3a12caa2d..962575ffe 100644 --- a/site/content/docs/5.0/utilities/sizing.md +++ b/site/content/docs/5.0/utilities/sizing.md @@ -50,3 +50,11 @@ You can also use utilities to set the width and height relative to the viewport. <div class="vw-100">Width 100vw</div> <div class="vh-100">Height 100vh</div> ``` + +## Sass + +### Utilities API + +Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-sizing" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/spacing.md b/site/content/docs/5.0/utilities/spacing.md index 2fec4e1cf..70fbe7694 100644 --- a/site/content/docs/5.0/utilities/spacing.md +++ b/site/content/docs/5.0/utilities/spacing.md @@ -27,8 +27,8 @@ Where *sides* is one of: - `t` - for classes that set `margin-top` or `padding-top` - `b` - for classes that set `margin-bottom` or `padding-bottom` -- `s` - for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL -- `e` - for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL +- `s` - (start) for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL +- `e` - (end) for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL - `x` - for classes that set both `*-left` and `*-right` - `y` - for classes that set both `*-top` and `*-bottom` - blank - for classes that set a `margin` or `padding` on all 4 sides of the element @@ -109,3 +109,17 @@ When using `display: grid`, you can make use of `gap` utilities on the parent gr {{< /example >}} Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`. + +## Sass + +### Maps + +Spacing utilities are declared via Sass map and then generated with our utilities API. + +{{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}} + +### Utilities API + +Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-spacing" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/text.md b/site/content/docs/5.0/utilities/text.md index d88022f7c..41c92958c 100644 --- a/site/content/docs/5.0/utilities/text.md +++ b/site/content/docs/5.0/utilities/text.md @@ -82,8 +82,6 @@ Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`� Customize your available `font-size`s by modifying the `$font-sizes` Sass map. -{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}} - ## Font weight and italics Quickly change the `font-weight` or `font-style` of text with these utilities. `font-style` utilities are abbreviated as `.fst-*` and `font-weight` utilities are abbreviated as `.fw-*`. @@ -103,10 +101,10 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. ` Change the line height with `.lh-*` utilities. {{< example >}} -<p class="lh-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p> -<p class="lh-sm">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p> -<p class="lh-base">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p> -<p class="lh-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p> +<p class="lh-1">Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. She ride me like a roller coaster. I messed around and got addicted. You just gotta ignite the light and let it shine! I'm intrigued, for a peek, heard it's fascinating. Catch her if you can. I should've told you what you meant to me 'Cause now I pay the price. Do you ever feel, feel so paper thin.</p> +<p class="lh-sm">But you better choose carefully. Yo, shout out to all you kids, buying bottle service, with your rent money. She's sweet as pie but if you break her heart. Just own the night like the 4th of July! In another life I would be your girl. Playing ping pong all night long, everything's all neon and hazy. Shorty so bad, I’m sprung and I don’t care.</p> +<p class="lh-base">I can feel a phoenix inside of me. Maybe a reason why all the doors are closed. We go higher and higher. Passport stamps, she's cosmopolitan. Someone said you had your tattoo removed. All my girls vintage Chanel baby. Someone said you had your tattoo removed.</p> +<p class="lh-lg">But I will get there. This is real so take a chance and don't ever look back, don't ever look back. You could travel the world but nothing comes close to the golden coast. Of anything and everything. Venice beach and Palm Springs, summertime is everything. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. So cover your eyes, I have a surprise. So I don't have to say you were the one that got away.</p> {{< /example >}} ## Monospace @@ -136,3 +134,21 @@ Decorate text in components with text decoration classes. <p class="text-decoration-line-through">This text has a line going through it.</p> <a href="#" class="text-decoration-none">This link has its text decoration removed</a> {{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="font-variables" file="scss/_variables.scss" >}} + +### Maps + +Font-size utilities are generated from this map, in combination with our utilities API. + +{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}} + +### Utilities API + +Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-text" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/vertical-align.md b/site/content/docs/5.0/utilities/vertical-align.md index f7cf2207b..9fe0eeb93 100644 --- a/site/content/docs/5.0/utilities/vertical-align.md +++ b/site/content/docs/5.0/utilities/vertical-align.md @@ -38,3 +38,11 @@ With table cells: </tbody> </table> {{< /example >}} + +## Sass + +### Utilities API + +Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-vertical-align" file="scss/_utilities.scss" >}} diff --git a/site/content/docs/5.0/utilities/visibility.md b/site/content/docs/5.0/utilities/visibility.md index 349685bd6..61eb30241 100644 --- a/site/content/docs/5.0/utilities/visibility.md +++ b/site/content/docs/5.0/utilities/visibility.md @@ -27,3 +27,11 @@ Apply `.visible` or `.invisible` as needed. visibility: hidden !important; } ``` + +## Sass + +### Utilities API + +Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-visibility" file="scss/_utilities.scss" >}} |
