From d2ddb5518006840a4ee8c299f895b985a2449bb9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 Feb 2017 17:15:16 -0800 Subject: use secondary buttons instead of primary ones for a bit better example of styles --- docs/components/buttons.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/components/buttons.md') diff --git a/docs/components/buttons.md b/docs/components/buttons.md index fdec395de..7f701d90a 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -151,13 +151,13 @@ Note that pre-checked buttons require you to manually add the `.active` class to {% example html %}
-
@@ -165,13 +165,13 @@ Note that pre-checked buttons require you to manually add the `.active` class to {% example html %}
-
-- cgit v1.2.3 From c72cc98bd56fb50259c84a1fced38751009eb930 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 May 2017 23:01:14 -0700 Subject: update components docs --- docs/components/buttons.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) (limited to 'docs/components/buttons.md') diff --git a/docs/components/buttons.md b/docs/components/buttons.md index 7f701d90a..cfd243dad 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -4,15 +4,9 @@ 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 --- -Use Bootstrap's custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Examples Bootstrap includes six predefined button styles, each serving its own semantic purpose. -- cgit v1.2.3 From 3e76d6565603fafa2c85ad81d7b6345c4e279c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 May 2017 22:50:57 -0700 Subject: Rearrange all the docs to allow for a docs/major.minor/ setup --- docs/components/buttons.md | 178 --------------------------------------------- 1 file changed, 178 deletions(-) delete mode 100644 docs/components/buttons.md (limited to 'docs/components/buttons.md') 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 %} - - - - - - - - - - - - - - - - - - - - -{% 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 ` - - - -{% 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 %} - - - - - - -{% endexample %} - - -## Sizes - -Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes. - -{% example html %} - - -{% endexample %} - -{% example html %} - - -{% endexample %} - -Create block level buttons—those that span the full width of a parent—by adding `.btn-block`. - -{% example html %} - - -{% 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 ` - -{% endexample %} - -Disabled buttons using the `` element behave a bit different: - -- ``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 %} -Primary link -Link -{% endexample %} - -{% callout warning %} -#### Link functionality caveat - -The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``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 ` -{% endexample %} - -### Checkbox and radio buttons - -Bootstrap's `.button` styles can be applied to other elements, such as `