diff options
| author | Mark Otto <[email protected]> | 2017-05-28 22:50:57 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-29 23:32:28 -0700 |
| commit | 3e76d6565603fafa2c85ad81d7b6345c4e279c72 (patch) | |
| tree | fad0aa6a4a70cafb4a803bd920d6ae2fa44dc466 /docs/components/buttons.md | |
| parent | 32153eb7cba316b873e82cd7b9362c92ca00eddf (diff) | |
| download | bootstrap-3e76d6565603fafa2c85ad81d7b6345c4e279c72.tar.xz bootstrap-3e76d6565603fafa2c85ad81d7b6345c4e279c72.zip | |
Rearrange all the docs to allow for a docs/major.minor/ setup
Diffstat (limited to 'docs/components/buttons.md')
| -rw-r--r-- | docs/components/buttons.md | 178 |
1 files changed, 0 insertions, 178 deletions
diff --git a/docs/components/buttons.md b/docs/components/buttons.md deleted file mode 100644 index cfd243dad..000000000 --- a/docs/components/buttons.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -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: "/components/" -toc: true ---- - -## Examples - -Bootstrap includes six predefined button styles, each serving its own semantic purpose. - -{% example html %} -<!-- Provides extra visual weight and identifies the primary action in a set of buttons --> -<button type="button" class="btn btn-primary">Primary</button> - -<!-- Secondary, outline button --> -<button type="button" class="btn btn-secondary">Secondary</button> - -<!-- Indicates a successful or positive action --> -<button type="button" class="btn btn-success">Success</button> - -<!-- Contextual button for informational alert messages --> -<button type="button" class="btn btn-info">Info</button> - -<!-- Indicates caution should be taken with this action --> -<button type="button" class="btn btn-warning">Warning</button> - -<!-- Indicates a dangerous or potentially negative action --> -<button type="button" class="btn btn-danger">Danger</button> - -<!-- Deemphasize a button by making it look like a link while maintaining button behavior --> -<button type="button" class="btn btn-link">Link</button> -{% endexample %} - -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} - -## 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. - -{% example html %} -<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"> -{% endexample %} - -## 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. - -{% example html %} -<button type="button" class="btn btn-outline-primary">Primary</button> -<button type="button" class="btn btn-outline-secondary">Secondary</button> -<button type="button" class="btn btn-outline-success">Success</button> -<button type="button" class="btn btn-outline-info">Info</button> -<button type="button" class="btn btn-outline-warning">Warning</button> -<button type="button" class="btn btn-outline-danger">Danger</button> -{% endexample %} - - -## Sizes - -Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes. - -{% example html %} -<button type="button" class="btn btn-primary btn-lg">Large button</button> -<button type="button" class="btn btn-secondary btn-lg">Large button</button> -{% endexample %} - -{% example html %} -<button type="button" class="btn btn-primary btn-sm">Small button</button> -<button type="button" class="btn btn-secondary btn-sm">Small button</button> -{% endexample %} - -Create block level buttons—those that span the full width of a parent—by adding `.btn-block`. - -{% example html %} -<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> -{% endexample %} - -## 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. - -{% example html %} -<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> -{% endexample %} - -## Disabled state - -Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. - -{% example html %} -<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> -{% endexample %} - -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. - -{% example html %} -<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a> -<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a> -{% endexample %} - -{% callout warning %} -#### 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. -{% endcallout %} - -## 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>`. - -{% example html %} -<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> - Single toggle -</button> -{% endexample %} - -### 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 toggling in their respective styles. - -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>`. - -{% example html %} -<div class="btn-group" data-toggle="buttons"> - <label class="btn btn-secondary active"> - <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked) - </label> - <label class="btn btn-secondary"> - <input type="checkbox" autocomplete="off"> Checkbox 2 - </label> - <label class="btn btn-secondary"> - <input type="checkbox" autocomplete="off"> Checkbox 3 - </label> -</div> -{% endexample %} - -{% example html %} -<div class="btn-group" data-toggle="buttons"> - <label class="btn btn-secondary active"> - <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) - </label> - <label class="btn btn-secondary"> - <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 - </label> - <label class="btn btn-secondary"> - <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 - </label> -</div> -{% endexample %} - -### Methods - -| Method | Description | -| --- | --- | -| `$().button('toggle')` |Toggles push state. Gives the button the appearance that it has been activated. | |
