mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
update urls
This commit is contained in:
Mark Otto
@@ -8,7 +8,7 @@ toc: true
|
||||
|
||||
## Basic example
|
||||
|
||||
Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin).
|
||||
Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#button-plugin).
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
|
||||
@@ -206,7 +206,7 @@ Using the grid, wrap cards in columns and rows as needed.
|
||||
|
||||
### Using utilities
|
||||
|
||||
Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing/) to quickly set a card's width.
|
||||
Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/) to quickly set a card's width.
|
||||
|
||||
{% example html %}
|
||||
<div class="card w-75">
|
||||
@@ -242,7 +242,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
|
||||
|
||||
## Text alignment
|
||||
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/utilities/typography/#text-alignment).
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment).
|
||||
|
||||
{% example html %}
|
||||
<div class="card" style="width: 20rem;">
|
||||
@@ -272,7 +272,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
|
||||
|
||||
## Navigation
|
||||
|
||||
Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/components/navs/).
|
||||
Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/).
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-center">
|
||||
|
||||
@@ -109,7 +109,7 @@ The `.active` class needs to be added to one of the slides. Otherwise, the carou
|
||||
|
||||
### With captions
|
||||
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
||||
|
||||
@@ -34,7 +34,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
|
||||
|
||||
## Accordion example
|
||||
|
||||
Using the [card]({{ site.baseurl }}/components/card/) component, you can extend the default collapse behavior to create an accordion.
|
||||
Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card/) component, you can extend the default collapse behavior to create an accordion.
|
||||
|
||||
{% example html %}
|
||||
<div id="accordion" role="tablist">
|
||||
|
||||
@@ -8,7 +8,7 @@ toc: true
|
||||
|
||||
## Form controls
|
||||
|
||||
Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
|
||||
Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
|
||||
|
||||
Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**.
|
||||
|
||||
@@ -269,11 +269,11 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
|
||||
|
||||
Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
|
||||
|
||||
- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/utilities/flexbox/) utilities.
|
||||
- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/) utilities.
|
||||
- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
|
||||
- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
|
||||
|
||||
You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
|
||||
You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
|
||||
|
||||
{% example html %}
|
||||
<form class="form-inline">
|
||||
@@ -325,7 +325,7 @@ Assistive technologies such as screen readers will have trouble with your forms
|
||||
|
||||
### Using the Grid
|
||||
|
||||
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/) or [mixins]({{ site.baseurl }}/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
|
||||
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/grid/) or [mixins]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
|
||||
|
||||
Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.
|
||||
|
||||
@@ -632,7 +632,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
|
||||
{% callout warning %}
|
||||
#### Caveat with anchors
|
||||
|
||||
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
|
||||
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
|
||||
{% endcallout %}
|
||||
|
||||
{% callout danger %}
|
||||
@@ -755,7 +755,7 @@ Generally speaking, you'll want to use a particular state for specific types of
|
||||
|
||||
Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
|
||||
|
||||
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon]({{ site.baseurl }}/components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples]({{ site.baseurl }}/components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
|
||||
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
|
||||
{% endcallout %}
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
@@ -111,7 +111,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
|
||||
|
||||
## With badges
|
||||
|
||||
Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{ site.baseurl }}/utilities/flexbox/).
|
||||
Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/).
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
@@ -132,7 +132,7 @@ Add badges to any list group item to show unread counts, activity, and more with
|
||||
|
||||
## Custom content
|
||||
|
||||
Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/).
|
||||
Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/).
|
||||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
|
||||
@@ -14,7 +14,7 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
|
||||
- Clicking on the modal "backdrop" will automatically close the modal.
|
||||
- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
|
||||
- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
|
||||
- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
|
||||
- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
|
||||
- Lastly, the `autofocus` HTML attribute has no effect in modals. Here's how you can achieve the same effect with custom JavaScript.
|
||||
|
||||
Keep reading for demos and usage guidelines.
|
||||
@@ -213,7 +213,7 @@ When modals become too long for the user's viewport or device, they scroll indep
|
||||
|
||||
### Tooltips and popovers
|
||||
|
||||
[Tooltips]({{ site.baseurl }}/components/tooltips/) and [popovers]({{ site.baseurl }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
|
||||
[Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
|
||||
|
||||
<div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
|
||||
@@ -50,7 +50,7 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
|
||||
|
||||
### Horizontal alignment
|
||||
|
||||
Change the horizontal alignment of your nav with [flexbox utilities]({{ site.baseurl }}/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.
|
||||
Change the horizontal alignment of your nav with [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.
|
||||
|
||||
Centered with `.justify-content-center`:
|
||||
|
||||
@@ -220,7 +220,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to
|
||||
{% endexample %}
|
||||
## Working with flex utilities
|
||||
|
||||
If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
|
||||
If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
|
||||
|
||||
{% example html %}
|
||||
<nav class="nav nav-pills flex-column flex-sm-row">
|
||||
@@ -239,7 +239,7 @@ Note that navigation bars, even if visually styled as tabs with the `.nav-tabs`
|
||||
|
||||
## Using dropdowns
|
||||
|
||||
Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
|
||||
Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/dropdowns/#usage).
|
||||
|
||||
### Tabs with dropdowns
|
||||
|
||||
|
||||
@@ -135,7 +135,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
||||
|
||||
## Alignment
|
||||
|
||||
Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/).
|
||||
Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flexbox/).
|
||||
|
||||
{% example html %}
|
||||
<nav aria-label="Page navigation example">
|
||||
|
||||
@@ -12,7 +12,7 @@ Things to know when using the popover plugin:
|
||||
|
||||
|
||||
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js) before bootstrap.js in order for popovers to work!
|
||||
- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips/) as a dependency.
|
||||
- Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) 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.
|
||||
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
|
||||
|
||||
@@ -35,7 +35,7 @@ Put that all together, and you have the following examples.
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress.
|
||||
Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress.
|
||||
|
||||
{% example html %}
|
||||
<div class="progress">
|
||||
|
||||
@@ -10,7 +10,7 @@ toc: true
|
||||
|
||||
Scrollspy has a few requirements to function properly:
|
||||
|
||||
- It must to be used on a Bootstrap [nav component]({{ site.baseurl }}/components/navs/) or [list group]({{ site.baseurl }}/components/list-group/).
|
||||
- It must to be used on a Bootstrap [nav component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/) or [list group]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/list-group/).
|
||||
- Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>`.
|
||||
- When spying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied.
|
||||
- Anchors (`<a>`) are required and must point to an element with that `id`.
|
||||
|
||||
Reference in New Issue
Block a user