diff options
author | Max Kostikov <max@kostikov.co> | 2018-09-28 15:46:14 +0200 |
---|---|---|
committer | Max Kostikov <max@kostikov.co> | 2018-09-28 15:46:14 +0200 |
commit | 4a904fa3a8af1c101ede76657249fb7eb47faf60 (patch) | |
tree | 544509813fb68579ef2b556ce879a971d183269a /vendor/twbs/bootstrap/site/docs/4.1/components/buttons.md | |
parent | f5f6ec3d71acb3e0488386819d5060e59331ec23 (diff) | |
parent | c13d7e29ef9676b0f0e4ae23aa52e203f4ad8895 (diff) | |
download | volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.tar.gz volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.tar.bz2 volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.zip |
Merge branch 'patch-29' into 'dev'
Patch 29
See merge request Kostikov/core!3
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.1/components/buttons.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/docs/4.1/components/buttons.md | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/components/buttons.md b/vendor/twbs/bootstrap/site/docs/4.1/components/buttons.md new file mode 100644 index 000000000..f999fd552 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/components/buttons.md @@ -0,0 +1,164 @@ +--- +layout: docs +title: Buttons +description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. +group: components +redirect_from: "/docs/4.1/components/" +toc: true +--- + +## Examples + +Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. + +{% capture example %} +{% for color in site.data.theme-colors %} +<button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %} + +<button type="button" class="btn btn-link">Link</button> +{% endcapture %} +{% include example.html content=example %} + +{% include callout-warning-color-assistive-technologies.md %} + +## Button tags + +The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering). + +When using button classes on `<a>` elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a `role="button"` to appropriately convey their purpose to assistive technologies such as screen readers. + +{% capture example %} +<a class="btn btn-primary" href="#" role="button">Link</a> +<button class="btn btn-primary" type="submit">Button</button> +<input class="btn btn-primary" type="button" value="Input"> +<input class="btn btn-primary" type="submit" value="Submit"> +<input class="btn btn-primary" type="reset" value="Reset"> +{% endcapture %} +{% include example.html content=example %} + +## Outline buttons + +In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button. + +{% capture example %} +{% for color in site.data.theme-colors %} +<button type="button" class="btn btn-outline-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %} +{% endcapture %} +{% include example.html content=example %} + +## Sizes + +Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes. + +{% capture example %} +<button type="button" class="btn btn-primary btn-lg">Large button</button> +<button type="button" class="btn btn-secondary btn-lg">Large button</button> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<button type="button" class="btn btn-primary btn-sm">Small button</button> +<button type="button" class="btn btn-secondary btn-sm">Small button</button> +{% endcapture %} +{% include example.html content=example %} + +Create block level buttons—those that span the full width of a parent—by adding `.btn-block`. + +{% capture example %} +<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> +<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button> +{% endcapture %} +{% include example.html content=example %} + +## Active state + +Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically. + +{% capture example %} +<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a> +<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a> +{% endcapture %} +{% include example.html content=example %} + +## Disabled state + +Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. + +{% capture example %} +<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button> +<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button> +{% endcapture %} +{% include example.html content=example %} + +Disabled buttons using the `<a>` element behave a bit different: + +- `<a>`s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled. +- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won't see the disabled cursor at all. +- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies. + +{% capture example %} +<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a> +<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a> +{% endcapture %} +{% include example.html content=example %} + +{% capture callout %} +##### Link functionality caveat + +The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality. +{% endcapture %} +{% include callout.html content=callout type="warning" %} + +## Button plugin + +Do more with buttons. Control button states or create groups of buttons for more components like toolbars. + +### Toggle states + +Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`. + +{% capture example %} +<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> + Single toggle +</button> +{% endcapture %} +{% include example.html content=example %} + +### Checkbox and radio buttons + +Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling. Add `data-toggle="buttons"` to a `.btn-group` containing those modified buttons to enable their toggling behavior via JavaScript and add `.btn-group-toggle` to style the `<input>`s within your buttons. **Note that you can create single input-powered buttons or groups of them.** + +The checked state for these buttons is **only updated via `click` event** on the button. If you use another method to update the input—e.g., with `<input type="reset">` or by manually applying the input's `checked` property—you'll need to toggle `.active` on the `<label>` manually. + +Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`. + +{% capture example %} +<div class="btn-group-toggle" data-toggle="buttons"> + <label class="btn btn-secondary active"> + <input type="checkbox" checked autocomplete="off"> Checked + </label> +</div> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<div class="btn-group btn-group-toggle" data-toggle="buttons"> + <label class="btn btn-secondary active"> + <input type="radio" name="options" id="option1" autocomplete="off" checked> Active + </label> + <label class="btn btn-secondary"> + <input type="radio" name="options" id="option2" autocomplete="off"> Radio + </label> + <label class="btn btn-secondary"> + <input type="radio" name="options" id="option3" autocomplete="off"> Radio + </label> +</div> +{% endcapture %} +{% include example.html content=example %} + +### Methods + +| Method | Description | +| --- | --- | +| `$().button('toggle')` | Toggles push state. Gives the button the appearance that it has been activated. | +| `$().button('dispose')` | Destroys an element's button. | |