mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
docs(examples): new cheatsheet and RTL examples
This commit is contained in:
Gaël Poupard
@@ -35,7 +35,7 @@ Use an ordered or unordered list with linked list items to create a minimally st
|
||||
|
||||
## Dividers
|
||||
|
||||
Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--bs-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
|
||||
Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--bs-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
|
||||
|
||||
{{< example >}}
|
||||
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
|
||||
|
||||
@@ -92,13 +92,13 @@ Combine sets of button groups into button toolbars for more complex components.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="btn-group mr-2" role="group" aria-label="Second group">
|
||||
<div class="btn-group me-2" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-secondary">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-secondary">7</button>
|
||||
@@ -113,7 +113,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-outline-secondary">1</button>
|
||||
<button type="button" class="btn btn-outline-secondary">2</button>
|
||||
<button type="button" class="btn btn-outline-secondary">3</button>
|
||||
|
||||
@@ -131,7 +131,7 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<button class="btn btn-primary mr-md-2" type="button">Button</button>
|
||||
<button class="btn btn-primary me-md-2" type="button">Button</button>
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -285,7 +285,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-right" style="width: 18rem;">
|
||||
<div class="card text-end" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
|
||||
@@ -395,6 +395,11 @@ And putting it to use in a navbar:
|
||||
|
||||
## Directions
|
||||
|
||||
{{< callout info >}}
|
||||
#### RTL
|
||||
Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side.
|
||||
{{< /callout >}}
|
||||
|
||||
### Dropup
|
||||
|
||||
Trigger dropdown menus above elements by adding `.dropup` to the parent element.
|
||||
@@ -456,10 +461,10 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
|
||||
|
||||
### Dropright
|
||||
|
||||
Trigger dropdown menus at the right of the elements by adding `.dropright` to the parent element.
|
||||
Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group dropright">
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropright
|
||||
</button>
|
||||
@@ -471,9 +476,9 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropright">
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropright
|
||||
Split dropend
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropright</span>
|
||||
@@ -489,8 +494,8 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
|
||||
</div>
|
||||
|
||||
```html
|
||||
<!-- Default dropright button -->
|
||||
<div class="btn-group dropright">
|
||||
<!-- Default dropend button -->
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropright
|
||||
</button>
|
||||
@@ -499,10 +504,10 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Split dropright button -->
|
||||
<div class="btn-group dropright">
|
||||
<!-- Split dropend button -->
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropright
|
||||
Split dropend
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropright</span>
|
||||
@@ -515,10 +520,10 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
|
||||
|
||||
### Dropleft
|
||||
|
||||
Trigger dropdown menus at the left of the elements by adding `.dropleft` to the parent element.
|
||||
Trigger dropdown menus at the left of the elements by adding `.dropstart` to the parent element.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group dropleft">
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropleft
|
||||
</button>
|
||||
@@ -531,7 +536,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group dropleft" role="group">
|
||||
<div class="btn-group dropstart" role="group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropleft</span>
|
||||
</button>
|
||||
@@ -544,34 +549,34 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropleft
|
||||
Split dropstart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<!-- Default dropleft button -->
|
||||
<div class="btn-group dropleft">
|
||||
<!-- Default dropstart button -->
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropleft
|
||||
Dropstart
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Split dropleft button -->
|
||||
<!-- Split dropstart button -->
|
||||
<div class="btn-group">
|
||||
<div class="btn-group dropleft" role="group">
|
||||
<div class="btn-group dropstart" role="group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropleft</span>
|
||||
<span class="visually-hidden">Toggle Dropstart</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropleft
|
||||
Split dropstart
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
@@ -630,7 +635,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
|
||||
|
||||
## Menu alignment
|
||||
|
||||
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
|
||||
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side.
|
||||
|
||||
{{< callout info >}}
|
||||
**Heads up!** Dropdowns are positioned thanks to Popper (except when they are contained in a navbar).
|
||||
@@ -641,7 +646,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Right-aligned menu
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><button class="dropdown-item" type="button">Action</button></li>
|
||||
<li><button class="dropdown-item" type="button">Another action</button></li>
|
||||
<li><button class="dropdown-item" type="button">Something else here</button></li>
|
||||
@@ -653,14 +658,14 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
|
||||
|
||||
If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes.
|
||||
|
||||
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-right`.
|
||||
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
Left-aligned but right aligned when large screen
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-lg-right">
|
||||
<ul class="dropdown-menu dropdown-menu-lg-end">
|
||||
<li><button class="dropdown-item" type="button">Action</button></li>
|
||||
<li><button class="dropdown-item" type="button">Another action</button></li>
|
||||
<li><button class="dropdown-item" type="button">Something else here</button></li>
|
||||
@@ -668,14 +673,14 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-left`.
|
||||
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
Right-aligned but left aligned when large screen
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
|
||||
<li><button class="dropdown-item" type="button">Action</button></li>
|
||||
<li><button class="dropdown-item" type="button">Another action</button></li>
|
||||
<li><button class="dropdown-item" type="button">Something else here</button></li>
|
||||
@@ -787,7 +792,7 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex">
|
||||
<div class="dropdown mr-1">
|
||||
<div class="dropdown me-1">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
|
||||
Offset
|
||||
</button>
|
||||
|
||||
@@ -205,23 +205,23 @@ Place Bootstrap's checkboxes and radios within list group items and customize as
|
||||
{{< example >}}
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||
Morbi leo risus
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||
Porta ac consectetur ac
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||
Vestibulum at eros
|
||||
</li>
|
||||
</ul>
|
||||
@@ -232,23 +232,23 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
|
||||
{{< example >}}
|
||||
<div class="list-group">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Cras justo odio
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Dapibus ac facilisis in
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Morbi leo risus
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Porta ac consectetur ac
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input mr-1" type="checkbox" value="">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Vestibulum at eros
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -404,14 +404,14 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
|
||||
<div class="container-fluid bd-example-row">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
|
||||
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
|
||||
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
|
||||
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
|
||||
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
|
||||
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
@@ -447,14 +447,14 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
|
||||
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
|
||||
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
|
||||
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
|
||||
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
|
||||
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
|
||||
@@ -42,7 +42,7 @@ Here's an example of all the sub-components included in a responsive light-theme
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
@@ -65,7 +65,7 @@ Here's an example of all the sub-components included in a responsive light-theme
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -73,7 +73,7 @@ Here's an example of all the sub-components included in a responsive light-theme
|
||||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
|
||||
This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `me-sm-0`, `my-sm-0`) utility classes.
|
||||
|
||||
### Brand
|
||||
|
||||
@@ -220,7 +220,7 @@ Place various form controls and components within a navbar:
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -234,7 +234,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand">Navbar</a>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -259,7 +259,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<form class="container-fluid justify-content-start">
|
||||
<button class="btn btn-outline-success mr-2" type="button">Main button</button>
|
||||
<button class="btn btn-outline-success me-2" type="button">Main button</button>
|
||||
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
|
||||
</form>
|
||||
</nav>
|
||||
@@ -289,7 +289,7 @@ Mix and match with other components and utilities as needed.
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarText">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
@@ -320,7 +320,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarColor01">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
@@ -335,7 +335,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-light" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -349,7 +349,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarColor02">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
@@ -364,7 +364,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-light" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -378,7 +378,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarColor03">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
@@ -393,7 +393,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-primary" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -497,7 +497,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
|
||||
<a class="navbar-brand" href="#">Hidden brand</a>
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
@@ -509,7 +509,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -527,7 +527,7 @@ With a brand name shown on the left and toggler on the right:
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
@@ -539,7 +539,7 @@ With a brand name shown on the left and toggler on the right:
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -557,7 +557,7 @@ With a toggler on the left and brand name on the right:
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
@@ -569,7 +569,7 @@ With a toggler on the left and brand name on the right:
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -444,7 +444,7 @@ And with vertical pills.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="nav flex-column nav-pills mr-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
||||
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
|
||||
@@ -469,7 +469,7 @@ And with vertical pills.
|
||||
|
||||
```html
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="nav flex-column nav-pills mr-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
||||
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
|
||||
|
||||
@@ -56,7 +56,7 @@ var popover = new bootstrap.Popover(document.querySelector('.example-popover'),
|
||||
|
||||
### Four directions
|
||||
|
||||
Four options are available: top, right, bottom, and left aligned.
|
||||
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
|
||||
|
||||
<div class="bd-example popover-demo">
|
||||
<div class="bd-example-popovers">
|
||||
|
||||
@@ -75,7 +75,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" href="#one">one</a></li>
|
||||
<li><a class="dropdown-item" href="#two">two</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
@@ -110,14 +110,14 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
@@ -149,14 +149,14 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
@@ -97,7 +97,7 @@ 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 ml-auto" role="status" aria-hidden="true"></div>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -105,7 +105,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
|
||||
|
||||
{{< example >}}
|
||||
<div class="clearfix">
|
||||
<div class="spinner-border float-right" role="status">
|
||||
<div class="spinner-border float-end" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,8 +31,8 @@ Toasts are as flexible as you need and have very little required markup. At a mi
|
||||
{{< example class="bg-light" >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
@@ -49,8 +49,8 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
|
||||
{{< example class="bg-dark" >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">11 mins ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
@@ -67,8 +67,8 @@ When you have multiple toasts, we default to vertically stacking them in a reada
|
||||
{{< example class="bg-light" >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">just now</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
@@ -79,8 +79,8 @@ When you have multiple toasts, we default to vertically stacking them in a reada
|
||||
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">2 seconds ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
@@ -99,7 +99,7 @@ Customize your toasts by removing sub-components, tweaking with [utilities]({{<
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
<button type="button" class="btn-close ml-auto mr-2" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
<button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -126,7 +126,7 @@ Building on the above example, you can create different toast color schemes with
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white ml-auto mr-2" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
<button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -138,8 +138,8 @@ Place toasts with custom CSS as you need them. The top right is often used for n
|
||||
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
|
||||
<div class="toast" style="position: absolute; top: 0; right: 0;">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
@@ -160,8 +160,8 @@ For systems that generate more notifications, consider using a wrapping element
|
||||
<!-- Then put toasts within -->
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">just now</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
@@ -172,8 +172,8 @@ For systems that generate more notifications, consider using a wrapping element
|
||||
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">2 seconds ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
@@ -194,8 +194,8 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
|
||||
<!-- Then put toasts within -->
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
@@ -227,8 +227,8 @@ When using `autohide: false`, you must add a close button to allow users to dism
|
||||
{{< example class="bg-light" >}}
|
||||
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
|
||||
<strong class="mr-auto">Bootstrap</strong>
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
@@ -46,7 +46,7 @@ Hover over the links below to see tooltips:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
|
||||
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
|
||||
|
||||
<div class="bd-example tooltip-demo">
|
||||
<div class="bd-example-tooltips">
|
||||
|
||||
Reference in New Issue
Block a user