Merging upstream version 5.3.5+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
8838637a85
commit
449962af96
GPG key ID:
FBB4F0E80A80222F
233 changed files with 6665 additions and 12847 deletions
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: redirect
|
||||
sitemap_exclude: true
|
||||
sitemap:
|
||||
disable: true
|
||||
redirect: "/docs/5.3/getting-started/introduction/"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
layout: docs
|
||||
title: About
|
||||
title: About Bootstrap
|
||||
description: Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.
|
||||
group: about
|
||||
aliases:
|
||||
|
|
@ -16,9 +16,9 @@ Bootstrap is maintained by a [small team of developers](https://github.com/orgs/
|
|||
|
||||
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
|
||||
|
||||
Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/engineering/en_us/a/2010/hack-week.html) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
|
||||
Bootstrap was created at Twitter in mid-2010 by [@mdo](https://x.com/mdo) and [@fat](https://x.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.x.com/engineering/en_us/a/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
|
||||
|
||||
Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html) on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we've since had over [twenty releases]({{< param repo >}}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
|
||||
Originally [released](https://blog.x.com/developer/en_us/a/2011/bootstrap-twitter) on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we've since had over [twenty releases]({{< param repo >}}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
|
||||
|
||||
With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ Community members have translated Bootstrap's documentation into various languag
|
|||
{{< translations.inline >}}
|
||||
<ul>
|
||||
{{ range .Site.Data.translations -}}
|
||||
<li><a href="{{ .url }}" hreflang="{{ .code }}">{{ .description }} ({{ .name }})</a></li>
|
||||
<li><a href="{{ .url }}" hreflang="{{ .code }}" lang="{{ .code }}">{{ .description }} ({{ .name }})</a></li>
|
||||
{{ end -}}
|
||||
</ul>
|
||||
{{< /translations.inline >}}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th
|
|||
|
||||
We use the following JavaScript to trigger our live alert demo:
|
||||
|
||||
{{< js-docs name="live-alert" file="site/assets/js/snippets.js" >}}
|
||||
{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" >}}
|
||||
|
||||
### Link color
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
|
|||
|
||||
{{< example >}}
|
||||
<div class="alert alert-primary d-flex align-items-center" role="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ Dividers are automatically added in CSS through [`::before`](https://developer.m
|
|||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
|
||||
When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string/#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
|
||||
|
||||
```scss
|
||||
$breadcrumb-divider: quote(">");
|
||||
|
|
|
|||
|
|
@ -195,8 +195,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
|||
|
||||
{{< example >}}
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
|
|
@ -206,6 +204,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
|||
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<div class="btn-group dropstart" role="group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ You can make your carousels autoplay on page load by setting the `ride` option t
|
|||
{{< callout info >}}
|
||||
For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel.
|
||||
|
||||
See [WCAG 2.1 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG21/#pause-stop-hide).
|
||||
See [WCAG 2.2 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG/#pause-stop-hide).
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ toc: true
|
|||
|
||||
## Overview
|
||||
|
||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).
|
||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
|
||||
|
||||
Dropdowns are built on a third party library, [Popper](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
|
||||
Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
|
||||
|
||||
## Accessibility
|
||||
|
||||
|
|
@ -126,7 +126,7 @@ The best part is you can do this with any button variant, too:
|
|||
<!-- Example single danger button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Action
|
||||
Danger
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
|
|
@ -228,7 +228,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
```html
|
||||
<!-- Example split danger button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@ When modals become too long for the user's viewport or device, they scroll indep
|
|||
<h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" style="min-height: 1500px">
|
||||
<div class="modal-body" style="min-height: 100vh">
|
||||
<p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to 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">
|
||||
|
|
@ -481,7 +481,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< js-docs name="varying-modal-content" file="site/assets/js/snippets.js" >}}
|
||||
{{< js-docs name="varying-modal-content" file="site/assets/js/partials/snippets.js" >}}
|
||||
|
||||
### Toggle between modals
|
||||
|
||||
|
|
@ -856,7 +856,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
|
|||
{{< bs-table >}}
|
||||
| Event | Description |
|
||||
| --- | --- |
|
||||
| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
|
||||
| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. Can be prevented by calling `event.preventDefault()`. See [JavaScript events documentation]({{< docsref "/getting-started/javascript#events" >}}) for more details on event prevention. |
|
||||
| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
|
||||
| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
|
||||
| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
|
||||
|
|
|
|||
|
|
@ -32,7 +32,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).
|
||||
- Add an optional `.navbar-nav-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.
|
||||
|
||||
|
|
@ -428,7 +428,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
|
|||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
<nav class="navbar" style="background-color: #e3f2fd;">
|
||||
<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Placeholders
|
|||
description: Use loading placeholders for your components or pages to indicate something may still be loading.
|
||||
group: components
|
||||
toc: true
|
||||
added: "5.1"
|
||||
added:
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
## About
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ toc: true
|
|||
|
||||
Things to know when using the popover plugin:
|
||||
|
||||
- Popovers rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Popovers rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Popovers require the [popover plugin]({{< docsref "/components/popovers" >}}) as a dependency.
|
||||
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- Zero-length `title` and `content` values will never show a popover.
|
||||
|
|
@ -186,21 +186,21 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
|
|||
| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
|
||||
| `animation` | boolean | `true` | Apply a CSS fade transition to the popover. |
|
||||
| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
|
||||
| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. |
|
||||
| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. |
|
||||
| `content` | string, element, function | `''` | The popover's text content. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
|
||||
| `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
|
||||
| `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
|
||||
| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
|
||||
| `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover's `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
|
||||
| `offset` | number, string, function | `[0, 0]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. 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: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `placement` | string, function | `'top'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |
|
||||
| `offset` | number, string, function | `[0, 8]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. 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: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `placement` | string, function | `'right'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |
|
||||
| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). 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. |
|
||||
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
|
||||
| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
|
||||
| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
|
||||
| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
|
||||
| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-header`. The popover's `content` will be injected into the `.popover-body`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
|
||||
| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
|
||||
| `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
|
||||
| `trigger` | string | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
|
||||
{{< /bs-table >}}
|
||||
|
||||
{{< callout info >}}
|
||||
|
|
|
|||
|
|
@ -75,13 +75,15 @@ Add labels to your progress bars by placing text within the `.progress-bar`.
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}), but make sure to also define an explicit [text color]({{< docsref "/utilities/colors#colors" >}}) so the text remains readable. Be aware though that currently this approach does not take into account [color modes]({{< docsref "/customize/color-modes" >}}).
|
||||
### Long labels
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}).
|
||||
|
||||
{{< callout warning >}}
|
||||
Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the `.progress` and `.progress-bar` background colors. Use caution when implementing this example.
|
||||
|
||||
If the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility.
|
||||
{{< /callout >}}
|
||||
|
||||
## Backgrounds
|
||||
|
||||
|
|
@ -106,29 +108,21 @@ Use background utility classes to change the appearance of individual progress b
|
|||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast.
|
||||
If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast. We recommend using the [color and background]({{< docsref "/helpers/color-background" >}}) helper classes.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-success" style="width: 25%">25%</div>
|
||||
<div class="progress-bar text-bg-success" style="width: 25%">25%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
|
||||
<div class="progress-bar text-bg-info" style="width: 50%">50%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-danger" style="width: 100%">100%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Alternatively, you can use the new combined [color and background]({{< docsref "/helpers/color-background" >}}) helper classes.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-danger" style="width: 100%">100%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Multiple bars
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ Click the button below to show a toast (positioned with our utilities in the low
|
|||
|
||||
We use the following JavaScript to trigger our live toast demo:
|
||||
|
||||
{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
|
||||
{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}
|
||||
|
||||
### Translucent
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ toc: true
|
|||
|
||||
Things to know when using the tooltip plugin:
|
||||
|
||||
- Tooltips rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Tooltips rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
|
||||
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- Tooltips with zero-length titles are never displayed.
|
||||
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
|
||||
|
|
@ -111,8 +111,8 @@ And with custom HTML added:
|
|||
With an SVG:
|
||||
|
||||
<div class="bd-example tooltip-demo">
|
||||
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
|
||||
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
|
||||
<rect width="100%" height="100%" fill="#563d7c"/>
|
||||
<circle cx="50" cy="50" r="30" fill="#007bff"/>
|
||||
</svg>
|
||||
|
|
@ -200,12 +200,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
|
|||
| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
|
||||
| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip. |
|
||||
| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
|
||||
| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
|
||||
| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
|
||||
| `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
|
||||
| `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
|
||||
| `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
|
||||
| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
|
||||
| `offset` | array, string, function | `[0, 0]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. 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: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `offset` | array, string, function | `[0, 6]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. 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: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |
|
||||
| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). 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. |
|
||||
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
|
||||
|
|
|
|||
|
|
@ -141,8 +141,9 @@ Highlight a table row or cell by adding a `.table-active` class.
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2" class="table-active">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td class="table-active">@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -162,8 +163,9 @@ Highlight a table row or cell by adding a `.table-active` class.
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2" class="table-active">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td class="table-active">@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -194,8 +196,9 @@ Highlight a table row or cell by adding a `.table-active` class.
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2" class="table-active">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td class="table-active">@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -215,8 +218,9 @@ Highlight a table row or cell by adding a `.table-active` class.
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2" class="table-active">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td class="table-active">@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -293,8 +297,9 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -418,9 +423,9 @@ Border styles, active styles, and table variants are not inherited by nested tab
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -482,9 +487,9 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -526,9 +531,9 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -572,9 +577,9 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
|
|
@ -653,9 +658,9 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Color modes
|
|||
description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
|
||||
group: customize
|
||||
toc: true
|
||||
added: "5.3"
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
{{< callout >}}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ Whenever possible, be sure to compress all the code you serve to your visitors.
|
|||
|
||||
While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.
|
||||
|
||||
If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) 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.
|
||||
If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/articles/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.
|
||||
|
||||
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.
|
||||
|
||||
|
|
@ -82,8 +82,8 @@ This ensures that the less important resources are loaded later and not blocking
|
|||
|
||||
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/>
|
||||
- <https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/>
|
||||
- <https://web.dev/articles/defer-non-critical-css>
|
||||
|
||||
## Always use HTTPS
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ You can find and customize these variables for key global options in Bootstrap's
|
|||
| `$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. |
|
||||
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
|
||||
| `$enable-cssgrid` | `true` or `false` (default) | Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.). |
|
||||
| `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) |
|
||||
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
|
||||
| `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ With that setup in place, you can begin to modify any of the Sass variables and
|
|||
|
||||
## Compiling
|
||||
|
||||
In order to use your custom Sass code as CSS in the browser, you need a Sass compiler. Sass ships as a CLI package, but you can also compile it with other build tools like [Gulp](https://gulpjs.com/) or [Webpack](https://webpack.js.org/), or with a GUI applications. Some IDEs also have Sass compilers built in or as downloadable extensions.
|
||||
In order to use your custom Sass code as CSS in the browser, you need a Sass compiler. Sass ships as a CLI package, but you can also compile it with other build tools like [Gulp](https://gulpjs.com/) or [Webpack](https://webpack.js.org/), or with GUI applications. Some IDEs also have Sass compilers built in or as downloadable extensions.
|
||||
|
||||
We like to use the CLI to compile our Sass, but you can use whichever method you prefer. From the command line, run the following:
|
||||
|
||||
|
|
@ -101,7 +101,7 @@ npm install -g sass
|
|||
sass --watch ./scss/custom.scss ./css/custom.css
|
||||
```
|
||||
|
||||
Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
|
||||
Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install/) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
|
||||
|
||||
{{< callout info >}}
|
||||
**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ description: Examples of Bootstrap's documentation-specific components and style
|
|||
aliases: "/docsref/"
|
||||
toc: true
|
||||
robots: noindex,follow
|
||||
sitemap_exclude: true
|
||||
sitemap:
|
||||
disable: true
|
||||
---
|
||||
|
||||
## Buttons
|
||||
|
|
@ -46,4 +47,4 @@ sitemap_exclude: true
|
|||
|
||||
{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
|
||||
|
||||
{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
|
||||
{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}
|
||||
|
|
|
|||
|
|
@ -4,63 +4,3 @@ title: Examples
|
|||
description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
|
||||
aliases: "/examples/"
|
||||
---
|
||||
|
||||
{{< list-examples.inline >}}
|
||||
{{ range $entry := $.Site.Data.examples -}}
|
||||
<div class="bd-content">
|
||||
<h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
|
||||
<p>{{ $entry.description }}</p>
|
||||
{{ if eq $entry.category "RTL" -}}
|
||||
<div class="bd-callout bd-callout-warning small">
|
||||
<p>
|
||||
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
|
||||
</p>
|
||||
<p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{ range $i, $example := $entry.examples -}}
|
||||
{{- $len := len $entry.examples -}}
|
||||
{{ if (eq $i 0) }}<div class="row">{{ end }}
|
||||
{{ if $entry.external }}
|
||||
<div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
|
||||
<svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
|
||||
<div>
|
||||
<h3 class="h5 mb-1">
|
||||
<a class="d-block link-offset-1" href="{{ $.Site.Params.github_org }}{{ $example.url }}/" target="_blank" rel="noopener">
|
||||
{{ $example.name }}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-body-secondary">{{ $example.description }}</p>
|
||||
<p>
|
||||
{{- $indexPath := "index.html" -}}
|
||||
{{- if $example.indexPath -}}
|
||||
{{- $indexPath = $example.indexPath -}}
|
||||
{{- end }}
|
||||
<a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file={{ $indexPath | urlquery }}" target="_blank" rel="noopener">
|
||||
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
|
||||
Edit in StackBlitz
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="col-sm-6 col-md-3 mb-3">
|
||||
<a class="d-block link-offset-1" 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"
|
||||
alt=""
|
||||
width="480" height="300"
|
||||
loading="lazy">
|
||||
<h3 class="h5 mb-1">
|
||||
{{ $example.name }}
|
||||
</h3>
|
||||
</a>
|
||||
<p class="text-body-secondary">{{ $example.description }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{< /list-examples.inline >}}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ title: Album example
|
|||
<div class="col-sm-4 offset-md-1 py-4">
|
||||
<h4>Contact</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
||||
<li><a href="#" class="text-white">Follow on X</a></li>
|
||||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||||
<li><a href="#" class="text-white">Email me</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -82,16 +82,16 @@ body_class: ""
|
|||
|
||||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
|
||||
<span class="px-1">Primary</span>
|
||||
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<span class="px-1">Primary 1</span>
|
||||
<a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
|
||||
<span class="px-1">Primary</span>
|
||||
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<span class="px-1">Primary 2</span>
|
||||
<a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
|
||||
<span class="px-1">Primary</span>
|
||||
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<span class="px-1">Primary 3</span>
|
||||
<a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -102,48 +102,48 @@ body_class: ""
|
|||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Primary
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Secondary
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Success
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Danger
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Warning
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Info
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Light
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Dark
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ extra_css:
|
|||
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
||||
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
|
||||
أكمل القراءة
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
|
|
@ -92,7 +92,7 @@ extra_css:
|
|||
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
||||
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
|
||||
أكمل القراءة
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
|
|
@ -239,7 +239,7 @@ extra_css:
|
|||
<h4 class="fst-italic">في مكان آخر</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Social</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
|
@ -250,7 +250,7 @@ extra_css:
|
|||
</main>
|
||||
|
||||
<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
|
||||
<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="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://x.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
|
||||
<p class="mb-0">
|
||||
<a href="#">عد إلى الأعلى</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ extra_css:
|
|||
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
|
||||
Continue reading
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
|
|
@ -91,7 +91,7 @@ extra_css:
|
|||
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
|
||||
Continue reading
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
|
|
@ -291,7 +291,7 @@ extra_css:
|
|||
<h4 class="fst-italic">Elsewhere</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Social</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
|
@ -302,7 +302,7 @@ extra_css:
|
|||
</main>
|
||||
|
||||
<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
|
||||
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://x.com/mdo">@mdo</a>.</p>
|
||||
<p class="mb-0">
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ body_class: ""
|
|||
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
|
||||
<li class="breadcrumb-item">
|
||||
<a class="link-body-emphasis" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<span class="visually-hidden">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -50,7 +50,7 @@ body_class: ""
|
|||
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
|
||||
<li class="breadcrumb-item">
|
||||
<a class="link-body-emphasis" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<span class="visually-hidden">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -71,7 +71,7 @@ body_class: ""
|
|||
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
|
||||
<li class="breadcrumb-item">
|
||||
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -40,11 +40,11 @@ body_class: ""
|
|||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<button class="btn btn-primary d-inline-flex align-items-center" type="button">
|
||||
Primary icon
|
||||
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
|
||||
Secondary icon
|
||||
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,22 +65,22 @@ body_class: ""
|
|||
|
||||
<div class="d-flex gap-2 justify-content-center pt-5 pb-4">
|
||||
<button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
|
||||
<span class="visually-hidden">Dismiss</span>
|
||||
</button>
|
||||
<button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
|
||||
<span class="visually-hidden">Dismiss</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 justify-content-center pb-5">
|
||||
<button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
|
||||
<span class="visually-hidden">Dismiss</span>
|
||||
</button>
|
||||
<button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
|
||||
<span class="visually-hidden">Dismiss</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "../cheatsheet/cheatsheet.rtl.css"
|
||||
extra_js:
|
||||
- src: "../cheatsheet/cheatsheet.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
direction: rtl
|
||||
---
|
||||
|
|
@ -70,7 +71,7 @@ direction: rtl
|
|||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="bd-cheatsheet container-fluid bg-body">
|
||||
<main 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>
|
||||
|
||||
|
|
@ -201,8 +202,9 @@ direction: rtl
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td><bdo lang="en" dir="ltr">@social</bdo></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -233,8 +235,9 @@ direction: rtl
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td><bdo lang="en" dir="ltr">@social</bdo></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -293,8 +296,9 @@ direction: rtl
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td><bdo lang="en" dir="ltr">@social</bdo></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -368,8 +372,8 @@ direction: rtl
|
|||
<input type="file" class="form-control" id="customFile">
|
||||
</div>
|
||||
<div class="mb-3 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label>
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
|
||||
<label class="form-check-label" for="switchCheckChecked">زر على شكل مفتاح اختيار.</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label>
|
||||
|
|
@ -920,7 +924,7 @@ direction: rtl
|
|||
|
||||
<div>
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
زر القائمة المنسدلة
|
||||
|
|
@ -1033,7 +1037,7 @@ direction: rtl
|
|||
{{< /example >}}
|
||||
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||
<div class="dropend">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
زر القائمة المنسدلة لليسار
|
||||
|
|
@ -1537,7 +1541,7 @@ direction: rtl
|
|||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "cheatsheet.css"
|
||||
extra_js:
|
||||
- src: "cheatsheet.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
---
|
||||
|
||||
|
|
@ -69,7 +70,7 @@ body_class: "bg-body-tertiary"
|
|||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="bd-cheatsheet container-fluid bg-body">
|
||||
<main 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>
|
||||
|
||||
|
|
@ -200,8 +201,9 @@ body_class: "bg-body-tertiary"
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -232,8 +234,9 @@ body_class: "bg-body-tertiary"
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -292,8 +295,9 @@ body_class: "bg-body-tertiary"
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -367,8 +371,8 @@ body_class: "bg-body-tertiary"
|
|||
<input type="file" class="form-control" id="customFile">
|
||||
</div>
|
||||
<div class="mb-3 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
|
||||
<label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="customRange3" class="form-label">Example range</label>
|
||||
|
|
@ -919,7 +923,7 @@ body_class: "bg-body-tertiary"
|
|||
|
||||
<div>
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
|
|
@ -1032,7 +1036,7 @@ body_class: "bg-body-tertiary"
|
|||
{{< /example >}}
|
||||
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||
<div class="dropend">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropend button
|
||||
|
|
@ -1533,7 +1537,7 @@ body_class: "bg-body-tertiary"
|
|||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ extra_css:
|
|||
- "../checkout/checkout.css"
|
||||
extra_js:
|
||||
- src: "../checkout/checkout.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
---
|
||||
|
||||
|
|
@ -13,7 +14,7 @@ body_class: "bg-body-tertiary"
|
|||
<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>
|
||||
<h1 class="h2">نموذج إتمام الشراء</h1>
|
||||
<p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "checkout.css"
|
||||
extra_js:
|
||||
- src: "checkout.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
---
|
||||
|
||||
|
|
@ -12,7 +13,7 @@ body_class: "bg-body-tertiary"
|
|||
<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>Checkout form</h2>
|
||||
<h1 class="h2">Checkout form</h1>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@ body_class: "d-flex h-100 text-center text-bg-dark"
|
|||
</main>
|
||||
|
||||
<footer class="mt-auto text-white-50">
|
||||
<p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
|
||||
<p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="text-white">@mdo</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ layout: examples
|
|||
title: قالب لوحة القيادة
|
||||
direction: rtl
|
||||
extra_css:
|
||||
- "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
|
||||
- "../dashboard/dashboard.rtl.css"
|
||||
extra_js:
|
||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
|
||||
integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
|
||||
defer: true
|
||||
- src: "dashboard.js"
|
||||
defer: true
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
|
|
@ -67,12 +68,12 @@ extra_js:
|
|||
<ul class="navbar-nav flex-row d-md-none">
|
||||
<li class="nav-item text-nowrap">
|
||||
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
|
||||
<svg class="bi"><use xlink:href="#search"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item text-nowrap">
|
||||
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
|
||||
<svg class="bi"><use xlink:href="#list"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -94,37 +95,37 @@ extra_js:
|
|||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
|
||||
<svg class="bi"><use xlink:href="#house-fill"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
|
||||
لوحة القيادة
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
|
||||
الطلبات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#cart"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
|
||||
المنتجات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#people"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
|
||||
الزبائن
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#graph-up"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
|
||||
التقارير
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#puzzle"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
|
||||
التكاملات
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -133,31 +134,31 @@ extra_js:
|
|||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
|
||||
<span>التقارير المحفوظة</span>
|
||||
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
|
||||
<svg class="bi"><use xlink:href="#plus-circle"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
|
||||
</a>
|
||||
</h6>
|
||||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
الشهر الحالي
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
الربع الأخير
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
التفاعل الإجتماعي
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
مبيعات نهاية العام
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -168,13 +169,13 @@ extra_js:
|
|||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
|
||||
إعدادات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#door-closed"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
|
||||
خروج
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -192,7 +193,7 @@ extra_js:
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
|
||||
<svg class="bi"><use xlink:href="#calendar3"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
|
||||
هذا الأسبوع
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@
|
|||
layout: examples
|
||||
title: Dashboard Template
|
||||
extra_css:
|
||||
- "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
|
||||
- "dashboard.css"
|
||||
extra_js:
|
||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
|
||||
integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
|
||||
defer: true
|
||||
- src: "dashboard.js"
|
||||
defer: true
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
|
|
@ -66,12 +67,12 @@ extra_js:
|
|||
<ul class="navbar-nav flex-row d-md-none">
|
||||
<li class="nav-item text-nowrap">
|
||||
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
|
||||
<svg class="bi"><use xlink:href="#search"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item text-nowrap">
|
||||
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi"><use xlink:href="#list"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -93,37 +94,37 @@ extra_js:
|
|||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
|
||||
<svg class="bi"><use xlink:href="#house-fill"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#cart"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#people"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#graph-up"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#puzzle"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
|
||||
Integrations
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -132,31 +133,31 @@ extra_js:
|
|||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
|
||||
<span>Saved reports</span>
|
||||
<a class="link-secondary" href="#" aria-label="Add a new report">
|
||||
<svg class="bi"><use xlink:href="#plus-circle"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
|
||||
</a>
|
||||
</h6>
|
||||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
Current month
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
Last quarter
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
Social engagement
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
Year-end sale
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -167,13 +168,13 @@ extra_js:
|
|||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#door-closed"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
|
||||
Sign out
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -191,7 +192,7 @@ extra_js:
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
|
||||
<svg class="bi"><use xlink:href="#calendar3"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
|
||||
This week
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -124,38 +124,38 @@ body_class: ""
|
|||
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
|
||||
Photos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
|
||||
Movies
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
|
||||
Games
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -163,38 +163,38 @@ body_class: ""
|
|||
<ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
|
||||
Photos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
|
||||
Movies
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
|
||||
Games
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -208,8 +208,8 @@ body_class: ""
|
|||
<div class="d-grid gap-1">
|
||||
<div class="cal">
|
||||
<div class="cal-month">
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
|
||||
<button class="btn cal-btn" type="button" aria-label="previous month">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
|
||||
</button>
|
||||
<strong class="cal-month-name">June</strong>
|
||||
<select class="form-select cal-month-name d-none">
|
||||
|
|
@ -226,8 +226,8 @@ body_class: ""
|
|||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<button class="btn cal-btn" type="button" aria-label="next month">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cal-weekdays text-body-secondary">
|
||||
|
|
@ -287,8 +287,8 @@ body_class: ""
|
|||
<div class="d-grid gap-1">
|
||||
<div class="cal">
|
||||
<div class="cal-month">
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
|
||||
<button class="btn cal-btn" type="button" aria-label="previous month">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
|
||||
</button>
|
||||
<strong class="cal-month-name">June</strong>
|
||||
<select class="form-select cal-month-name d-none">
|
||||
|
|
@ -305,8 +305,8 @@ body_class: ""
|
|||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<button class="btn cal-btn" type="button" aria-label="next month">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cal-weekdays text-body-secondary">
|
||||
|
|
@ -371,7 +371,7 @@ body_class: ""
|
|||
<ul class="list-unstyled d-flex flex-column gap-2">
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Main product</strong>
|
||||
<small>Take a tour through the product</small>
|
||||
|
|
@ -380,7 +380,7 @@ body_class: ""
|
|||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Another product</strong>
|
||||
<small>Explore this other product we offer</small>
|
||||
|
|
@ -389,7 +389,7 @@ body_class: ""
|
|||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Support</strong>
|
||||
<small>Get help from our support crew</small>
|
||||
|
|
@ -418,7 +418,7 @@ body_class: ""
|
|||
<ul class="list-unstyled d-flex flex-column gap-2">
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Main product</strong>
|
||||
<small>Take a tour through the product</small>
|
||||
|
|
@ -427,7 +427,7 @@ body_class: ""
|
|||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Another product</strong>
|
||||
<small>Explore this other product we offer</small>
|
||||
|
|
@ -436,7 +436,7 @@ body_class: ""
|
|||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Support</strong>
|
||||
<small>Get help from our support crew</small>
|
||||
|
|
|
|||
|
|
@ -66,35 +66,35 @@ body_class: ""
|
|||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
||||
<div class="feature col">
|
||||
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#collection"/></svg>
|
||||
</div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
<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"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
|
||||
</div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
<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"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
<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"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,7 +107,7 @@ body_class: ""
|
|||
<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 text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
|
|
@ -119,7 +119,7 @@ body_class: ""
|
|||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
|
|
@ -131,7 +131,7 @@ body_class: ""
|
|||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#tools"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
|
|
@ -159,11 +159,11 @@ body_class: ""
|
|||
<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>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><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>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
|
||||
<small>3d</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -180,11 +180,11 @@ body_class: ""
|
|||
<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>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><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>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
|
||||
<small>4d</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -201,11 +201,11 @@ body_class: ""
|
|||
<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>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><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>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
|
||||
<small>5d</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -222,56 +222,56 @@ body_class: ""
|
|||
|
||||
<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-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<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-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<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-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<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-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#home"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<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-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<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-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<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-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#geo-fill"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<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-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#tools"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
|
|
@ -296,7 +296,7 @@ body_class: ""
|
|||
<div class="row row-cols-1 row-cols-sm-2 g-4">
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true">
|
||||
<use xlink:href="#collection" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -306,7 +306,7 @@ body_class: ""
|
|||
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true">
|
||||
<use xlink:href="#gear-fill" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -316,7 +316,7 @@ body_class: ""
|
|||
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true">
|
||||
<use xlink:href="#speedometer" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -326,7 +326,7 @@ body_class: ""
|
|||
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true">
|
||||
<use xlink:href="#table" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,17 +15,14 @@ body_class: ""
|
|||
<symbol id="instagram" viewBox="0 0 16 16">
|
||||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||||
</symbol>
|
||||
<symbol id="twitter" viewBox="0 0 16 16">
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="container">
|
||||
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
|
||||
<p class="col-md-4 mb-0 text-body-secondary">© {{< year >}} Company, Inc</p>
|
||||
|
||||
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
|
||||
<ul class="nav col-md-4 justify-content-end">
|
||||
|
|
@ -43,16 +40,15 @@ body_class: ""
|
|||
<div class="container">
|
||||
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
|
||||
<div class="col-md-4 d-flex align-items-center">
|
||||
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
|
||||
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
|
||||
<svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
<span class="mb-3 mb-md-0 text-body-secondary">© {{< year >}} Company, Inc</span>
|
||||
</div>
|
||||
|
||||
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
|
||||
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
|
||||
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
|
||||
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
|
||||
<li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#instagram"/></svg></a></li>
|
||||
<li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
@ -77,8 +73,8 @@ body_class: ""
|
|||
<div class="container">
|
||||
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
|
||||
<div class="col mb-3">
|
||||
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
<p class="text-body-secondary">© {{< year >}}</p>
|
||||
</div>
|
||||
|
|
@ -167,7 +163,7 @@ body_class: ""
|
|||
<p>Monthly digest of what's new and exciting from us.</p>
|
||||
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
|
||||
<label for="newsletter1" class="visually-hidden">Email address</label>
|
||||
<input id="newsletter1" type="text" class="form-control" placeholder="Email address">
|
||||
<input id="newsletter1" type="email" class="form-control" placeholder="Email address">
|
||||
<button class="btn btn-primary" type="button">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -177,9 +173,8 @@ body_class: ""
|
|||
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
|
||||
<p>© {{< year >}} Company, Inc. All rights reserved.</p>
|
||||
<ul class="list-unstyled d-flex">
|
||||
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
|
||||
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
|
||||
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
|
||||
<li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
|
||||
<li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#facebook"/></svg></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ body_class: ""
|
|||
<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 link-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Simple header</span>
|
||||
</a>
|
||||
|
||||
|
|
@ -159,8 +159,8 @@ body_class: ""
|
|||
<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-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow">
|
||||
<li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
|
||||
|
|
@ -225,7 +225,7 @@ body_class: ""
|
|||
<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 link-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><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" role="search">
|
||||
|
|
@ -247,31 +247,31 @@ body_class: ""
|
|||
<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>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><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>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><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>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><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>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><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>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ body_class: ""
|
|||
|
||||
<div class="container my-5">
|
||||
<div class="p-5 text-center bg-body-tertiary rounded-3">
|
||||
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<h1 class="text-body-emphasis">Jumbotron with icon</h1>
|
||||
<p class="col-lg-8 mx-auto fs-5 text-muted">
|
||||
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
|
||||
|
|
@ -30,7 +30,7 @@ body_class: ""
|
|||
<div class="d-inline-flex gap-2 mb-5">
|
||||
<button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
|
||||
Call to action
|
||||
<svg class="bi ms-2" width="24" height="24"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
|
||||
Secondary link
|
||||
|
|
@ -44,7 +44,7 @@ body_class: ""
|
|||
<div class="container my-5">
|
||||
<div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
|
||||
<button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
|
||||
<svg class="bi mt-5 mb-3" width="48" height="48"><use xlink:href="#check2-circle"/></svg>
|
||||
<svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
|
||||
<h1 class="text-body-emphasis">Placeholder jumbotron</h1>
|
||||
<p class="col-lg-6 mx-auto mb-4">
|
||||
This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ body_class: ""
|
|||
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">List group item heading</h6>
|
||||
|
|
@ -35,7 +35,7 @@ body_class: ""
|
|||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Another title here</h6>
|
||||
|
|
@ -45,7 +45,7 @@ body_class: ""
|
|||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Third heading</h6>
|
||||
|
|
@ -118,7 +118,7 @@ body_class: ""
|
|||
<span class="pt-1 form-checked-content">
|
||||
<strong>Finish sales report</strong>
|
||||
<small class="d-block text-body-secondary">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
|
||||
<svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
|
||||
1:00–2:00pm
|
||||
</small>
|
||||
</span>
|
||||
|
|
@ -128,7 +128,7 @@ body_class: ""
|
|||
<span class="pt-1 form-checked-content">
|
||||
<strong>Weekly All Hands</strong>
|
||||
<small class="d-block text-body-secondary">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
|
||||
<svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
|
||||
2:00–2:30pm
|
||||
</small>
|
||||
</span>
|
||||
|
|
@ -138,7 +138,7 @@ body_class: ""
|
|||
<span class="pt-1 form-checked-content">
|
||||
<strong>Out of office</strong>
|
||||
<small class="d-block text-body-secondary">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
|
||||
<svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use xlink:href="#alarm"/></svg>
|
||||
Tomorrow
|
||||
</small>
|
||||
</span>
|
||||
|
|
@ -148,7 +148,7 @@ body_class: ""
|
|||
<span class="pt-1 form-checked-content">
|
||||
<span contenteditable="true" class="w-100">Add new task...</span>
|
||||
<small class="d-block text-body-secondary">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
|
||||
<svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use xlink:href="#list-check"/></svg>
|
||||
Choose list...
|
||||
</small>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ body_class: ""
|
|||
<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="github" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
||||
<symbol id="google" viewBox="0 0 16 16">
|
||||
<path d="M15.545 6.558a9.4 9.4 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.7 7.7 0 0 1 5.352 2.082l-2.284 2.284A4.35 4.35 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.8 4.8 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.7 3.7 0 0 0 1.599-2.431H8v-3.08z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="twitter" viewBox="0 0 16 16">
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
|
||||
<symbol id="github" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="facebook" viewBox="0 0 16 16">
|
||||
|
|
@ -34,7 +34,7 @@ body_class: ""
|
|||
</svg>
|
||||
|
||||
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content rounded-4 shadow">
|
||||
<div class="modal-header border-bottom-0">
|
||||
<h1 class="modal-title fs-5">Modal title</h1>
|
||||
|
|
@ -54,7 +54,7 @@ body_class: ""
|
|||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content rounded-3 shadow">
|
||||
<div class="modal-body p-4 text-center">
|
||||
<h5 class="mb-0">Enable this setting?</h5>
|
||||
|
|
@ -71,28 +71,28 @@ body_class: ""
|
|||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content rounded-4 shadow">
|
||||
<div class="modal-body p-5">
|
||||
<h2 class="fw-bold mb-0">What's new</h2>
|
||||
|
||||
<ul class="d-grid gap-4 my-5 list-unstyled small">
|
||||
<li class="d-flex gap-4">
|
||||
<svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#grid-fill"/></svg>
|
||||
<div>
|
||||
<h5 class="mb-0">Grid view</h5>
|
||||
Not into lists? Try the new grid view.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex gap-4">
|
||||
<svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg>
|
||||
<svg class="bi text-warning flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#bookmark-star"/></svg>
|
||||
<div>
|
||||
<h5 class="mb-0">Bookmarks</h5>
|
||||
Save items you love for easy access later.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex gap-4">
|
||||
<svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg>
|
||||
<svg class="bi text-primary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#film"/></svg>
|
||||
<div>
|
||||
<h5 class="mb-0">Video embeds</h5>
|
||||
Share videos wherever you go.
|
||||
|
|
@ -108,7 +108,7 @@ body_class: ""
|
|||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content rounded-4 shadow">
|
||||
<div class="modal-header p-5 pb-4 border-bottom-0">
|
||||
<h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
|
||||
|
|
@ -130,15 +130,15 @@ body_class: ""
|
|||
<hr class="my-4">
|
||||
<h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
|
||||
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
|
||||
<svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg>
|
||||
Sign up with Twitter
|
||||
<svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#google"/></svg>
|
||||
Sign up with Google
|
||||
</button>
|
||||
<button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit">
|
||||
<svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg>
|
||||
<svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#facebook"/></svg>
|
||||
Sign up with Facebook
|
||||
</button>
|
||||
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
|
||||
<svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg>
|
||||
<svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#github"/></svg>
|
||||
Sign up with GitHub
|
||||
</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "offcanvas-navbar.css"
|
||||
extra_js:
|
||||
- src: "offcanvas-navbar.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
aliases: "/docs/5.3/examples/offcanvas/"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -104,42 +104,42 @@ extra_css:
|
|||
<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>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><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>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><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>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><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>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><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>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><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>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ extra_css:
|
|||
<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-md-none" href="#">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
|
||||
Aperture
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
|
||||
|
|
@ -34,8 +34,8 @@ extra_css:
|
|||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<ul class="navbar-nav flex-grow-1 justify-content-between">
|
||||
<li class="nav-item"><a class="nav-link" href="#">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
|
||||
<li class="nav-item"><a class="nav-link" href="#" aria-label="Aperture">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
|
||||
</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Product</a></li>
|
||||
|
|
@ -43,8 +43,8 @@ extra_css:
|
|||
<li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg>
|
||||
<li class="nav-item"><a class="nav-link" href="#" aria-label="Cart">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#cart"/></svg>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -60,11 +60,11 @@ extra_css:
|
|||
<div class="d-flex gap-3 justify-content-center lead fw-normal">
|
||||
<a class="icon-link" href="#">
|
||||
Learn more
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
<a class="icon-link" href="#">
|
||||
Buy
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "sidebars.css"
|
||||
extra_js:
|
||||
- src: "sidebars.js"
|
||||
defer: true
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
|
|
@ -37,38 +38,38 @@ body_class: ""
|
|||
|
||||
<div class="d-flex flex-column flex-shrink-0 p-3 text-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 pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><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 pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -93,38 +94,38 @@ body_class: ""
|
|||
|
||||
<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
|
||||
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><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 pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -149,7 +150,7 @@ body_class: ""
|
|||
|
||||
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
|
||||
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none" width="40" height="32" aria-hidden="true"><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">
|
||||
|
|
@ -197,7 +198,7 @@ body_class: ""
|
|||
|
||||
<div class="flex-shrink-0 p-3" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
|
||||
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-5 fw-semibold">Collapsible</span>
|
||||
</a>
|
||||
<ul class="list-unstyled ps-0">
|
||||
|
|
@ -260,7 +261,7 @@ body_class: ""
|
|||
|
||||
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
|
||||
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
|
||||
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><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">
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ body_class: "d-flex align-items-center py-4 bg-body-tertiary"
|
|||
</div>
|
||||
|
||||
<div class="form-check text-start my-3">
|
||||
<input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
<input class="form-check-input" type="checkbox" value="remember-me" id="checkDefault">
|
||||
<label class="form-check-label" for="checkDefault">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ title: Starter Template
|
|||
<div class="col-lg-8 mx-auto p-4 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-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Starter template</span>
|
||||
</a>
|
||||
</header>
|
||||
|
|
@ -38,25 +38,25 @@ title: Starter Template
|
|||
<ul class="list-unstyled ps-0">
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
Bootstrap npm starter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/parcel" rel="noopener" target="_blank">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
Bootstrap Parcel starter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/vite" rel="noopener" target="_blank">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
Bootstrap Vite starter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/webpack" rel="noopener" target="_blank">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
Bootstrap Webpack starter
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -69,31 +69,31 @@ title: Starter Template
|
|||
<ul class="list-unstyled ps-0">
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/introduction" >}}">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
Bootstrap quick start guide
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/webpack" >}}">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
Bootstrap Webpack guide
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/parcel" >}}">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
Bootstrap Parcel guide
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/vite" >}}">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
Bootstrap Vite guide
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/contribute" >}}">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||
Contributing to Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -19,14 +19,14 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
|
|||
|
||||
{{< example >}}
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkDefault">
|
||||
<label class="form-check-label" for="checkDefault">
|
||||
Default checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
|
||||
<label class="form-check-label" for="flexCheckChecked">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
|
||||
<label class="form-check-label" for="checkChecked">
|
||||
Checked checkbox
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -38,8 +38,8 @@ Checkboxes can utilize the `:indeterminate` pseudo class when manually set via J
|
|||
|
||||
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
|
||||
<label class="form-check-label" for="flexCheckIndeterminate">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
|
||||
<label class="form-check-label" for="checkIndeterminate">
|
||||
Indeterminate checkbox
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -51,20 +51,20 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
|
|||
|
||||
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
|
||||
<label class="form-check-label" for="flexCheckIndeterminateDisabled">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" disabled>
|
||||
<label class="form-check-label" for="checkIndeterminateDisabled">
|
||||
Disabled indeterminate checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
|
||||
<label class="form-check-label" for="flexCheckDisabled">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
|
||||
<label class="form-check-label" for="checkDisabled">
|
||||
Disabled checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
|
||||
<label class="form-check-label" for="flexCheckCheckedDisabled">
|
||||
<input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
|
||||
<label class="form-check-label" for="checkCheckedDisabled">
|
||||
Disabled checked checkbox
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -74,14 +74,14 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
|
|||
|
||||
{{< example >}}
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
|
||||
<label class="form-check-label" for="flexRadioDefault1">
|
||||
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
|
||||
<label class="form-check-label" for="radioDefault1">
|
||||
Default radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
|
||||
<label class="form-check-label" for="flexRadioDefault2">
|
||||
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
|
||||
<label class="form-check-label" for="radioDefault2">
|
||||
Default checked radio
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -93,14 +93,14 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
|
|||
|
||||
{{< example >}}
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
|
||||
<label class="form-check-label" for="flexRadioDisabled">
|
||||
<input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
|
||||
<label class="form-check-label" for="radioDisabled">
|
||||
Disabled radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
|
||||
<label class="form-check-label" for="flexRadioCheckedDisabled">
|
||||
<input class="form-check-input" type="radio" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
|
||||
<label class="form-check-label" for="radioCheckedDisabled">
|
||||
Disabled checked radio
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -112,20 +112,20 @@ A switch has the markup of a custom checkbox but uses the `.form-switch` class t
|
|||
|
||||
{{< example >}}
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
|
||||
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
|
||||
<label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
|
||||
<label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
|
||||
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
|
||||
<label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
|
||||
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
|
||||
<label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -222,8 +222,8 @@ Put your checkboxes, radios, and switches on the opposite side with the `.form-c
|
|||
</div>
|
||||
|
||||
<div class="form-check form-switch form-check-reverse">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
|
||||
<label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
|
||||
<input class="form-check-input" type="checkbox" id="switchCheckReverse">
|
||||
<label class="form-check-label" for="switchCheckReverse">Reverse switch checkbox input</label>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -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/WCAG/) (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.2](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/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.
|
||||
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.2 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.2 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
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ On browsers that support `prefers-reduced-motion`, and where the user has *not*
|
|||
|
||||
## Additional resources
|
||||
|
||||
- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/)
|
||||
- [Web Content Accessibility Guidelines (WCAG) 2.2](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/)
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ Internet Explorer is not supported. **If you require Internet Explorer support,
|
|||
|
||||
### Overflow and scrolling
|
||||
|
||||
Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [Chrome bug #175502](https://bugs.chromium.org/p/chromium/issues/detail?id=175502) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
|
||||
Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [Chrome bug #175502](https://issues.chromium.org/issues/40301599) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
|
||||
|
||||
### iOS text fields and scrolling
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ bootstrap/
|
|||
└── bootstrap.min.js.map
|
||||
```
|
||||
|
||||
This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
|
||||
This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/).
|
||||
|
||||
### CSS files
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ description: Help develop Bootstrap with our documentation build scripts and tes
|
|||
group: getting-started
|
||||
toc: true
|
||||
aliases: "/docs/5.3/getting-started/build-tools/"
|
||||
added:
|
||||
show_badge: false
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
## Tooling setup
|
||||
|
|
@ -38,7 +41,7 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag
|
|||
|
||||
## 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).
|
||||
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.
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ Download ready-to-use compiled code for **Bootstrap v{{< param current_version >
|
|||
|
||||
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.
|
||||
|
||||
<a href="{{< param "download.dist" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
|
||||
<a href="{{< param "download.dist" >}}" class="btn btn-bd-primary">Download</a>
|
||||
|
||||
## Source files
|
||||
|
||||
|
|
@ -26,13 +26,13 @@ Compile Bootstrap with your own asset pipeline by downloading our source Sass, J
|
|||
|
||||
Should you require our full set of [build tools]({{< docsref "/getting-started/contribute#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>
|
||||
<a href="{{< param "download.source" >}}" class="btn btn-bd-primary">Download source</a>
|
||||
|
||||
## Examples
|
||||
|
||||
If you want to download and examine our [examples]({{< docsref "/examples" >}}), you can grab the already built examples:
|
||||
|
||||
<a href="{{< param "download.dist_examples" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a>
|
||||
<a href="{{< param "download.dist_examples" >}}" class="btn btn-bd-primary">Download Examples</a>
|
||||
|
||||
## CDN via jsDelivr
|
||||
|
||||
|
|
@ -100,9 +100,20 @@ Install Bootstrap in your Node.js powered apps with [the yarn package](https://y
|
|||
yarn add bootstrap@{{< param "current_version" >}}
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
**Yarn 2+ (aka Yarn Berry) doesn't support the `node_modules` directory by default**: using our [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) needs some adjustments:
|
||||
|
||||
```sh
|
||||
yarn config set nodeLinker node-modules # Use the node_modules linker
|
||||
touch yarn.lock # Create an empty yarn.lock file
|
||||
yarn install # Install the dependencies
|
||||
yarn start # Start the project
|
||||
```
|
||||
{{< /callout >}}
|
||||
|
||||
### RubyGems
|
||||
|
||||
Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
|
||||
Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/guides/gemfile.html):
|
||||
|
||||
```ruby
|
||||
gem 'bootstrap', '~> {{< param current_ruby_version >}}'
|
||||
|
|
@ -126,7 +137,7 @@ composer require twbs/bootstrap:{{< param current_version >}}
|
|||
|
||||
### NuGet
|
||||
|
||||
If you develop in .NET Framework, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/). Newer projects should use [libman](https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets.
|
||||
If you develop in .NET Framework, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/). Newer projects should use [libman](https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets.
|
||||
|
||||
```powershell
|
||||
Install-Package bootstrap
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ Get started by including Bootstrap's production-ready CSS and JavaScript via CDN
|
|||
</html>
|
||||
```
|
||||
|
||||
2. **Include Bootstrap's CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
|
||||
2. **Include Bootstrap's CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
|
|
@ -50,7 +50,7 @@ Get started by including Bootstrap's production-ready CSS and JavaScript via CDN
|
|||
</html>
|
||||
```
|
||||
|
||||
You can also include [Popper](https://popper.js.org/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
|
||||
You can also include [Popper](https://popper.js.org/docs/v2/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
|
||||
|
||||
```html
|
||||
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
|
||||
|
|
@ -83,18 +83,19 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co
|
|||
|
||||
Curious which components explicitly require our JavaScript and Popper? If you're at all unsure about the general page structure, keep reading for an example page template.
|
||||
|
||||
- Accordions for extending our Collapse plugin
|
||||
- Alerts for dismissing
|
||||
- Buttons for toggling states and checkbox/radio functionality
|
||||
- Carousel for all slide behaviors, controls, and indicators
|
||||
- Collapse for toggling visibility of content
|
||||
- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/))
|
||||
- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
|
||||
- Modals for displaying, positioning, and scroll behavior
|
||||
- Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors
|
||||
- Navs with the Tab plugin for toggling content panes
|
||||
- Offcanvases for displaying, positioning, and scroll behavior
|
||||
- Scrollspy for scroll behavior and navigation updates
|
||||
- Toasts for displaying and dismissing
|
||||
- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/))
|
||||
- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
|
||||
|
||||
## Important globals
|
||||
|
||||
|
|
@ -147,9 +148,9 @@ Stay up-to-date on the development of Bootstrap and reach out to the community w
|
|||
|
||||
- Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
|
||||
- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
|
||||
- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap).
|
||||
- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/).
|
||||
- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` 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 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.
|
||||
You can also follow [@getbootstrap on X](https://x.com/{{< param x >}}) for the latest gossip and awesome music videos.
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ A better alternative for those using this type of frameworks is to use a framewo
|
|||
{{< /callout >}}
|
||||
- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4)
|
||||
- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha)
|
||||
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
|
||||
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) or [ngx-bootstrap](https://valor-software.com/ngx-bootstrap)
|
||||
|
||||
## Using Bootstrap as a module
|
||||
|
||||
|
|
@ -95,7 +95,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to
|
|||
|
||||
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.
|
||||
|
||||
Our dropdowns, popovers, and tooltips also depend on [Popper](https://popper.js.org/).
|
||||
Our dropdowns, popovers, and tooltips also depend on [Popper](https://popper.js.org/docs/v2/).
|
||||
|
||||
## Data attributes
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,16 @@ toc: true
|
|||
thumbnail: guides/bootstrap-parcel@2x.png
|
||||
---
|
||||
|
||||
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
|
||||
<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="800" height="400" alt="">
|
||||
|
||||
{{< callout >}}
|
||||
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn't currently supported there.
|
||||
{{< /callout >}}
|
||||
|
||||
## What is Parcel?
|
||||
|
||||
[Parcel](https://parceljs.org/) is a web application bundler designed to simplify the development process with a zero-configuration setup out of the box. It offers features found in more advanced bundlers while focusing on ease of use, making it ideal for developers seeking a quick start.
|
||||
|
||||
## Setup
|
||||
|
||||
We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
|
||||
|
|
@ -111,7 +115,7 @@ With dependencies installed and our project folder ready for us to start coding,
|
|||
npm start
|
||||
```
|
||||
|
||||
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server.png" alt="Parcel dev server running">
|
||||
|
||||
|
||||
In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript.
|
||||
|
||||
|
|
@ -150,7 +154,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
|
|||
|
||||
3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
|
||||
|
||||
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
|
||||
|
||||
|
||||
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
|
||||
|
||||
|
|
|
|||
|
|
@ -168,9 +168,19 @@ After running Sass then RTLCSS, each selector in your CSS files will be prepende
|
|||
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 >}}
|
||||
|
||||
Do you want to automate this process and address several edge cases involving both directions within a single stylesheet? Then, consider using [PostCSS RTLCSS](https://github.com/elchininet/postcss-rtlcss) as a [PostCSS](https://github.com/postcss/postcss) plugin to process your source files. PostCSS RTLCSS uses [RTLCSS](https://rtlcss.com) behind the scenes to manage the direction flipping process, but it separates the flipped declarations into rules with a different prefix for LTR and RTL, something that allows you to have both directions within the same stylesheet file. By doing this, you can switch between LTR and RTL orientations by simply changing the `dir` of the page (or even by modifying a specific class if you configure the plugin accordingly).
|
||||
|
||||
{{< callout warning >}}
|
||||
**Important things to take into account** when using PostCSS RTLCSS to build a combined LTR and RTL implementation:
|
||||
|
||||
1. It is recommended that you add the `dir` attribute to the `html` element. This way, the entire page will be affected when you change the direction. Also, make sure you add the `lang` attribute accordingly.
|
||||
2. Having a single bundle with both directions will increase the size of the final stylesheet (on average, by 20%-30%): consider some [optimization]({{< docsref "/customize/optimize" >}}).
|
||||
3. Take into account that PostCSS RTLCSS is not compatible with `/* rtl:remove */` directives because it doesn't remove any CSS rule. You should replace your `/* rtl:remove */`, `/* rtl:begin:remove */` and `/* rtl:end:remove */` directives with `/* rtl:freeze */`, `/* rtl:begin:freeze */` and `/* rtl:end:freeze */` directives respectively. These directives will prefix the targeted rules or declarations with the current direction but will not create an RTL counterpart (same result as the `remove` ones in RTLCSS).
|
||||
{{< /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`.
|
||||
The [breadcrumb separator]({{< docsref "/components/breadcrumb#dividers" >}}) is the only case requiring its own brand-new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
|
||||
|
||||
## Additional resources
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,21 @@ description: The official guide for how to include and bundle Bootstrap's CSS an
|
|||
group: getting-started
|
||||
toc: true
|
||||
thumbnail: guides/bootstrap-vite@2x.png
|
||||
added:
|
||||
show_badge: false
|
||||
version: "5.2"
|
||||
---
|
||||
|
||||
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
|
||||
<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="800" height="400" alt="">
|
||||
|
||||
{{< callout >}}
|
||||
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/vite). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/vite?file=index.html) for live editing.
|
||||
{{< /callout >}}
|
||||
|
||||
## What is Vite?
|
||||
|
||||
[Vite](https://vite.dev/) is a modern frontend build tool designed for speed and simplicity. It provides an efficient and streamlined development experience, especially for modern JavaScript frameworks.
|
||||
|
||||
## Setup
|
||||
|
||||
We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
|
||||
|
|
@ -132,7 +139,7 @@ With dependencies installed and our project folder ready for us to start coding,
|
|||
npm start
|
||||
```
|
||||
|
||||
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server.png" alt="Vite dev server running">
|
||||
|
||||
|
||||
In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript.
|
||||
|
||||
|
|
@ -172,7 +179,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
|
|||
|
||||
3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
|
||||
|
||||
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
|
||||
|
||||
|
||||
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,16 @@ toc: true
|
|||
thumbnail: guides/bootstrap-webpack@2x.png
|
||||
---
|
||||
|
||||
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
|
||||
<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="800" height="400" alt="">
|
||||
|
||||
{{< callout >}}
|
||||
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/webpack). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/webpack?file=index.html) for live editing.
|
||||
{{< /callout >}}
|
||||
|
||||
## What is Webpack?
|
||||
|
||||
[Webpack](https://webpack.js.org/) is a JavaScript module bundler that processes modules and their dependencies to generate static assets. It simplifies managing complex web applications with multiple files and dependencies.
|
||||
|
||||
## Setup
|
||||
|
||||
We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
|
||||
|
|
@ -141,7 +145,7 @@ With dependencies installed and our project folder ready for us to start coding,
|
|||
npm start
|
||||
```
|
||||
|
||||
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server.png" alt="Webpack dev server running">
|
||||
|
||||
|
||||
In the next and final section to this guide, we'll set up the Webpack loaders and import all of Bootstrap's CSS and JavaScript.
|
||||
|
||||
|
|
@ -244,7 +248,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
|
|||
|
||||
4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
|
||||
|
||||
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">
|
||||
|
||||
|
||||
Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Color and background
|
|||
description: Set a background color with contrasting foreground color.
|
||||
group: helpers
|
||||
toc: true
|
||||
added: "5.2"
|
||||
added:
|
||||
version: "5.2"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Focus ring
|
|||
description: Utility classes that allows you to add and modify custom focus ring styles to elements and components.
|
||||
group: helpers
|
||||
toc: true
|
||||
added: "5.3"
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Icon link
|
|||
description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
|
||||
group: helpers
|
||||
toc: true
|
||||
added: 5.3
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`.
|
||||
|
|
@ -21,7 +22,9 @@ Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the
|
|||
|
||||
{{< example >}}
|
||||
<a class="icon-link" href="#">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</svg>
|
||||
Icon link
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
|
@ -29,7 +32,9 @@ Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the
|
|||
{{< example >}}
|
||||
<a class="icon-link" href="#">
|
||||
Icon link
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -40,7 +45,9 @@ Add `.icon-link-hover` to move the icon to the right on hover.
|
|||
{{< example >}}
|
||||
<a class="icon-link icon-link-hover" href="#">
|
||||
Icon link
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -56,7 +63,10 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS
|
|||
|
||||
{{< example >}}
|
||||
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</svg>
|
||||
Icon link
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
|
@ -66,7 +76,9 @@ Customize the color by overriding the `--bs-link-*` CSS variable:
|
|||
{{< example >}}
|
||||
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
|
||||
Icon link
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -83,6 +95,8 @@ Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/
|
|||
{{< example >}}
|
||||
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
|
||||
Icon link
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@ title: Stacks
|
|||
description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
|
||||
group: helpers
|
||||
toc: true
|
||||
added: "5.1"
|
||||
added:
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
|
||||
|
||||
{{< callout warning >}}
|
||||
**Heads up!** Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
|
||||
**Heads up!** Support for gap utilities with flexbox isn't available in Safari prior to 14.5, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
|
||||
{{< /callout >}}
|
||||
|
||||
## Vertical
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Vertical rule
|
|||
description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
|
||||
group: helpers
|
||||
toc: true
|
||||
added: "5.1"
|
||||
added:
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ For more information and examples on how to modify our Sass maps and variables,
|
|||
|
||||
## Media queries
|
||||
|
||||
Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
|
||||
Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
|
||||
|
||||
### Min-width
|
||||
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
|
|||
|
||||
### Order classes
|
||||
|
||||
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
|
||||
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
|
||||
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container text-center">
|
||||
|
|
@ -239,6 +239,28 @@ There are also responsive `.order-first` and `.order-last` classes that change t
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our Modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details.
|
||||
|
||||
```scss
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"order": map-merge(
|
||||
map-get($utilities, "order"),
|
||||
(
|
||||
values: map-merge(
|
||||
map-get(map-get($utilities, "order"), "values"),
|
||||
(
|
||||
6: 6, // Add a new `.order-{breakpoint}-6` utility
|
||||
last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
### Offsetting columns
|
||||
|
||||
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: CSS Grid
|
|||
description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
|
||||
group: layout
|
||||
toc: true
|
||||
added: "5.1"
|
||||
added:
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.
|
||||
|
|
@ -148,7 +149,7 @@ Similar to our default grid system, our CSS Grid allows for easy nesting of `.gr
|
|||
In practice this allows for more complex and custom layouts when compared to our default grid system.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid text-center" style="--bs-columns: 3;">
|
||||
<div class="grid text-center overflow-x-auto" style="--bs-columns: 3;">
|
||||
<div>
|
||||
First auto-column
|
||||
<div class="grid">
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ If you're migrating from our previous alpha release of v5.3.0, please review the
|
|||
|
||||
- Added new `.border-black` utility to match our `.text-black` and `.bg-black` utilities.
|
||||
|
||||
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Deprecated the `.text-muted` utility and `$text-muted` Sass variable. It's been replaced by `.text-body-secondary` and `$body-secondary-color`.
|
||||
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.text-muted` utility and `$text-muted` Sass variable have been deprecated and replaced with `.text-body-secondary` and `$body-secondary-color`.
|
||||
|
||||
### Docs
|
||||
|
||||
|
|
@ -431,7 +431,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
|
|||
|
||||
- Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
|
||||
|
||||
- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.1 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`.
|
||||
- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.2 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`.
|
||||
|
||||
- To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.
|
||||
|
||||
|
|
@ -445,7 +445,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
|
|||
|
||||
- Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior.
|
||||
|
||||
- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box.
|
||||
- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-0` to `.order-5` out of the box.
|
||||
|
||||
- <span class="badge text-bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}).
|
||||
|
||||
|
|
@ -736,3 +736,5 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
|
|||
- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of Popper elements. **Applies to dropdowns, popovers, and tooltips.**
|
||||
|
||||
- Removed underscore from public static methods like `_getInstance()` → `getInstance()`.
|
||||
|
||||
- Removed `util.js`, with its functionality now integrated into individual plugins. If you previously included `util.js` manually, you can safely remove it, as it is no longer needed. Each plugin now contains only the utilities it requires, enhancing modularity and reducing dependencies.
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ aliases: "/docs/5.3/utilities/"
|
|||
toc: true
|
||||
---
|
||||
|
||||
Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started.
|
||||
Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps/) to get started.
|
||||
|
||||
The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
|
||||
|
||||
|
|
@ -452,7 +452,8 @@ You can enable responsive classes for an existing set of utilities that are not
|
|||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities, (
|
||||
$utilities,
|
||||
(
|
||||
"border": map-merge(
|
||||
map-get($utilities, "border"),
|
||||
( responsive: true ),
|
||||
|
|
@ -508,7 +509,8 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca
|
|||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities, (
|
||||
$utilities,
|
||||
(
|
||||
"margin-start": map-merge(
|
||||
map-get($utilities, "margin-start"),
|
||||
( class: ml ),
|
||||
|
|
@ -521,7 +523,7 @@ $utilities: map-merge(
|
|||
|
||||
### Remove utilities
|
||||
|
||||
Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map#remove).
|
||||
Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map/#remove).
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
|
|
@ -537,7 +539,7 @@ $utilities: map-remove($utilities, "width", "float");
|
|||
@import "bootstrap/scss/utilities/api";
|
||||
```
|
||||
|
||||
You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge) and set the group key to `null` to remove the utility.
|
||||
You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge) and set the group key to `null` to remove the utility.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
|
|
@ -559,7 +561,7 @@ $utilities: map-merge(
|
|||
|
||||
### Add, remove, modify
|
||||
|
||||
You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge). Here's how you can combine the previous examples into one larger map.
|
||||
You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here's how you can combine the previous examples into one larger map.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
|
|
@ -574,13 +576,11 @@ $utilities: map-merge(
|
|||
(
|
||||
// Remove the `width` utility
|
||||
"width": null,
|
||||
|
||||
// Make an existing utility responsive
|
||||
"border": map-merge(
|
||||
map-get($utilities, "border"),
|
||||
( responsive: true ),
|
||||
),
|
||||
|
||||
// Add new utilities
|
||||
"cursor": (
|
||||
property: cursor,
|
||||
|
|
|
|||
|
|
@ -128,13 +128,11 @@ Add classes to an element to easily round its corners.
|
|||
{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
|
||||
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`, and can be configured by modifying the utilities API.
|
||||
Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API.
|
||||
|
||||
{{< example class="bd-example-rounded-utils" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
|
||||
|
|
@ -143,6 +141,8 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
|
|||
{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
|
||||
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< example class="bd-example-rounded-utils" >}}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ For faster mobile-friendly development, use responsive display classes for showi
|
|||
|
||||
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
|
||||
|
||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||
|
||||
{{< bs-table >}}
|
||||
| Screen size | Class |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Link
|
|||
description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
|
||||
group: utilities
|
||||
toc: true
|
||||
added: 5.3
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
## Link opacity
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ title: Object fit
|
|||
description: Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
|
||||
group: utilities
|
||||
toc: true
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ layout: docs
|
|||
title: Opacity
|
||||
description: Control the opacity of elements.
|
||||
group: utilities
|
||||
added: "5.1"
|
||||
added:
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ Here are some real life examples of these classes:
|
|||
</button>
|
||||
|
||||
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
|
|
|
|||
|
|
@ -103,11 +103,11 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
|
|||
When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid gap-3">
|
||||
<div class="p-2 g-col-6">Grid item 1</div>
|
||||
<div class="p-2 g-col-6">Grid item 2</div>
|
||||
<div class="p-2 g-col-6">Grid item 3</div>
|
||||
<div class="p-2 g-col-6">Grid item 4</div>
|
||||
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
|
||||
<div class="p-2">Grid item 1</div>
|
||||
<div class="p-2">Grid item 2</div>
|
||||
<div class="p-2">Grid item 3</div>
|
||||
<div class="p-2">Grid item 4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -118,11 +118,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
|
|||
`row-gap` sets the vertical space between children items in the specified container.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid gap-0 row-gap-3">
|
||||
<div class="p-2 g-col-6">Grid item 1</div>
|
||||
<div class="p-2 g-col-6">Grid item 2</div>
|
||||
<div class="p-2 g-col-6">Grid item 3</div>
|
||||
<div class="p-2 g-col-6">Grid item 4</div>
|
||||
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
|
||||
<div class="p-2">Grid item 1</div>
|
||||
<div class="p-2">Grid item 2</div>
|
||||
<div class="p-2">Grid item 3</div>
|
||||
<div class="p-2">Grid item 4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -131,11 +131,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
|
|||
`column-gap` sets the horizontal space between children items in the specified container.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid gap-0 column-gap-3">
|
||||
<div class="p-2 g-col-6">Grid item 1</div>
|
||||
<div class="p-2 g-col-6">Grid item 2</div>
|
||||
<div class="p-2 g-col-6">Grid item 3</div>
|
||||
<div class="p-2 g-col-6">Grid item 4</div>
|
||||
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
|
||||
<div class="p-2">Grid item 1</div>
|
||||
<div class="p-2">Grid item 2</div>
|
||||
<div class="p-2">Grid item 3</div>
|
||||
<div class="p-2">Grid item 4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts
|
|||
|
||||
## Text transform
|
||||
|
||||
Transform text in components with text capitalization classes.
|
||||
Transform text in components with our text capitalization classes: `text-lowercase`, `text-uppercase` or `text-capitalize`.
|
||||
|
||||
{{< example >}}
|
||||
<p class="text-lowercase">Lowercased text.</p>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Z-index
|
|||
description: Use our low-level `z-index` utilities to quickly change the stack level of an element or component.
|
||||
group: utilities
|
||||
toc: true
|
||||
added: "5.3"
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
## Example
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: redirect
|
||||
sitemap_exclude: true
|
||||
sitemap:
|
||||
disable: true
|
||||
redirect: "/docs/5.3/getting-started/introduction/"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ description: An appendix of hosted documentation for nearly every release of Boo
|
|||
{{- range $i, $version := $versions }}
|
||||
{{- $len := len $versions -}}
|
||||
{{ if (eq $i 0) }}<div class="list-group">{{ end }}
|
||||
<a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version }}/">
|
||||
<a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ urls.JoinPath $release.baseurl $version "/" }}">
|
||||
{{ $version }}
|
||||
{{ if (eq $version $.Site.Params.docs_version) -}}
|
||||
<span class="badge text-bg-primary">Latest</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue