mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Merge branch 'v4-dev' into btn-active
This commit is contained in:
XhmikosR
GitHub
commit
c090c79a70
12
.babelrc
12
.babelrc
@ -1,12 +0,0 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"es2015",
|
||||
{
|
||||
"loose": true,
|
||||
"modules": false
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": ["external-helpers"]
|
||||
}
|
||||
16
.babelrc.js
Normal file
16
.babelrc.js
Normal file
@ -0,0 +1,16 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'env',
|
||||
{
|
||||
loose: true,
|
||||
modules: false,
|
||||
exclude: ['transform-es2015-typeof-symbol']
|
||||
}
|
||||
]
|
||||
],
|
||||
plugins: [
|
||||
process.env.ROLLUP && 'external-helpers',
|
||||
process.env.PLUGINS && 'transform-es2015-modules-strip'
|
||||
].filter(Boolean)
|
||||
};
|
||||
2
.gitattributes
vendored
2
.gitattributes
vendored
@ -4,10 +4,10 @@
|
||||
*.js text eol=lf
|
||||
*.json text eol=lf
|
||||
*.md text eol=lf
|
||||
*.py text eol=lf
|
||||
*.rb text eol=lf
|
||||
*.scss text eol=lf
|
||||
*.svg text eol=lf
|
||||
*.txt text eol=lf
|
||||
*.yml text eol=lf
|
||||
# Don't diff or textually merge source maps
|
||||
*.map binary
|
||||
|
||||
10
.github/CONTRIBUTING.md
vendored
10
.github/CONTRIBUTING.md
vendored
@ -57,7 +57,7 @@ Good bug reports are extremely helpful, so thanks!
|
||||
|
||||
Guidelines for bug reports:
|
||||
|
||||
0. **Validate and lint your code** — [validate your HTML](https://html5.validator.nu)
|
||||
0. **Validate and lint your code** — [validate your HTML](https://html5.validator.nu/)
|
||||
and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
|
||||
problem isn't caused by a simple error in your own code.
|
||||
|
||||
@ -151,7 +151,7 @@ documentation source files and is managed separately by the Bootstrap Core Team.
|
||||
Adhering to the following process is the best way to get your work
|
||||
included in the project:
|
||||
|
||||
1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
|
||||
1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your fork,
|
||||
and configure the remotes:
|
||||
|
||||
```bash
|
||||
@ -180,7 +180,7 @@ included in the project:
|
||||
4. Commit your changes in logical chunks. Please adhere to these [git commit
|
||||
message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
|
||||
or your code is unlikely be merged into the main project. Use Git's
|
||||
[interactive rebase](https://help.github.com/articles/interactive-rebase)
|
||||
[interactive rebase](https://help.github.com/articles/about-git-rebase/)
|
||||
feature to tidy up your commits before making them public.
|
||||
|
||||
5. Locally merge (or rebase) the upstream development branch into your topic branch:
|
||||
@ -195,7 +195,7 @@ included in the project:
|
||||
git push origin <topic-branch-name>
|
||||
```
|
||||
|
||||
7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
|
||||
7. [Open a Pull Request](https://help.github.com/articles/about-pull-requests/)
|
||||
with a clear title and description against the `master` branch.
|
||||
|
||||
**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
|
||||
@ -211,7 +211,7 @@ includes code changes) and under the terms of the
|
||||
* Push the revised version to your pull request's branch and post a comment on the pull request saying that you've fixed the problem(s). One of the Bootstrap Core Team members will then come along and reopen your pull request.
|
||||
* Or you can just open a new pull request for your revised version.
|
||||
|
||||
[@twbs-savage](https://github.com/twbs-savage) is a Bootstrap bot that automatically runs cross-browser tests (via [Sauce](https://saucelabs.com) and Travis CI) on JavaScript pull requests. Savage will leave a comment on pull requests stating whether cross-browser JS tests passed or failed, with a link to the full Travis build details. If your pull request fails, check the Travis log to see which browser + OS combinations failed. Each browser test in the Travis log includes a link to a Sauce page with details about the test. On those details pages, you can watch a screencast of the test run to see exactly which unit tests failed.
|
||||
[@twbs-savage](https://github.com/twbs-savage) is a Bootstrap bot that automatically runs cross-browser tests (via [Sauce](https://saucelabs.com/) and Travis CI) on JavaScript pull requests. Savage will leave a comment on pull requests stating whether cross-browser JS tests passed or failed, with a link to the full Travis build details. If your pull request fails, check the Travis log to see which browser + OS combinations failed. Each browser test in the Travis log includes a link to a Sauce page with details about the test. On those details pages, you can watch a screencast of the test run to see exactly which unit tests failed.
|
||||
|
||||
|
||||
## Code guidelines
|
||||
|
||||
4
.github/ISSUE_TEMPLATE.md
vendored
4
.github/ISSUE_TEMPLATE.md
vendored
@ -1,7 +1,7 @@
|
||||
Before opening an issue:
|
||||
|
||||
- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
|
||||
- [Validate](https://validator.w3.org/nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
|
||||
- [Validate](https://html5.validator.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)
|
||||
|
||||
@ -14,7 +14,7 @@ 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)
|
||||
- Reduced test cases and potential fixes using [JS Bin](https://jsbin.com/)
|
||||
|
||||
When suggesting a feature, include:
|
||||
|
||||
|
||||
21
.travis.yml
21
.travis.yml
@ -8,27 +8,24 @@ node_js:
|
||||
- "8"
|
||||
before_install:
|
||||
- if [[ `npm -v` != 5* ]]; then npm install -g npm@5; fi
|
||||
- "export TRAVIS_COMMIT_MSG=\"`git log --format=%B --no-merges -n 1`\""
|
||||
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip browser\]'; export TWBS_DO_BROWSER=$?; true
|
||||
install:
|
||||
- bundle install --deployment --jobs=3 --retry=3
|
||||
- npm install
|
||||
script:
|
||||
- npm test
|
||||
- if [ "$TWBS_TEST" = browser -a "$SAUCE_ACCESS_KEY" ]; then npm run js-test-cloud; fi
|
||||
after_success:
|
||||
- if [ "$TRAVIS_REPO_SLUG" = twbs-savage/bootstrap ]; then npm run docs-upload-preview; fi
|
||||
stages:
|
||||
- test
|
||||
- name: browser
|
||||
if: type = push
|
||||
jobs:
|
||||
include:
|
||||
- stage: browser
|
||||
node_js: 8
|
||||
script: if ! git log --format=%B --no-merges -n 1 | grep '\[skip browser\]'; then npm test && npm run js-test-cloud; fi
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
- vendor/bundle
|
||||
env:
|
||||
- TWBS_TEST=core
|
||||
- TWBS_TEST=browser
|
||||
matrix:
|
||||
exclude:
|
||||
- node_js: "4"
|
||||
env: TWBS_TEST=browser
|
||||
notifications:
|
||||
slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH
|
||||
webhooks:
|
||||
|
||||
4
Gemfile
4
Gemfile
@ -1,9 +1,9 @@
|
||||
source 'https://rubygems.org'
|
||||
|
||||
group :development, :test do
|
||||
gem 'jekyll', '~> 3.5.1'
|
||||
gem 'jekyll', '~> 3.6.0'
|
||||
gem 'jekyll-redirect-from', '~> 0.12.1'
|
||||
gem 'jekyll-sitemap', '~> 1.1.1'
|
||||
gem 'jekyll-toc', '~> 0.3.0.pre1'
|
||||
gem 'jekyll-toc', '~> 0.3.0'
|
||||
gem 'scss_lint', '~> 0.54.0'
|
||||
end
|
||||
|
||||
26
Gemfile.lock
26
Gemfile.lock
@ -7,16 +7,16 @@ GEM
|
||||
ffi (1.9.18)
|
||||
ffi (1.9.18-x64-mingw32)
|
||||
forwardable-extended (2.6.0)
|
||||
jekyll (3.5.2)
|
||||
jekyll (3.6.0)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
kramdown (~> 1.3)
|
||||
kramdown (~> 1.14)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (~> 1.7)
|
||||
rouge (>= 1.7, < 3)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-redirect-from (0.12.1)
|
||||
jekyll (~> 3.3)
|
||||
@ -28,25 +28,25 @@ GEM
|
||||
nokogiri (~> 1.6)
|
||||
jekyll-watch (1.5.0)
|
||||
listen (~> 3.0, < 3.1)
|
||||
kramdown (1.14.0)
|
||||
kramdown (1.15.0)
|
||||
liquid (4.0.0)
|
||||
listen (3.0.8)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.2.0)
|
||||
nokogiri (1.8.0)
|
||||
mini_portile2 (~> 2.2.0)
|
||||
nokogiri (1.8.0-x64-mingw32)
|
||||
mini_portile2 (~> 2.2.0)
|
||||
mini_portile2 (2.3.0)
|
||||
nokogiri (1.8.1)
|
||||
mini_portile2 (~> 2.3.0)
|
||||
nokogiri (1.8.1-x64-mingw32)
|
||||
mini_portile2 (~> 2.3.0)
|
||||
pathutil (0.14.0)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (3.0.0)
|
||||
rake (12.0.0)
|
||||
rake (12.1.0)
|
||||
rb-fsevent (0.10.2)
|
||||
rb-inotify (0.9.10)
|
||||
ffi (>= 0.5.0, < 2)
|
||||
rouge (1.11.1)
|
||||
rouge (2.2.1)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.4.25)
|
||||
scss_lint (0.54.0)
|
||||
@ -58,10 +58,10 @@ PLATFORMS
|
||||
x64-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 3.5.1)
|
||||
jekyll (~> 3.6.0)
|
||||
jekyll-redirect-from (~> 0.12.1)
|
||||
jekyll-sitemap (~> 1.1.1)
|
||||
jekyll-toc (~> 0.3.0.pre1)
|
||||
jekyll-toc (~> 0.3.0)
|
||||
scss_lint (~> 0.54.0)
|
||||
|
||||
BUNDLED WITH
|
||||
|
||||
26
README.md
26
README.md
@ -1,5 +1,5 @@
|
||||
<p align="center">
|
||||
<a href="https://getbootstrap.com">
|
||||
<a href="https://getbootstrap.com/">
|
||||
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width=72 height=72>
|
||||
</a>
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
<p align="center">
|
||||
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
|
||||
<br>
|
||||
<a href="https://getbootstrap.com/docs/4.0"><strong>Explore Bootstrap docs »</strong></a>
|
||||
<a href="https://getbootstrap.com/docs/4.0/"><strong>Explore Bootstrap docs »</strong></a>
|
||||
<br>
|
||||
<br>
|
||||
<a href="https://themes.getbootstrap.com">Bootstrap Themes</a>
|
||||
<a href="https://themes.getbootstrap.com/">Bootstrap Themes</a>
|
||||
·
|
||||
<a href="https://jobs.getbootstrap.com">Job Board</a>
|
||||
<a href="https://jobs.getbootstrap.com/">Job Board</a>
|
||||
·
|
||||
<a href="https://blog.getbootstrap.com">Blog</a>
|
||||
<a href="https://blog.getbootstrap.com/">Blog</a>
|
||||
</p>
|
||||
</p>
|
||||
|
||||
@ -40,16 +40,16 @@ Several quick start options are available:
|
||||
|
||||
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip)
|
||||
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
|
||||
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-beta`
|
||||
- Install with [yarn](https://yarnpkg.com): `yarn add bootstrap@4.0.0-beta`
|
||||
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-beta`
|
||||
- Install with [NuGet](https://www.nuget.org): CSS: `Install-Package bootstrap -Pre` Sass: `Install-Package bootstrap.sass -Pre` (`-Pre` is only required until Bootstrap v4 has a stable release).
|
||||
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@4.0.0-beta`
|
||||
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@4.0.0-beta`
|
||||
- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:4.0.0-beta`
|
||||
- Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap -Pre` Sass: `Install-Package bootstrap.sass -Pre` (`-Pre` is only required until Bootstrap v4 has a stable release).
|
||||
|
||||
Read the [Getting started page](https://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
|
||||
|
||||
## Status
|
||||
|
||||
[](https://bootstrap-slack.herokuapp.com)
|
||||
[](https://bootstrap-slack.herokuapp.com/)
|
||||
[](https://www.npmjs.com/package/bootstrap)
|
||||
[](https://rubygems.org/gems/bootstrap)
|
||||
[](https://travis-ci.org/twbs/bootstrap)
|
||||
@ -125,8 +125,8 @@ Editor preferences are available in the [editor config](https://github.com/twbs/
|
||||
Get updates on Bootstrap's development and chat with the project maintainers and community members.
|
||||
|
||||
- Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
|
||||
- Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com).
|
||||
- Join [the official Slack room](https://bootstrap-slack.herokuapp.com).
|
||||
- Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
|
||||
- Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
|
||||
- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
|
||||
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)).
|
||||
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
|
||||
@ -137,7 +137,7 @@ Get updates on Bootstrap's development and chat with the project maintainers and
|
||||
|
||||
For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
|
||||
|
||||
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
|
||||
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
|
||||
|
||||
|
||||
## Creators
|
||||
|
||||
25
_config.yml
25
_config.yml
@ -16,15 +16,15 @@ baseurl: ""
|
||||
url: "https://getbootstrap.com"
|
||||
encoding: UTF-8
|
||||
exclude:
|
||||
- .git
|
||||
- .github
|
||||
- .git/
|
||||
- .github/
|
||||
- assets/scss/
|
||||
- build
|
||||
- js
|
||||
- node_modules
|
||||
- nuget
|
||||
- scss
|
||||
- vendor
|
||||
- build/
|
||||
- js/
|
||||
- node_modules/
|
||||
- nuget/
|
||||
- scss/
|
||||
- vendor/
|
||||
- bower.json
|
||||
- composer.json
|
||||
- Gemfile
|
||||
@ -34,6 +34,7 @@ exclude:
|
||||
- package.json
|
||||
- package-lock.json
|
||||
- sache.json
|
||||
- twbsconfig.yml
|
||||
|
||||
plugins:
|
||||
- jekyll-redirect-from
|
||||
@ -53,15 +54,15 @@ current_version: 4.0.0-beta
|
||||
docs_version: 4.0
|
||||
repo: "https://github.com/twbs/bootstrap"
|
||||
slack: "https://bootstrap-slack.herokuapp.com"
|
||||
download:
|
||||
source: "https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip"
|
||||
dist: "https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta/bootstrap-4.0.0-beta-dist.zip"
|
||||
|
||||
blog: "https://blog.getbootstrap.com"
|
||||
expo: "https://expo.getbootstrap.com"
|
||||
jobs: "https://jobs.getbootstrap.com"
|
||||
themes: "https://themes.getbootstrap.com"
|
||||
|
||||
download:
|
||||
source: "https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip"
|
||||
dist: "https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta/bootstrap-4.0.0-beta-dist.zip"
|
||||
|
||||
cdn:
|
||||
# See https://www.srihash.org for info on how to generate the hashes
|
||||
css: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
browser: >
|
||||
Edge
|
||||
summary: >
|
||||
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||
Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||
upstream_bug: >
|
||||
UserVoice#15944476
|
||||
origin: >
|
||||
@ -62,7 +62,7 @@
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||
Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||
upstream_bug: >
|
||||
Mozilla#854148
|
||||
origin: >
|
||||
@ -102,7 +102,7 @@
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||
Implement the [`of <selector-list>` clause](https://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||
upstream_bug: >
|
||||
Chromium#304163
|
||||
origin: >
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
img: vogue
|
||||
|
||||
- name: Riot Design
|
||||
url: http://riotdesign.eu/en/
|
||||
url: https://riot.design/en/
|
||||
expo_url: https://expo.getbootstrap.com/2014/03/13/riot-design/
|
||||
img: riot
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/">Latest (4.x)</a>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<form class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
|
||||
<button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
{% include icons/menu.svg class="" width="30" height="30" %}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 262 KiB After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 4.2 KiB |
@ -5,8 +5,23 @@
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', function () {
|
||||
navigator.serviceWorker.register('/sw.js').then(function (registration) {
|
||||
navigator.serviceWorker.register('/sw.js').then(function (registration) { // eslint-disable-line compat/compat
|
||||
console.log('ServiceWorker registration successful with scope: ', registration.scope)
|
||||
registration.onupdatefound = function () {
|
||||
var installingWorker = registration.installing
|
||||
installingWorker.onstatechange = function () {
|
||||
switch (installingWorker.state) {
|
||||
case 'installed':
|
||||
if (navigator.serviceWorker.controller) { // eslint-disable-line compat/compat
|
||||
console.log('new update available')
|
||||
location.reload(true)
|
||||
}
|
||||
break
|
||||
|
||||
default:
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch(function (err) {
|
||||
console.log('ServiceWorker registration failed: ', err)
|
||||
})
|
||||
|
||||
4
assets/js/vendor/anchor.min.js
vendored
4
assets/js/vendor/anchor.min.js
vendored
File diff suppressed because one or more lines are too long
@ -62,5 +62,15 @@
|
||||
.css .o + .nt,
|
||||
.css .nt + .nt { color: #999; }
|
||||
|
||||
.language-bash::before { color: #009; content: "$ "; user-select: none; }
|
||||
.language-powershell::before { color: #009; content: "PM> "; user-select: none; }
|
||||
.language-bash::before,
|
||||
.language-sh::before {
|
||||
color: #009;
|
||||
content: "$ ";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.language-powershell::before {
|
||||
color: #009;
|
||||
content: "PM> ";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -11,34 +11,30 @@
|
||||
|
||||
/* global Set */
|
||||
|
||||
var fs = require('fs')
|
||||
var path = require('path')
|
||||
var sh = require('shelljs')
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const sh = require('shelljs')
|
||||
sh.config.fatal = true
|
||||
var sed = sh.sed
|
||||
const sed = sh.sed
|
||||
|
||||
// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
|
||||
RegExp.quote = function (string) {
|
||||
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
|
||||
}
|
||||
RegExp.quoteReplacement = function (string) {
|
||||
return string.replace(/[$]/g, '$$')
|
||||
}
|
||||
RegExp.quote = (string) => string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
|
||||
RegExp.quoteReplacement = (string) => string.replace(/[$]/g, '$$')
|
||||
|
||||
var DRY_RUN = false
|
||||
const DRY_RUN = false
|
||||
|
||||
function walkAsync(directory, excludedDirectories, fileCallback, errback) {
|
||||
if (excludedDirectories.has(path.parse(directory).base)) {
|
||||
return
|
||||
}
|
||||
fs.readdir(directory, function (err, names) {
|
||||
fs.readdir(directory, (err, names) => {
|
||||
if (err) {
|
||||
errback(err)
|
||||
return
|
||||
}
|
||||
names.forEach(function (name) {
|
||||
var filepath = path.join(directory, name)
|
||||
fs.lstat(filepath, function (err, stats) {
|
||||
names.forEach((name) => {
|
||||
const filepath = path.join(directory, name)
|
||||
fs.lstat(filepath, (err, stats) => {
|
||||
if (err) {
|
||||
process.nextTick(errback, err)
|
||||
return
|
||||
@ -60,19 +56,19 @@ function walkAsync(directory, excludedDirectories, fileCallback, errback) {
|
||||
function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) {
|
||||
original = new RegExp(RegExp.quote(original), 'g')
|
||||
replacement = RegExp.quoteReplacement(replacement)
|
||||
var updateFile = !DRY_RUN ? function (filepath) {
|
||||
const updateFile = !DRY_RUN ? (filepath) => {
|
||||
if (allowedExtensions.has(path.parse(filepath).ext)) {
|
||||
sed('-i', original, replacement, filepath)
|
||||
}
|
||||
} : function (filepath) {
|
||||
} : (filepath) => {
|
||||
if (allowedExtensions.has(path.parse(filepath).ext)) {
|
||||
console.log('FILE: ' + filepath)
|
||||
console.log(`FILE: ${filepath}`)
|
||||
}
|
||||
else {
|
||||
console.log('EXCLUDED:' + filepath)
|
||||
console.log(`EXCLUDED:${filepath}`)
|
||||
}
|
||||
}
|
||||
walkAsync(directory, excludedDirectories, updateFile, function (err) {
|
||||
walkAsync(directory, excludedDirectories, updateFile, (err) => {
|
||||
console.error('ERROR while traversing directory!:')
|
||||
console.error(err)
|
||||
process.exit(1)
|
||||
@ -85,14 +81,14 @@ function main(args) {
|
||||
console.error('Got arguments:', args)
|
||||
process.exit(1)
|
||||
}
|
||||
var oldVersion = args[0]
|
||||
var newVersion = args[1]
|
||||
var EXCLUDED_DIRS = new Set([
|
||||
const oldVersion = args[0]
|
||||
const newVersion = args[1]
|
||||
const EXCLUDED_DIRS = new Set([
|
||||
'.git',
|
||||
'node_modules',
|
||||
'vendor'
|
||||
])
|
||||
var INCLUDED_EXTENSIONS = new Set([
|
||||
const INCLUDED_EXTENSIONS = new Set([
|
||||
// This extension whitelist is how we avoid modifying binary files
|
||||
'',
|
||||
'.css',
|
||||
|
||||
@ -5,27 +5,6 @@ module.exports = (ctx) => ({
|
||||
sourcesContent: true
|
||||
},
|
||||
plugins: {
|
||||
autoprefixer: {
|
||||
browsers: [
|
||||
//
|
||||
// Official browser support policy:
|
||||
// https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#supported-browsers
|
||||
//
|
||||
'Chrome >= 45', // Exact version number here is kinda arbitrary
|
||||
'Firefox ESR',
|
||||
// Note: Edge versions in Autoprefixer & Can I Use refer to the EdgeHTML rendering engine version,
|
||||
// NOT the Edge app version shown in Edge's "About" screen.
|
||||
// For example, at the time of writing, Edge 20 on an up-to-date system uses EdgeHTML 12.
|
||||
// See also https://github.com/Fyrd/caniuse/issues/1928
|
||||
'Edge >= 12',
|
||||
'Explorer >= 10',
|
||||
// Out of leniency, we prefix these 1 version further back than the official policy.
|
||||
'iOS >= 9',
|
||||
'Safari >= 9',
|
||||
// The following remain NOT officially supported, but we're lenient and include their prefixes to avoid severely breaking in them.
|
||||
'Android >= 4.4',
|
||||
'Opera >= 30'
|
||||
]
|
||||
}
|
||||
autoprefixer: {}
|
||||
}
|
||||
})
|
||||
|
||||
@ -5,17 +5,15 @@ const pkg = require(path.resolve(__dirname, '../package.json'))
|
||||
const BUNDLE = process.env.BUNDLE === 'true'
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
var fileDest = 'bootstrap.js'
|
||||
var external = ['jquery', 'popper.js']
|
||||
let fileDest = 'bootstrap.js'
|
||||
const external = ['jquery', 'popper.js']
|
||||
const plugins = [
|
||||
babel({
|
||||
exclude: 'node_modules/**', // only transpile our source code
|
||||
externalHelpersWhitelist: [ // include only required helpers
|
||||
'typeof',
|
||||
'classCallCheck',
|
||||
'defineProperties',
|
||||
'createClass',
|
||||
'inherits',
|
||||
'possibleConstructorReturn'
|
||||
'inheritsLoose'
|
||||
]
|
||||
})
|
||||
]
|
||||
@ -46,6 +44,5 @@ module.exports = {
|
||||
* Bootstrap v${pkg.version} (${pkg.homepage})
|
||||
* Copyright 2011-${year} ${pkg.author}
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
`
|
||||
*/`
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"output": {
|
||||
"comments": "/^!/"
|
||||
},
|
||||
"output": {
|
||||
"comments": "/^!/"
|
||||
},
|
||||
"compress": {
|
||||
"typeofs": false
|
||||
}
|
||||
|
||||
8
build/workbox.config.json
Normal file
8
build/workbox.config.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"globDirectory": "./",
|
||||
"globPatterns": [
|
||||
"_gh_pages/**/*.{html,css,js,json,png,jpg}"
|
||||
],
|
||||
"swSrc": "./sw.js",
|
||||
"swDest": "./_gh_pages/sw.js"
|
||||
}
|
||||
37
build/workbox.js
Normal file
37
build/workbox.js
Normal file
@ -0,0 +1,37 @@
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const swBuild = require('workbox-build')
|
||||
const config = require('./workbox.config.json')
|
||||
const buildPrefix = '_gh_pages/'
|
||||
|
||||
const workboxSWSrcPath = require.resolve('workbox-sw')
|
||||
const wbFileName = path.basename(workboxSWSrcPath)
|
||||
const workboxSWDestPath = buildPrefix + 'assets/js/vendor/' + wbFileName
|
||||
const workboxSWSrcMapPath = `${workboxSWSrcPath}.map`
|
||||
const workboxSWDestMapPath = `${workboxSWDestPath}.map`
|
||||
|
||||
fs.createReadStream(workboxSWSrcPath).pipe(fs.createWriteStream(workboxSWDestPath))
|
||||
fs.createReadStream(workboxSWSrcMapPath).pipe(fs.createWriteStream(workboxSWDestMapPath))
|
||||
|
||||
const updateUrl = (manifestEntries) => manifestEntries.map((entry) => {
|
||||
if (entry.url.startsWith(buildPrefix)) {
|
||||
const regex = new RegExp(buildPrefix, 'g')
|
||||
entry.url = entry.url.replace(regex, '')
|
||||
}
|
||||
return entry
|
||||
})
|
||||
|
||||
config.manifestTransforms = [updateUrl]
|
||||
|
||||
swBuild.injectManifest(config).then(() => {
|
||||
const wbSwRegex = /{fileName}/g
|
||||
fs.readFile(config.swDest, 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
throw err
|
||||
}
|
||||
const swFileContents = data.replace(wbSwRegex, wbFileName)
|
||||
fs.writeFile(config.swDest, swFileContents, () => {
|
||||
console.log('Pre-cache Manifest generated.')
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -3530,6 +3530,8 @@ tbody.collapse.show {
|
||||
.navbar-collapse {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -3597,6 +3599,8 @@ tbody.collapse.show {
|
||||
.navbar-expand-sm .navbar-collapse {
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
-ms-flex-preferred-size: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.navbar-expand-sm .navbar-toggler {
|
||||
display: none;
|
||||
@ -3643,6 +3647,8 @@ tbody.collapse.show {
|
||||
.navbar-expand-md .navbar-collapse {
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
-ms-flex-preferred-size: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.navbar-expand-md .navbar-toggler {
|
||||
display: none;
|
||||
@ -3689,6 +3695,8 @@ tbody.collapse.show {
|
||||
.navbar-expand-lg .navbar-collapse {
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
-ms-flex-preferred-size: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.navbar-expand-lg .navbar-toggler {
|
||||
display: none;
|
||||
@ -3735,6 +3743,8 @@ tbody.collapse.show {
|
||||
.navbar-expand-xl .navbar-collapse {
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
-ms-flex-preferred-size: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.navbar-expand-xl .navbar-toggler {
|
||||
display: none;
|
||||
@ -3784,6 +3794,8 @@ tbody.collapse.show {
|
||||
.navbar-expand .navbar-collapse {
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
-ms-flex-preferred-size: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.navbar-expand .navbar-toggler {
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css.map
vendored
2
dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
158
dist/js/bootstrap.bundle.js
vendored
158
dist/js/bootstrap.bundle.js
vendored
@ -33,10 +33,9 @@ var Util = function () {
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
function toType(obj) {
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
};function toType(obj) {
|
||||
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
|
||||
}
|
||||
|
||||
@ -256,14 +255,14 @@ var Alert = function () {
|
||||
ALERT: 'alert',
|
||||
FADE: 'fade',
|
||||
SHOW: 'show'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Alert = function () {
|
||||
function Alert(element) {
|
||||
classCallCheck(this, Alert);
|
||||
@ -436,14 +435,14 @@ var Button = function () {
|
||||
var Event = {
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
|
||||
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Button = function () {
|
||||
function Button(element) {
|
||||
classCallCheck(this, Button);
|
||||
@ -645,14 +644,14 @@ var Carousel = function () {
|
||||
INDICATORS: '.carousel-indicators',
|
||||
DATA_SLIDE: '[data-slide], [data-slide-to]',
|
||||
DATA_RIDE: '[data-ride="carousel"]'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Carousel = function () {
|
||||
function Carousel(element, config) {
|
||||
classCallCheck(this, Carousel);
|
||||
@ -1129,14 +1128,14 @@ var Collapse = function () {
|
||||
var Selector = {
|
||||
ACTIVES: '.show, .collapsing',
|
||||
DATA_TOGGLE: '[data-toggle="collapse"]'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Collapse = function () {
|
||||
function Collapse(element, config) {
|
||||
classCallCheck(this, Collapse);
|
||||
@ -1404,7 +1403,7 @@ var Collapse = function () {
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
||||
if (event.target.tagName === 'A' && !$.contains(this, event.target)) {
|
||||
if (event.currentTarget.tagName === 'A') {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -3951,14 +3950,14 @@ var Dropdown = function () {
|
||||
var DefaultType = {
|
||||
offset: '(number|string)',
|
||||
flip: 'boolean'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Dropdown = function () {
|
||||
function Dropdown(element, config) {
|
||||
classCallCheck(this, Dropdown);
|
||||
@ -4102,10 +4101,9 @@ var Dropdown = function () {
|
||||
enabled: this._config.flip
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
if (this._inNavbar) {
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
};if (this._inNavbar) {
|
||||
popperConfig.modifiers.applyStyle = {
|
||||
enabled: !this._inNavbar
|
||||
};
|
||||
@ -4358,14 +4356,14 @@ var Modal = function () {
|
||||
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
||||
STICKY_CONTENT: '.sticky-top',
|
||||
NAVBAR_TOGGLER: '.navbar-toggler'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Modal = function () {
|
||||
function Modal(element, config) {
|
||||
classCallCheck(this, Modal);
|
||||
@ -4973,14 +4971,14 @@ var Tooltip = function () {
|
||||
FOCUS: 'focus',
|
||||
CLICK: 'click',
|
||||
MANUAL: 'manual'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Tooltip = function () {
|
||||
function Tooltip(element, config) {
|
||||
classCallCheck(this, Tooltip);
|
||||
@ -5409,18 +5407,18 @@ var Tooltip = function () {
|
||||
Tooltip.prototype._getConfig = function _getConfig(config) {
|
||||
config = $.extend({}, this.constructor.Default, $(this.element).data(), config);
|
||||
|
||||
if (config.delay && typeof config.delay === 'number') {
|
||||
if (typeof config.delay === 'number') {
|
||||
config.delay = {
|
||||
show: config.delay,
|
||||
hide: config.delay
|
||||
};
|
||||
}
|
||||
|
||||
if (config.title && typeof config.title === 'number') {
|
||||
if (typeof config.title === 'number') {
|
||||
config.title = config.title.toString();
|
||||
}
|
||||
|
||||
if (config.content && typeof config.content === 'number') {
|
||||
if (typeof config.content === 'number') {
|
||||
config.content = config.content.toString();
|
||||
}
|
||||
|
||||
@ -5604,14 +5602,14 @@ var Popover = function () {
|
||||
FOCUSOUT: 'focusout' + EVENT_KEY,
|
||||
MOUSEENTER: 'mouseenter' + EVENT_KEY,
|
||||
MOUSELEAVE: 'mouseleave' + EVENT_KEY
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Popover = function (_Tooltip) {
|
||||
inherits(Popover, _Tooltip);
|
||||
|
||||
@ -5803,14 +5801,14 @@ var ScrollSpy = function () {
|
||||
var OffsetMethod = {
|
||||
OFFSET: 'offset',
|
||||
POSITION: 'position'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var ScrollSpy = function () {
|
||||
function ScrollSpy(element, config) {
|
||||
var _this = this;
|
||||
@ -6104,14 +6102,14 @@ var Tab = function () {
|
||||
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
|
||||
DROPDOWN_TOGGLE: '.dropdown-toggle',
|
||||
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Tab = function () {
|
||||
function Tab(element) {
|
||||
classCallCheck(this, Tab);
|
||||
|
||||
2
dist/js/bootstrap.bundle.min.js
vendored
2
dist/js/bootstrap.bundle.min.js
vendored
File diff suppressed because one or more lines are too long
@ -34,10 +34,9 @@ var Util = function () {
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
function toType(obj) {
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
};function toType(obj) {
|
||||
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
|
||||
}
|
||||
|
||||
@ -257,14 +256,14 @@ var Alert = function () {
|
||||
ALERT: 'alert',
|
||||
FADE: 'fade',
|
||||
SHOW: 'show'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Alert = function () {
|
||||
function Alert(element) {
|
||||
classCallCheck(this, Alert);
|
||||
@ -437,14 +436,14 @@ var Button = function () {
|
||||
var Event = {
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
|
||||
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Button = function () {
|
||||
function Button(element) {
|
||||
classCallCheck(this, Button);
|
||||
@ -646,14 +645,14 @@ var Carousel = function () {
|
||||
INDICATORS: '.carousel-indicators',
|
||||
DATA_SLIDE: '[data-slide], [data-slide-to]',
|
||||
DATA_RIDE: '[data-ride="carousel"]'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Carousel = function () {
|
||||
function Carousel(element, config) {
|
||||
classCallCheck(this, Carousel);
|
||||
@ -1130,14 +1129,14 @@ var Collapse = function () {
|
||||
var Selector = {
|
||||
ACTIVES: '.show, .collapsing',
|
||||
DATA_TOGGLE: '[data-toggle="collapse"]'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Collapse = function () {
|
||||
function Collapse(element, config) {
|
||||
classCallCheck(this, Collapse);
|
||||
@ -1405,7 +1404,7 @@ var Collapse = function () {
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
||||
if (event.target.tagName === 'A' && !$.contains(this, event.target)) {
|
||||
if (event.currentTarget.tagName === 'A') {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -1514,14 +1513,14 @@ var Dropdown = function () {
|
||||
var DefaultType = {
|
||||
offset: '(number|string)',
|
||||
flip: 'boolean'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Dropdown = function () {
|
||||
function Dropdown(element, config) {
|
||||
classCallCheck(this, Dropdown);
|
||||
@ -1665,10 +1664,9 @@ var Dropdown = function () {
|
||||
enabled: this._config.flip
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
if (this._inNavbar) {
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
};if (this._inNavbar) {
|
||||
popperConfig.modifiers.applyStyle = {
|
||||
enabled: !this._inNavbar
|
||||
};
|
||||
@ -1921,14 +1919,14 @@ var Modal = function () {
|
||||
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
||||
STICKY_CONTENT: '.sticky-top',
|
||||
NAVBAR_TOGGLER: '.navbar-toggler'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Modal = function () {
|
||||
function Modal(element, config) {
|
||||
classCallCheck(this, Modal);
|
||||
@ -2536,14 +2534,14 @@ var Tooltip = function () {
|
||||
FOCUS: 'focus',
|
||||
CLICK: 'click',
|
||||
MANUAL: 'manual'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Tooltip = function () {
|
||||
function Tooltip(element, config) {
|
||||
classCallCheck(this, Tooltip);
|
||||
@ -2972,18 +2970,18 @@ var Tooltip = function () {
|
||||
Tooltip.prototype._getConfig = function _getConfig(config) {
|
||||
config = $.extend({}, this.constructor.Default, $(this.element).data(), config);
|
||||
|
||||
if (config.delay && typeof config.delay === 'number') {
|
||||
if (typeof config.delay === 'number') {
|
||||
config.delay = {
|
||||
show: config.delay,
|
||||
hide: config.delay
|
||||
};
|
||||
}
|
||||
|
||||
if (config.title && typeof config.title === 'number') {
|
||||
if (typeof config.title === 'number') {
|
||||
config.title = config.title.toString();
|
||||
}
|
||||
|
||||
if (config.content && typeof config.content === 'number') {
|
||||
if (typeof config.content === 'number') {
|
||||
config.content = config.content.toString();
|
||||
}
|
||||
|
||||
@ -3167,14 +3165,14 @@ var Popover = function () {
|
||||
FOCUSOUT: 'focusout' + EVENT_KEY,
|
||||
MOUSEENTER: 'mouseenter' + EVENT_KEY,
|
||||
MOUSELEAVE: 'mouseleave' + EVENT_KEY
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Popover = function (_Tooltip) {
|
||||
inherits(Popover, _Tooltip);
|
||||
|
||||
@ -3366,14 +3364,14 @@ var ScrollSpy = function () {
|
||||
var OffsetMethod = {
|
||||
OFFSET: 'offset',
|
||||
POSITION: 'position'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var ScrollSpy = function () {
|
||||
function ScrollSpy(element, config) {
|
||||
var _this = this;
|
||||
@ -3667,14 +3665,14 @@ var Tab = function () {
|
||||
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
|
||||
DROPDOWN_TOGGLE: '.dropdown-toggle',
|
||||
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Tab = function () {
|
||||
function Tab(element) {
|
||||
classCallCheck(this, Tab);
|
||||
|
||||
2
dist/js/bootstrap.min.js
vendored
2
dist/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -2,8 +2,7 @@
|
||||
layout: docs
|
||||
title: History
|
||||
description: A brief overview of the history of Bootstrap.
|
||||
redirect_from:
|
||||
- /docs/4.0/about/
|
||||
redirect_from: "/docs/4.0/about/"
|
||||
group: about
|
||||
---
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@ title: Breadcrumb
|
||||
description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
|
||||
group: components
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
|
||||
|
||||
@ -25,6 +25,7 @@ In order for assistive technologies (such as screen readers) to convey that a se
|
||||
|
||||
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
|
||||
{% endcallout %}
|
||||
|
||||
## Button toolbar
|
||||
|
||||
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
|
||||
|
||||
@ -560,7 +560,7 @@ Just like with card groups, card footers in decks will automatically line up.
|
||||
|
||||
### Card columns
|
||||
|
||||
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
|
||||
Cards can be organized into [Masonry](https://masonry.desandro.com/)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
|
||||
|
||||
**Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
|
||||
|
||||
@ -591,7 +591,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-primary p-3 text-center">
|
||||
<div class="card bg-primary text-white text-center p-3">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||||
<footer class="blockquote-footer">
|
||||
|
||||
@ -186,9 +186,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>parent</td>
|
||||
<td>selector</td>
|
||||
<td>selector | jQuery object | DOM element </td>
|
||||
<td>false</td>
|
||||
<td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
|
||||
<td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
|
||||
@ -10,7 +10,7 @@ toc: true
|
||||
|
||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision.](http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/)
|
||||
|
||||
Dropdowns are built on a third party library, [Popper.js](https://popper.js.org), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{ site.cdn.popper }}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js.
|
||||
Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{ site.cdn.popper }}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js.
|
||||
|
||||
If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
|
||||
|
||||
|
||||
@ -337,7 +337,10 @@ More complex layouts can also be created with the grid system.
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="inputState" class="col-form-label">State</label>
|
||||
<select id="inputState" class="form-control">Choose</select>
|
||||
<select id="inputState" class="form-control">
|
||||
<option selected>Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<label for="inputZip" class="col-form-label">Zip</label>
|
||||
@ -669,7 +672,7 @@ While Bootstrap will apply these styles in all browsers, Internet Explorer 11 an
|
||||
|
||||
## Validation
|
||||
|
||||
Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](http://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
|
||||
Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](https://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
|
||||
|
||||
{% callout warning %}
|
||||
We **highly recommend** custom validation styles as native browser defaults are not announced to screen readers.
|
||||
|
||||
@ -32,7 +32,7 @@ Keep reading for demos and usage guidelines.
|
||||
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
|
||||
|
||||
<div class="bd-example bd-example-modal">
|
||||
<div class="modal">
|
||||
<div class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -54,7 +54,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="modal">
|
||||
<div class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
||||
@ -70,7 +70,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
|
||||
|
||||
<!-- As a heading -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<span class="h1" class="navbar-brand mb-0">Navbar</span>
|
||||
<span class="navbar-brand mb-0 h1">Navbar</span>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
@ -165,7 +165,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown link
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
||||
@ -323,7 +323,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
@ -395,7 +395,7 @@ When the container is within your navbar, its horizontal padding is removed at b
|
||||
|
||||
## Placement
|
||||
|
||||
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](http://caniuse.com/#feat=css-sticky).**
|
||||
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky).**
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
|
||||
@ -301,22 +301,18 @@ If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }
|
||||
|
||||
Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
|
||||
|
||||
Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
|
||||
|
||||
<div class="bd-example bd-example-tabs">
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
|
||||
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
|
||||
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
|
||||
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
@ -326,38 +322,28 @@ Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility I
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
|
||||
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
|
||||
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
|
||||
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
|
||||
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
|
||||
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -365,17 +351,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as
|
||||
|
||||
<div class="bd-example bd-example-tabs">
|
||||
<nav class="nav nav-tabs" id="nav-tab" role="tablist">
|
||||
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
|
||||
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="profile">Profile</a>
|
||||
<div class="dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
|
||||
<a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
|
||||
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
|
||||
@ -384,34 +362,22 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as
|
||||
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab">
|
||||
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
|
||||
<p>Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">
|
||||
<p>Proident incididunt esse qui ea nisi ullamco aliquip nostrud velit sint duis. Aute culpa aute cillum sit consectetur mollit minim non reprehenderit tempor. Occaecat amet consectetur aute esse ad ullamco ad commodo mollit reprehenderit esse in consequat. Mollit minim do consectetur pariatur irure non id ea dolore occaecat adipisicing consectetur est aute magna non.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<nav class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-expanded="true">Home</a>
|
||||
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile">Profile</a>
|
||||
<div class="dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="nav-dropdown1">@fat</a>
|
||||
<a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="nav-dropdown2">@mdo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
|
||||
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
|
||||
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
|
||||
<div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab">...</div>
|
||||
<div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">...</div>
|
||||
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -420,17 +386,13 @@ The tabs plugin also works with pills.
|
||||
<div class="bd-example bd-example-tabs">
|
||||
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
|
||||
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a>
|
||||
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a>
|
||||
<a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a>
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="pills-tabContent">
|
||||
@ -440,36 +402,28 @@ The tabs plugin also works with pills.
|
||||
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
|
||||
<p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">
|
||||
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
|
||||
<p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">
|
||||
<p>Tempor anim aliquip qui nisi sit minim ex in cupidatat ipsum adipisicing. Ad non magna anim id ullamco do dolor sit adipisicing nulla exercitation. Qui Lorem eiusmod sint in laboris pariatur est adipisicing non sunt occaecat in mollit culpa sit. Aliquip id duis do do quis mollit ut duis. Non dolor reprehenderit do esse nostrud deserunt non eiusmod minim anim sit voluptate ipsum. Nulla elit aliqua do sunt labore velit anim nisi dolor nostrud consectetur fugiat ex qui velit ex tempor. Do cillum qui anim aliquip id cillum duis ex laboris tempor incididunt sint dolor ullamco tempor. Fugiat laboris enim anim veniam aliquip cillum irure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
|
||||
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a>
|
||||
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a>
|
||||
<a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a>
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="pills-tabContent">
|
||||
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
|
||||
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
|
||||
<div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">...</div>
|
||||
<div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab">...</div>
|
||||
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -478,11 +432,11 @@ And with vertical pills.
|
||||
<div class="bd-example bd-example-tabs">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
|
||||
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
|
||||
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
|
||||
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
|
||||
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
|
||||
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
|
||||
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
@ -505,11 +459,11 @@ And with vertical pills.
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
|
||||
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
|
||||
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
|
||||
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
|
||||
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
|
||||
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
|
||||
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
|
||||
</div>
|
||||
<div class="tab-content" id="v-pills-tabContent">
|
||||
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
|
||||
@ -527,25 +481,25 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
|
||||
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
|
||||
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
|
||||
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
|
||||
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="home" role="tabpanel">...</div>
|
||||
<div class="tab-pane" id="profile" role="tabpanel">...</div>
|
||||
<div class="tab-pane" id="messages" role="tabpanel">...</div>
|
||||
<div class="tab-pane" id="settings" role="tabpanel">...</div>
|
||||
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
|
||||
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
|
||||
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
|
||||
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -575,10 +529,10 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
|
||||
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
|
||||
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
|
||||
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
|
||||
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -594,24 +548,24 @@ Activates a tab element and content container. Tab should have either a `data-ta
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
|
||||
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
|
||||
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
|
||||
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
|
||||
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="home" role="tabpanel">...</div>
|
||||
<div class="tab-pane" id="profile" role="tabpanel">...</div>
|
||||
<div class="tab-pane" id="messages" role="tabpanel">...</div>
|
||||
<div class="tab-pane" id="settings" role="tabpanel">...</div>
|
||||
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
|
||||
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
|
||||
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
|
||||
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
@ -11,7 +11,7 @@ toc: true
|
||||
Things to know when using the popover plugin:
|
||||
|
||||
|
||||
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
|
||||
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
|
||||
- Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency.
|
||||
- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
|
||||
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
@ -151,7 +151,6 @@ $('.popover-dismiss').popover({
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Enable popovers via JavaScript:
|
||||
@ -306,7 +305,6 @@ Toggles an element's popover. **Returns to the caller before the popover has act
|
||||
|
||||
Hides and destroys an element's popover. Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
|
||||
|
||||
|
||||
{% highlight js %}$('#element').popover('dispose'){% endhighlight %}
|
||||
|
||||
#### `.popover('enable')`
|
||||
|
||||
@ -10,7 +10,7 @@ toc: true
|
||||
|
||||
Things to know when using the tooltip plugin:
|
||||
|
||||
- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
|
||||
- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
|
||||
- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
|
||||
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- Tooltips with zero-length titles are never displayed.
|
||||
|
||||
@ -330,7 +330,7 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra
|
||||
|
||||
## HTML5 `[hidden]` attribute
|
||||
|
||||
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.
|
||||
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.
|
||||
|
||||
{% highlight html %}
|
||||
<input type="text" hidden>
|
||||
|
||||
@ -18,90 +18,96 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="collapse bg-dark" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 py-4">
|
||||
<h4 class="text-white">About</h4>
|
||||
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 py-4">
|
||||
<h4 class="text-white">Contact</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
||||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||||
<li><a href="#" class="text-white">Email me</a></li>
|
||||
</ul>
|
||||
<header>
|
||||
<div class="collapse bg-dark" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 py-4">
|
||||
<h4 class="text-white">About</h4>
|
||||
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 py-4">
|
||||
<h4 class="text-white">Contact</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
||||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||||
<li><a href="#" class="text-white">Email me</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-dark bg-dark">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="#" class="navbar-brand">Album</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<div class="container">
|
||||
<h1 class="jumbotron-heading">Album example</h1>
|
||||
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary">Main call to action</a>
|
||||
<a href="#" class="btn btn-secondary">Secondary action</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="album text-muted">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="navbar navbar-dark bg-dark">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="#" class="navbar-brand">Album</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<div class="container">
|
||||
<h1 class="jumbotron-heading">Album example</h1>
|
||||
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary">Main call to action</a>
|
||||
<a href="#" class="btn btn-secondary">Secondary action</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="album text-muted">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="text-muted">
|
||||
<div class="container">
|
||||
@ -119,12 +125,14 @@
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../../../assets/js/vendor/holder.min.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" });
|
||||
Holder.addTheme('thumb', {
|
||||
bg: '#55595c',
|
||||
fg: '#eceeef',
|
||||
text: 'Thumbnail'
|
||||
});
|
||||
</script>
|
||||
<script src="../../../../dist/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -18,26 +18,28 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="blog-masthead">
|
||||
<div class="container">
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" href="#">Home</a>
|
||||
<a class="nav-link" href="#">New features</a>
|
||||
<a class="nav-link" href="#">Press</a>
|
||||
<a class="nav-link" href="#">New hires</a>
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</nav>
|
||||
<header>
|
||||
<div class="blog-masthead">
|
||||
<div class="container">
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" href="#">Home</a>
|
||||
<a class="nav-link" href="#">New features</a>
|
||||
<a class="nav-link" href="#">Press</a>
|
||||
<a class="nav-link" href="#">New hires</a>
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blog-header">
|
||||
<div class="container">
|
||||
<h1 class="blog-title">The Bootstrap Blog</h1>
|
||||
<p class="lead blog-description">An example blog template built with Bootstrap.</p>
|
||||
<div class="blog-header">
|
||||
<div class="container">
|
||||
<h1 class="blog-title">The Bootstrap Blog</h1>
|
||||
<p class="lead blog-description">An example blog template built with Bootstrap.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<main role="main" class="container">
|
||||
|
||||
<div class="row">
|
||||
|
||||
@ -109,7 +111,7 @@
|
||||
|
||||
</div><!-- /.blog-main -->
|
||||
|
||||
<div class="col-sm-3 ml-sm-auto blog-sidebar">
|
||||
<aside class="col-sm-3 ml-sm-auto blog-sidebar">
|
||||
<div class="sidebar-module sidebar-module-inset">
|
||||
<h4>About</h4>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
@ -139,14 +141,14 @@
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div><!-- /.blog-sidebar -->
|
||||
</aside><!-- /.blog-sidebar -->
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
</main><!-- /.container -->
|
||||
|
||||
<footer class="blog-footer">
|
||||
<p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
<p>
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
|
||||
@ -17,158 +17,164 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Carousel</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Carousel</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-left">
|
||||
<h1>Example headline.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
|
||||
<main role="main">
|
||||
|
||||
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-left">
|
||||
<h1>Example headline.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>Another example headline.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-right">
|
||||
<h1>One more for good measure.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>Another example headline.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Marketing messaging and featurettes
|
||||
================================================== -->
|
||||
<!-- Wrap the rest of the page in another container to center all the content. -->
|
||||
|
||||
<div class="container marketing">
|
||||
|
||||
<!-- Three columns of text below the carousel -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
||||
<h2>Heading</h2>
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
||||
<!-- START THE FEATURETTES -->
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
|
||||
<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 mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-right">
|
||||
<h1>One more for good measure.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7 order-md-2">
|
||||
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
|
||||
<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 order-md-1">
|
||||
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<!-- Marketing messaging and featurettes
|
||||
================================================== -->
|
||||
<!-- Wrap the rest of the page in another container to center all the content. -->
|
||||
|
||||
<div class="container marketing">
|
||||
|
||||
<!-- Three columns of text below the carousel -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
||||
<h2>Heading</h2>
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
||||
<!-- START THE FEATURETTES -->
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
|
||||
<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 class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
|
||||
<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 mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7 order-md-2">
|
||||
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
|
||||
<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 order-md-1">
|
||||
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
<!-- /END THE FEATURETTES -->
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
|
||||
<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 mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<!-- /END THE FEATURETTES -->
|
||||
</div><!-- /.container -->
|
||||
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<footer class="container">
|
||||
<p class="float-right"><a href="#">Back to top</a></p>
|
||||
<p>© 2017 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
|
||||
</div><!-- /.container -->
|
||||
</main>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
<div class="cover-container">
|
||||
|
||||
<div class="masthead clearfix">
|
||||
<header class="masthead clearfix">
|
||||
<div class="inner">
|
||||
<h3 class="masthead-brand">Cover</h3>
|
||||
<nav class="nav nav-masthead">
|
||||
@ -33,21 +33,21 @@
|
||||
<a class="nav-link" href="#">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="inner cover">
|
||||
<main role="main" class="inner cover">
|
||||
<h1 class="cover-heading">Cover your page.</h1>
|
||||
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
|
||||
<p class="lead">
|
||||
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="mastfoot">
|
||||
<footer class="mastfoot">
|
||||
<div class="inner">
|
||||
<p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -17,33 +17,35 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Dashboard</a>
|
||||
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Dashboard</a>
|
||||
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Settings</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Settings</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
@ -91,7 +93,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
|
||||
<main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
<section class="row text-center placeholders">
|
||||
|
||||
@ -2,8 +2,7 @@
|
||||
layout: simple
|
||||
title: Examples
|
||||
description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
|
||||
redirect_from:
|
||||
- /examples/
|
||||
redirect_from: "/examples/"
|
||||
---
|
||||
|
||||
[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
|
||||
|
||||
@ -51,42 +51,46 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||||
<div class="jumbotron">
|
||||
<main role="main">
|
||||
|
||||
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<h1 class="display-3">Hello, world!</h1>
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
||||
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h1 class="display-3">Hello, world!</h1>
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
||||
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2017</p>
|
||||
</footer>
|
||||
</div> <!-- /container -->
|
||||
</div> <!-- /container -->
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<p>© Company 2017</p>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="masthead">
|
||||
<header class="masthead">
|
||||
<h3 class="text-muted">Project name</h3>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
|
||||
@ -55,33 +55,37 @@
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Jumbotron -->
|
||||
<div class="jumbotron">
|
||||
<h1>Marketing stuff!</h1>
|
||||
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>
|
||||
</div>
|
||||
<main role="main">
|
||||
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
|
||||
<!-- Jumbotron -->
|
||||
<div class="jumbotron">
|
||||
<h1>Marketing stuff!</h1>
|
||||
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
|
||||
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
|
||||
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
|
||||
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Site footer -->
|
||||
<footer class="footer">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="header clearfix">
|
||||
<header class="header clearfix">
|
||||
<nav>
|
||||
<ul class="nav nav-pills float-right">
|
||||
<li class="nav-item">
|
||||
@ -34,37 +34,41 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<h3 class="text-muted">Project name</h3>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 class="display-3">Jumbotron heading</h1>
|
||||
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
|
||||
</div>
|
||||
<main role="main">
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>Subheading</h4>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
|
||||
|
||||
<h4>Subheading</h4>
|
||||
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
|
||||
<h4>Subheading</h4>
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<div class="jumbotron">
|
||||
<h1 class="display-3">Jumbotron heading</h1>
|
||||
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<h4>Subheading</h4>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>Subheading</h4>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
|
||||
|
||||
<h4>Subheading</h4>
|
||||
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<h4>Subheading</h4>
|
||||
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
|
||||
<h4>Subheading</h4>
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<h4>Subheading</h4>
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<h4>Subheading</h4>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
|
||||
|
||||
<h4>Subheading</h4>
|
||||
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
|
||||
<h4>Subheading</h4>
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p>© Company 2017</p>
|
||||
|
||||
@ -42,13 +42,13 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<main role="main" class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Navbar example</h1>
|
||||
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
|
||||
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
|
||||
@ -42,13 +42,13 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<main role="main" class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Navbar example</h1>
|
||||
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
|
||||
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
|
||||
@ -322,16 +322,18 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="jumbotron">
|
||||
<div class="col-sm-8 mx-auto">
|
||||
<h1>Navbar examples</h1>
|
||||
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
|
||||
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
||||
<p>
|
||||
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
|
||||
</p>
|
||||
<main role="main">
|
||||
<div class="jumbotron">
|
||||
<div class="col-sm-8 mx-auto">
|
||||
<h1>Navbar examples</h1>
|
||||
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
|
||||
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
||||
<p>
|
||||
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<main role="main" class="container">
|
||||
|
||||
<div class="row row-offcanvas row-offcanvas-right">
|
||||
|
||||
@ -115,11 +115,11 @@
|
||||
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2017</p>
|
||||
</footer>
|
||||
</main><!--/.container-->
|
||||
|
||||
</div><!--/.container-->
|
||||
<footer>
|
||||
<p>© Company 2017</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
|
||||
@ -51,14 +51,14 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<main role="main" class="container">
|
||||
|
||||
<div class="starter-template">
|
||||
<h1>Bootstrap starter template</h1>
|
||||
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /.container -->
|
||||
</main><!-- /.container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
|
||||
@ -18,39 +18,41 @@
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<header>
|
||||
<!-- Fixed navbar -->
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<main role="main" class="container">
|
||||
<div class="mt-3">
|
||||
<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>
|
||||
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
|
||||
@ -19,13 +19,13 @@
|
||||
<body>
|
||||
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<main role="main" class="container">
|
||||
<div class="mt-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>
|
||||
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
|
||||
@ -8,6 +8,7 @@ group: extend
|
||||
Bootstrap doesn't include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
|
||||
|
||||
## Preferred
|
||||
|
||||
We've tested and used these icon sets ourselves.
|
||||
|
||||
- [Iconic](https://useiconic.com/open/)
|
||||
@ -15,6 +16,7 @@ We've tested and used these icon sets ourselves.
|
||||
- [Entypo](http://www.entypo.com/)
|
||||
|
||||
## More options
|
||||
|
||||
While we haven't tried these out, they do look promising and provide multiple formats—including SVG.
|
||||
|
||||
- [Bytesize](https://github.com/danklammer/bytesize-icons)
|
||||
|
||||
@ -3,4 +3,4 @@ layout: docs
|
||||
title: Extend
|
||||
---
|
||||
|
||||
todo: this entire page
|
||||
todo: this entire page
|
||||
|
||||
@ -12,6 +12,7 @@ We've designed and developed Bootstrap to work in a number of environments. Here
|
||||
{% endcallout %}
|
||||
|
||||
### General outline
|
||||
|
||||
- Working with CSS
|
||||
- Working with Sass files
|
||||
- Building new CSS components
|
||||
|
||||
@ -101,7 +101,7 @@ For a list of some of the browser bugs that Bootstrap has to grapple with, see o
|
||||
|
||||
## Internet Explorer
|
||||
|
||||
Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features.
|
||||
Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit [Can I use...](https://caniuse.com/) for details on browser support of CSS3 and HTML5 features.
|
||||
|
||||
**If you require IE8-9 support, use Bootstrap 3.** It's the most stable version of our code and is still supported by our team for critical bugfixes and documentation changes. However, no new features will be added to it.
|
||||
|
||||
@ -125,6 +125,7 @@ The `.dropdown-backdrop` element isn't used on iOS in the nav because of the com
|
||||
Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.
|
||||
|
||||
## Sticky `:hover`/`:focus` on mobile
|
||||
|
||||
Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make `:hover` "sticky". In other words, `:hover` styles start applying after tapping an element and only stop applying after the user taps some other element. On mobile-first sites, this behavior is normally undesirable.
|
||||
|
||||
Bootstrap includes a workaround for this, although it is disabled by default. By setting `$enable-hover-media-query` to `true` when compiling from Sass, Bootstrap will use [mq4-hover-shim](https://github.com/twbs/mq4-hover-shim) to disable `:hover` styles in browsers that emulate hovering, thus preventing sticky `:hover` styles. There are some caveats to this workaround; see the shim's documentation for details.
|
||||
@ -167,7 +168,7 @@ Want to see an example? [Check out this JS Bin demo.](http://jsbin.com/OyaqoDO/2
|
||||
|
||||
## Validators
|
||||
|
||||
In order to provide the best possible experience to old and buggy browsers, Bootstrap uses [CSS browser hacks](http://browserhacks.com) in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.
|
||||
In order to provide the best possible experience to old and buggy browsers, Bootstrap uses [CSS browser hacks](http://browserhacks.com/) in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.
|
||||
|
||||
These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ To use our build system and run our documentation locally, you'll need a copy of
|
||||
1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies.
|
||||
2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json).
|
||||
3. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
|
||||
- **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
|
||||
- **Windows users:** Read [this guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems.
|
||||
|
||||
When completed, you'll be able to run the various commands provided from the command line.
|
||||
|
||||
@ -36,7 +36,7 @@ Our [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json
|
||||
|
||||
Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
|
||||
|
||||
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [/build/postcss.config.js]({{ site.repo }}/blob/v{{ site.current_version }}/build/postcss.config.js) for details.
|
||||
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [/package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) for details.
|
||||
|
||||
## Local documentation
|
||||
|
||||
|
||||
@ -52,7 +52,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo
|
||||
|
||||
Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.com/package/bootstrap):
|
||||
|
||||
{% highlight bash %}
|
||||
{% highlight sh %}
|
||||
npm install bootstrap@{{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
@ -73,7 +73,7 @@ gem 'bootstrap', '~> 4.0.0.beta'
|
||||
|
||||
Alternatively, if you're not using Bundler, you can install the gem by running this command:
|
||||
|
||||
{% highlight bash %}
|
||||
{% highlight sh %}
|
||||
gem install bootstrap -v 4.0.0.beta
|
||||
{% endhighlight %}
|
||||
|
||||
@ -81,15 +81,15 @@ gem install bootstrap -v 4.0.0.beta
|
||||
|
||||
### Composer
|
||||
|
||||
You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org):
|
||||
You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org/):
|
||||
|
||||
{% highlight bash %}
|
||||
{% highlight sh %}
|
||||
composer require twbs/bootstrap:{{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
### NuGet
|
||||
|
||||
If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org):
|
||||
If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/):
|
||||
|
||||
{% highlight powershell %}
|
||||
Install-Package bootstrap -Pre
|
||||
|
||||
@ -20,7 +20,7 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee
|
||||
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
||||
{% endhighlight %}
|
||||
|
||||
Add our optional JavaScript plugins, jQuery, and [Popper.js](https://github.com/FezVrasta/popper.js) near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend on them. While we use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/) in our docs, the full version is also supported.
|
||||
Add our optional JavaScript plugins, jQuery, and [Popper.js](https://popper.js.org/) near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend on them. While we use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/) in our docs, the full version is also supported.
|
||||
|
||||
{% highlight html %}
|
||||
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
|
||||
|
||||
@ -14,7 +14,7 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files)
|
||||
|
||||
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that **all plugins depend on jQuery** (this means jQuery must be included **before** the plugin files). [Consult our `package.json`]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) to see which versions of jQuery are supported.
|
||||
|
||||
Our tooltips and popovers also depend on [Popper.js](https://github.com/FezVrasta/popper.js).
|
||||
Our dropdowns, popovers and tooltips also depend on [Popper.js](https://popper.js.org/).
|
||||
|
||||
## Data attributes
|
||||
|
||||
@ -84,6 +84,7 @@ $('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the s
|
||||
{% endhighlight %}
|
||||
|
||||
### Default settings
|
||||
|
||||
You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object:
|
||||
|
||||
{% highlight js %}
|
||||
|
||||
@ -7,6 +7,7 @@ toc: true
|
||||
---
|
||||
|
||||
## Beta 2 changes
|
||||
|
||||
While in beta, we aim to have no breaking changes. However, things don't always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.
|
||||
|
||||
### Breaking
|
||||
@ -254,7 +255,7 @@ Dropped entirely for the new card component.
|
||||
|
||||
### Vendor prefix mixins
|
||||
|
||||
Bootstrap 3's [vendor prefix](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary.
|
||||
Bootstrap 3's [vendor prefix](https://www.thoughtco.com/css-vendor-prefixes-3466867) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary.
|
||||
|
||||
Removed the following mixins: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-timing-function`, `backface-visibility`, `box-sizing`, `content-columns`, `hyphens`, `opacity`, `perspective`, `perspective-origin`, `rotate`, `rotateX`, `rotateY`, `scale`, `scaleX`, `scaleY`, `skew`, `transform-origin`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`, `transition-transform`, `translate`, `translate3d`, `user-select`
|
||||
|
||||
|
||||
@ -77,5 +77,6 @@ Quickly change the weight (boldness) of text or italicize text.
|
||||
{% example html %}
|
||||
<p class="font-weight-bold">Bold text.</p>
|
||||
<p class="font-weight-normal">Normal weight text.</p>
|
||||
<p class="font-weight-light">Light weight text.</p>
|
||||
<p class="font-italic">Italic text.</p>
|
||||
{% endexample %}
|
||||
|
||||
@ -6,7 +6,7 @@ layout: home
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-6 mx-auto col-md-6 order-md-2">
|
||||
<img src="{{ site.baseurl }}/assets/img/bootstrap-stack.png" alt="" class="img-fluid mb-3 mb-md-0">
|
||||
<img class="img-fluid mb-3 mb-md-0" src="{{ site.baseurl }}/assets/img/bootstrap-stack.png" alt="Bootstrap Stack image" width="1024" height="860">
|
||||
</div>
|
||||
<div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
|
||||
<h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"jquery": true
|
||||
},
|
||||
"extends": "eslint:recommended",
|
||||
"plugins": ["compat"],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 8,
|
||||
"sourceType": "module"
|
||||
@ -17,6 +18,7 @@
|
||||
"no-extra-parens": "error",
|
||||
"no-prototype-builtins": "error",
|
||||
"no-template-curly-in-string": "error",
|
||||
"compat/compat": "error",
|
||||
"valid-jsdoc": "error",
|
||||
|
||||
// Best Practices
|
||||
|
||||
14
js/dist/alert.js
vendored
14
js/dist/alert.js
vendored
@ -41,14 +41,14 @@ var Alert = function () {
|
||||
ALERT: 'alert',
|
||||
FADE: 'fade',
|
||||
SHOW: 'show'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Alert = function () {
|
||||
function Alert(element) {
|
||||
_classCallCheck(this, Alert);
|
||||
|
||||
2
js/dist/alert.js.map
vendored
2
js/dist/alert.js.map
vendored
File diff suppressed because one or more lines are too long
14
js/dist/button.js
vendored
14
js/dist/button.js
vendored
@ -43,14 +43,14 @@ var Button = function () {
|
||||
var Event = {
|
||||
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
|
||||
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Button = function () {
|
||||
function Button(element) {
|
||||
_classCallCheck(this, Button);
|
||||
|
||||
2
js/dist/button.js.map
vendored
2
js/dist/button.js.map
vendored
File diff suppressed because one or more lines are too long
14
js/dist/carousel.js
vendored
14
js/dist/carousel.js
vendored
@ -85,14 +85,14 @@ var Carousel = function () {
|
||||
INDICATORS: '.carousel-indicators',
|
||||
DATA_SLIDE: '[data-slide], [data-slide-to]',
|
||||
DATA_RIDE: '[data-ride="carousel"]'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Carousel = function () {
|
||||
function Carousel(element, config) {
|
||||
_classCallCheck(this, Carousel);
|
||||
|
||||
2
js/dist/carousel.js.map
vendored
2
js/dist/carousel.js.map
vendored
File diff suppressed because one or more lines are too long
16
js/dist/collapse.js
vendored
16
js/dist/collapse.js
vendored
@ -62,14 +62,14 @@ var Collapse = function () {
|
||||
var Selector = {
|
||||
ACTIVES: '.show, .collapsing',
|
||||
DATA_TOGGLE: '[data-toggle="collapse"]'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Collapse = function () {
|
||||
function Collapse(element, config) {
|
||||
_classCallCheck(this, Collapse);
|
||||
@ -353,7 +353,7 @@ var Collapse = function () {
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
||||
if (event.target.tagName === 'A' && !$.contains(this, event.target)) {
|
||||
if (event.currentTarget.tagName === 'A') {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
|
||||
2
js/dist/collapse.js.map
vendored
2
js/dist/collapse.js.map
vendored
File diff suppressed because one or more lines are too long
19
js/dist/dropdown.js
vendored
19
js/dist/dropdown.js
vendored
@ -85,14 +85,14 @@ var Dropdown = function () {
|
||||
var DefaultType = {
|
||||
offset: '(number|string)',
|
||||
flip: 'boolean'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Dropdown = function () {
|
||||
function Dropdown(element, config) {
|
||||
_classCallCheck(this, Dropdown);
|
||||
@ -249,10 +249,9 @@ var Dropdown = function () {
|
||||
enabled: this._config.flip
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
if (this._inNavbar) {
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
};if (this._inNavbar) {
|
||||
popperConfig.modifiers.applyStyle = {
|
||||
enabled: !this._inNavbar
|
||||
};
|
||||
|
||||
2
js/dist/dropdown.js.map
vendored
2
js/dist/dropdown.js.map
vendored
File diff suppressed because one or more lines are too long
14
js/dist/modal.js
vendored
14
js/dist/modal.js
vendored
@ -74,14 +74,14 @@ var Modal = function () {
|
||||
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
||||
STICKY_CONTENT: '.sticky-top',
|
||||
NAVBAR_TOGGLER: '.navbar-toggler'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Modal = function () {
|
||||
function Modal(element, config) {
|
||||
_classCallCheck(this, Modal);
|
||||
|
||||
2
js/dist/modal.js.map
vendored
2
js/dist/modal.js.map
vendored
File diff suppressed because one or more lines are too long
14
js/dist/popover.js
vendored
14
js/dist/popover.js
vendored
@ -65,14 +65,14 @@ var Popover = function () {
|
||||
FOCUSOUT: 'focusout' + EVENT_KEY,
|
||||
MOUSEENTER: 'mouseenter' + EVENT_KEY,
|
||||
MOUSELEAVE: 'mouseleave' + EVENT_KEY
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Popover = function (_Tooltip) {
|
||||
_inherits(Popover, _Tooltip);
|
||||
|
||||
|
||||
2
js/dist/popover.js.map
vendored
2
js/dist/popover.js.map
vendored
File diff suppressed because one or more lines are too long
14
js/dist/scrollspy.js
vendored
14
js/dist/scrollspy.js
vendored
@ -66,14 +66,14 @@ var ScrollSpy = function () {
|
||||
var OffsetMethod = {
|
||||
OFFSET: 'offset',
|
||||
POSITION: 'position'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var ScrollSpy = function () {
|
||||
function ScrollSpy(element, config) {
|
||||
var _this = this;
|
||||
|
||||
2
js/dist/scrollspy.js.map
vendored
2
js/dist/scrollspy.js.map
vendored
File diff suppressed because one or more lines are too long
14
js/dist/tab.js
vendored
14
js/dist/tab.js
vendored
@ -51,14 +51,14 @@ var Tab = function () {
|
||||
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
|
||||
DROPDOWN_TOGGLE: '.dropdown-toggle',
|
||||
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Tab = function () {
|
||||
function Tab(element) {
|
||||
_classCallCheck(this, Tab);
|
||||
|
||||
2
js/dist/tab.js.map
vendored
2
js/dist/tab.js.map
vendored
File diff suppressed because one or more lines are too long
20
js/dist/tooltip.js
vendored
20
js/dist/tooltip.js
vendored
@ -108,14 +108,14 @@ var Tooltip = function () {
|
||||
FOCUS: 'focus',
|
||||
CLICK: 'click',
|
||||
MANUAL: 'manual'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var Tooltip = function () {
|
||||
function Tooltip(element, config) {
|
||||
_classCallCheck(this, Tooltip);
|
||||
@ -569,18 +569,18 @@ var Tooltip = function () {
|
||||
value: function _getConfig(config) {
|
||||
config = $.extend({}, this.constructor.Default, $(this.element).data(), config);
|
||||
|
||||
if (config.delay && typeof config.delay === 'number') {
|
||||
if (typeof config.delay === 'number') {
|
||||
config.delay = {
|
||||
show: config.delay,
|
||||
hide: config.delay
|
||||
};
|
||||
}
|
||||
|
||||
if (config.title && typeof config.title === 'number') {
|
||||
if (typeof config.title === 'number') {
|
||||
config.title = config.title.toString();
|
||||
}
|
||||
|
||||
if (config.content && typeof config.content === 'number') {
|
||||
if (typeof config.content === 'number') {
|
||||
config.content = config.content.toString();
|
||||
}
|
||||
|
||||
|
||||
2
js/dist/tooltip.js.map
vendored
2
js/dist/tooltip.js.map
vendored
File diff suppressed because one or more lines are too long
5
js/dist/util.js
vendored
5
js/dist/util.js
vendored
@ -24,10 +24,9 @@ var Util = function () {
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
function toType(obj) {
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
};function toType(obj) {
|
||||
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
2
js/dist/util.js.map
vendored
2
js/dist/util.js.map
vendored
File diff suppressed because one or more lines are too long
@ -33,7 +33,7 @@ const Collapse = (() => {
|
||||
|
||||
const DefaultType = {
|
||||
toggle : 'boolean',
|
||||
parent : 'string'
|
||||
parent : '(string|element)'
|
||||
}
|
||||
|
||||
const Event = {
|
||||
@ -289,7 +289,18 @@ const Collapse = (() => {
|
||||
}
|
||||
|
||||
_getParent() {
|
||||
const parent = $(this._config.parent)[0]
|
||||
let parent = null
|
||||
if (Util.isElement(this._config.parent)) {
|
||||
parent = this._config.parent
|
||||
|
||||
// it's a jQuery object
|
||||
if (typeof this._config.parent.jquery !== 'undefined') {
|
||||
parent = this._config.parent[0]
|
||||
}
|
||||
} else {
|
||||
parent = $(this._config.parent)[0]
|
||||
}
|
||||
|
||||
const selector =
|
||||
`[data-toggle="collapse"][data-parent="${this._config.parent}"]`
|
||||
|
||||
@ -363,7 +374,7 @@ const Collapse = (() => {
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
||||
if (event.target.tagName === 'A' && !$.contains(this, event.target)) {
|
||||
if (event.currentTarget.tagName === 'A') {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
|
||||
@ -54,6 +54,7 @@ const ScrollSpy = (() => {
|
||||
ACTIVE : '.active',
|
||||
NAV_LIST_GROUP : '.nav, .list-group',
|
||||
NAV_LINKS : '.nav-link',
|
||||
NAV_ITEMS : '.nav-item',
|
||||
LIST_ITEMS : '.list-group-item',
|
||||
DROPDOWN : '.dropdown',
|
||||
DROPDOWN_ITEMS : '.dropdown-item',
|
||||
@ -264,6 +265,8 @@ const ScrollSpy = (() => {
|
||||
// Set triggered links parents as active
|
||||
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
|
||||
$link.parents(Selector.NAV_LIST_GROUP).prev(`${Selector.NAV_LINKS}, ${Selector.LIST_ITEMS}`).addClass(ClassName.ACTIVE)
|
||||
// Handle special case when .nav-link is inside .nav-item
|
||||
$link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_ITEMS).children(Selector.NAV_LINKS).addClass(ClassName.ACTIVE)
|
||||
}
|
||||
|
||||
$(this._scrollElement).trigger(Event.ACTIVATE, {
|
||||
|
||||
@ -196,11 +196,15 @@ const Tab = (() => {
|
||||
$(dropdownChild).removeClass(ClassName.ACTIVE)
|
||||
}
|
||||
|
||||
active.setAttribute('aria-expanded', false)
|
||||
if (active.getAttribute('role') === 'tab') {
|
||||
active.setAttribute('aria-selected', false)
|
||||
}
|
||||
}
|
||||
|
||||
$(element).addClass(ClassName.ACTIVE)
|
||||
element.setAttribute('aria-expanded', true)
|
||||
if (element.getAttribute('role') === 'tab') {
|
||||
element.setAttribute('aria-selected', true)
|
||||
}
|
||||
|
||||
if (isTransitioning) {
|
||||
Util.reflow(element)
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user