From aa62428cdf574cd42c105d966e7153dd69d80101 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 26 Jan 2016 13:19:03 -0800 Subject: Add docs for custom file input's text and $custom-file-text [skip sauce] --- docs/components/forms.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 58fd41ac0..b8e9b6214 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -812,3 +812,22 @@ Here's how it works: - We declare a `height` on the `` for proper spacing for surrounding content. In other words, it's an entirely custom element, all generated via CSS. + +#### Translating or customizing the strings + +The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for easy translation of the "Browse" and "Choose file..." text into other languages. Simply override or add entries to the `$custom-file-text` SCSS variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`): + +{% highlight scss %} +$custom-file-text: ( + placeholder: ( + en: "Choose file...", + es: "Seleccionar archivo..." + ), + button-label: ( + en: "Browse", + es: "Navegar" + ) +); +{% endhighlight %} + +You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods. -- cgit v1.2.3 From 5142ac2389e78effcdbf57c83dbd272f92dd25f7 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 7 Feb 2016 13:13:06 -0800 Subject: Docs: Add captions above progress bars; refs #17264 [skip sauce] --- docs/components/progress.md | 65 ++++++++++++++++++++++++++++++++------------- 1 file changed, 47 insertions(+), 18 deletions(-) (limited to 'docs/components') diff --git a/docs/components/progress.md b/docs/components/progress.md index 480da4903..5a9be36f7 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -14,11 +14,21 @@ Stylize [the HTML5 `` element](https://developer.mozilla.org/en-US/doc ### Example {% example html %} -0% -25% -50% -75% -100% + +
Reticulating splines… 0%
+ + +
Reticulating splines… 25%
+ + +
Reticulating splines… 50%
+ + +
Reticulating splines… 75%
+ + +
Reticulating splines… 100%
+ {% endexample %} ### IE9 support @@ -26,9 +36,10 @@ Stylize [the HTML5 `` element](https://developer.mozilla.org/en-US/doc Internet Explorer 9 doesn't support the HTML5 `` element, but we can work around that. {% example html %} - +
Reticulating splines… 25%
+
- 25% +
{% endexample %} @@ -38,10 +49,17 @@ Internet Explorer 9 doesn't support the HTML5 `` element, but we can w Progress bars use some of the same button and alert classes for consistent styles. {% example html %} -25% -50% -75% -100% +
Reticulating successful splines… 25%
+ + +
Reticulating informative splines… 50%
+ + +
Reticulating warning splines… 75%
+ + +
Reticulating dangerous splines… 100%
+ {% endexample %} ### Striped @@ -49,11 +67,20 @@ Progress bars use some of the same button and alert classes for consistent style Uses a gradient to create a striped effect. {% example html %} -10% -25% -50% -75% -100% +
Reticulating plain splines… 10%
+10% + +
Reticulating successful splines… 25%
+25% + +
Reticulating informative splines… 50%
+50% + +
Reticulating warning splines… 75%
+75% + +
Reticulating dangerous splines… 100%
+100% {% endexample %} ### Animated stripes @@ -63,12 +90,14 @@ The striped gradient can also be animated. Add `.progress-animated` to `.progres **Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
- 25% +
Reticulating splines… 25%
+ 25%
{% highlight html %} -25% +
Reticulating splines… 25%
+25% {% endhighlight %} -- cgit v1.2.3 From 72f10dd7e6a763b3258779280d89531b3038b35d Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 8 Feb 2016 00:31:10 -0800 Subject: Only caption 1st set of progress bar examples --- docs/components/progress.md | 42 +++++++++++++----------------------------- 1 file changed, 13 insertions(+), 29 deletions(-) (limited to 'docs/components') diff --git a/docs/components/progress.md b/docs/components/progress.md index 5a9be36f7..57028c972 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -13,6 +13,8 @@ Stylize [the HTML5 `` element](https://developer.mozilla.org/en-US/doc ### Example +To caption a progress bar, simply add a `
` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `` element using the `aria-describedby` attribute. + {% example html %}
Reticulating splines… 0%
@@ -49,17 +51,10 @@ Internet Explorer 9 doesn't support the HTML5 `` element, but we can w Progress bars use some of the same button and alert classes for consistent styles. {% example html %} -
Reticulating successful splines… 25%
- - -
Reticulating informative splines… 50%
- - -
Reticulating warning splines… 75%
- - -
Reticulating dangerous splines… 100%
- + + + + {% endexample %} ### Striped @@ -67,20 +62,11 @@ Progress bars use some of the same button and alert classes for consistent style Uses a gradient to create a striped effect. {% example html %} -
Reticulating plain splines… 10%
-10% - -
Reticulating successful splines… 25%
-25% - -
Reticulating informative splines… 50%
-50% - -
Reticulating warning splines… 75%
-75% - -
Reticulating dangerous splines… 100%
-100% + + + + + {% endexample %} ### Animated stripes @@ -90,14 +76,12 @@ The striped gradient can also be animated. Add `.progress-animated` to `.progres **Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
-
Reticulating splines… 25%
- 25% +
{% highlight html %} -
Reticulating splines… 25%
-25% + {% endhighlight %} -- cgit v1.2.3 From 09aefaa2afe05f438b99caa63bb888c62c40bf73 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 8 Feb 2016 23:21:32 -0800 Subject: Alternate fix to #17965: Updates to use the new class name and adds some basic docs for custom checkbox/radio validation --- docs/components/forms.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) (limited to 'docs/components') diff --git a/docs/components/forms.md b/docs/components/forms.md index 134bd88c1..6f95ecb3d 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -762,6 +762,33 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at {% endexample %} +#### Validation states + +Add other states to your custom forms with our validation classes. + +{% example html %} +
+ +
+
+ +
+
+ +
+{% endexample %} #### Stacked -- cgit v1.2.3 From 4ed5fa77ffecde9ce46c10d4d03c48e6e481ceba Mon Sep 17 00:00:00 2001 From: Ameya Pandilwar Date: Thu, 11 Feb 2016 03:54:30 -0500 Subject: Rename .label class to .tag --- docs/components/label.md | 46 ---------------------------------------------- docs/components/tag.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 46 deletions(-) delete mode 100644 docs/components/label.md create mode 100644 docs/components/tag.md (limited to 'docs/components') diff --git a/docs/components/label.md b/docs/components/label.md deleted file mode 100644 index e1495201c..000000000 --- a/docs/components/label.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -layout: docs -title: Labels -group: components ---- - -Small and adaptive tag for adding context to just about any content. - -## Example - -Labels scale to match the size of the immediate parent element by using relative font sizing and `em` units. - -{% example html %} -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
-{% endexample %} - -## Contextual variations - -Add any of the below mentioned modifier classes to change the appearance of a label. - -{% example html %} -Default -Primary -Success -Info -Warning -Danger -{% endexample %} - -## Pill labels - -Use the `.label-pill` modifier class to make labels more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. - -{% example html %} -Default -Primary -Success -Info -Warning -Danger -{% endexample %} diff --git a/docs/components/tag.md b/docs/components/tag.md new file mode 100644 index 000000000..185ea378d --- /dev/null +++ b/docs/components/tag.md @@ -0,0 +1,46 @@ +--- +layout: docs +title: Tags +group: components +--- + +Small and adaptive tag for adding context to just about any content. + +## Example + +Tags scale to match the size of the immediate parent element by using relative font sizing and `em` units. + +{% example html %} +

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
+{% endexample %} + +## Contextual variations + +Add any of the below mentioned modifier classes to change the appearance of a tag. + +{% example html %} +Default +Primary +Success +Info +Warning +Danger +{% endexample %} + +## Pill tags + +Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. + +{% example html %} +Default +Primary +Success +Info +Warning +Danger +{% endexample %} -- cgit v1.2.3 From 8cd27781486e3133241e032e194f5a7c3d60043d Mon Sep 17 00:00:00 2001 From: Ameya Pandilwar Date: Thu, 11 Feb 2016 18:59:47 -0500 Subject: Updated label to tag in list-group example --- docs/components/list-group.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/components') diff --git a/docs/components/list-group.md b/docs/components/list-group.md index c3d466d5f..db339c824 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -24,22 +24,22 @@ The most basic list group is simply an unordered list with list items, and the p {% endexample %} -## Labels +## Tags -Add labels to any list group item to show unread counts, activity, etc. +Add tags to any list group item to show unread counts, activity, etc. {% example html %}
  • - 14 + 14 Cras justo odio
  • - 2 + 2 Dapibus ac facilisis in
  • - 1 + 1 Morbi leo risus
-- cgit v1.2.3 From c27ff124c35b22a7c7fb09a9558cff72db54f1a3 Mon Sep 17 00:00:00 2001 From: Igor Tarasov Date: Tue, 16 Feb 2016 08:20:44 +0300 Subject: Fix docs for new naming of .btn-outline This one was overlooked at edit See #17719 and #19199 --- docs/components/buttons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/buttons.md b/docs/components/buttons.md index 391c96311..42841807f 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -61,7 +61,7 @@ When using button classes on `` elements that are used to trigger in-page fun ## 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. +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 %} -- cgit v1.2.3 From 40aee9325da27b479e2a907345edccde55fd05ec Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 17 Feb 2016 10:22:48 +0000 Subject: - Conveying color meaning to AT as markdown include - Add/replace callout for color and AT with include --- docs/components/alerts.md | 3 +++ docs/components/buttons.md | 7 ++----- docs/components/card.md | 3 +++ docs/components/list-group.md | 3 +++ docs/components/tag.md | 3 +++ docs/components/utilities.md | 7 ++----- 6 files changed, 16 insertions(+), 10 deletions(-) (limited to 'docs/components') diff --git a/docs/components/alerts.md b/docs/components/alerts.md index c269c3d8f..274061a5e 100644 --- a/docs/components/alerts.md +++ b/docs/components/alerts.md @@ -30,6 +30,9 @@ Alerts are available for any length of text, as well as an optional dismiss butt
{% endexample %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + ### Link color Use the `.alert-link` utility class to quickly provide matching colored links within any alert. diff --git a/docs/components/buttons.md b/docs/components/buttons.md index 42841807f..d5aa453d7 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -39,11 +39,8 @@ Bootstrap includes six predefined button styles, each serving its own semantic p {% endexample %} -{% callout warning %} -#### Conveying meaning to assistive technologies - -Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class. -{% endcallout %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} ## Button tags diff --git a/docs/components/card.md b/docs/components/card.md index 53580d667..b53d2e39a 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -362,6 +362,9 @@ Cards include their own variant classes for quickly changing the `background-col {% endexample %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + ## Outline variants In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card. diff --git a/docs/components/list-group.md b/docs/components/list-group.md index db339c824..8b3b9cd88 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -104,6 +104,9 @@ Use contextual classes to style list items, default or linked. Also includes `.a {% endexample %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + ## Custom content Add nearly any HTML within, even for linked list groups like the one below. diff --git a/docs/components/tag.md b/docs/components/tag.md index 185ea378d..09608931a 100644 --- a/docs/components/tag.md +++ b/docs/components/tag.md @@ -32,6 +32,9 @@ Add any of the below mentioned modifier classes to change the appearance of a ta Danger {% endexample %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} + ## Pill tags Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. diff --git a/docs/components/utilities.md b/docs/components/utilities.md index b67221119..7add31309 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -160,11 +160,8 @@ Similar to the contextual text color classes, easily set the background of an el Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. {% endcallout %} -{% callout warning %} -#### Conveying meaning to assistive technologies - -Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational. -{% endcallout %} +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} ## Close icon -- cgit v1.2.3 From bf734252770879d7207d5dc7df7aa82109d8880b Mon Sep 17 00:00:00 2001 From: Tobias Date: Sun, 27 Dec 2015 19:20:39 +0100 Subject: Document the possibility of extending the $spacers map It's very handy to add another spacer size (e.g. `4`) which can easily be done by extending the map. Example: ``` $spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: $spacer-x, y: $spacer-y ), 2: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 3: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ), 4: ( x: ($spacer-x * 5), y: ($spacer-y * 5) ) ); ``` Closes #18706 [skip sauce] --- docs/components/utilities.md | 2 ++ 1 file changed, 2 insertions(+) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 7add31309..96c84b961 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -39,6 +39,8 @@ Where *size* is one of: * `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5` * `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3` +(You can add more sizes by adding entries to the `$spacers` Sass map variable.) + Here are some representative examples of these classes: {% highlight scss %} -- cgit v1.2.3 From e91c9e2898953208084e1eebdbdef978a7a1f206 Mon Sep 17 00:00:00 2001 From: Russell Beye Date: Thu, 7 Jan 2016 22:34:13 -0600 Subject: Document .pos-f-t utility class; fixes #18494 Add documentation to components/utilities to publicly expose the .pos-f-t utility class to users. Closes #18799 [skip sauce] --- docs/components/utilities.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'docs/components') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 96c84b961..76bf5f9be 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -229,6 +229,20 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } {% endhighlight %} +## Fixed positioning + +The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined: + +{% highlight scss %} +.pos-f-t { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; +} +{% endhighlight %} + ## Invisible content The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. -- cgit v1.2.3 From dd47423ae6f9717b3d678b40e1ce8a8706301598 Mon Sep 17 00:00:00 2001 From: Jeremy Kratz Date: Sun, 10 Jan 2016 18:02:33 -0600 Subject: Docs: Add example of .dropdown-menu-right Fixes #18493 Closes #18836 [skip sauce] --- docs/components/dropdowns.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'docs/components') diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 5e153d596..09d518a60 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -45,8 +45,6 @@ You can optionally use `
{% endexample %} - - ## 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. @@ -55,11 +53,18 @@ By default, a dropdown menu is automatically positioned 100% from the top and al **Heads up!** Dropdowns are positioned only with CSS and may need some additional styles for exact alignment. {% endcallout %} -{% highlight html %} -
- ... +{% example html %} +
+ +
+ + + +
-{% endhighlight %} +{% endexample %} ## Menu headers -- cgit v1.2.3 From 79067a6440ba833fe290a2b386b0588ceb3610c7 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 26 Jan 2016 14:58:19 +0200 Subject: Fix validation errors. [skip sauce] --- docs/components/scrollspy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md index 4ae0fa219..622469aa1 100644 --- a/docs/components/scrollspy.md +++ b/docs/components/scrollspy.md @@ -14,7 +14,7 @@ group: components The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
-
+
- -
+
+
- -
+
+
- -
+
+
- -
+
+
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. - -
- -
-
- -
-
-
+
+ Radio buttons +
+ +
+
+ +
+
+ +
+
+
- +
{% endexample %} @@ -330,11 +333,16 @@ Because of this, you may need to manually address the width and alignment of ind {% endexample %} +{% callout warning %} + #### Alternatives to hidden labels + Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised. + {% endcallout %} + ### Using the Grid For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or 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 `.form-control-label` to your `
-
- +
+ Radios
-
-
- + +
+ Checkbox
-
+
@@ -463,17 +471,17 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes ### Without labels -Should you have no text within the `