Merge branch 'v4-dev' into v4-split-buttons
This commit is contained in:
Mark Otto
commit
b280e36b78
10
.hound.yml
10
.hound.yml
|
|
@ -1,3 +1,5 @@
|
|||
fail_on_violations: true
|
||||
|
||||
scss:
|
||||
config_file: scss/.scss-lint.yml
|
||||
enabled: true
|
||||
|
|
@ -6,5 +8,13 @@ scss:
|
|||
javascript:
|
||||
enabled: false
|
||||
|
||||
eslint:
|
||||
enabled: true
|
||||
config_file: js/.eslintrc
|
||||
|
||||
jscs:
|
||||
enabled: true
|
||||
config_file: js/.jscsrc
|
||||
|
||||
ruby:
|
||||
enabled: false
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
sudo: false
|
||||
sudo: required
|
||||
dist: trusty
|
||||
language: node_js
|
||||
git:
|
||||
depth: 10
|
||||
|
|
@ -10,7 +11,6 @@ before_install:
|
|||
- export PATH=$(python -c 'from sys import argv;from collections import OrderedDict as od;print(":".join(od((p,None) for p in argv[1].split(":") if p.startswith("/")).keys()))' "$PATH")
|
||||
- rvm install 2.2
|
||||
- rvm use 2.2 --fuzzy
|
||||
- export GEMDIR=$(rvm gemdir)
|
||||
- npm install -g npm@3
|
||||
- "export TRAVIS_COMMIT_MSG=\"$(git log --format=%B --no-merges -n 1)\""
|
||||
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip validator\]'; export TWBS_DO_VALIDATOR=$?; true
|
||||
|
|
|
|||
|
|
@ -24,10 +24,16 @@ restrictions:
|
|||
* Please **do not** derail or troll issues. Keep the discussion on topic and
|
||||
respect the opinions of others.
|
||||
|
||||
* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
|
||||
Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
|
||||
instead. We reserve the right to delete comments which violate this rule.
|
||||
|
||||
* Please **do not** open issues or pull requests regarding the code in
|
||||
[`Normalize`](https://github.com/necolas/normalize.css) (open them in
|
||||
its repository).
|
||||
* Please **do not** open issues regarding the official themes offered on <http://themes.getbootstrap.com/>. Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
|
||||
|
||||
* Please **do not** open issues regarding the official themes offered on <http://themes.getbootstrap.com/>.
|
||||
Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
|
||||
|
||||
|
||||
## Issues and labels
|
||||
|
|
@ -105,7 +111,7 @@ When feasible, we aim to report such upstream bugs to the relevant browser vendo
|
|||
| Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. |
|
||||
| Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit <br> https://bugreport.apple.com | In Apple's bug reporter, choose "Safari" as the product. |
|
||||
| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://code.google.com/p/chromium/issues/list | Click the "New issue" button. |
|
||||
| Microsoft | Internet Explorer / Edge | Trident/EdgeHTML | https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm | |
|
||||
| Microsoft | Edge | EdgeHTML | https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/ | |
|
||||
|
||||
### Issues bots
|
||||
|
||||
|
|
@ -235,6 +241,7 @@ includes code changes) and under the terms of the
|
|||
- 2 spaces (no tabs)
|
||||
- strict mode
|
||||
- "Attractive"
|
||||
- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
|
||||
|
||||
### Checking coding style
|
||||
|
||||
|
|
|
|||
7
Gemfile
7
Gemfile
|
|
@ -1,9 +1,8 @@
|
|||
source 'https://rubygems.org'
|
||||
|
||||
group :development, :test do
|
||||
gem 'jekyll', '~> 3.1.1'
|
||||
gem 'jekyll-redirect-from', '~> 0.9.1'
|
||||
gem 'jekyll', '~> 3.1.2'
|
||||
gem 'jekyll-redirect-from', '~> 0.10.0'
|
||||
gem 'jekyll-sitemap', '~> 0.10.0'
|
||||
gem 'sass', '~> 3.4.21'
|
||||
gem 'scss_lint', '~> 0.44.0'
|
||||
gem 'scss_lint', '~> 0.47.1'
|
||||
end
|
||||
|
|
|
|||
23
Gemfile.lock
23
Gemfile.lock
|
|
@ -4,7 +4,7 @@ GEM
|
|||
colorator (0.1)
|
||||
ffi (1.9.10)
|
||||
ffi (1.9.10-x64-mingw32)
|
||||
jekyll (3.1.1)
|
||||
jekyll (3.1.2)
|
||||
colorator (~> 0.1)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
|
|
@ -13,28 +13,28 @@ GEM
|
|||
mercenary (~> 0.3.3)
|
||||
rouge (~> 1.7)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-redirect-from (0.9.1)
|
||||
jekyll-redirect-from (0.10.0)
|
||||
jekyll (>= 2.0)
|
||||
jekyll-sass-converter (1.4.0)
|
||||
sass (~> 3.4)
|
||||
jekyll-sitemap (0.10.0)
|
||||
jekyll-watch (1.3.1)
|
||||
listen (~> 3.0)
|
||||
kramdown (1.9.0)
|
||||
kramdown (1.10.0)
|
||||
liquid (3.0.6)
|
||||
listen (3.0.5)
|
||||
listen (3.0.6)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9)
|
||||
rb-inotify (>= 0.9.7)
|
||||
mercenary (0.3.5)
|
||||
rake (10.5.0)
|
||||
rb-fsevent (0.9.7)
|
||||
rb-inotify (0.9.6)
|
||||
rb-inotify (0.9.7)
|
||||
ffi (>= 0.5.0)
|
||||
rouge (1.10.1)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.4.21)
|
||||
scss_lint (0.44.0)
|
||||
rake (~> 10.0)
|
||||
scss_lint (0.47.1)
|
||||
rake (>= 0.9, < 11)
|
||||
sass (~> 3.4.15)
|
||||
|
||||
PLATFORMS
|
||||
|
|
@ -42,11 +42,10 @@ PLATFORMS
|
|||
x64-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 3.1.1)
|
||||
jekyll-redirect-from (~> 0.9.1)
|
||||
jekyll (~> 3.1.2)
|
||||
jekyll-redirect-from (~> 0.10.0)
|
||||
jekyll-sitemap (~> 0.10.0)
|
||||
sass (~> 3.4.21)
|
||||
scss_lint (~> 0.44.0)
|
||||
scss_lint (~> 0.47.1)
|
||||
|
||||
BUNDLED WITH
|
||||
1.11.2
|
||||
|
|
|
|||
40
Gruntfile.js
40
Gruntfile.js
|
|
@ -17,9 +17,7 @@ module.exports = function (grunt) {
|
|||
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var glob = require('glob');
|
||||
var isTravis = require('is-travis');
|
||||
var npmShrinkwrap = require('npm-shrinkwrap');
|
||||
var mq4HoverShim = require('mq4-hover-shim');
|
||||
var autoprefixerSettings = require('./grunt/autoprefixer-settings.js');
|
||||
var autoprefixer = require('autoprefixer')(autoprefixerSettings);
|
||||
|
|
@ -60,17 +58,6 @@ module.exports = function (grunt) {
|
|||
},
|
||||
|
||||
// JS build configuration
|
||||
lineremover: {
|
||||
es6Import: {
|
||||
files: {
|
||||
'<%= concat.bootstrap.dest %>': '<%= concat.bootstrap.dest %>'
|
||||
},
|
||||
options: {
|
||||
exclusionPattern: /^(import|export)/g
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
babel: {
|
||||
dev: {
|
||||
options: {
|
||||
|
|
@ -161,6 +148,10 @@ module.exports = function (grunt) {
|
|||
|
||||
concat: {
|
||||
options: {
|
||||
// Custom function to remove all export and import statements
|
||||
process: function (src) {
|
||||
return src.replace(/^(export|import).*/gm, '');
|
||||
},
|
||||
stripBanners: false
|
||||
},
|
||||
bootstrap: {
|
||||
|
|
@ -217,7 +208,7 @@ module.exports = function (grunt) {
|
|||
src: ['scss/*.scss', '!scss/_normalize.scss']
|
||||
},
|
||||
docs: {
|
||||
src: ['docs/assets/scss/*.scss', '!scss/_normalize.scss', '!docs/assets/scss/docs.scss']
|
||||
src: ['docs/assets/scss/*.scss', '!docs/assets/scss/docs.scss']
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -327,8 +318,7 @@ module.exports = function (grunt) {
|
|||
'The “datetime-local” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “month” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “time” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “week” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'Attribute “integrity” not allowed on element “script” at this point.' // Until https://github.com/jzaefferer/grunt-html/issues/86 gets fixed
|
||||
'The “week” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
|
||||
]
|
||||
},
|
||||
src: ['_gh_pages/**/*.html', 'js/tests/visual/*.html']
|
||||
|
|
@ -450,7 +440,7 @@ module.exports = function (grunt) {
|
|||
grunt.registerTask('test-js', ['eslint', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
|
||||
|
||||
// JS distribution task.
|
||||
grunt.registerTask('dist-js', ['babel:dev', 'concat', 'lineremover', 'babel:dist', 'stamp', 'uglify:core', 'commonjs']);
|
||||
grunt.registerTask('dist-js', ['babel:dev', 'concat', 'babel:dist', 'stamp', 'uglify:core', 'commonjs']);
|
||||
|
||||
grunt.registerTask('test-scss', ['scsslint:core']);
|
||||
|
||||
|
|
@ -492,20 +482,4 @@ module.exports = function (grunt) {
|
|||
|
||||
// Publish to GitHub
|
||||
grunt.registerTask('publish', ['buildcontrol:pages']);
|
||||
|
||||
// Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json).
|
||||
// This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
|
||||
grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', '_update-shrinkwrap']);
|
||||
grunt.registerTask('_update-shrinkwrap', function () {
|
||||
var done = this.async();
|
||||
npmShrinkwrap({ dev: true, dirname: __dirname }, function (err) {
|
||||
if (err) {
|
||||
grunt.fail.warn(err);
|
||||
}
|
||||
var dest = 'grunt/npm-shrinkwrap.json';
|
||||
fs.renameSync('npm-shrinkwrap.json', dest);
|
||||
grunt.log.writeln('File ' + dest.cyan + ' updated.');
|
||||
done();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
Before opening an issue:
|
||||
|
||||
- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
|
||||
- [Validate](http://validator.w3.org/nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
|
||||
- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
|
||||
- Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md)
|
||||
|
||||
When asking general "how to" questons:
|
||||
|
||||
- Please do not open an issue here
|
||||
- Instead, ask for help on [StackOverflow, IRC, or Slack](https://github.com/twbs/bootstrap/blob/master/README.md#community)
|
||||
|
||||
When reporting a bug, include:
|
||||
|
||||
- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
|
||||
- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
|
||||
- Reduced test cases and potential fixes using [JS Bin](https://jsbin.com)
|
||||
|
||||
When suggesting a feature, include:
|
||||
|
||||
- As much detail as possible for what we should add and why it's important to Bootstrap
|
||||
- Relevant links to prior art, screenshots, or live demos whenever possible
|
||||
|
|
@ -41,7 +41,7 @@ cdn:
|
|||
css_hash: "sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd"
|
||||
js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js
|
||||
js_hash: "sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
|
||||
jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
|
||||
jquery_hash: "sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx"
|
||||
tether: https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js
|
||||
tether_hash: "sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv"
|
||||
jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js
|
||||
jquery_hash: "sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+"
|
||||
tether: https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js
|
||||
tether_hash: "sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -462,6 +462,8 @@ var Button = (function ($) {
|
|||
input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
|
||||
$(this._element).trigger('change');
|
||||
}
|
||||
|
||||
input.focus();
|
||||
}
|
||||
} else {
|
||||
this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));
|
||||
|
|
@ -2060,13 +2062,7 @@ var Modal = (function ($) {
|
|||
}, {
|
||||
key: '_checkScrollbar',
|
||||
value: function _checkScrollbar() {
|
||||
var fullWindowWidth = window.innerWidth;
|
||||
if (!fullWindowWidth) {
|
||||
// workaround for missing window.innerWidth in IE8
|
||||
var documentElementRect = document.documentElement.getBoundingClientRect();
|
||||
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
||||
}
|
||||
this._isBodyOverflowing = document.body.clientWidth < fullWindowWidth;
|
||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth;
|
||||
this._scrollbarWidth = this._getScrollbarWidth();
|
||||
}
|
||||
}, {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -108,6 +108,8 @@
|
|||
input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
|
||||
$(this._element).trigger('change');
|
||||
}
|
||||
|
||||
input.focus();
|
||||
}
|
||||
} else {
|
||||
this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));
|
||||
|
|
|
|||
|
|
@ -427,13 +427,7 @@
|
|||
}, {
|
||||
key: '_checkScrollbar',
|
||||
value: function _checkScrollbar() {
|
||||
var fullWindowWidth = window.innerWidth;
|
||||
if (!fullWindowWidth) {
|
||||
// workaround for missing window.innerWidth in IE8
|
||||
var documentElementRect = document.documentElement.getBoundingClientRect();
|
||||
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
||||
}
|
||||
this._isBodyOverflowing = document.body.clientWidth < fullWindowWidth;
|
||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth;
|
||||
this._scrollbarWidth = this._getScrollbarWidth();
|
||||
}
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -1,60 +1,70 @@
|
|||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
Microsoft Edge
|
||||
summary: >
|
||||
Native browser tooltip for `title` shows on first keyboard focus (in addition to custom tooltip component)
|
||||
upstream_bug: >
|
||||
Edge#6793560
|
||||
origin: >
|
||||
Bootstrap#18692
|
||||
|
||||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
summary: >
|
||||
Hovered element still remains in `:hover` state after scrolling away.
|
||||
upstream_bug: >
|
||||
IE#926665
|
||||
Edge#5381673
|
||||
origin: >
|
||||
Bootstrap#14211
|
||||
|
||||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
Microsoft Edge
|
||||
summary: >
|
||||
When hovering over a `<select>` menu item, the cursor for the element underneath the menu is displayed.
|
||||
upstream_bug: >
|
||||
IE#963961
|
||||
Edge#817822
|
||||
origin: >
|
||||
Bootstrap#14528
|
||||
|
||||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
Microsoft Edge
|
||||
summary: >
|
||||
CSS `border-radius` sometimes causes lines of bleed-through of the `background-color` of the parent element.
|
||||
upstream_bug: >
|
||||
IE#1463734
|
||||
Edge#3342037
|
||||
origin: >
|
||||
Bootstrap#16671
|
||||
|
||||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
Microsoft Edge
|
||||
summary: >
|
||||
`background` of `<tr>` is only applied to first child cell instead of all cells in the row
|
||||
upstream_bug: >
|
||||
IE#2110930
|
||||
Edge#5865620
|
||||
origin: >
|
||||
Bootstrap#18504
|
||||
|
||||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
Microsoft Edge
|
||||
summary: >
|
||||
`@-ms-viewport{width: device-width;}` has side-effect of making scrollbars auto-hide
|
||||
upstream_bug: >
|
||||
IE#2256049
|
||||
Edge#7165383
|
||||
origin: >
|
||||
Bootstrap#18543
|
||||
|
||||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
Microsoft Edge
|
||||
summary: >
|
||||
Background color from lower layer bleeds through transparent border in some cases
|
||||
upstream_bug: >
|
||||
IE#2263132
|
||||
Edge#6274505
|
||||
origin: >
|
||||
Bootstrap#18228
|
||||
|
||||
|
|
@ -68,26 +78,6 @@
|
|||
origin: >
|
||||
Bootstrap#13453
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
`max-width: 100%;` doesn't work inside tables.
|
||||
upstream_bug: >
|
||||
Mozilla#975632
|
||||
origin: >
|
||||
Bootstrap#10690
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Button elements with `width: 100%` become cropped in long tables.
|
||||
upstream_bug: >
|
||||
Mozilla#1060131
|
||||
origin: >
|
||||
Bootstrap#14320
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
|
|
@ -108,16 +98,46 @@
|
|||
origin: >
|
||||
Bootstrap#18365
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Fire `transitioncancel` event when a transition is canceled
|
||||
upstream_bug: >
|
||||
Mozilla#1264125
|
||||
origin: >
|
||||
Mozilla#1182856
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox (Windows)
|
||||
summary: >
|
||||
Right border of `<select>` menu is sometimes missing when screen is set to uncommon resolution
|
||||
upstream_bug: >
|
||||
Mozilla#1139853
|
||||
Mozilla#924068
|
||||
origin: >
|
||||
Bootstrap#15990
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox (OS X & Linux)
|
||||
summary: >
|
||||
Badge widget causes bottom border of Tabs widget to unexpectedly not overlap
|
||||
upstream_bug: >
|
||||
Mozilla#1259972
|
||||
origin: >
|
||||
Bootstrap#19626
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome (Android)
|
||||
summary: >
|
||||
Tapping on an `<input>` in a scrollable overlay doesn't scroll the `<input>` into view
|
||||
upstream_bug: >
|
||||
Chromium#595210
|
||||
origin: >
|
||||
Bootstrap#17338
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome (OS X)
|
||||
|
|
@ -148,16 +168,6 @@
|
|||
origin: >
|
||||
Bootstrap#16180
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
Incorrect viewport size used for media queries when printing.
|
||||
upstream_bug: >
|
||||
Chromium#273306
|
||||
origin: >
|
||||
Bootstrap#12078
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
|
|
@ -218,15 +228,25 @@
|
|||
origin: >
|
||||
Bootstrap#16372
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari
|
||||
summary: >
|
||||
`rem` units in media queries should be calculated using `font-size: initial`, not the root element's `font-size`
|
||||
upstream_bug: >
|
||||
WebKit#156684
|
||||
origin: >
|
||||
Bootstrap#17403
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (OS X)
|
||||
summary: >
|
||||
Scrollbar clipped in `select[multiple]` with padding.
|
||||
`px`, `em`, and `rem` should all behave the same in media queries when page zoom is applied
|
||||
upstream_bug: >
|
||||
WebKit#128489, Safari#19208483
|
||||
WebKit#156687
|
||||
origin: >
|
||||
Bootstrap#12536
|
||||
Bootstrap#17403
|
||||
|
||||
-
|
||||
browser: >
|
||||
|
|
@ -250,16 +270,6 @@
|
|||
origin: >
|
||||
Bootstrap#14868
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (OS X)
|
||||
summary: >
|
||||
Focus ring of image map within a modal is displayed in the wrong location.
|
||||
upstream_bug: >
|
||||
WebKit#143527, Safari#21908735
|
||||
origin: >
|
||||
Bootstrap#16180
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iPad)
|
||||
|
|
|
|||
|
|
@ -30,28 +30,28 @@
|
|||
|
||||
- title: Components
|
||||
pages:
|
||||
- title: Alerts
|
||||
- title: Breadcrumb
|
||||
- title: Buttons
|
||||
- title: Button group
|
||||
- title: Button dropdown
|
||||
- title: Card
|
||||
- title: Carousel
|
||||
- title: Collapse
|
||||
- title: Dropdowns
|
||||
- title: Forms
|
||||
- title: Input group
|
||||
- title: Dropdowns
|
||||
- title: Jumbotron
|
||||
- title: Label
|
||||
- title: Alerts
|
||||
- title: Card
|
||||
- title: Navs
|
||||
- title: Navbar
|
||||
- title: Breadcrumb
|
||||
- title: Pagination
|
||||
- title: Progress
|
||||
- title: List group
|
||||
- title: Modal
|
||||
- title: Scrollspy
|
||||
- title: Tooltips
|
||||
- title: Navs
|
||||
- title: Navbar
|
||||
- title: Pagination
|
||||
- title: Popovers
|
||||
- title: Collapse
|
||||
- title: Carousel
|
||||
- title: Progress
|
||||
- title: Scrollspy
|
||||
- title: Tag
|
||||
- title: Tooltips
|
||||
- title: Utilities
|
||||
|
||||
# - title: Extend
|
||||
|
|
|
|||
|
|
@ -7,3 +7,8 @@
|
|||
code: zh
|
||||
description: Bootstrap 4 中文文档教程
|
||||
url: http://boot4.com/
|
||||
|
||||
- name: Japanese
|
||||
code: ja
|
||||
description: Bootstrap 4 日本語リファレンス
|
||||
url: http://bootstrap4.jp/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{% callout warning %}
|
||||
#### Conveying meaning to assistive technologies
|
||||
|
||||
Using color to add meaning 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 (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
|
||||
{% endcallout %}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<footer class="bd-footer text-muted" role="contentinfo">
|
||||
<footer class="bd-footer text-muted">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links">
|
||||
<li><a href="{{ site.repo }}">GitHub</a></li>
|
||||
|
|
@ -43,15 +43,15 @@ SimpleJekyllSearch.init({
|
|||
resultsContainer: document.getElementById('search-results'),
|
||||
searchResultTemplate: '<a class="dropdown-item" href="{url}">{title}</a>',
|
||||
noResultsText: '<div class="dropdown-item no-results">Sorry, there are no results for that search.</div>',
|
||||
json: '/search.json'
|
||||
json: '{{ site.baseurl }}/search.json'
|
||||
})
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
background: '#777',
|
||||
foreground: 'rgba(255,255,255,.75)',
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
|
||||
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
|
||||
<title>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
|
||||
<header class="navbar navbar-light navbar-static-top bd-navbar">
|
||||
<div class="container">
|
||||
{% comment %}
|
||||
<nav class="nav navbar-nav pull-xs-right">
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ module Jekyll
|
|||
def bugify(input)
|
||||
upstream_map = {
|
||||
"Bootstrap" => "https://github.com/twbs/bootstrap/issues/",
|
||||
"IE" => ["https://connect.microsoft.com/IE/feedback/details/", "IE bug"],
|
||||
"Edge" => ["https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/", "Edge issue"],
|
||||
"Mozilla" => ["https://bugzilla.mozilla.org/show_bug.cgi?id=", "Mozilla bug"],
|
||||
"Chromium" => ["https://code.google.com/p/chromium/issues/detail?id=", "Chromium issue"],
|
||||
"Chromium" => ["https://bugs.chromium.org/p/chromium/issues/detail?id=", "Chromium issue"],
|
||||
"WebKit" => ["https://bugs.webkit.org/show_bug.cgi?id=", "WebKit bug"],
|
||||
"Safari" => ["https://openradar.appspot.com/", "Apple Safari Radar"],
|
||||
"Normalize" => ["https://github.com/necolas/normalize.css/issues/", "Normalize"]
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -36,6 +36,17 @@
|
|||
e.preventDefault()
|
||||
})
|
||||
|
||||
// Modal relatedTarget demo
|
||||
$('#exampleModal').on('show.bs.modal', function (event) {
|
||||
var $button = $(event.relatedTarget) // Button that triggered the modal
|
||||
var recipient = $button.data('whatever') // Extract info from data-* attributes
|
||||
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
|
||||
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
|
||||
var $modal = $(this)
|
||||
$modal.find('.modal-title').text('New message to ' + recipient)
|
||||
$modal.find('.modal-body input').val(recipient)
|
||||
})
|
||||
|
||||
// Insert copy to clipboard button before .highlight
|
||||
$('.highlight').each(function () {
|
||||
var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -128,6 +128,10 @@
|
|||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example > .close {
|
||||
|
|
@ -299,12 +303,6 @@
|
|||
|
||||
// Helpers
|
||||
.bd-example > {
|
||||
.center-block:not(img) {
|
||||
max-width: 200px;
|
||||
padding: .5rem;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.bg-primary,
|
||||
.bg-success,
|
||||
.bg-info,
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
//
|
||||
|
||||
.bd-navbar {
|
||||
font-size: 87.5%; // 14px
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $bd-graphite-light;
|
||||
|
|
@ -17,7 +15,8 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: darken($gray-dark, 25%);
|
||||
font-weight: 500;
|
||||
color: darken($gray-dark, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ We publicly list browser bugs that are impacting us here, in the hopes of expedi
|
|||
Also see [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o).
|
||||
|
||||
See also:
|
||||
|
||||
* [Chromium issue 536263: [meta] Issues affecting Bootstrap](https://code.google.com/p/chromium/issues/detail?id=536263)
|
||||
* [Mozilla bug 1230801: Fix the issues that affect Bootstrap](https://bugzilla.mozilla.org/show_bug.cgi?id=1230801)
|
||||
* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)
|
||||
|
|
|
|||
|
|
@ -30,6 +30,9 @@ Alerts are available for any length of text, as well as an optional dismiss butt
|
|||
</div>
|
||||
{% 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.
|
||||
|
|
@ -57,7 +60,7 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
|
|||
<div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<p class="m-b-0">Whenever you need to, be sure to use a margin utilities to keep things nice and tidy.</p>
|
||||
<p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,11 +39,8 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
|
|||
<button type="button" class="btn btn-link">Link</button>
|
||||
{% 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
|
||||
|
||||
|
|
@ -61,7 +58,7 @@ When using button classes on `<a>` 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 %}
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
|
|
@ -119,7 +116,7 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
|
|||
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. For browsers that support that proper, you won't see the disabled cursor at all.
|
||||
- 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 %}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ Cards support a wide variety of content, including images, text, list groups, li
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Lists can be added to a card by adding a list group.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<ul class="list-group list-group-flush">
|
||||
|
|
@ -61,6 +63,8 @@ Cards support a wide variety of content, including images, text, list groups, li
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
|
||||
|
|
@ -70,6 +74,8 @@ Cards support a wide variety of content, including images, text, list groups, li
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `<a>` tag.
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
|
|
@ -79,6 +85,10 @@ Cards support a wide variety of content, including images, text, list groups, li
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
|
||||
|
||||
The multiple content types can be easily combined to create the card you need. See below for an example.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
|
|
@ -170,6 +180,8 @@ Add an optional header and/or footer within a card.
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<h3 class="card-header">Featured</h3>
|
||||
|
|
@ -362,6 +374,9 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</div>
|
||||
{% 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.
|
||||
|
|
@ -493,7 +508,9 @@ Only applies to small devices and above.
|
|||
|
||||
## Columns
|
||||
|
||||
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Only applies to small devices and above.
|
||||
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`.
|
||||
|
||||
Only applies to small devices and above.
|
||||
|
||||
**Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts).
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ Extend the default collapse behavior to create an accordion.
|
|||
|
||||
Be sure to add `aria-expanded` to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `in` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.
|
||||
|
||||
Additionally, if your control element is targetting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you may add an additional `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
|
||||
Additionally, if your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you may add an additional `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
|
|||
|
|
@ -45,8 +45,6 @@ You can optionally use `<button>` elements in your dropdowns instead of `<a>`s.
|
|||
</div>
|
||||
{% 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 %}
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
|
||||
...
|
||||
{% example html %}
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
This dropdown's menu is right-aligned
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
{% endexample %}
|
||||
|
||||
## Menu headers
|
||||
|
||||
|
|
|
|||
|
|
@ -19,16 +19,16 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
|||
|
||||
{% example html %}
|
||||
<form>
|
||||
<fieldset class="form-group">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleSelect1">Example select</label>
|
||||
<select class="form-control" id="exampleSelect1">
|
||||
<option>1</option>
|
||||
|
|
@ -37,8 +37,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
|||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleSelect2">Example multiple select</label>
|
||||
<select multiple class="form-control" id="exampleSelect2">
|
||||
<option>1</option>
|
||||
|
|
@ -47,34 +47,37 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
|||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleTextarea">Example textarea</label>
|
||||
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputFile">File input</label>
|
||||
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
|
||||
<small id="fileHelp" class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
|
||||
<small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Radio buttons</legend>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Check me out
|
||||
|
|
@ -169,79 +172,79 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
|
|||
|
||||
{% example html %}
|
||||
<div class="form-group row">
|
||||
<label for="example-text-input" class="col-xs-2 form-control-label">Text</label>
|
||||
<label for="example-text-input" class="col-xs-2 col-form-label">Text</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-search-input" class="col-xs-2 form-control-label">Search</label>
|
||||
<label for="example-search-input" class="col-xs-2 col-form-label">Search</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-email-input" class="col-xs-2 form-control-label">Email</label>
|
||||
<label for="example-email-input" class="col-xs-2 col-form-label">Email</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-url-input" class="col-xs-2 form-control-label">URL</label>
|
||||
<label for="example-url-input" class="col-xs-2 col-form-label">URL</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-tel-input" class="col-xs-2 form-control-label">Telephone</label>
|
||||
<label for="example-tel-input" class="col-xs-2 col-form-label">Telephone</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-password-input" class="col-xs-2 form-control-label">Password</label>
|
||||
<label for="example-password-input" class="col-xs-2 col-form-label">Password</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="password" value="hunter2" id="example-password-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-number-input" class="col-xs-2 form-control-label">Number</label>
|
||||
<label for="example-number-input" class="col-xs-2 col-form-label">Number</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="number" value="42" id="example-number-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-datetime-local-input" class="col-xs-2 form-control-label">Date and time</label>
|
||||
<label for="example-datetime-local-input" class="col-xs-2 col-form-label">Date and time</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-date-input" class="col-xs-2 form-control-label">Date</label>
|
||||
<label for="example-date-input" class="col-xs-2 col-form-label">Date</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-month-input" class="col-xs-2 form-control-label">Month</label>
|
||||
<label for="example-month-input" class="col-xs-2 col-form-label">Month</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="month" value="2011-08" id="example-month-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-week-input" class="col-xs-2 form-control-label">Week</label>
|
||||
<label for="example-week-input" class="col-xs-2 col-form-label">Week</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="week" value="2011-W33" id="example-week-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-time-input" class="col-xs-2 form-control-label">Time</label>
|
||||
<label for="example-time-input" class="col-xs-2 col-form-label">Time</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="time" value="13:45:00" id="example-time-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-color-input" class="col-xs-2 form-control-label">Color</label>
|
||||
<label for="example-color-input" class="col-xs-2 col-form-label">Color</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="color" value="#563d7c" id="example-color-input">
|
||||
</div>
|
||||
|
|
@ -258,14 +261,14 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
|
|||
|
||||
{% example html %}
|
||||
<form>
|
||||
<fieldset class="form-group">
|
||||
<div class="form-group">
|
||||
<label for="formGroupExampleInput">Example label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="formGroupExampleInput2">Another label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
|
||||
</fieldset>
|
||||
</div>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -307,9 +310,9 @@ Because of this, you may need to manually address the width and alignment of ind
|
|||
<label class="sr-only" for="exampleInputPassword3">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
|
|
@ -330,102 +333,137 @@ Because of this, you may need to manually address the width and alignment of ind
|
|||
</form>
|
||||
{% 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). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with `.form-control`—use the `.form-control-label` class.
|
||||
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-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 `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2">Radios</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="gridRadios" id="gridRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
<div class="container">
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2">Checkbox</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
<button type="submit" class="btn btn-secondary">Sign in</button>
|
||||
<fieldset class="form-group row">
|
||||
<legend class="col-form-legend col-sm-2">Radios</legend>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2">Checkbox</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="form-group row">
|
||||
<div class="offset-sm-2 col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Grid-based form layouts also support large and small inputs.
|
||||
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="lgFormGroupInput" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-sm" id="smFormGroupInput" placeholder="you@example.com">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Checkboxes and radios
|
||||
|
||||
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
|
||||
Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
|
||||
|
||||
Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the <code>.disabled</code> class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.
|
||||
Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.form-check`. The disabled class will also lighten the text color to help indicate the input's state.
|
||||
|
||||
### Default (stacked)
|
||||
|
||||
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
|
||||
|
||||
{% example html %}
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" value="">
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" value="" disabled>
|
||||
Option two is disabled
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
|
||||
{% example html %}
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -433,45 +471,45 @@ Disabled checkboxes and radios are supported, but to provide a "not-allowed" cur
|
|||
|
||||
### Inline
|
||||
|
||||
Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
|
||||
Groups of checkboxes or radios that appear on the same horizontal row are similar to their stacked counterparts, but require different HTML and a single class. To switch from stacked to inline, drop the surrounding `<div>`, add `.form-check-inline` to the `<label>`, and keep the `.form-check-input` on the `<input>`.
|
||||
|
||||
{% example html %}
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
### Without labels
|
||||
|
||||
Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
|
||||
Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
|
||||
|
||||
{% example html %}
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="blankCheckbox" value="option1">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="blankRadio" id="blankRadio1" value="option1">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
@ -483,13 +521,13 @@ When you need to place plain text next to a form label within a form, use the `.
|
|||
{% example html %}
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 form-control-label">Email</label>
|
||||
<label class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<p class="form-control-static">email@example.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword" class="col-sm-2 form-control-label">Password</label>
|
||||
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
|
||||
</div>
|
||||
|
|
@ -575,9 +613,15 @@ Set heights using classes like `.form-control-lg`, and set widths using grid col
|
|||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<select class="form-control form-control-lg"></select>
|
||||
<select class="form-control"></select>
|
||||
<select class="form-control form-control-sm"></select>
|
||||
<select class="form-control form-control-lg">
|
||||
<option>Large select</option>
|
||||
</select>
|
||||
<select class="form-control">
|
||||
<option>Default select</option>
|
||||
</select>
|
||||
<select class="form-control form-control-sm">
|
||||
<option>Small select</option>
|
||||
</select>
|
||||
{% endexample %}
|
||||
|
||||
## Column sizing
|
||||
|
|
@ -600,7 +644,7 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
|
|||
|
||||
## Help text
|
||||
|
||||
No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes like `.text-muted`, you can create much more flexible help text as you need it.
|
||||
Block-level help text in forms can be created using `.form-text` (previously known as `.help-block` in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like `.text-muted`.
|
||||
|
||||
{% callout warning %}
|
||||
#### Associating help text with form controls
|
||||
|
|
@ -608,6 +652,20 @@ No official help text classes exist in Bootstrap 4 (previously we had `.help-blo
|
|||
Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.
|
||||
{% endcallout %}
|
||||
|
||||
### Block level
|
||||
|
||||
Block help text—for below inputs or for longer lines of help text—can be easily achieved with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.
|
||||
|
||||
{% example html %}
|
||||
<label for="inputPassword5">Password</label>
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
|
||||
<p id="passwordHelpBlock" class="form-text text-muted">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
|
||||
</p>
|
||||
{% endexample %}
|
||||
|
||||
### Inline
|
||||
|
||||
Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else).
|
||||
|
||||
{% example html %}
|
||||
|
|
@ -622,24 +680,23 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
|
|||
</form>
|
||||
{% endexample %}
|
||||
|
||||
Block help text—for below inputs or for longer lines of help text—can be easily achieved with a `<p>`.
|
||||
|
||||
{% example html %}
|
||||
<label for="inputPassword5">Password</label>
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
|
||||
<p id="passwordHelpBlock" class="text-muted">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters or emoji.
|
||||
</p>
|
||||
{% endexample %}
|
||||
|
||||
## Validation
|
||||
|
||||
Bootstrap includes validation styles for danger, warning, and success states on form controls.
|
||||
Bootstrap includes validation styles for danger, warning, and success states on form controls. Here's a rundown of how they work:
|
||||
|
||||
- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
|
||||
- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.col-form-label`, `.form-control`, or custom form element will receive the validation styles.
|
||||
- Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state.
|
||||
- Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state.
|
||||
- You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
|
||||
- Icons can also be disabled entirely by changing the variables to `non` or commenting out the source Sass.
|
||||
- Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass.
|
||||
|
||||
Generally speaking, you'll want to use a particular state for specific types of feedback:
|
||||
|
||||
- **Danger** is great for when there's a blocking or required field. A user *must* fill in this field properly to submit the form.
|
||||
- **Warning** works well for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form.
|
||||
- And lastly, **success** is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields.
|
||||
|
||||
Here are some examples of the aforementioned classes in action.
|
||||
|
||||
{% comment %}
|
||||
{% callout warning %}
|
||||
|
|
@ -653,18 +710,26 @@ Ensure that an alternative indication of state is also provided. For instance, y
|
|||
|
||||
{% example html %}
|
||||
<div class="form-group has-success">
|
||||
<label class="form-control-label" for="inputSuccess1">Input with success</label>
|
||||
<label class="col-form-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control form-control-success" id="inputSuccess1">
|
||||
<div class="form-control-feedback">Success! You've done it.</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-control-label" for="inputWarning1">Input with warning</label>
|
||||
<label class="col-form-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control form-control-warning" id="inputWarning1">
|
||||
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<label class="form-control-label" for="inputDanger1">Input with danger</label>
|
||||
<label class="col-form-label" for="inputDanger1">Input with danger</label>
|
||||
<input type="text" class="form-control form-control-danger" id="inputDanger1">
|
||||
<div class="form-control-feedback">Shit, that username's taken. Try another?</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="checkbox has-success">
|
||||
<label>
|
||||
<input type="checkbox" id="checkboxSuccess" value="option1">
|
||||
|
|
@ -762,6 +827,33 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
|
|||
</label>
|
||||
{% endexample %}
|
||||
|
||||
#### Validation states
|
||||
|
||||
Add other states to your custom forms with our validation classes.
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group has-success">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group has-danger m-b-0">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
#### Stacked
|
||||
|
||||
|
|
@ -817,3 +909,22 @@ Here's how it works:
|
|||
- We declare a `height` on the `<input>` 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.
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ Easily extend form controls by adding text, buttons, or button groups on either
|
|||
|
||||
## Basic example
|
||||
|
||||
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.**
|
||||
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group.**
|
||||
|
||||
{% example html %}
|
||||
<div class="input-group">
|
||||
|
|
@ -37,6 +37,12 @@ Place one add-on or button on either side of an input. You may also place one on
|
|||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<span class="input-group-addon">0.00</span>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Sizing
|
||||
|
|
@ -53,11 +59,6 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
|
|||
<span class="input-group-addon" id="sizing-addon2">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon" id="sizing-addon3">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Checkboxes and radio addons
|
||||
|
|
@ -85,6 +86,32 @@ Place any checkbox or radio option within an input group's addon instead of text
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Multiple addons
|
||||
|
||||
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<input type="checkbox" aria-label="Checkbox for following text input">
|
||||
</span>
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" class="form-control" aria-label="Text input with checkbox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<span class="input-group-addon">0.00</span>
|
||||
<input type="text" class="form-control" aria-label="Text input with radio button">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Button addons
|
||||
|
||||
Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden.
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<h1>Example heading <span class="label label-default">New</span></h1>
|
||||
<h2>Example heading <span class="label label-default">New</span></h2>
|
||||
<h3>Example heading <span class="label label-default">New</span></h3>
|
||||
<h4>Example heading <span class="label label-default">New</span></h4>
|
||||
<h5>Example heading <span class="label label-default">New</span></h5>
|
||||
<h6>Example heading <span class="label label-default">New</span></h6>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual variations
|
||||
|
||||
Add any of the below mentioned modifier classes to change the appearance of a label.
|
||||
|
||||
{% example html %}
|
||||
<span class="label label-default">Default</span>
|
||||
<span class="label label-primary">Primary</span>
|
||||
<span class="label label-success">Success</span>
|
||||
<span class="label label-info">Info</span>
|
||||
<span class="label label-warning">Warning</span>
|
||||
<span class="label label-danger">Danger</span>
|
||||
{% 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 %}
|
||||
<span class="label label-pill label-default">Default</span>
|
||||
<span class="label label-pill label-primary">Primary</span>
|
||||
<span class="label label-pill label-success">Success</span>
|
||||
<span class="label label-pill label-info">Info</span>
|
||||
<span class="label label-pill label-warning">Warning</span>
|
||||
<span class="label label-pill label-danger">Danger</span>
|
||||
{% endexample %}
|
||||
|
|
@ -24,22 +24,22 @@ The most basic list group is simply an unordered list with list items, and the p
|
|||
</ul>
|
||||
{% 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 %}
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<span class="label label-default label-pill pull-xs-right">14</span>
|
||||
<span class="tag tag-default tag-pill pull-xs-right">14</span>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="label label-default label-pill pull-xs-right">2</span>
|
||||
<span class="tag tag-default tag-pill pull-xs-right">2</span>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="label label-default label-pill pull-xs-right">1</span>
|
||||
<span class="tag tag-default tag-pill pull-xs-right">1</span>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -104,6 +104,9 @@ Use contextual classes to style list items, default or linked. Also includes `.a
|
|||
</div>
|
||||
{% 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.
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ Always try to place a modal's HTML code in a top-level position in your document
|
|||
{% callout warning %}
|
||||
#### Mobile device caveats
|
||||
|
||||
There are some caveats regarding using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-navbars-and-virtual-keyboards) for details.
|
||||
There are some caveats regarding using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
|
||||
{% endcallout %}
|
||||
|
||||
### Static example
|
||||
|
|
@ -181,7 +181,7 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr
|
|||
|
||||
## Optional sizes
|
||||
|
||||
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These size kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
|
||||
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ Here's an example of all the sub-components included in a default, light navbar:
|
|||
|
||||
### Brand
|
||||
|
||||
The `.navbar-brand` can be applied to most elements, but an anchor works best.
|
||||
The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
|
|
@ -64,7 +64,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best.
|
|||
</nav>
|
||||
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<h1 class="navbar-brand">Navbar</h1>
|
||||
<h1 class="navbar-brand m-b-0">Navbar</h1>
|
||||
</nav>
|
||||
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Provide pagination links for your site or app with the multi-page pagination com
|
|||
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
|
|
@ -39,6 +39,12 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
|||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
{% callout info %}
|
||||
### Labelling the pagination component
|
||||
|
||||
The pagination component should be wrapped in a `<nav>` element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive `aria-label` for the `<nav>` which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.
|
||||
{% endcallout %}
|
||||
|
||||
## Disabled and active states
|
||||
|
||||
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
|
||||
|
|
@ -50,7 +56,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
|
|||
{% endcallout %}
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-label="Previous">
|
||||
|
|
@ -78,7 +84,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
|
|||
You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link" aria-label="Previous">
|
||||
|
|
@ -97,7 +103,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
|
|||
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
|
|
@ -119,7 +125,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-sm">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
|
|
|
|||
|
|
@ -265,7 +265,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offsets</td>
|
||||
<td>offset</td>
|
||||
<td>string</td>
|
||||
<td>'0 0'</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#offset">offset docs</a>.</td>
|
||||
|
|
|
|||
|
|
@ -13,12 +13,24 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
|
|||
|
||||
### Example
|
||||
|
||||
To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress" value="0" max="100">0%</progress>
|
||||
<progress class="progress" value="25" max="100">25%</progress>
|
||||
<progress class="progress" value="50" max="100">50%</progress>
|
||||
<progress class="progress" value="75" max="100">75%</progress>
|
||||
<progress class="progress" value="100" max="100">100%</progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-1">Reticulating splines… 0%</div>
|
||||
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-2">Reticulating splines… 25%</div>
|
||||
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-3">Reticulating splines… 50%</div>
|
||||
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-4">Reticulating splines… 75%</div>
|
||||
<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-5">Reticulating splines… 100%</div>
|
||||
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
|
||||
{% endexample %}
|
||||
|
||||
### IE9 support
|
||||
|
|
@ -26,9 +38,10 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
|
|||
Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress" value="25" max="100">
|
||||
<div class="text-xs-center" id="example-caption-6">Reticulating splines… 25%</div>
|
||||
<progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
|
||||
<div class="progress">
|
||||
<span class="progress-bar" style="width: 25%;">25%</span>
|
||||
<span class="progress-bar" style="width: 25%;"></span>
|
||||
</div>
|
||||
</progress>
|
||||
{% endexample %}
|
||||
|
|
@ -38,10 +51,10 @@ Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can w
|
|||
Progress bars use some of the same button and alert classes for consistent styles.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress progress-success" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-info" value="50" max="100">50%</progress>
|
||||
<progress class="progress progress-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress progress-danger" value="100" max="100">100%</progress>
|
||||
<progress class="progress progress-success" value="25" max="100"></progress>
|
||||
<progress class="progress progress-info" value="50" max="100"></progress>
|
||||
<progress class="progress progress-warning" value="75" max="100"></progress>
|
||||
<progress class="progress progress-danger" value="100" max="100"></progress>
|
||||
{% endexample %}
|
||||
|
||||
### Striped
|
||||
|
|
@ -49,11 +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 %}
|
||||
<progress class="progress progress-striped" value="10" max="100">10%</progress>
|
||||
<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
|
||||
<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>
|
||||
<progress class="progress progress-striped" value="10" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-success" value="25" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-info" value="50" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-warning" value="75" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-danger" value="100" max="100"></progress>
|
||||
{% endexample %}
|
||||
|
||||
### Animated stripes
|
||||
|
|
@ -63,12 +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).
|
||||
|
||||
<div class="bd-example">
|
||||
<progress class="progress progress-striped" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-striped" value="25" max="100"></progress>
|
||||
<button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Toggle animation
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-striped progress-animated" value="25" max="100"></progress>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<div class="bd-example">
|
||||
<nav id="navbar-example2" class="navbar navbar-default" role="navigation">
|
||||
<nav id="navbar-example2" class="navbar navbar-default">
|
||||
<h3 class="navbar-brand">Project Name</h3>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item"><a class="nav-link" href="#fat">@fat</a></li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
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 %}
|
||||
<h1>Example heading <span class="tag tag-default">New</span></h1>
|
||||
<h2>Example heading <span class="tag tag-default">New</span></h2>
|
||||
<h3>Example heading <span class="tag tag-default">New</span></h3>
|
||||
<h4>Example heading <span class="tag tag-default">New</span></h4>
|
||||
<h5>Example heading <span class="tag tag-default">New</span></h5>
|
||||
<h6>Example heading <span class="tag tag-default">New</span></h6>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual variations
|
||||
|
||||
Add any of the below mentioned modifier classes to change the appearance of a tag.
|
||||
|
||||
{% example html %}
|
||||
<span class="tag tag-default">Default</span>
|
||||
<span class="tag tag-primary">Primary</span>
|
||||
<span class="tag tag-success">Success</span>
|
||||
<span class="tag tag-info">Info</span>
|
||||
<span class="tag tag-warning">Warning</span>
|
||||
<span class="tag tag-danger">Danger</span>
|
||||
{% 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.
|
||||
|
||||
{% example html %}
|
||||
<span class="tag tag-pill tag-default">Default</span>
|
||||
<span class="tag tag-pill tag-primary">Primary</span>
|
||||
<span class="tag tag-pill tag-success">Success</span>
|
||||
<span class="tag tag-pill tag-info">Info</span>
|
||||
<span class="tag tag-pill tag-warning">Warning</span>
|
||||
<span class="tag tag-pill tag-danger">Danger</span>
|
||||
{% endexample %}
|
||||
|
|
@ -229,7 +229,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offsets</td>
|
||||
<td>offset</td>
|
||||
<td>string</td>
|
||||
<td>'0 0'</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -60,7 +62,8 @@ Here are some representative examples of these classes:
|
|||
}
|
||||
{% endhighlight %}
|
||||
|
||||
Additionally, Bootstrap also includes an `.m-x-auto` class for centering fixed-width block level content by setting the horizontal margins to `auto`.
|
||||
### Horizontal centering
|
||||
Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||
|
|
@ -69,7 +72,7 @@ Additionally, Bootstrap also includes an `.m-x-auto` class for centering fixed-w
|
|||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="m-x-auto" style="width: 200px;"">
|
||||
<div class="m-x-auto" style="width: 200px;">
|
||||
Centered element
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
|
@ -159,11 +162,38 @@ 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 `<div>` with the class.
|
||||
{% endcallout %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Conveying meaning to assistive technologies
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
|
||||
{% endcallout %}
|
||||
## Widths
|
||||
|
||||
Easily make an element as wide as its parent using the `.w-100` utility class, which sets `width: 100%`.
|
||||
|
||||
{% example html %}
|
||||
<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%">
|
||||
{% endexample %}
|
||||
|
||||
## CSS `display` (`block`, `inline`, `inline-block`)
|
||||
|
||||
Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively).
|
||||
|
||||
To make an element `display: none`, use our [responsive utilities](../layout/responsive-utilities/) instead.
|
||||
|
||||
{% example html %}
|
||||
<div class="d-inline bg-success">Inline</div>
|
||||
<div class="d-inline bg-success">Inline</div>
|
||||
|
||||
<span class="d-block bg-primary">Block</span>
|
||||
|
||||
<div class="d-inline-block bg-warning">
|
||||
<h3>inline-block</h3>
|
||||
Boot that strap!
|
||||
</div>
|
||||
<div class="d-inline-block bg-warning">
|
||||
<h3>inline-block</h3>
|
||||
Strap that boot!
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Close icon
|
||||
|
||||
|
|
@ -229,6 +259,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.
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ Add classes to an `<img>` element to easily style images in any project.
|
|||
|
||||
## Aligning images
|
||||
|
||||
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
|
||||
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
|
||||
|
|
@ -60,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
|
|||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<img data-src="holder.js/200x200" class="img-rounded center-block" alt="A generic square placeholder image with rounded corners">
|
||||
<img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners">
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<img src="..." class="img-rounded center-block" alt="...">
|
||||
<img src="..." class="img-rounded m-x-auto d-block" alt="...">
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
|
|
|
|||
|
|
@ -34,20 +34,24 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
|
|||
|
||||
## Native font stack
|
||||
|
||||
The default web (Helvetica Neue, Helvetica, and Arial) fonts have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this Smashing Magazine article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
|
||||
The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
|
||||
|
||||
{% highlight sass %}
|
||||
$font-family-sans-serif:
|
||||
// Safari for OS X and iOS (San Francisco)
|
||||
-apple-system,
|
||||
// Chrome for OS X (San Francisco) and Windows (Segoe UI)
|
||||
// Chrome for OS X (San Francisco)
|
||||
BlinkMacSystemFont,
|
||||
// Windows
|
||||
"Segoe UI",
|
||||
// Android
|
||||
"Roboto",
|
||||
// Linux distros
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||
// Linux
|
||||
"Oxygen", // KDE
|
||||
"Ubuntu",
|
||||
"Cantarell", // GNOME
|
||||
// Firefox OS [R.I.P.]
|
||||
"Fira Sans",
|
||||
// Older Android
|
||||
"Droid Sans",
|
||||
// Basic web fallback
|
||||
|
|
@ -144,7 +148,7 @@ The `<pre>` element is reset to remove its `margin-top` and use `rem` units for
|
|||
|
||||
## Tables
|
||||
|
||||
Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/).
|
||||
Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/).
|
||||
|
||||
<div class="bd-example">
|
||||
<table>
|
||||
|
|
@ -189,7 +193,7 @@ Various form elements have been rebooted for simpler base styles. Here are some
|
|||
- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
|
||||
- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
|
||||
- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
|
||||
- `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
|
||||
- `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
|
||||
- `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
|
||||
|
||||
These changes, and more, are demonstrated below.
|
||||
|
|
@ -330,12 +334,12 @@ To merely toggle the visibility of an element, meaning its `display` is not modi
|
|||
|
||||
Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a "tap" – the moment when a finger/stylus is lifted from screen – and the [`click` event](https://developer.mozilla.org/en-US/docs/Web/Events/click) being fired. This delay is necessary for these browsers to correctly handle "double-tap to zoom" gestures without prematurely triggering actions or links after the first "tap", but it can make your site feel slightly sluggish and unresponsive.
|
||||
|
||||
Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are currently iOS Safari (and any other iOS WebView-based browser) – though this is likely to change in iOS 10, see [WebKit bug #150604](https://bugs.webkit.org/show_bug.cgi?id=150604) – and IE11 on Windows Phone 8.1.
|
||||
Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are IE11 on Windows Phone 8.1, and iOS Safari (and any other iOS WebView-based browser) [prior to iOS 9.3](https://webkit.org/blog/5610/more-responsive-tapping-on-ios/).
|
||||
|
||||
On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with "double-tap to zoom" functionality. As the [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) is ignored by all desktop browsers, using `width=device-width` will have no effect on the 300ms delay here.
|
||||
|
||||
To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the [`touch-action:manipulation` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay.
|
||||
|
||||
In the case of iOS, the currently suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay.
|
||||
In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay.
|
||||
|
||||
For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay).
|
||||
|
|
|
|||
|
|
@ -4,14 +4,16 @@ title: Tables
|
|||
group: content
|
||||
---
|
||||
|
||||
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
|
||||
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`, then extend with custom styles or our various included modifier classes.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Basic example
|
||||
## Examples
|
||||
|
||||
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
|
||||
|
||||
{% example html %}
|
||||
<table class="table">
|
||||
|
|
@ -46,7 +48,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
|
|||
</table>
|
||||
{% endexample %}
|
||||
|
||||
## Inverse table
|
||||
You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.
|
||||
|
||||
{% example html %}
|
||||
<table class="table table-inverse">
|
||||
|
|
@ -83,7 +85,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
|
|||
|
||||
## Table head options
|
||||
|
||||
Use one of two modifier classes to make `<thead>`s appear light or dark gray.
|
||||
Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray.
|
||||
|
||||
{% example html %}
|
||||
<table class="table">
|
||||
|
|
@ -438,6 +440,98 @@ Use contextual classes to color table rows or individual cells.
|
|||
</tr>
|
||||
{% endhighlight %}
|
||||
|
||||
Regular table background variants are not available with the inverse table, however, you may use [text or background utilities](/components/utilities/#contextual-colors-and-backgrounds) to achieve similar styles.
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-inverse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Column heading</th>
|
||||
<th>Column heading</th>
|
||||
<th>Column heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-primary">
|
||||
<th scope="row">1</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="bg-success">
|
||||
<th scope="row">3</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="bg-info">
|
||||
<th scope="row">5</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">6</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="bg-warning">
|
||||
<th scope="row">7</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">8</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="bg-danger">
|
||||
<th scope="row">9</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- On rows -->
|
||||
<tr class="bg-primary">...</tr>
|
||||
<tr class="bg-success">...</tr>
|
||||
<tr class="bg-warning">...</tr>
|
||||
<tr class="bg-danger">...</tr>
|
||||
<tr class="bg-info">...</tr>
|
||||
|
||||
<!-- On cells (`td` or `th`) -->
|
||||
<tr>
|
||||
<td class="bg-primary">...</td>
|
||||
<td class="bg-success">...</td>
|
||||
<td class="bg-warning">...</td>
|
||||
<td class="bg-danger">...</td>
|
||||
<td class="bg-info">...</td>
|
||||
</tr>
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
## Responsive tables
|
||||
|
||||
Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
|
||||
|
|
@ -564,6 +658,16 @@ For more information, read [this Stack Overflow answer](https://stackoverflow.co
|
|||
|
||||
|
||||
### Reflow
|
||||
Turn traditional tables on their side by using `table-reflow`. When using reflow, the table header becomes the first column of the table, the first row within the table body becomes the second column, the second row becomes the third column, etc.
|
||||
|
||||
{% callout warning %}
|
||||
#### Content order and complex tables
|
||||
|
||||
Beware that the `table-reflow` style changes the visual order of content. Make sure that you only apply this style to well-formed and simple data tables (and in particular, don't use this for layout tables) with appropriate `<th>` table header cells for each row and column.
|
||||
|
||||
In addition, this class will not work correctly for tables with cells that span multiple rows or columns (using `rowspan` or `colspan` attributes).
|
||||
|
||||
{% endcallout %}
|
||||
|
||||
{% example html %}
|
||||
<table class="table table-reflow">
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ These styles can be found within `_reboot.scss`, and the global variables are de
|
|||
|
||||
## Headings
|
||||
|
||||
All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
|
||||
All HTML headings, `<h1>` through `<h6>`, are available.
|
||||
|
||||
<div class="bd-example bd-example-type">
|
||||
<table class="table">
|
||||
|
|
@ -66,6 +66,17 @@ All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` cla
|
|||
<h6>h6. Bootstrap heading</h6>
|
||||
{% endhighlight %}
|
||||
|
||||
`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
|
||||
|
||||
{% example html %}
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
{% endexample %}
|
||||
|
||||
### Customizing headings
|
||||
|
||||
Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
|
||||
|
|
@ -138,7 +149,7 @@ While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant
|
|||
|
||||
## Text utilities
|
||||
|
||||
Change text alignment, transform, style, weight, and color with our [text utilities](http://localhost:9001/components/utilities/#text-alignment).
|
||||
Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment).
|
||||
|
||||
## Abbreviations
|
||||
|
||||
|
|
@ -211,7 +222,7 @@ Remove the default `list-style` and left margin on list items (immediate childre
|
|||
|
||||
### Inline
|
||||
|
||||
Place all list items on a single line with `display: inline-block;` and some basic margin between.
|
||||
Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-inline">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -462,6 +462,8 @@ var Button = (function ($) {
|
|||
input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
|
||||
$(this._element).trigger('change');
|
||||
}
|
||||
|
||||
input.focus();
|
||||
}
|
||||
} else {
|
||||
this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));
|
||||
|
|
@ -2060,13 +2062,7 @@ var Modal = (function ($) {
|
|||
}, {
|
||||
key: '_checkScrollbar',
|
||||
value: function _checkScrollbar() {
|
||||
var fullWindowWidth = window.innerWidth;
|
||||
if (!fullWindowWidth) {
|
||||
// workaround for missing window.innerWidth in IE8
|
||||
var documentElementRect = document.documentElement.getBoundingClientRect();
|
||||
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
||||
}
|
||||
this._isBodyOverflowing = document.body.clientWidth < fullWindowWidth;
|
||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth;
|
||||
this._scrollbarWidth = this._getScrollbarWidth();
|
||||
}
|
||||
}, {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -108,6 +108,8 @@
|
|||
input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
|
||||
$(this._element).trigger('change');
|
||||
}
|
||||
|
||||
input.focus();
|
||||
}
|
||||
} else {
|
||||
this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));
|
||||
|
|
|
|||
|
|
@ -427,13 +427,7 @@
|
|||
}, {
|
||||
key: '_checkScrollbar',
|
||||
value: function _checkScrollbar() {
|
||||
var fullWindowWidth = window.innerWidth;
|
||||
if (!fullWindowWidth) {
|
||||
// workaround for missing window.innerWidth in IE8
|
||||
var documentElementRect = document.documentElement.getBoundingClientRect();
|
||||
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
||||
}
|
||||
this._isBodyOverflowing = document.body.clientWidth < fullWindowWidth;
|
||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth;
|
||||
this._scrollbarWidth = this._getScrollbarWidth();
|
||||
}
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -115,9 +115,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../assets/js/vendor/holder.min.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
|
|
|
|||
|
|
@ -158,9 +158,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
<img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
|
||||
</div>
|
||||
<div class="col-md-5 pull-md-7">
|
||||
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
<img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
<img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -174,9 +174,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
|
||||
<script src="../../assets/js/vendor/holder.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -80,9 +80,6 @@ body {
|
|||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
.main .page-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
|
||||
<h1 class="page-header">Dashboard</h1>
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
<div class="row placeholders">
|
||||
<div class="col-xs-6 col-sm-3 placeholder">
|
||||
|
|
@ -224,9 +224,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
|
||||
<script src="../../assets/js/vendor/holder.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,8 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Bootstrap grid examples</h1>
|
||||
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
|
||||
</div>
|
||||
<h1>Bootstrap grid examples</h1>
|
||||
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
|
||||
|
||||
<h3>Five grid tiers</h3>
|
||||
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
|
||||
|
|
|
|||
|
|
@ -75,9 +75,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -45,9 +45,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -64,9 +64,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -104,9 +104,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -48,9 +48,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<div class="page-header m-t-1">
|
||||
<div class="m-t-1">
|
||||
<h1>Sticky footer with fixed navbar</h1>
|
||||
</div>
|
||||
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
|
||||
|
|
@ -73,9 +73,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<div class="page-header m-t-1">
|
||||
<div class="m-t-1">
|
||||
<h1>Sticky footer</h1>
|
||||
</div>
|
||||
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../assets/js/vendor/tether.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
|
|
|
|||
|
|
@ -191,15 +191,15 @@ For more information and usage guidelines, read [Windows Phone 8 and Device-Widt
|
|||
|
||||
As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.
|
||||
|
||||
## Modals, navbars, and virtual keyboards
|
||||
## Modals and dropdowns on mobile
|
||||
|
||||
### Overflow and scrolling
|
||||
|
||||
Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
|
||||
Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [Chrome bug #175502](https://bugs.chromium.org/p/chromium/issues/detail?id=175502) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
|
||||
|
||||
### Virtual keyboards
|
||||
### iOS text fields and scrolling
|
||||
|
||||
Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to `position: absolute;` or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.
|
||||
As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual `<input>` or a `<textarea>`, the `<body>` content underneath the modal will be scrolled instead of the modal itself. See [WebKit bug #153856](https://bugs.webkit.org/show_bug.cgi?id=153856).
|
||||
|
||||
### Navbar Dropdowns
|
||||
|
||||
|
|
@ -218,13 +218,13 @@ Bootstrap includes a workaround for this, although it is disabled by default. By
|
|||
|
||||
Even in some modern browsers, printing can be quirky.
|
||||
|
||||
In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See [issue #12078](https://github.com/twbs/bootstrap/issues/12078) for some details. Suggested workarounds:
|
||||
In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See [issue #12078](https://github.com/twbs/bootstrap/issues/12078) and [Chrome bug #273306](https://bugs.chromium.org/p/chromium/issues/detail?id=273306) for some details. Suggested workarounds:
|
||||
|
||||
* Embrace the extra-small grid and make sure your page looks acceptable under it.
|
||||
* Customize the value of the `$grid-breakpoints` Sass variable so that your printer paper is considered larger than extra-small.
|
||||
* Add custom media queries to change the grid size breakpoints for print media only.
|
||||
|
||||
Also, as of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) for more details. One potential workaround is the following CSS:
|
||||
Also, as of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS:
|
||||
|
||||
{% highlight css %}
|
||||
@media print {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ Bootstrap uses [Autoprefixer][autoprefixer] (included in our Gruntfile and build
|
|||
|
||||
## Local documentation
|
||||
|
||||
Running our documentation locally requires the use of Jekyll, a decently flexible static site generator that provides us basic includes, Markdown-based files, templates, and more. Here's how to get it started:
|
||||
Running our documentation locally requires the use of Jekyll, a decently flexible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here's how to get it started:
|
||||
|
||||
1. Run through the [tooling setup](#tooling-setup) above to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
|
||||
2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
|
||||
|
|
|
|||
|
|
@ -28,12 +28,13 @@ Do the same for any variable you need to override, including the global options
|
|||
|
||||
You can find and customize these variables for key global options in our `_variables.scss` file.
|
||||
|
||||
| Variable | Values | Description |
|
||||
| --------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
|
||||
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities. |
|
||||
| `$enable-flex` | `true` or `false` (default) | Swaps `float` and `display: table` styles for `display: flex`. |
|
||||
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. |
|
||||
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
|
||||
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
|
||||
| `$enable-hover-media-query` | `true` or `false` (default) | ... |
|
||||
| Variable | Values | Description |
|
||||
| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities. |
|
||||
| `$enable-flex` | `true` or `false` (default) | Swaps `float` and `display: table` styles for `display: flex`. |
|
||||
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. |
|
||||
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
|
||||
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
|
||||
| `$enable-hover-media-query` | `true` or `false` (default) | ... |
|
||||
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.col-md-1` etc.). |
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ layout: home
|
|||
title: Bootstrap · The world's most popular mobile-first and responsive front-end framework.
|
||||
---
|
||||
|
||||
<main class="bd-masthead" id="content" role="main">
|
||||
<main class="bd-masthead" id="content">
|
||||
<div class="container">
|
||||
<span class="bd-booticon outline">B</span>
|
||||
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
|
||||
|
|
@ -87,7 +87,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
|
|||
<a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a>
|
||||
</p>
|
||||
|
||||
<img class="img-fluid center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
|
||||
<img class="img-fluid m-x-auto" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ $container-max-widths: (
|
|||
md: 720px,
|
||||
lg: 940px,
|
||||
xl: 1140px
|
||||
) !default;
|
||||
);
|
||||
{% endhighlight %}
|
||||
|
||||
### Mixins
|
||||
|
|
@ -470,7 +470,7 @@ $container-max-widths: (
|
|||
sm: 420px,
|
||||
md: 720px,
|
||||
lg: 940px
|
||||
) !default;
|
||||
);
|
||||
{% endhighlight %}
|
||||
|
||||
Save your changes and recompile to have a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints.
|
||||
|
|
|
|||
|
|
@ -111,3 +111,46 @@ Once again, these media queries are also available via Sass mixins:
|
|||
@include media-breakpoint-down(md) { ... }
|
||||
@include media-breakpoint-down(lg) { ... }
|
||||
{% endhighlight %}
|
||||
|
||||
We also have media between the breakpoint's minimum and maximum widths for only the given screen size:
|
||||
|
||||
{% highlight scss %}
|
||||
// Extra small devices (portrait phones, less than 544px)
|
||||
@media (max-width: 543px) { ... }
|
||||
|
||||
// Small devices (landscape phones, 544px and up)
|
||||
@media (min-width: 544px) and (max-width: 767px) { ... }
|
||||
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (min-width: 768px) and (max-width: 991px) { ... }
|
||||
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (min-width: 992px) and (max-width: 1199px) { ... }
|
||||
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (min-width: 1200px) { ... }
|
||||
{% endhighlight %}
|
||||
|
||||
These media queries are also available via Sass mixins:
|
||||
|
||||
{% highlight scss %}
|
||||
@include media-breakpoint-only(xs) { ... }
|
||||
@include media-breakpoint-only(sm) { ... }
|
||||
@include media-breakpoint-only(md) { ... }
|
||||
@include media-breakpoint-only(lg) { ... }
|
||||
@include media-breakpoint-only(xl) { ... }
|
||||
{% endhighlight %}
|
||||
|
||||
And finally media that spans multiple breakpoint widths:
|
||||
|
||||
{% highlight scss %}
|
||||
// Example
|
||||
// Medium devices (tablets, 768px and up) and Large devices (desktops, 992px and up)
|
||||
@media (min-width: 768px) and (max-width: 1199px) { ... }
|
||||
{% endhighlight %}
|
||||
|
||||
The Sass mixin for the above example look like that shown beneath:
|
||||
|
||||
{% highlight scss %}
|
||||
@include media-breakpoint-between(md, lg) { ... }
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
|
|||
- Overhauled grid mixins to merge `make-col-span` into `make-col` for a singular mixin.
|
||||
- Added a new `sm` grid tier below `768px` for more granular control. We now have `xs`, `sm`, `md`, `lg`, and `xl`. This also means every tier has been bumped up one level (so `.col-md-6` in v3 is now `.col-lg-6` in v4).
|
||||
- Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by `12` at their max width.
|
||||
- Grid breakpoints and container widths are now handled via Sass maps instead of a handful of separate variables. These replace the `@screen-*` variables entirely and allow you to fully customize the grid tiers.
|
||||
- Grid breakpoints and container widths are now handled via Sass maps (`$grid-breakpoints` and `$container-max-widths`) instead of a handful of separate variables. These replace the `@screen-*` variables entirely and allow you to fully customize the grid tiers.
|
||||
- Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have `@include media-breakpoint-up/down/only`. Now, instead of writing `@media (min-width: @screen-sm-min) { ... }`, you can write `@include media-breakpoint-up(sm) { ... }`.
|
||||
|
||||
### Components
|
||||
|
|
@ -64,7 +64,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
|||
### Typography
|
||||
|
||||
- Moved all `.text-` utilities to the `_utilities.scss` file.
|
||||
- Dropped the `.page-header` class entirely.
|
||||
- Dropped `.page-header` as, aside from the border, all it's styles can be applied via utilities.
|
||||
- `.dl-horizontal` has been dropped. Instead, use `.row` on `<dl>` and use grid column classes (or mixins) on its `<dt>` and `<dd>` children.
|
||||
- Custom `<blockquote>` styling has moved to classes—`.blockquote` and the `.blockquote-reverse` modifier.
|
||||
|
||||
|
|
@ -87,22 +87,30 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
|||
- Renamed `.control-label` to `.form-control-label`.
|
||||
- Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively.
|
||||
- Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now.
|
||||
- Dropped `.help-block`. Use the `.text-muted` utility class instead.
|
||||
- Dropped `.help-block` and replaced it with `.form-text` for block-level help text. For inline help text and other flexible options, use utility classes like `.text-muted`.
|
||||
- Horizontal forms overhauled:
|
||||
- Dropped the `.form-horizontal` class requirement.
|
||||
- `.form-group` no longer mixins the `.row` class, so it's now required for grid layouts.
|
||||
- `.form-group` no longer applies styles from the `.row` via mixin, so `.row` is now required for horizontal grid layouts (e.g., `<div class="form-group row">`).
|
||||
- Added new `.form-control-label` class to vertically center labels with `.form-control`s.
|
||||
|
||||
### Buttons
|
||||
|
||||
- Renamed `.btn-default` to `.btn-secondary`.
|
||||
- Dropped the `.btn-xs` class entirely.
|
||||
- Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
|
||||
- The [stateful button](http://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||||
- Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
|
||||
|
||||
### Button group
|
||||
|
||||
- Dropped the `.btn-group-xs` class entirely.
|
||||
- Dropped the `.btn-group-xs` class entirely given removal of `.btn-xs`.
|
||||
|
||||
### Dropdowns
|
||||
|
||||
- Switched from parent selectors to singular classes for all components, modifiers, etc.
|
||||
- Dropdowns can be built with `<div>`s or `<ul>`s now.
|
||||
- Rebuilt dropdown styles and markup to provide easy, built-in support for `<a>` and `<button>` based dropdown items.
|
||||
- Dropdown items now require `.dropdown-item`.
|
||||
- Dropdown toggles no longer require an explicit `<span class="caret"></span>`; this is now provided automatically via CSS's `::after` on `.dropdown-toggle`.
|
||||
|
||||
### Grid system
|
||||
|
||||
|
|
@ -126,9 +134,10 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
|||
|
||||
- An explicit class, `.breadcrumb-item`, is now required on the descendants of `.breadcrumb`s
|
||||
|
||||
### Badges
|
||||
### Labels and badges
|
||||
|
||||
- Dropped the badge component. Use the `.label-pill` modifier together with the label component instead.
|
||||
- Renamed `.label` to `.tag` to disambiguate from the `<label>` element.
|
||||
- Dropped the badge component. Use the `.tag-pill` modifier together with the label component instead.
|
||||
|
||||
### Panels, thumbnails, and wells
|
||||
|
||||
|
|
@ -202,14 +211,15 @@ TODO: audit classes in v3 that aren't present in v4
|
|||
|
||||
### Responsive utilities
|
||||
|
||||
The following deprecated variables have been removed in v4.0.0:
|
||||
The following variables have been removed in v4.0.0. Use the `media-breakpoint-up()`, `media-breakpoint-down()`, or `media-breakpoint-only()` Sass mixins or the `$grid-breakpoints` Sass map instead of:
|
||||
|
||||
* `@screen-phone`, `@screen-tablet`, `@screen-desktop`, `@screen-lg-desktop`. Use the more abstract `$screen-{xs,sm,md,lg,xl}-*` variables instead.
|
||||
* `@screen-sm`, `@screen-md`, `@screen-lg`. Use the more clearly named `$screen-{xs,sm,md,lg,xl}-min` variables instead.
|
||||
* `@screen-xs`, `@screen-xs-min`. The extra small breakpoint has no lower bound, so these variables were logically absurd. Reformulate your expression in terms of `$screen-xs-max` instead.
|
||||
* `@screen-phone`, `@screen-tablet`, `@screen-desktop`, `@screen-lg-desktop`.
|
||||
* `@screen-xs`, `@screen-sm`, `@screen-md`, `@screen-lg`.
|
||||
* `@screen-xs-min`, `@screen-xs-max`, `@screen-sm-min`, `@screen-sm-max`, `@screen-md-min`, `@screen-md-max`, `@screen-lg-min`, `@screen-lg-max`
|
||||
|
||||
The responsive utility classes have also been overhauled.
|
||||
|
||||
- The `.hidden` and `.show` classes have been removed because they conflicted with jQuery's `$(...).hide()` and `$(...).show()` methods. Instead, try toggling the `[hidden]` attribute, use inline styles like `style="display: none;"` and `style="display: block;"`, or toggle the `.invisible` class.
|
||||
- The old classes (`.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`) are gone.
|
||||
- They have been replaced by `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`.
|
||||
- The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or larger (e.g. `.hidden-md-up` hides an element on medium, large, and extra-large devices).
|
||||
|
|
@ -222,7 +232,6 @@ Note that the changes to the grid breakpoints in v4 means that you'll need to go
|
|||
## Misc notes to prioritize
|
||||
|
||||
- Removed the `min--moz-device-pixel-ratio` typo hack for retina media queries
|
||||
- Dropped `.hidden` and `.show` because they conflict with jQuery's `$(...).hide()` and `$(...).show()` methods.
|
||||
- Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility).
|
||||
|
||||
TODO: audit list of stuff in v3 that was marked as deprecated
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,24 +1,27 @@
|
|||
[
|
||||
# Docs: https://saucelabs.com/docs/platforms/webdriver
|
||||
# Docs: https://wiki.saucelabs.com/display/DOCS/Platform+Configurator
|
||||
|
||||
{
|
||||
browserName: "safari",
|
||||
platform: "OS X 10.10"
|
||||
platform: "OS X 10.11"
|
||||
},
|
||||
{
|
||||
browserName: "chrome",
|
||||
platform: "OS X 10.10"
|
||||
platform: "OS X 10.11",
|
||||
version: "latest"
|
||||
},
|
||||
{
|
||||
browserName: "firefox",
|
||||
platform: "OS X 10.10"
|
||||
platform: "OS X 10.11",
|
||||
version: "latest"
|
||||
},
|
||||
|
||||
# Mac Opera not currently supported by Sauce Labs
|
||||
|
||||
{
|
||||
browserName: "MicrosoftEdge",
|
||||
platform: "Windows 10"
|
||||
platform: "Windows 10",
|
||||
version: "latest"
|
||||
},
|
||||
{
|
||||
browserName: "internet explorer",
|
||||
|
|
@ -38,11 +41,13 @@
|
|||
|
||||
{
|
||||
browserName: "chrome",
|
||||
platform: "Windows 8.1"
|
||||
platform: "Windows 10",
|
||||
version: "latest"
|
||||
},
|
||||
{
|
||||
browserName: "firefox",
|
||||
platform: "Windows 8.1"
|
||||
platform: "Windows 10",
|
||||
version: "latest"
|
||||
},
|
||||
|
||||
# Win Opera 15+ not currently supported by Sauce Labs
|
||||
|
|
@ -50,7 +55,7 @@
|
|||
{
|
||||
browserName: "iphone",
|
||||
platform: "OS X 10.10",
|
||||
version: "9.1"
|
||||
version: "latest"
|
||||
},
|
||||
|
||||
# iOS Chrome not currently supported by Sauce Labs
|
||||
|
|
@ -58,18 +63,21 @@
|
|||
# Linux (unofficial)
|
||||
{
|
||||
browserName: "chrome",
|
||||
platform: "Linux"
|
||||
platform: "Linux",
|
||||
version: "latest"
|
||||
},
|
||||
{
|
||||
browserName: "firefox",
|
||||
platform: "Linux"
|
||||
}
|
||||
platform: "Linux",
|
||||
version: "latest"
|
||||
},
|
||||
|
||||
# Android Chrome not currently supported by Sauce Labs
|
||||
# Android v5.0+ not currently supported by Sauce Labs
|
||||
# { # Android Browser
|
||||
# browserName: "android",
|
||||
# version: "5.0",
|
||||
# platform: "Linux"
|
||||
# }
|
||||
# Android
|
||||
{
|
||||
platform: "Linux",
|
||||
browserName: "android",
|
||||
deviceName: "Android Emulator",
|
||||
version: "latest",
|
||||
deviceType: "phone"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -95,6 +95,8 @@ var Button = (function ($) {
|
|||
input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
|
||||
$(this._element).trigger('change');
|
||||
}
|
||||
|
||||
input.focus();
|
||||
}
|
||||
} else {
|
||||
this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -410,13 +410,7 @@ var Modal = (function ($) {
|
|||
}, {
|
||||
key: '_checkScrollbar',
|
||||
value: function _checkScrollbar() {
|
||||
var fullWindowWidth = window.innerWidth;
|
||||
if (!fullWindowWidth) {
|
||||
// workaround for missing window.innerWidth in IE8
|
||||
var documentElementRect = document.documentElement.getBoundingClientRect();
|
||||
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
||||
}
|
||||
this._isBodyOverflowing = document.body.clientWidth < fullWindowWidth;
|
||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth;
|
||||
this._scrollbarWidth = this._getScrollbarWidth();
|
||||
}
|
||||
}, {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -92,7 +92,10 @@ const Button = (($) => {
|
|||
input.checked = !$(this._element).hasClass(ClassName.ACTIVE)
|
||||
$(this._element).trigger('change')
|
||||
}
|
||||
|
||||
input.focus()
|
||||
}
|
||||
|
||||
} else {
|
||||
this._element.setAttribute('aria-pressed',
|
||||
!$(this._element).hasClass(ClassName.ACTIVE))
|
||||
|
|
|
|||
|
|
@ -223,6 +223,7 @@ const Modal = (($) => {
|
|||
}
|
||||
|
||||
this._element.style.display = 'block'
|
||||
this._element.removeAttribute('aria-hidden')
|
||||
this._element.scrollTop = 0
|
||||
|
||||
if (transition) {
|
||||
|
|
@ -290,6 +291,7 @@ const Modal = (($) => {
|
|||
|
||||
_hideModal() {
|
||||
this._element.style.display = 'none'
|
||||
this._element.setAttribute('aria-hidden', 'true')
|
||||
this._showBackdrop(() => {
|
||||
$(document.body).removeClass(ClassName.OPEN)
|
||||
this._resetAdjustments()
|
||||
|
|
@ -408,13 +410,7 @@ const Modal = (($) => {
|
|||
}
|
||||
|
||||
_checkScrollbar() {
|
||||
let fullWindowWidth = window.innerWidth
|
||||
if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
|
||||
let documentElementRect = document.documentElement.getBoundingClientRect()
|
||||
fullWindowWidth =
|
||||
documentElementRect.right - Math.abs(documentElementRect.left)
|
||||
}
|
||||
this._isBodyOverflowing = document.body.clientWidth < fullWindowWidth
|
||||
this._isBodyOverflowing = document.body.clientWidth < window.innerWidth
|
||||
this._scrollbarWidth = this._getScrollbarWidth()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,10 @@
|
|||
'undelegate'
|
||||
]
|
||||
for (var i = 0; i < eventAliases.length; i++) {
|
||||
$.fn[eventAliases[i]] = undefined
|
||||
var eventAlias = eventAliases[i]
|
||||
$.fn[eventAlias] = function () {
|
||||
throw new Error('Using the ".' + eventAlias + '()" method is not allowed, so that Bootstrap can be compatible with custom jQuery builds which exclude the "event aliases" module that defines said method. See https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#js')
|
||||
}
|
||||
}
|
||||
})()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -233,6 +233,23 @@ $(function () {
|
|||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should remove aria-hidden attribute when shown, add it back when hidden', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test" aria-hidden="true"/>')
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.notOk($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute removed')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.ok($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute added')
|
||||
assert.strictEqual($('#modal-test').attr('aria-hidden'), 'true', 'correct aria-hidden="true" added')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue