mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-13 00:05:25 -04:00
Compare commits
13 Commits
60098ac499
...
beca2a6c7f
| Author | SHA1 | Date | |
|---|---|---|---|
|
beca2a6c7f | ||
|
a4918e33b8 | ||
|
b7e351b445 | ||
|
9129e4a073 | ||
|
|
96b0fd67f5 | ||
|
|
ad724cb136 | ||
|
|
b5772d4ec2 | ||
|
|
1a82228043 | ||
|
785043c06b | ||
|
6bb60152b6 | ||
|
0d9715e063 | ||
|
|
9cc85fd69b | ||
|
c5f46b020c |
7
.github/CONTRIBUTING.md
vendored
7
.github/CONTRIBUTING.md
vendored
@ -31,6 +31,13 @@ restrictions:
|
||||
Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
|
||||
|
||||
|
||||
## Issues assignment
|
||||
|
||||
The core team will be looking at the open issues, analyze them, and provide guidance on how to proceed. **Issues won't be assigned to anyone outside the core team.** However, contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to. Please wait that the issue is ready to be worked on before submitting a PR, we don't want to waste your time.
|
||||
|
||||
Please keep in mind that the core team is small, has limited resources and that we are not always able to respond immediately. We will try to provide feedback as soon as possible, but please be patient. If you don't get a response immediately, it doesn't mean that we are ignoring you or that we don't care about your issue or PR. We will get back to you as soon as we can.
|
||||
|
||||
|
||||
## Issues and labels
|
||||
|
||||
Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
|
||||
|
||||
@ -1216,7 +1216,8 @@ $navbar-dark-color: rgba($white, .55) !default;
|
||||
$navbar-dark-hover-color: rgba($white, .75) !default;
|
||||
$navbar-dark-active-color: $white !default;
|
||||
$navbar-dark-disabled-color: rgba($white, .25) !default;
|
||||
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-dark-icon-color: $navbar-dark-color !default;
|
||||
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
||||
$navbar-dark-brand-color: $navbar-dark-active-color !default;
|
||||
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
||||
@ -1543,9 +1544,6 @@ $alert-margin-bottom: 1rem !default;
|
||||
$alert-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-border-width: var(--#{$prefix}border-width) !default;
|
||||
$alert-bg-scale: -80% !default;
|
||||
$alert-border-scale: -70% !default;
|
||||
$alert-color-scale: 40% !default;
|
||||
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
|
||||
// scss-docs-end alert-variables
|
||||
|
||||
|
||||
@ -20,18 +20,19 @@
|
||||
|
||||
const btnHtml = [
|
||||
'<div class="bd-code-snippet">',
|
||||
' <div class="bd-clipboard">',
|
||||
' <button type="button" class="btn-clipboard">',
|
||||
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
|
||||
' </button>',
|
||||
' </div>',
|
||||
' <div class="bd-clipboard">',
|
||||
' <button type="button" class="btn-clipboard">',
|
||||
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
|
||||
' </button>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
// Wrap programmatically code blocks and add copy btn.
|
||||
document.querySelectorAll('.highlight')
|
||||
.forEach(element => {
|
||||
if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode
|
||||
// Ignore examples made by shortcode
|
||||
if (!element.closest('.bd-example-snippet')) {
|
||||
element.insertAdjacentHTML('beforebegin', btnHtml)
|
||||
element.previousElementSibling.append(element)
|
||||
}
|
||||
|
||||
@ -84,7 +84,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
|
||||
Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
|
||||
|
||||
{{< example >}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check-circle-fill" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||
</symbol>
|
||||
|
||||
@ -25,7 +25,7 @@ Click the buttons below to show and hide another element via class changes:
|
||||
Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
|
||||
|
||||
{{< example >}}
|
||||
<p>
|
||||
<p class="d-inline-flex gap-1">
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
@ -69,7 +69,7 @@ A `<button>` or `<a>` element can show and hide multiple elements by referencing
|
||||
Conversely, multiple `<button>` or `<a>` elements can show and hide the same element if they each reference it with their `data-bs-target` or `href` attribute.
|
||||
|
||||
{{< example >}}
|
||||
<p>
|
||||
<p class="d-inline-flex gap-1">
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
|
||||
@ -96,8 +96,8 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex align-items-center">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
<strong role="status">Loading...</strong>
|
||||
<div class="spinner-border ms-auto" aria-hidden="true"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -151,23 +151,23 @@ Use spinners within buttons to indicate an action is currently processing or tak
|
||||
|
||||
{{< example >}}
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" role="status">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
|
||||
<span role="status">Loading...</span>
|
||||
</button>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" role="status">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
|
||||
<span role="status">Loading...</span>
|
||||
</button>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
@ -177,13 +177,11 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
|
||||
|
||||
Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
|
||||
|
||||
<div class="tooltip-demo">
|
||||
{{< example >}}
|
||||
{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
|
||||
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
|
||||
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
|
||||
</span>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Options
|
||||
|
||||
|
||||
@ -17,9 +17,10 @@ your-project/
|
||||
├── scss
|
||||
│ └── custom.scss
|
||||
└── node_modules/
|
||||
└── bootstrap
|
||||
├── js
|
||||
└── scss
|
||||
│ └── bootstrap
|
||||
│ ├── js
|
||||
│ └── scss
|
||||
└── index.html
|
||||
```
|
||||
|
||||
If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping Bootstrap's source files separate from your own.
|
||||
@ -28,9 +29,10 @@ If you've downloaded our source files and aren't using a package manager, you'll
|
||||
your-project/
|
||||
├── scss
|
||||
│ └── custom.scss
|
||||
└── bootstrap/
|
||||
├── js
|
||||
└── scss
|
||||
├── bootstrap/
|
||||
│ ├── js
|
||||
│ └── scss
|
||||
└── index.html
|
||||
```
|
||||
|
||||
## Importing
|
||||
@ -85,6 +87,45 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
|
||||
|
||||
With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
|
||||
|
||||
## 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.
|
||||
|
||||
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:
|
||||
|
||||
```shell
|
||||
# Install Sass globally
|
||||
npm install -g sass
|
||||
|
||||
# Watch your custom Sass for changes and compile it to CSS
|
||||
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).
|
||||
|
||||
{{< 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).
|
||||
{{< /callout >}}
|
||||
|
||||
## Including
|
||||
|
||||
Once your CSS is compiled, you can include it in your HTML files. Inside your `index.html` you'll want to include your compiled CSS file. Be sure to update the path to your compiled CSS file if you've changed it.
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Custom Bootstrap</title>
|
||||
<link href="/css/custom.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Variable defaults
|
||||
|
||||
Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="x-circle-fill" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
|
||||
</symbol>
|
||||
|
||||
@ -7,7 +7,7 @@ extra_css:
|
||||
- "../blog/blog.rtl.css"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
- "blog.css"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="house-door-fill" viewBox="0 0 16 16">
|
||||
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
|
||||
</symbol>
|
||||
|
||||
@ -4,7 +4,7 @@ title: Buttons
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
|
||||
@ -11,7 +11,7 @@ extra_js:
|
||||
- src: "dashboard.js"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
||||
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
|
||||
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
||||
|
||||
@ -10,7 +10,7 @@ extra_js:
|
||||
- src: "dashboard.js"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
||||
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
|
||||
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="film" viewBox="0 0 16 16">
|
||||
<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>
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
||||
@ -4,7 +4,7 @@ title: Footers
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="calendar-event" viewBox="0 0 16 16">
|
||||
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
|
||||
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bookmark-star" viewBox="0 0 16 16">
|
||||
<path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
|
||||
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
|
||||
|
||||
@ -5,7 +5,7 @@ extra_css:
|
||||
- "pricing.css"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
|
||||
@ -5,7 +5,7 @@ extra_css:
|
||||
- "product.css"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
|
||||
|
||||
@ -8,7 +8,7 @@ extra_js:
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
||||
@ -3,7 +3,7 @@ layout: examples
|
||||
title: Starter Template
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="arrow-right-circle" viewBox="0 0 16 16">
|
||||
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
|
||||
</symbol>
|
||||
|
||||
@ -36,14 +36,14 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
|
||||
Block-level or inline-level form text can be created using `.form-text`.
|
||||
|
||||
{{< callout warning >}}
|
||||
Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
|
||||
Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
|
||||
{{< /callout >}}
|
||||
|
||||
Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
|
||||
|
||||
{{< example >}}
|
||||
<label for="inputPassword5" class="form-label">Password</label>
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
|
||||
<div id="passwordHelpBlock" class="form-text">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
|
||||
</div>
|
||||
@ -57,7 +57,7 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
|
||||
<label for="inputPassword6" class="col-form-label">Password</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
|
||||
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span id="passwordHelpInline" class="form-text">
|
||||
|
||||
@ -24,14 +24,14 @@ Custom `<select>` menus need only a custom class, `.form-select` to trigger the
|
||||
You may also choose from small and large custom selects to match our similarly sized text inputs.
|
||||
|
||||
{{< example >}}
|
||||
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
|
||||
<select class="form-select form-select-lg mb-3" aria-label="Large select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
|
||||
<select class="form-select form-select-sm" aria-label="Small select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
@ -42,7 +42,7 @@ You may also choose from small and large custom selects to match our similarly s
|
||||
The `multiple` attribute is also supported:
|
||||
|
||||
{{< example >}}
|
||||
<select class="form-select" multiple aria-label="multiple select example">
|
||||
<select class="form-select" multiple aria-label="Multiple select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
@ -53,7 +53,7 @@ The `multiple` attribute is also supported:
|
||||
As is the `size` attribute:
|
||||
|
||||
{{< example >}}
|
||||
<select class="form-select" size="3" aria-label="size 3 select example">
|
||||
<select class="form-select" size="3" aria-label="Size 3 select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
|
||||
@ -118,9 +118,7 @@ All infinitive events provide [`preventDefault()`](https://developer.mozilla.org
|
||||
const myModal = document.querySelector('#myModal')
|
||||
|
||||
myModal.addEventListener('show.bs.modal', event => {
|
||||
if (!data) {
|
||||
return event.preventDefault() // stops modal from being shown
|
||||
}
|
||||
return event.preventDefault() // stops modal from being shown
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
@ -16,6 +16,8 @@ These utility classes float an element to the left or right, or disable floating
|
||||
<div class="float-none">Don't float on all viewport sizes</div>
|
||||
{{< /example >}}
|
||||
|
||||
Use the [clearfix helper]({{< docsref "/helpers/clearfix" >}}) on a parent element to clear floats.
|
||||
|
||||
## Responsive
|
||||
|
||||
Responsive variations also exist for each `float` value.
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
{{- end }}
|
||||
</head>
|
||||
<body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
|
||||
@ -1 +1 @@
|
||||
**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
|
||||
**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [*sufficient* color contrast](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="arrow-right" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" 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"/>
|
||||
</symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Loading…
x
Reference in New Issue
Block a user