Plugin dependency
-Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.
+Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.
Single button dropdowns
diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html index fc8d65269..3f190ff78 100644 --- a/docs/_includes/components/button-groups.html +++ b/docs/_includes/components/button-groups.html @@ -1,7 +1,7 @@Button groups
-Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
+Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
Tooltips & popovers in button groups require special setting
diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html index 25dab56e2..efa290160 100644 --- a/docs/_includes/components/dropdowns.html +++ b/docs/_includes/components/dropdowns.html @@ -1,7 +1,7 @@Dropdowns
-Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
+Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
Example
Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
- Reduce the amount or width of navbar items. -
- Hide certain navbar items at certain screen sizes using responsive utility classes. +
- Hide certain navbar items at certain screen sizes using responsive utility classes.
- Change the point at which your navbar switches between collapsed and horizontal mode. Customize the
@grid-float-breakpointvariable or add your own media query.
Changing the collapsed mobile navbar breakpoint
@@ -203,7 +203,7 @@Text
diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html index 7e7f357ea..6bb4c36da 100644 --- a/docs/_includes/components/navs.html +++ b/docs/_includes/components/navs.html @@ -5,7 +5,7 @@Justified navbar nav links are currently not supported.
-
@@ -117,7 +117,7 @@
- Omit the viewport
<meta>mentioned in the CSS docs
+ - Omit the viewport
<meta>mentioned in the CSS docs - Override the
widthon the.containerfor each grid tier with a single width, for examplewidth: 970px !important;Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the!importantwith media queries or some selector-fu. - If using navbars, remove all navbar collapsing and expanding behavior.
- For grid layouts, use
.col-xs-*classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
@@ -17,6 +17,6 @@
Using dropdowns
-Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
+Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
Tabs with dropdowns
Thumbnails
-Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
+Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as Masonry, Isotope, or Salvattore.
Default example
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index ce0673a0e..7aac785b8 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -240,7 +240,7 @@ {% endhighlight %}Input groups
-To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.
To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.
Textarea
@@ -639,7 +639,7 @@Conveying validation state to assistive technologies and colorblind users
Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
-Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label> text itself (as is the case in the following code example), include a Glyphicon (with appropriate alternative text using the .sr-only class - see the Glyphicon examples), or by providing an additional help text block. Specifically for assistive technologies, invalid form controls can also be assigned an aria-invalid="true" attribute.
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label> text itself (as is the case in the following code example), include a Glyphicon (with appropriate alternative text using the .sr-only class - see the Glyphicon examples), or by providing an additional help text block. Specifically for assistive technologies, invalid form controls can also be assigned an aria-invalid="true" attribute.
Feedback icons only work with textual <input class="form-control"> elements.
Icons, labels, and input groups
-Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
Conveying the icon's meaning to assistive technologies
diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 509b4cec5..c226ed73c 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -292,7 +292,7 @@In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.
+In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.
{% highlight html %}Carets
-Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.
+Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.
Screen reader and keyboard navigation content
-Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.
Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.
Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.
To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.
SVG images and IE 8-10
In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
Compiling Bootstrap
-Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.
+Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.
Third party compilation tools may work with Bootstrap, but they are not supported by our core team.
Variables
-Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.
+Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.
Colors
Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 6a41c7d09..fe19b6a70 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -6,8 +6,8 @@Designed and built with all the love in the world by @mdo and @fat. Maintained by the core team with the help of our contributors.
diff --git a/docs/_includes/getting-started/accessibility.html b/docs/_includes/getting-started/accessibility.html index a21f7219e..60820c121 100644 --- a/docs/_includes/getting-started/accessibility.html +++ b/docs/_includes/getting-started/accessibility.html @@ -24,7 +24,7 @@Learn more at HTML CodeSniffer and Penn State's AccessAbility.
Color contrast
-Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks, the .bg-primary contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.
Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks, the .bg-primary contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.
Additional resources
-
diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html
index c7efd318c..3979392f9 100644
--- a/docs/_includes/getting-started/browser-device-support.html
+++ b/docs/_includes/getting-started/browser-device-support.html
@@ -74,11 +74,11 @@
On Windows, we support Internet Explorer 8-11.
- +For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.
Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.
-For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.
+For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.
Internet Explorer 8 and 9
Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.
diff --git a/docs/_includes/getting-started/disabling-responsiveness.html b/docs/_includes/getting-started/disabling-responsiveness.html index f58befc1f..883e63bb9 100644 --- a/docs/_includes/getting-started/disabling-responsiveness.html +++ b/docs/_includes/getting-started/disabling-responsiveness.html @@ -2,11 +2,11 @@Disabling responsiveness
Bootstrap automatically adapts your pages for various screen sizes. - Here's how to disable this feature so your page works like this non-responsive example.
+ Here's how to disable this feature so your page works like this non-responsive example.Steps to disable page responsiveness
-
-
Bootstrap template with responsiveness disabled
We've applied these steps to an example. Read its source code to see the specific changes implemented.
Justified nav
-Create a custom navbar with justified links. Heads up! Not too Safari friendly.
+Create a custom navbar with justified links. Heads up! Not too Safari friendly.