From 99eece13929cf69515927a04a176cc3e578c4194 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Mon, 16 Oct 2017 16:51:42 +0200 Subject: Add dispose methods in our documentation (#24396) * Add dispose methods in our documentation * Update buttons.md --- docs/4.0/components/alerts.md | 1 + docs/4.0/components/buttons.md | 3 ++- docs/4.0/components/carousel.md | 4 ++++ docs/4.0/components/collapse.md | 4 ++++ docs/4.0/components/dropdowns.md | 1 + docs/4.0/components/modal.md | 4 ++++ docs/4.0/components/navs.md | 4 ++++ docs/4.0/components/scrollspy.md | 3 +++ 8 files changed, 23 insertions(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md index b8bb0c216..4fdaed41b 100644 --- a/docs/4.0/components/alerts.md +++ b/docs/4.0/components/alerts.md @@ -92,6 +92,7 @@ Note that closing an alert will remove it from the DOM. | --- | --- | | `$().alert()` | Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) | | `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. | +| `$().alert('dispose')` | Destroys an element's alert. | {% highlight js %}$(".alert").alert('close'){% endhighlight %} diff --git a/docs/4.0/components/buttons.md b/docs/4.0/components/buttons.md index fac603e7e..41ca9cef0 100644 --- a/docs/4.0/components/buttons.md +++ b/docs/4.0/components/buttons.md @@ -154,4 +154,5 @@ Note that pre-checked buttons require you to manually add the `.active` class to | Method | Description | | --- | --- | -| `$().button('toggle')` |Toggles push state. Gives the button the appearance that it has been activated. | +| `$().button('toggle')` | Toggles push state. Gives the button the appearance that it has been activated. | +| `$().button('dispose')` | Destroys an element's button. | diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md index 4919e1ac2..ac6299f6f 100644 --- a/docs/4.0/components/carousel.md +++ b/docs/4.0/components/carousel.md @@ -263,6 +263,10 @@ Cycles to the previous item. **Returns to the caller before the previous item ha Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs). +### `.carousel('dispose')` + +Destroys an element's carousel. + ### Events Bootstrap's carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties: diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md index a34ffeb7b..cd0a7d4e5 100644 --- a/docs/4.0/components/collapse.md +++ b/docs/4.0/components/collapse.md @@ -226,6 +226,10 @@ Shows a collapsible element. **Returns to the caller before the collapsible elem Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (i.e. before the `hidden.bs.collapse` event occurs). +### `.collapse('dispose')` + +Destroys an element's collapse. + ### Events Bootstrap's collapse class exposes a few events for hooking into collapse functionality. diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index d38b410c7..2c467166e 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -607,6 +607,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap | --- | --- | | `$().dropdown('toggle')` | Toggles the dropdown menu of a given navbar or tabbed navigation. | | `$().dropdown('update')` | Updates the position of an element's dropdown. | +| `$().dropdown('dispose')` | Destroys an element's dropdown. | ### Events diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md index 491bd3fb8..3586f461c 100644 --- a/docs/4.0/components/modal.md +++ b/docs/4.0/components/modal.md @@ -575,6 +575,10 @@ Manually readjust the modal's position if the height of a modal changes while it {% highlight js %}$('#myModal').modal('handleUpdate'){% endhighlight %} +### `.modal('dispose')` + +Destroys an element's modal. + ### Events Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`). diff --git a/docs/4.0/components/navs.md b/docs/4.0/components/navs.md index b34f79c2f..27230e039 100644 --- a/docs/4.0/components/navs.md +++ b/docs/4.0/components/navs.md @@ -583,6 +583,10 @@ Selects the given tab and shows its associated pane. Any other tab that was prev $('#someTab').tab('show') {% endhighlight %} +### .tab('dispose') + +Destroys an element's tab. + ### Events When showing a new tab, the events fire in the following order: diff --git a/docs/4.0/components/scrollspy.md b/docs/4.0/components/scrollspy.md index b7f9e994f..7cc6873f3 100644 --- a/docs/4.0/components/scrollspy.md +++ b/docs/4.0/components/scrollspy.md @@ -280,6 +280,9 @@ $('[data-spy="scroll"]').each(function () { }) {% endhighlight %} +### `.scrollspy('dispose')` + +Destroys an element's scrollspy. ### Options -- cgit v1.2.3 From fa234e27aa88f3602d8695ccf0b66e802154246f Mon Sep 17 00:00:00 2001 From: Anuj Tomar Date: Mon, 16 Oct 2017 22:51:34 -0700 Subject: Correct $zindex-sticky value (#24402) --- docs/4.0/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/4.0/layout/overview.md b/docs/4.0/layout/overview.md index c86a432d3..a357e58ad 100644 --- a/docs/4.0/layout/overview.md +++ b/docs/4.0/layout/overview.md @@ -163,8 +163,8 @@ We don't encourage customization of these values; should you change one, you lik ```scss $zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; -$zindex-sticky: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; -- cgit v1.2.3 From 289836ef96f59366a7d2bc4e4482be48fbf2b817 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 17 Oct 2017 15:27:37 +0300 Subject: Fix typo in scrollspy.md (#24398) --- docs/4.0/components/scrollspy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/4.0/components/scrollspy.md b/docs/4.0/components/scrollspy.md index 7cc6873f3..75a7a92cc 100644 --- a/docs/4.0/components/scrollspy.md +++ b/docs/4.0/components/scrollspy.md @@ -11,7 +11,7 @@ toc: true Scrollspy has a few requirements to function properly: - If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). -- 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/). +- It must 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 ``. - When spying on elements other than the ``, be sure to have a `height` set and `overflow-y: scroll;` applied. - Anchors (``) are required and must point to an element with that `id`. -- cgit v1.2.3 From a48dbdbf979f7d555019542122b4cf42aabcad5c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Oct 2017 18:29:47 -0700 Subject: document color-yiq function --- docs/4.0/getting-started/theming.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) (limited to 'docs') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 15c5caa0b..990b1bbe1 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -148,6 +148,36 @@ In practice, you'd call the function and pass in two parameters: the name of the Additional functions could be added in the future or your own custom Sass to create level functions for additional Sass maps, or even a generic one if you wanted to be more verbose. +### Color contrast + +One additional function we include in Bootstrap is the color contrast function, `color-yiq`. It utilizes the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) to automatically return a light (`#fff`) or dark (`#111`) contrast color based the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes. + +For example, to generate color swatches from our `$theme-colors` map: + +{% highlight scss %} +@each $color, $value in $theme-colors { + .swatch-#{$color} { + color: color-yiq($value); + } +} +{% endhighlight %} + +It can also be used for one-off contrast needs: + +{% highlight scss %} +.custom-element { + color: color-yiq(#000); // returns `color: #fff` +} +{% endhighlight %} + +You can also specify a base color with our color map functions: + +{% highlight scss %} +.custom-element { + color: color-yiq(theme-color("dark")); // returns `color: #fff` +} +{% endhighlight %} + ## Sass options Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. -- cgit v1.2.3 From c075968c14832447abfb770f435cd0d9169875fa Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Oct 2017 18:37:11 -0700 Subject: mention color contrast function change --- docs/4.0/migration.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs') diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md index 8a0d3d3fa..5274e3c4b 100644 --- a/docs/4.0/migration.md +++ b/docs/4.0/migration.md @@ -18,6 +18,7 @@ While in beta, we aim to have no breaking changes. However, things don't always - Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the `.table-responsive` you've been using is more like `.table-responsive-md`. You may now use `.table-responsive` or `.table-responsive-{sm,md,lg,xl}` as needed. - Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). [See bower/bower#2298](https://github.com/bower/bower/issues/2298) for details. - Bootstrap now requires jQuery 3.0.0 or higher. +- Changed the `color-yiq` from a mixin that included the `color` property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of `color-yiq(#000)`, you'd write `color: color-yiq(#000);`. ### Highlights -- cgit v1.2.3 From 85fd22bd47e71b90bb57e574a1f5f760029557e0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Oct 2017 22:05:01 -0700 Subject: Revert #23108 to restore list group borders (#24411) * revert #23108, which had no bug but was a problem with the example code * add example to the docs for future proofing * move it up --- docs/4.0/components/card.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'docs') diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md index 5da0ef039..76f4757ec 100644 --- a/docs/4.0/components/card.md +++ b/docs/4.0/components/card.md @@ -90,6 +90,19 @@ Create lists of content in a card with a flush list group.
{% endexample %} +{% example html %} +
+
+ Featured +
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Vestibulum at eros
    • +
+
+{% endexample %} + ### Kitchen sink Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. -- cgit v1.2.3 From 217d344fa8c60b32c9c2855ae373e54589b17b45 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Wed, 18 Oct 2017 13:59:30 -0300 Subject: Remove uncessary `col-form-label` from form row docs (#24335) --- docs/4.0/components/forms.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'docs') diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index ed4d95b70..ba5633850 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -314,36 +314,36 @@ More complex layouts can also be created with the grid system.
- +
- +
- +
- +
- +
- +
- +
-- cgit v1.2.3 From 008e0b5b683ea91da9fc116d059448c47e5fcddd Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Wed, 18 Oct 2017 14:11:35 -0300 Subject: Improves forms migration guide, docs, and scss (#24348) * fixes migration forms guides * removes container from Horizontal form * adds col-form-label sizes on form docs * removes .form-control-label from forms.scss * add note to migration --- docs/4.0/components/forms.md | 115 ++++++++++++++++++++++++++----------------- docs/4.0/migration.md | 5 +- 2 files changed, 73 insertions(+), 47 deletions(-) (limited to 'docs') diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index ba5633850..84891d841 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -365,62 +365,87 @@ Create horizontal forms with the grid by adding the `.row` class to form groups Be sure to add `.col-form-label` to your `
- -
- -
- -
+ +
+ +
+
-
- -
- -
+
+
+ +
+
-
-
- Radios -
-
- -
-
- -
-
- -
-
-
-
-
-
Checkbox
+
+
+
+ Radios
+
+
+ +
+
+
-
-
- +
+
+
Checkbox
+
+
+
- -
+
+
+
+ +
+
+ +{% endexample %} + +##### Horizontal form label sizing + +Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `
`). - - Added new `.form-control-label` class to vertically center labels with `.form-control`s. + - Added new `.col-form-label` class to vertically center labels with `.form-control`s. - Added new `.form-row` for compact form layouts with the grid classes (swap your `.row` for a `.form-row` and go). - Added custom forms support (for checkboxes, radios, selects, and file inputs). - Replaced `.has-error`, `.has-warning`, and `.has-success` classes with HTML5 form validation via CSS's `:invalid` and `:valid` pseudo-classes. -- cgit v1.2.3 From ad77ea7ae0dbbe305f1126320be6852479353a2b Mon Sep 17 00:00:00 2001 From: Andrew Murphy Date: Wed, 18 Oct 2017 18:26:33 +0100 Subject: #24373 : Documentation/Navbar : Refer to utility classes used. Hidden when printing. (#24380) * Refer to utility classes uses. Add Printing section refer to (not navbar) classes used for newbies navbars don't print, so add example of a print-only alternative * typos, add links typo in {% example %} add links to component pages * grammar * Add a dropdown with divider to the main example * change id name to stop travis error I assume id="camelCase" is the standard for id names, rather than the clearly superior id="underscore_words" * review changes still like to emphasise the foreign utility classes in the main example bg-light's name is self explanatory (so its obvious where to look it up), but mr-sm-2's name isn't at first * review changes * grammar * .fixed-top/bottom don't reserve space on the screen ... as they are position:fixed. better wording welcome * copyediting - rewrite utils line and link to the utils pages - restore the paragraphs to the placement section - fix formatting and grammar --- docs/4.0/components/navbar.md | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) (limited to 'docs') diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index f303aa2bc..5856ea54c 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -12,8 +12,9 @@ Here's what you need to know before getting started with the navbar: - Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes. - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. -- Navbars and their contents are built with flexbox, providing easy alignment options via utility classes. +- Use our [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flex]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) utility classes for controlling spacing and alignment within navbars. - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. +- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class. - Ensure accessibility by using a ` {% endexample %} +This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/color/) (`bg-light`) and [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes. + ### Brand The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. @@ -395,11 +409,13 @@ When the container is within your navbar, its horizontal padding is removed at b ## Placement -Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky).** +Use our [position utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/position/) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements. + +Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky)**. {% example html %} {% endexample %} -- cgit v1.2.3 From a2edd106a78c5c4f0d3799a9b7330e1440c2f7f6 Mon Sep 17 00:00:00 2001 From: Kevin Ruscoe Date: Wed, 18 Oct 2017 21:56:43 +0100 Subject: badges: Make using the contextual classes on links clearer. (#24422) --- docs/4.0/components/badge.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/4.0/components/badge.md b/docs/4.0/components/badge.md index c42d948d6..287005e7d 100644 --- a/docs/4.0/components/badge.md +++ b/docs/4.0/components/badge.md @@ -70,7 +70,7 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger ## Links -Using the `.badge` classes with the `` element quickly provide _actionable_ badges with hover and focus states. +Using the contextual `.badge-*` classes on an `` element quickly provide _actionable_ badges with hover and focus states. {% example html %} {% for color in site.data.theme-colors %} -- cgit v1.2.3 From 1a569bab3f5f7c9711dfdb0ecd134fc7f9c1c32d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 18 Oct 2017 14:22:26 -0700 Subject: few popover docs changes to clarify things mentioned in #24005 --- docs/4.0/components/popovers.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs') diff --git a/docs/4.0/components/popovers.md b/docs/4.0/components/popovers.md index b8356b0d2..c4034da98 100644 --- a/docs/4.0/components/popovers.md +++ b/docs/4.0/components/popovers.md @@ -19,10 +19,10 @@ Things to know when using the popover plugin: - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). - Triggering popovers on hidden elements will not work. - Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element. -- When triggered from hyperlinks that span multiple lines, popovers will be centered. Use `white-space: nowrap;` on your ``s to avoid this behavior. +- When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use `white-space: nowrap;` on your ``s to avoid this behavior. - Popovers must be hidden before their corresponding elements have been removed from the DOM. -Got all that? Great, let's see how they work with some examples. +Keep reading to see see how popovers work with some examples. ## Example: Enable popovers everywhere @@ -132,7 +132,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."> ### Dismiss on next click -Use the `focus` trigger to dismiss popovers on the next click that the user makes. +Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element. {% callout danger %} #### Specific markup required for dismiss-on-next-click -- cgit v1.2.3 From 40d242eddc497b1d95bacaf3f336f4dd56d37152 Mon Sep 17 00:00:00 2001 From: Gijs Boddeus Date: Thu, 19 Oct 2017 04:45:37 +0200 Subject: Fix typo in popovers.md (#24425) double use of see --- docs/4.0/components/popovers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/4.0/components/popovers.md b/docs/4.0/components/popovers.md index c4034da98..6c752518d 100644 --- a/docs/4.0/components/popovers.md +++ b/docs/4.0/components/popovers.md @@ -22,7 +22,7 @@ Things to know when using the popover plugin: - When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use `white-space: nowrap;` on your ``s to avoid this behavior. - Popovers must be hidden before their corresponding elements have been removed from the DOM. -Keep reading to see see how popovers work with some examples. +Keep reading to see how popovers work with some examples. ## Example: Enable popovers everywhere -- cgit v1.2.3 From 1154032f0a09a5a1d62a3869ff856e4cac3f1f51 Mon Sep 17 00:00:00 2001 From: Kevin Ruscoe Date: Thu, 19 Oct 2017 03:49:32 +0100 Subject: Update alerts.md (#24420) This document contains the word JavaScript everywhere apart from in one place where it's abbreviated to JS. This just makes sure it's written as JavaScript consistently across the page. --- docs/4.0/components/alerts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md index 4fdaed41b..aa6dfbecc 100644 --- a/docs/4.0/components/alerts.md +++ b/docs/4.0/components/alerts.md @@ -50,7 +50,7 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: - Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript. -- If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). The compiled version includes this. +- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). The compiled version includes this. - Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. - On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `