hide bs4 files
|
@ -1,4 +1,4 @@
|
|||
/vendor*
|
||||
.DS_Store
|
||||
web/bootstrap4/*
|
||||
!web/bootstrap4/dist/
|
||||
web/bootstrap4/
|
||||
#!web/bootstrap4/dist
|
|
@ -1,17 +0,0 @@
|
|||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.py]
|
||||
indent_size = 4
|
|
@ -1,16 +0,0 @@
|
|||
# Enforce Unix newlines
|
||||
*.css text eol=lf
|
||||
*.html text eol=lf
|
||||
*.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
|
||||
*.yml text eol=lf
|
||||
# Don't diff or textually merge source maps
|
||||
*.map binary
|
||||
|
||||
bootstrap.css linguist-vendored=false
|
||||
bootstrap.js linguist-vendored=false
|
|
@ -1,56 +0,0 @@
|
|||
# Ignore docs files
|
||||
_gh_pages
|
||||
_site
|
||||
|
||||
# Ignore ruby files
|
||||
.ruby-version
|
||||
.bundle
|
||||
vendor/cache
|
||||
vendor/bundle
|
||||
|
||||
# Numerous always-ignore extensions
|
||||
*.diff
|
||||
*.err
|
||||
*.log
|
||||
*.orig
|
||||
*.rej
|
||||
*.swo
|
||||
*.swp
|
||||
*.vi
|
||||
*.zip
|
||||
*~
|
||||
|
||||
# OS or Editor folders
|
||||
._*
|
||||
.cache
|
||||
.DS_Store
|
||||
.idea
|
||||
.project
|
||||
.settings
|
||||
.tmproj
|
||||
*.esproj
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
nbproject
|
||||
Thumbs.db
|
||||
|
||||
# Komodo
|
||||
.komodotools
|
||||
*.komodoproject
|
||||
|
||||
# grunt-html-validation
|
||||
validation-report.json
|
||||
validation-status.json
|
||||
|
||||
# SCSS-Lint
|
||||
scss-lint-report.xml
|
||||
|
||||
# grunt-contrib-sass cache
|
||||
.sass-cache
|
||||
|
||||
# Jekyll metadata
|
||||
docs/.jekyll-metadata
|
||||
|
||||
# Folders to ignore
|
||||
bower_components
|
||||
node_modules
|
|
@ -1,6 +0,0 @@
|
|||
javascript:
|
||||
enabled: false
|
||||
scss:
|
||||
config_file: scss/.scss-lint.yml
|
||||
enabled: true
|
||||
ignore_file: scss/_normalize.scss
|
|
@ -1,47 +0,0 @@
|
|||
sudo: false
|
||||
language: node_js
|
||||
git:
|
||||
depth: 10
|
||||
node_js:
|
||||
- "4"
|
||||
- "5"
|
||||
before_install:
|
||||
- rvm install 2.2
|
||||
- rvm use 2.2 --fuzzy
|
||||
- export GEMDIR=$(rvm gemdir)
|
||||
- npm install -g npm@3
|
||||
- "export TRAVIS_COMMIT_MSG=\"$(git log --format=%B --no-merges -n 1)\""
|
||||
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip validator\]'; export TWBS_DO_VALIDATOR=$?; true
|
||||
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip sauce\]'; export TWBS_DO_SAUCE=$?; true
|
||||
- if [ "$TRAVIS_REPO_SLUG" = twbs-savage/bootstrap ]; then export TWBS_DO_VALIDATOR=0; fi
|
||||
install:
|
||||
- bundle install --deployment --jobs=3
|
||||
- cp grunt/npm-shrinkwrap.json ./
|
||||
- npm install -g grunt-cli
|
||||
- npm install
|
||||
# Caching disabled due to https://github.com/travis-ci/travis-ci/issues/5092
|
||||
#cache:
|
||||
# directories:
|
||||
# - node_modules
|
||||
# - vendor/bundle
|
||||
env:
|
||||
global:
|
||||
- SAUCE_USERNAME="bootstrap"
|
||||
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
|
||||
- secure: "RKWpS+P20b4tG9tawzCMJSmQftoonmC7tJzyGYiHuEM1TcpHALLBcnzKlr/+DiPTfzDJWY4kS8pxfhK4uXOe8OHnhpMNub7LEWtFPePlZIervOJcsOydaQocTKqVVWD6OUubMeQmQ+tZmvmpjoJ1uPPEbFs9ciF7+dv3U5tLUZ0="
|
||||
- secure: "XswSKBY0HJ/aO9VOBeWlvGpqSFF/DsJmNKz7o5RkJMJX340qe44J929uUNwwOwlv9YrgptzC2W6l8bpmZQV+p6IYs99SoSA8CCaUfIJaqeU9x/UiT5vIHgqaNax+vFJwvzHLpF5v/ggFqFEKCd54gCDasePLTztHeC4oL104iaQ="
|
||||
matrix:
|
||||
- TWBS_TEST=core
|
||||
- TWBS_TEST=validate-html
|
||||
- TWBS_TEST=sauce-js-unit
|
||||
matrix:
|
||||
fast_finish: true
|
||||
exclude:
|
||||
- node_js: "4"
|
||||
env: TWBS_TEST=validate-html
|
||||
- node_js: "4"
|
||||
env: TWBS_TEST=sauce-js-unit
|
||||
notifications:
|
||||
slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH
|
||||
webhooks:
|
||||
- http://savage.twbsapps.com/savage/travis
|
|
@ -1,5 +0,0 @@
|
|||
Bootstrap uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs.
|
||||
|
||||
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](http://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
|
|
@ -1 +0,0 @@
|
|||
v4-alpha.getbootstrap.com
|
|
@ -1,249 +0,0 @@
|
|||
# Contributing to Bootstrap
|
||||
|
||||
Looking to contribute something to Bootstrap? **Here's how you can help.**
|
||||
|
||||
Please take a moment to review this document in order to make the contribution
|
||||
process easy and effective for everyone involved.
|
||||
|
||||
Following these guidelines helps to communicate that you respect the time of
|
||||
the developers managing and developing this open source project. In return,
|
||||
they should reciprocate that respect in addressing your issue or assessing
|
||||
patches and features.
|
||||
|
||||
|
||||
## Using the issue tracker
|
||||
|
||||
The [issue tracker](https://github.com/twbs/bootstrap/issues) is
|
||||
the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
|
||||
and [submitting pull requests](#pull-requests), but please respect the following
|
||||
restrictions:
|
||||
|
||||
* Please **do not** use the issue tracker for personal support requests. Stack
|
||||
Overflow ([`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4) tag), [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](README.md#community) are better places to get help.
|
||||
|
||||
* Please **do not** derail or troll issues. Keep the discussion on topic and
|
||||
respect the opinions of others.
|
||||
|
||||
* Please **do not** open issues or pull requests regarding the code in
|
||||
[`Normalize`](https://github.com/necolas/normalize.css) (open them in
|
||||
its repository).
|
||||
* Please **do not** open issues regarding the official themes offered on <http://themes.getbootstrap.com/>. Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
|
||||
|
||||
|
||||
## Issues and labels
|
||||
|
||||
Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
|
||||
|
||||
- `browser bug` - Issues that are reported to us, but actually are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in an issue opened on that browser's own bug tracker.
|
||||
- `confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap.
|
||||
- `css` - Issues stemming from our compiled CSS or source Sass files.
|
||||
- `docs` - Issues for improving or updating our documentation.
|
||||
- `examples` - Issues involving the example templates included in our docs.
|
||||
- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
|
||||
- `grunt` - Issues with our included JavaScript-based Gruntfile, which is used to run all our tests, concatenate and compile source files, and more.
|
||||
- `help wanted` - Issues we need or would love help from the community to resolve.
|
||||
- `js` - Issues stemming from our compiled or source JavaScript files.
|
||||
- `meta` - Issues with the project itself or our GitHub repository.
|
||||
|
||||
For a complete look at our labels, see the [project labels page](https://github.com/twbs/bootstrap/labels).
|
||||
|
||||
|
||||
## Bug reports
|
||||
|
||||
A bug is a _demonstrable problem_ that is caused by the code in the repository.
|
||||
Good bug reports are extremely helpful, so thanks!
|
||||
|
||||
Guidelines for bug reports:
|
||||
|
||||
0. **Validate and lint your code** — [validate your HTML](http://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.
|
||||
|
||||
1. **Use the GitHub issue search** — check if the issue has already been
|
||||
reported.
|
||||
|
||||
2. **Check if the issue has been fixed** — try to reproduce it using the
|
||||
latest `master` or development branch in the repository.
|
||||
|
||||
3. **Isolate the problem** — ideally create a [reduced test
|
||||
case](https://css-tricks.com/reduced-test-cases/) and a live example.
|
||||
[This JS Bin](http://jsbin.com/qusafa/edit?html,output) is a helpful template.
|
||||
|
||||
|
||||
A good bug report shouldn't leave others needing to chase you up for more
|
||||
information. Please try to be as detailed as possible in your report. What is
|
||||
your environment? What steps will reproduce the issue? What browser(s) and OS
|
||||
experience the problem? Do other browsers show the bug differently? What
|
||||
would you expect to be the outcome? All these details will help people to fix
|
||||
any potential bugs.
|
||||
|
||||
Example:
|
||||
|
||||
> Short and descriptive example bug report title
|
||||
>
|
||||
> A summary of the issue and the browser/OS environment in which it occurs. If
|
||||
> suitable, include the steps required to reproduce the bug.
|
||||
>
|
||||
> 1. This is the first step
|
||||
> 2. This is the second step
|
||||
> 3. Further steps, etc.
|
||||
>
|
||||
> `<url>` - a link to the reduced test case
|
||||
>
|
||||
> Any other information you want to share that is relevant to the issue being
|
||||
> reported. This might include the lines of code that you have identified as
|
||||
> causing the bug, and potential solutions (and your opinions on their
|
||||
> merits).
|
||||
|
||||
### Reporting upstream browser bugs
|
||||
|
||||
Sometimes bugs reported to us are actually caused by bugs in the browser(s) themselves, not bugs in Bootstrap per se.
|
||||
When feasible, we aim to report such upstream bugs to the relevant browser vendor(s), and then list them on our [Wall of Browser Bugs](http://getbootstrap.com/browser-bugs/) and [document them in MDN](https://developer.mozilla.org/en-US/docs/Web).
|
||||
|
||||
| Vendor(s) | Browser(s) | Rendering engine | Bug reporting website(s) | Notes |
|
||||
| ------------- | ---------------------------- | ---------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------- |
|
||||
| Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. |
|
||||
| Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit <br> https://bugreport.apple.com | In Apple's bug reporter, choose "Safari" as the product. |
|
||||
| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://code.google.com/p/chromium/issues/list | Click the "New issue" button. |
|
||||
| Microsoft | Internet Explorer / Edge | Trident/EdgeHTML | https://connect.microsoft.com/IE/feedback/LoadSubmitFeedbackForm | |
|
||||
|
||||
### Issues bots
|
||||
|
||||
[@twbs-lmvtfy](https://github.com/twbs-lmvtfy) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks for HTML validation errors in live examples (e.g. jsFiddles, JS Bins, Bootplys, Plunks, CodePens, etc.) posted in issue comments. If it finds any errors, it will post a follow-up comment on the issue and point out the errors. If this happens with an example you've posted, please fix the errors and post an updated live example. If you opened a bug report, please check whether the bug still occurs with your revised, valid live example. If the bug no longer occurs, it was probably due to your invalid HTML rather than something in Bootstrap and we'd appreciate it if you could close out the GitHub issue.
|
||||
|
||||
|
||||
## Feature requests
|
||||
|
||||
Feature requests are welcome. But take a moment to find out whether your idea
|
||||
fits with the scope and aims of the project. It's up to *you* to make a strong
|
||||
case to convince the project's developers of the merits of this feature. Please
|
||||
provide as much detail and context as possible.
|
||||
|
||||
|
||||
## Pull requests
|
||||
|
||||
Good pull requests—patches, improvements, new features—are a fantastic
|
||||
help. They should remain focused in scope and avoid containing unrelated
|
||||
commits.
|
||||
|
||||
**Please ask first** before embarking on any significant pull request (e.g.
|
||||
implementing features, refactoring code, porting to a different language),
|
||||
otherwise you risk spending a lot of time working on something that the
|
||||
project's developers might not want to merge into the project.
|
||||
|
||||
Please adhere to the [coding guidelines](#code-guidelines) used throughout the
|
||||
project (indentation, accurate comments, etc.) and any other requirements
|
||||
(such as test coverage).
|
||||
|
||||
**Do not edit `bootstrap.css`, or `bootstrap.js`
|
||||
directly!** Those files are automatically generated. You should edit the
|
||||
source files in [`/bootstrap/scss/`](https://github.com/twbs/bootstrap/tree/master/scss)
|
||||
and/or [`/bootstrap/js/`](https://github.com/twbs/bootstrap/tree/master/js) instead.
|
||||
|
||||
Similarly, when contributing to Bootstrap's documentation, you should edit the
|
||||
documentation source files in
|
||||
[the `/bootstrap/docs/` directory of the `master` branch](https://github.com/twbs/bootstrap/tree/master/docs).
|
||||
**Do not edit the `gh-pages` branch.** That branch is generated from the
|
||||
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,
|
||||
and configure the remotes:
|
||||
|
||||
```bash
|
||||
# Clone your fork of the repo into the current directory
|
||||
git clone https://github.com/<your-username>/bootstrap.git
|
||||
# Navigate to the newly cloned directory
|
||||
cd bootstrap
|
||||
# Assign the original repo to a remote called "upstream"
|
||||
git remote add upstream https://github.com/twbs/bootstrap.git
|
||||
```
|
||||
|
||||
2. If you cloned a while ago, get the latest changes from upstream:
|
||||
|
||||
```bash
|
||||
git checkout master
|
||||
git pull upstream master
|
||||
```
|
||||
|
||||
3. Create a new topic branch (off the main project development branch) to
|
||||
contain your feature, change, or fix:
|
||||
|
||||
```bash
|
||||
git checkout -b <topic-branch-name>
|
||||
```
|
||||
|
||||
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)
|
||||
feature to tidy up your commits before making them public.
|
||||
|
||||
5. Locally merge (or rebase) the upstream development branch into your topic branch:
|
||||
|
||||
```bash
|
||||
git pull [--rebase] upstream master
|
||||
```
|
||||
|
||||
6. Push your topic branch up to your fork:
|
||||
|
||||
```bash
|
||||
git push origin <topic-branch-name>
|
||||
```
|
||||
|
||||
7. [Open a Pull Request](https://help.github.com/articles/using-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
|
||||
license your work under the terms of the [MIT License](LICENSE) (if it
|
||||
includes code changes) and under the terms of the
|
||||
[Creative Commons Attribution 3.0 Unported License](docs/LICENSE)
|
||||
(if it includes documentation changes).
|
||||
|
||||
### Pull request bots
|
||||
|
||||
[@twbs-rorschach](https://github.com/twbs-rorschach) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks all pull requests for a few simple common mistakes. It's possible that Rorschach might leave a comment on your pull request and then close it. If that happens, simply fix the problem(s) mentioned in the comment (there should be link(s) in the comment explaining the problem(s) in detail) and then either:
|
||||
|
||||
* 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.
|
||||
|
||||
|
||||
## Code guidelines
|
||||
|
||||
### HTML
|
||||
|
||||
[Adhere to the Code Guide.](http://codeguide.co/#html)
|
||||
|
||||
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
|
||||
- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
|
||||
- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
|
||||
|
||||
### CSS
|
||||
|
||||
[Adhere to the Code Guide.](http://codeguide.co/#css)
|
||||
|
||||
- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
|
||||
- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines/) for more details.
|
||||
|
||||
### JS
|
||||
|
||||
- No semicolons (in client-side JS)
|
||||
- 2 spaces (no tabs)
|
||||
- strict mode
|
||||
- "Attractive"
|
||||
|
||||
### Checking coding style
|
||||
|
||||
Run `grunt test` before committing to ensure your changes follow our coding standards.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
|
||||
By contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](docs/LICENSE).
|
||||
|
||||
Prior to v3.1.0, Bootstrap's code was released under the Apache License v2.0.
|
|
@ -1,12 +0,0 @@
|
|||
# Ruby Gems for building and testing Bootstrap
|
||||
# Run `grunt update-gemfile-lock` to update to the latest compatible versions
|
||||
|
||||
source 'https://rubygems.org'
|
||||
|
||||
group :development, :test do
|
||||
gem 'jekyll', '~> 3.0.1'
|
||||
gem 'jekyll-redirect-from', '~> 0.9.0'
|
||||
gem 'jekyll-sitemap', '~> 0.9.0'
|
||||
gem 'sass', '~> 3.4.19'
|
||||
gem 'scss_lint', '~> 0.43'
|
||||
end
|
|
@ -1,52 +0,0 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
colorator (0.1)
|
||||
ffi (1.9.10)
|
||||
ffi (1.9.10-x64-mingw32)
|
||||
jekyll (3.0.1)
|
||||
colorator (~> 0.1)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
kramdown (~> 1.3)
|
||||
liquid (~> 3.0)
|
||||
mercenary (~> 0.3.3)
|
||||
rouge (~> 1.7)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-redirect-from (0.9.0)
|
||||
jekyll (>= 2.0)
|
||||
jekyll-sass-converter (1.3.0)
|
||||
sass (~> 3.2)
|
||||
jekyll-sitemap (0.9.0)
|
||||
jekyll-watch (1.3.0)
|
||||
listen (~> 3.0)
|
||||
kramdown (1.9.0)
|
||||
liquid (3.0.6)
|
||||
listen (3.0.5)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9)
|
||||
mercenary (0.3.5)
|
||||
rainbow (2.0.0)
|
||||
rb-fsevent (0.9.6)
|
||||
rb-inotify (0.9.5)
|
||||
ffi (>= 0.5.0)
|
||||
rouge (1.10.1)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.4.19)
|
||||
scss_lint (0.43.2)
|
||||
rainbow (~> 2.0)
|
||||
sass (~> 3.4.15)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
x64-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 3.0.1)
|
||||
jekyll-redirect-from (~> 0.9.0)
|
||||
jekyll-sitemap (~> 0.9.0)
|
||||
sass (~> 3.4.19)
|
||||
scss_lint (~> 0.43)
|
||||
|
||||
BUNDLED WITH
|
||||
1.10.6
|
|
@ -1,549 +0,0 @@
|
|||
/*!
|
||||
* Bootstrap's Gruntfile
|
||||
* http://getbootstrap.com
|
||||
* Copyright 2013-2015 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
module.exports = function (grunt) {
|
||||
'use strict';
|
||||
|
||||
// Force use of Unix newlines
|
||||
grunt.util.linefeed = '\n';
|
||||
|
||||
RegExp.quote = function (string) {
|
||||
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
|
||||
};
|
||||
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var glob = require('glob');
|
||||
var isTravis = require('is-travis');
|
||||
var npmShrinkwrap = require('npm-shrinkwrap');
|
||||
var mq4HoverShim = require('mq4-hover-shim');
|
||||
var autoprefixer = require('autoprefixer')({
|
||||
browsers: [
|
||||
//
|
||||
// Official browser support policy:
|
||||
// http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supported-browsers
|
||||
//
|
||||
'Chrome >= 35', // Exact version number here is kinda arbitrary
|
||||
// Rather than using Autoprefixer's native "Firefox ESR" version specifier string,
|
||||
// we deliberately hardcode the number. This is to avoid unwittingly severely breaking the previous ESR in the event that:
|
||||
// (a) we happen to ship a new Bootstrap release soon after the release of a new ESR,
|
||||
// such that folks haven't yet had a reasonable amount of time to upgrade; and
|
||||
// (b) the new ESR has unprefixed CSS properties/values whose absence would severely break webpages
|
||||
// (e.g. `box-sizing`, as opposed to `background: linear-gradient(...)`).
|
||||
// Since they've been unprefixed, Autoprefixer will stop prefixing them,
|
||||
// thus causing them to not work in the previous ESR (where the prefixes were required).
|
||||
'Firefox >= 31', // Current Firefox Extended Support Release (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 >= 9',
|
||||
// Out of leniency, we prefix these 1 version further back than the official policy.
|
||||
'iOS >= 8',
|
||||
'Safari >= 8',
|
||||
// The following remain NOT officially supported, but we're lenient and include their prefixes to avoid severely breaking in them.
|
||||
'Android 2.3',
|
||||
'Android >= 4',
|
||||
'Opera >= 12'
|
||||
]
|
||||
});
|
||||
|
||||
var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
|
||||
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
|
||||
|
||||
Object.keys(configBridge.paths).forEach(function (key) {
|
||||
configBridge.paths[key].forEach(function (val, i, arr) {
|
||||
arr[i] = path.join('./docs/assets', val);
|
||||
});
|
||||
});
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
|
||||
// Metadata.
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
banner: '/*!\n' +
|
||||
' * Bootstrap v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
|
||||
' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
|
||||
' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
|
||||
' */\n',
|
||||
jqueryCheck: 'if (typeof jQuery === \'undefined\') {\n' +
|
||||
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\')\n' +
|
||||
'}\n',
|
||||
jqueryVersionCheck: '+function ($) {\n' +
|
||||
' var version = $.fn.jquery.split(\' \')[0].split(\'.\')\n' +
|
||||
' if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 3)) {\n' +
|
||||
' throw new Error(\'Bootstrap\\\'s JavaScript requires at least jQuery v1.9.1 but less than v3.0.0\')\n' +
|
||||
' }\n' +
|
||||
'}(jQuery);\n\n',
|
||||
|
||||
// Task configuration.
|
||||
clean: {
|
||||
dist: 'dist',
|
||||
docs: 'docs/dist'
|
||||
},
|
||||
|
||||
// JS build configuration
|
||||
lineremover: {
|
||||
es6Import: {
|
||||
files: {
|
||||
'<%= concat.bootstrap.dest %>': '<%= concat.bootstrap.dest %>'
|
||||
},
|
||||
options: {
|
||||
exclusionPattern: /^(import|export)/g
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
babel: {
|
||||
dev: {
|
||||
options: {
|
||||
sourceMap: true,
|
||||
modules: 'ignore'
|
||||
},
|
||||
files: {
|
||||
'js/dist/util.js' : 'js/src/util.js',
|
||||
'js/dist/alert.js' : 'js/src/alert.js',
|
||||
'js/dist/button.js' : 'js/src/button.js',
|
||||
'js/dist/carousel.js' : 'js/src/carousel.js',
|
||||
'js/dist/collapse.js' : 'js/src/collapse.js',
|
||||
'js/dist/dropdown.js' : 'js/src/dropdown.js',
|
||||
'js/dist/modal.js' : 'js/src/modal.js',
|
||||
'js/dist/scrollspy.js' : 'js/src/scrollspy.js',
|
||||
'js/dist/tab.js' : 'js/src/tab.js',
|
||||
'js/dist/tooltip.js' : 'js/src/tooltip.js',
|
||||
'js/dist/popover.js' : 'js/src/popover.js'
|
||||
}
|
||||
},
|
||||
dist: {
|
||||
options: {
|
||||
modules: 'ignore'
|
||||
},
|
||||
files: {
|
||||
'<%= concat.bootstrap.dest %>' : '<%= concat.bootstrap.dest %>'
|
||||
}
|
||||
},
|
||||
umd: {
|
||||
options: {
|
||||
modules: 'umd'
|
||||
},
|
||||
files: {
|
||||
'dist/js/umd/util.js' : 'js/src/util.js',
|
||||
'dist/js/umd/alert.js' : 'js/src/alert.js',
|
||||
'dist/js/umd/button.js' : 'js/src/button.js',
|
||||
'dist/js/umd/carousel.js' : 'js/src/carousel.js',
|
||||
'dist/js/umd/collapse.js' : 'js/src/collapse.js',
|
||||
'dist/js/umd/dropdown.js' : 'js/src/dropdown.js',
|
||||
'dist/js/umd/modal.js' : 'js/src/modal.js',
|
||||
'dist/js/umd/scrollspy.js' : 'js/src/scrollspy.js',
|
||||
'dist/js/umd/tab.js' : 'js/src/tab.js',
|
||||
'dist/js/umd/tooltip.js' : 'js/src/tooltip.js',
|
||||
'dist/js/umd/popover.js' : 'js/src/popover.js'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
eslint: {
|
||||
options: {
|
||||
configFile: 'js/.eslintrc'
|
||||
},
|
||||
target: 'js/src/*.js'
|
||||
},
|
||||
|
||||
jscs: {
|
||||
options: {
|
||||
config: 'js/.jscsrc'
|
||||
},
|
||||
grunt: {
|
||||
src: ['Gruntfile.js', 'grunt/*.js']
|
||||
},
|
||||
core: {
|
||||
src: 'js/src/*.js'
|
||||
},
|
||||
test: {
|
||||
src: 'js/tests/unit/*.js'
|
||||
},
|
||||
assets: {
|
||||
options: {
|
||||
requireCamelCaseOrUpperCaseIdentifiers: null
|
||||
},
|
||||
src: ['docs/assets/js/src/*.js', 'docs/assets/js/*.js', '!docs/assets/js/*.min.js']
|
||||
}
|
||||
},
|
||||
|
||||
stamp: {
|
||||
options: {
|
||||
banner: '<%= banner %>\n<%= jqueryCheck %>\n<%= jqueryVersionCheck %>\n+function ($) {\n',
|
||||
footer: '\n}(jQuery);'
|
||||
},
|
||||
bootstrap: {
|
||||
files: {
|
||||
src: '<%= concat.bootstrap.dest %>'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
concat: {
|
||||
options: {
|
||||
stripBanners: false
|
||||
},
|
||||
bootstrap: {
|
||||
src: [
|
||||
'js/src/util.js',
|
||||
'js/src/alert.js',
|
||||
'js/src/button.js',
|
||||
'js/src/carousel.js',
|
||||
'js/src/collapse.js',
|
||||
'js/src/dropdown.js',
|
||||
'js/src/modal.js',
|
||||
'js/src/scrollspy.js',
|
||||
'js/src/tab.js',
|
||||
'js/src/tooltip.js',
|
||||
'js/src/popover.js'
|
||||
],
|
||||
dest: 'dist/js/<%= pkg.name %>.js'
|
||||
}
|
||||
},
|
||||
|
||||
uglify: {
|
||||
options: {
|
||||
compress: {
|
||||
warnings: false
|
||||
},
|
||||
mangle: true,
|
||||
preserveComments: /^!|@preserve|@license|@cc_on/i
|
||||
},
|
||||
core: {
|
||||
src: '<%= concat.bootstrap.dest %>',
|
||||
dest: 'dist/js/<%= pkg.name %>.min.js'
|
||||
},
|
||||
docsJs: {
|
||||
src: configBridge.paths.docsJs,
|
||||
dest: 'docs/assets/js/docs.min.js'
|
||||
}
|
||||
},
|
||||
|
||||
qunit: {
|
||||
options: {
|
||||
inject: 'js/tests/unit/phantom.js'
|
||||
},
|
||||
files: 'js/tests/index.html'
|
||||
},
|
||||
|
||||
// CSS build configuration
|
||||
scsslint: {
|
||||
options: {
|
||||
bundleExec: true,
|
||||
config: 'scss/.scss-lint.yml',
|
||||
reporterOutput: null
|
||||
},
|
||||
src: ['scss/*.scss', '!scss/_normalize.scss']
|
||||
},
|
||||
|
||||
postcss: {
|
||||
core: {
|
||||
options: {
|
||||
map: true,
|
||||
processors: [
|
||||
mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.bs-true-hover ' }),
|
||||
autoprefixer
|
||||
]
|
||||
},
|
||||
src: 'dist/css/*.css'
|
||||
},
|
||||
docs: {
|
||||
options: {
|
||||
processors: [
|
||||
autoprefixer
|
||||
]
|
||||
},
|
||||
src: 'docs/assets/css/docs.min.css'
|
||||
},
|
||||
examples: {
|
||||
options: {
|
||||
processors: [
|
||||
autoprefixer
|
||||
]
|
||||
},
|
||||
expand: true,
|
||||
cwd: 'docs/examples/',
|
||||
src: ['**/*.css'],
|
||||
dest: 'docs/examples/'
|
||||
}
|
||||
},
|
||||
|
||||
cssmin: {
|
||||
options: {
|
||||
// TODO: disable `zeroUnits` optimization once clean-css 3.2 is released
|
||||
// and then simplify the fix for https://github.com/twbs/bootstrap/issues/14837 accordingly
|
||||
compatibility: 'ie9',
|
||||
keepSpecialComments: '*',
|
||||
sourceMap: true,
|
||||
advanced: false
|
||||
},
|
||||
core: {
|
||||
files: [
|
||||
{
|
||||
expand: true,
|
||||
cwd: 'dist/css',
|
||||
src: ['*.css', '!*.min.css'],
|
||||
dest: 'dist/css',
|
||||
ext: '.min.css'
|
||||
}
|
||||
]
|
||||
},
|
||||
docs: {
|
||||
src: 'docs/assets/css/docs.min.css',
|
||||
dest: 'docs/assets/css/docs.min.css'
|
||||
}
|
||||
},
|
||||
|
||||
csscomb: {
|
||||
options: {
|
||||
config: 'scss/.csscomb.json'
|
||||
},
|
||||
dist: {
|
||||
expand: true,
|
||||
cwd: 'dist/css/',
|
||||
src: ['*.css', '!*.min.css'],
|
||||
dest: 'dist/css/'
|
||||
},
|
||||
examples: {
|
||||
expand: true,
|
||||
cwd: 'docs/examples/',
|
||||
src: '**/*.css',
|
||||
dest: 'docs/examples/'
|
||||
},
|
||||
docs: {
|
||||
src: 'docs/assets/css/src/docs.css',
|
||||
dest: 'docs/assets/css/src/docs.css'
|
||||
}
|
||||
},
|
||||
|
||||
copy: {
|
||||
docs: {
|
||||
expand: true,
|
||||
cwd: 'dist/',
|
||||
src: [
|
||||
'**/*'
|
||||
],
|
||||
dest: 'docs/dist/'
|
||||
}
|
||||
},
|
||||
|
||||
connect: {
|
||||
server: {
|
||||
options: {
|
||||
port: 3000,
|
||||
base: '.'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
jekyll: {
|
||||
options: {
|
||||
bundleExec: true,
|
||||
config: '_config.yml',
|
||||
incremental: false
|
||||
},
|
||||
docs: {},
|
||||
github: {
|
||||
options: {
|
||||
raw: 'github: true'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
htmllint: {
|
||||
options: {
|
||||
ignore: [
|
||||
'Element “img” is missing required attribute “src”.',
|
||||
'Attribute “autocomplete” is only allowed when the input type is “color”, “date”, “datetime”, “datetime-local”, “email”, “month”, “number”, “password”, “range”, “search”, “tel”, “text”, “time”, “url”, or “week”.',
|
||||
'Attribute “autocomplete” not allowed on element “button” at this point.',
|
||||
'Element “div” not allowed as child of element “progress” in this context. (Suppressing further errors from this subtree.)',
|
||||
'Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).',
|
||||
'The “datetime” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
|
||||
]
|
||||
},
|
||||
src: ['_gh_pages/**/*.html', 'js/tests/visual/*.html']
|
||||
},
|
||||
|
||||
watch: {
|
||||
src: {
|
||||
files: '<%= jscs.core.src %>',
|
||||
tasks: ['babel:dev']
|
||||
},
|
||||
sass: {
|
||||
files: 'scss/**/*.scss',
|
||||
tasks: ['dist-css', 'docs']
|
||||
},
|
||||
docs: {
|
||||
files: 'docs/assets/scss/**/*.scss',
|
||||
tasks: ['dist-css', 'docs']
|
||||
}
|
||||
},
|
||||
|
||||
'saucelabs-qunit': {
|
||||
all: {
|
||||
options: {
|
||||
build: process.env.TRAVIS_JOB_ID,
|
||||
concurrency: 10,
|
||||
maxRetries: 3,
|
||||
maxPollRetries: 4,
|
||||
urls: ['http://127.0.0.1:3000/js/tests/index.html?hidepassed'],
|
||||
browsers: grunt.file.readYAML('grunt/sauce_browsers.yml')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
exec: {
|
||||
npmUpdate: {
|
||||
command: 'npm update'
|
||||
}
|
||||
},
|
||||
|
||||
buildcontrol: {
|
||||
options: {
|
||||
dir: '_gh_pages',
|
||||
commit: true,
|
||||
push: true,
|
||||
message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
remote: 'git@github.com:twbs/derpstrap.git',
|
||||
branch: 'gh-pages'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
compress: {
|
||||
main: {
|
||||
options: {
|
||||
archive: 'bootstrap-<%= pkg.version %>-dist.zip',
|
||||
mode: 'zip',
|
||||
level: 9,
|
||||
pretty: true
|
||||
},
|
||||
files: [
|
||||
{
|
||||
expand: true,
|
||||
cwd: 'dist/',
|
||||
src: ['**'],
|
||||
dest: 'bootstrap-<%= pkg.version %>-dist'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// These plugins provide necessary tasks.
|
||||
require('load-grunt-tasks')(grunt, { scope: 'devDependencies',
|
||||
// Exclude Sass compilers. We choose the one to load later on.
|
||||
pattern: ['grunt-*', '!grunt-sass', '!grunt-contrib-sass'] });
|
||||
require('time-grunt')(grunt);
|
||||
|
||||
// Docs HTML validation task
|
||||
grunt.registerTask('validate-html', ['jekyll:docs', 'htmllint']);
|
||||
|
||||
var runSubset = function (subset) {
|
||||
return !process.env.TWBS_TEST || process.env.TWBS_TEST === subset;
|
||||
};
|
||||
var isUndefOrNonZero = function (val) {
|
||||
return val === undefined || val !== '0';
|
||||
};
|
||||
|
||||
// Test task.
|
||||
var testSubtasks = [];
|
||||
// Skip core tests if running a different subset of the test suite
|
||||
if (runSubset('core') &&
|
||||
// Skip core tests if this is a Savage build
|
||||
process.env.TRAVIS_REPO_SLUG !== 'twbs-savage/bootstrap') {
|
||||
testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'test-scss', 'test-js', 'docs']);
|
||||
}
|
||||
// Skip HTML validation if running a different subset of the test suite
|
||||
if (runSubset('validate-html') &&
|
||||
isTravis &&
|
||||
// Skip HTML5 validator when [skip validator] is in the commit message
|
||||
isUndefOrNonZero(process.env.TWBS_DO_VALIDATOR)) {
|
||||
testSubtasks.push('validate-html');
|
||||
}
|
||||
// Only run Sauce Labs tests if there's a Sauce access key
|
||||
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' &&
|
||||
// Skip Sauce if running a different subset of the test suite
|
||||
runSubset('sauce-js-unit') &&
|
||||
// Skip Sauce on Travis when [skip sauce] is in the commit message
|
||||
isUndefOrNonZero(process.env.TWBS_DO_SAUCE)) {
|
||||
testSubtasks.push('babel:dev');
|
||||
testSubtasks.push('connect');
|
||||
testSubtasks.push('saucelabs-qunit');
|
||||
}
|
||||
grunt.registerTask('test', testSubtasks);
|
||||
grunt.registerTask('test-js', ['eslint', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
|
||||
|
||||
// JS distribution task.
|
||||
grunt.registerTask('dist-js', ['babel:dev', 'concat', 'lineremover', 'babel:dist', 'stamp', 'uglify:core', 'commonjs']);
|
||||
|
||||
grunt.registerTask('test-scss', ['scsslint']);
|
||||
|
||||
// CSS distribution task.
|
||||
// Supported Compilers: sass (Ruby) and libsass.
|
||||
(function (sassCompilerName) {
|
||||
require('./grunt/bs-sass-compile/' + sassCompilerName + '.js')(grunt);
|
||||
})(process.env.TWBS_SASS || 'libsass');
|
||||
// grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
|
||||
grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
|
||||
|
||||
grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
|
||||
|
||||
// Full distribution task.
|
||||
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
|
||||
|
||||
// Default task.
|
||||
grunt.registerTask('default', ['clean:dist', 'test']);
|
||||
|
||||
grunt.registerTask('commonjs', ['babel:umd', 'npm-js']);
|
||||
|
||||
grunt.registerTask('npm-js', 'Generate npm-js entrypoint module in dist dir.', function () {
|
||||
var srcFiles = Object.keys(grunt.config.get('babel.umd.files')).map(function (filename) {
|
||||
return './' + path.join('umd', path.basename(filename))
|
||||
})
|
||||
var destFilepath = 'dist/js/npm.js';
|
||||
generateCommonJSModule(grunt, srcFiles, destFilepath);
|
||||
});
|
||||
|
||||
// Docs task.
|
||||
grunt.registerTask('docs-css', ['postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
|
||||
grunt.registerTask('docs-js', ['uglify:docsJs']);
|
||||
grunt.registerTask('lint-docs-js', ['jscs:assets']);
|
||||
grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
|
||||
grunt.registerTask('docs-github', ['jekyll:github', 'htmlmin']);
|
||||
|
||||
grunt.registerTask('prep-release', ['dist', 'docs', 'docs-github', 'compress']);
|
||||
|
||||
// Publish to GitHub
|
||||
grunt.registerTask('publish', ['buildcontrol:pages']);
|
||||
|
||||
// Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json).
|
||||
// This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
|
||||
grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', '_update-shrinkwrap']);
|
||||
grunt.registerTask('_update-shrinkwrap', function () {
|
||||
var done = this.async();
|
||||
npmShrinkwrap({ dev: true, dirname: __dirname }, function (err) {
|
||||
if (err) {
|
||||
grunt.fail.warn(err);
|
||||
}
|
||||
var dest = 'grunt/npm-shrinkwrap.json';
|
||||
fs.renameSync('npm-shrinkwrap.json', dest);
|
||||
grunt.log.writeln('File ' + dest.cyan + ' updated.');
|
||||
done();
|
||||
});
|
||||
});
|
||||
};
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2011-2015 Twitter, Inc
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
|
@ -1,130 +0,0 @@
|
|||
# [Bootstrap](http://getbootstrap.com)
|
||||
|
||||
[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com)
|
||||
![Bower version](https://img.shields.io/bower/v/bootstrap.svg)
|
||||
[![npm version](https://img.shields.io/npm/v/bootstrap.svg)](https://www.npmjs.com/package/bootstrap)
|
||||
[![Build Status](https://img.shields.io/travis/twbs/bootstrap/master.svg)](https://travis-ci.org/twbs/bootstrap)
|
||||
[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
|
||||
[![NuGet](https://img.shields.io/nuget/vpre/bootstrap.svg)](https://www.nuget.org/packages/bootstrap/4.0.0-alpha)
|
||||
[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
|
||||
|
||||
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community.
|
||||
|
||||
To get started, check out <http://getbootstrap.com>!
|
||||
|
||||
## Table of contents
|
||||
|
||||
- [Quick start](#quick-start)
|
||||
- [Bugs and feature requests](#bugs-and-feature-requests)
|
||||
- [Documentation](#documentation)
|
||||
- [Contributing](#contributing)
|
||||
- [Community](#community)
|
||||
- [Versioning](#versioning)
|
||||
- [Creators](#creators)
|
||||
- [Copyright and license](#copyright-and-license)
|
||||
|
||||
## Quick start
|
||||
|
||||
Several quick start options are available:
|
||||
|
||||
- [Download the latest release](https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.2.zip).
|
||||
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
|
||||
- Install with [Bower](http://bower.io): `bower install bootstrap`.
|
||||
- Install with [npm](https://www.npmjs.com): `npm install bootstrap`.
|
||||
- Install with [Meteor](https://www.meteor.com): `meteor add twbs:bootstrap`.
|
||||
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap`.
|
||||
- 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](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
|
||||
|
||||
### What's included
|
||||
|
||||
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
|
||||
|
||||
```
|
||||
bootstrap/
|
||||
├── css/
|
||||
│ ├── bootstrap.css
|
||||
│ ├── bootstrap.css.map
|
||||
│ ├── bootstrap.min.css
|
||||
│ └── bootstrap.min.css.map
|
||||
└── js/
|
||||
├── bootstrap.js
|
||||
└── bootstrap.min.js
|
||||
```
|
||||
|
||||
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
|
||||
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
|
||||
|
||||
|
||||
## Documentation
|
||||
|
||||
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://getbootstrap.com>. The docs may also be run locally.
|
||||
|
||||
### Running documentation locally
|
||||
|
||||
1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
|
||||
2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
|
||||
3. Open <http://localhost:9001> in your browser, and voilà.
|
||||
|
||||
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
|
||||
|
||||
### Documentation for previous releases
|
||||
|
||||
Documentation for v2.3.2 has been made available for the time being at <http://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
|
||||
|
||||
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
|
||||
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
|
||||
|
||||
Moreover, if your pull request contains JavaScript patches or features, you must include [relevant unit tests](https://github.com/twbs/bootstrap/tree/master/js/tests). All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
|
||||
|
||||
Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
|
||||
|
||||
|
||||
|
||||
## Community
|
||||
|
||||
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](http://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.
|
||||
|
||||
|
||||
|
||||
## Versioning
|
||||
|
||||
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](http://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
|
||||
|
||||
|
||||
## Creators
|
||||
|
||||
**Mark Otto**
|
||||
|
||||
- <https://twitter.com/mdo>
|
||||
- <https://github.com/mdo>
|
||||
|
||||
**Jacob Thornton**
|
||||
|
||||
- <https://twitter.com/fat>
|
||||
- <https://github.com/fat>
|
||||
|
||||
|
||||
|
||||
## Copyright and license
|
||||
|
||||
Code and documentation copyright 2011-2015 Twitter, Inc. Code released under [the MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE).
|
|
@ -1,44 +0,0 @@
|
|||
# Dependencies
|
||||
markdown: kramdown
|
||||
highlighter: rouge
|
||||
|
||||
kramdown:
|
||||
auto_ids: true
|
||||
|
||||
# Permalinks
|
||||
permalink: pretty
|
||||
|
||||
# Server
|
||||
source: docs
|
||||
destination: _gh_pages
|
||||
host: 0.0.0.0
|
||||
port: 9001
|
||||
baseurl: ""
|
||||
url: http://getbootstrap.com
|
||||
encoding: UTF-8
|
||||
exclude: [assets/scss/]
|
||||
|
||||
gems:
|
||||
- jekyll-redirect-from
|
||||
- jekyll-sitemap
|
||||
|
||||
# Custom vars
|
||||
current_version: 4.0.0-alpha.2
|
||||
repo: https://github.com/twbs/bootstrap
|
||||
slack: https://bootstrap-slack.herokuapp.com
|
||||
|
||||
download:
|
||||
source: https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.2.zip
|
||||
dist: https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip
|
||||
|
||||
blog: http://blog.getbootstrap.com
|
||||
expo: http://expo.getbootstrap.com
|
||||
themes: http://themes.getbootstrap.com
|
||||
|
||||
cdn:
|
||||
# See https://www.srihash.org for info on how to generate the hashes
|
||||
css: https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css
|
||||
css_hash: "sha384-XXXXXXXX"
|
||||
js: https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js
|
||||
js_hash: "sha384-XXXXXXXX"
|
||||
jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
|
|
@ -1,34 +0,0 @@
|
|||
{
|
||||
"name": "bootstrap",
|
||||
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
|
||||
"keywords": [
|
||||
"css",
|
||||
"js",
|
||||
"sass",
|
||||
"mobile-first",
|
||||
"responsive",
|
||||
"front-end",
|
||||
"framework",
|
||||
"web"
|
||||
],
|
||||
"homepage": "http://getbootstrap.com",
|
||||
"license": "MIT",
|
||||
"moduleType": "globals",
|
||||
"main": [
|
||||
"scss/bootstrap.scss",
|
||||
"dist/js/bootstrap.js"
|
||||
],
|
||||
"ignore": [
|
||||
"/.*",
|
||||
"_config.yml",
|
||||
"CNAME",
|
||||
"composer.json",
|
||||
"CONTRIBUTING.md",
|
||||
"docs",
|
||||
"js/tests",
|
||||
"test-infra"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "1.9.1 - 2"
|
||||
}
|
||||
}
|
|
@ -1,37 +0,0 @@
|
|||
{
|
||||
"name": "twbs/bootstrap",
|
||||
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
|
||||
"keywords": [
|
||||
"css",
|
||||
"js",
|
||||
"sass",
|
||||
"mobile-first",
|
||||
"responsive",
|
||||
"front-end",
|
||||
"framework",
|
||||
"web"
|
||||
],
|
||||
"homepage": "http://getbootstrap.com",
|
||||
"authors": [
|
||||
{
|
||||
"name": "Mark Otto",
|
||||
"email": "markdotto@gmail.com"
|
||||
},
|
||||
{
|
||||
"name": "Jacob Thornton",
|
||||
"email": "jacobthornton@gmail.com"
|
||||
}
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/twbs/bootstrap/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"extra": {
|
||||
"branch-alias": {
|
||||
"dev-master": "3.3.x-dev"
|
||||
}
|
||||
},
|
||||
"replace": {
|
||||
"twitter/bootstrap": "self.version"
|
||||
}
|
||||
}
|
|
@ -1 +0,0 @@
|
|||
v4-alpha.getbootstrap.com
|
|
@ -1,319 +0,0 @@
|
|||
Creative Commons Legal Code
|
||||
|
||||
Attribution 3.0 Unported
|
||||
|
||||
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
|
||||
LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN
|
||||
ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
|
||||
INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
|
||||
REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR
|
||||
DAMAGES RESULTING FROM ITS USE.
|
||||
|
||||
License
|
||||
|
||||
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE
|
||||
COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY
|
||||
COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS
|
||||
AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
|
||||
|
||||
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE
|
||||
TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY
|
||||
BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS
|
||||
CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND
|
||||
CONDITIONS.
|
||||
|
||||
1. Definitions
|
||||
|
||||
a. "Adaptation" means a work based upon the Work, or upon the Work and
|
||||
other pre-existing works, such as a translation, adaptation,
|
||||
derivative work, arrangement of music or other alterations of a
|
||||
literary or artistic work, or phonogram or performance and includes
|
||||
cinematographic adaptations or any other form in which the Work may be
|
||||
recast, transformed, or adapted including in any form recognizably
|
||||
derived from the original, except that a work that constitutes a
|
||||
Collection will not be considered an Adaptation for the purpose of
|
||||
this License. For the avoidance of doubt, where the Work is a musical
|
||||
work, performance or phonogram, the synchronization of the Work in
|
||||
timed-relation with a moving image ("synching") will be considered an
|
||||
Adaptation for the purpose of this License.
|
||||
b. "Collection" means a collection of literary or artistic works, such as
|
||||
encyclopedias and anthologies, or performances, phonograms or
|
||||
broadcasts, or other works or subject matter other than works listed
|
||||
in Section 1(f) below, which, by reason of the selection and
|
||||
arrangement of their contents, constitute intellectual creations, in
|
||||
which the Work is included in its entirety in unmodified form along
|
||||
with one or more other contributions, each constituting separate and
|
||||
independent works in themselves, which together are assembled into a
|
||||
collective whole. A work that constitutes a Collection will not be
|
||||
considered an Adaptation (as defined above) for the purposes of this
|
||||
License.
|
||||
c. "Distribute" means to make available to the public the original and
|
||||
copies of the Work or Adaptation, as appropriate, through sale or
|
||||
other transfer of ownership.
|
||||
d. "Licensor" means the individual, individuals, entity or entities that
|
||||
offer(s) the Work under the terms of this License.
|
||||
e. "Original Author" means, in the case of a literary or artistic work,
|
||||
the individual, individuals, entity or entities who created the Work
|
||||
or if no individual or entity can be identified, the publisher; and in
|
||||
addition (i) in the case of a performance the actors, singers,
|
||||
musicians, dancers, and other persons who act, sing, deliver, declaim,
|
||||
play in, interpret or otherwise perform literary or artistic works or
|
||||
expressions of folklore; (ii) in the case of a phonogram the producer
|
||||
being the person or legal entity who first fixes the sounds of a
|
||||
performance or other sounds; and, (iii) in the case of broadcasts, the
|
||||
organization that transmits the broadcast.
|
||||
f. "Work" means the literary and/or artistic work offered under the terms
|
||||
of this License including without limitation any production in the
|
||||
literary, scientific and artistic domain, whatever may be the mode or
|
||||
form of its expression including digital form, such as a book,
|
||||
pamphlet and other writing; a lecture, address, sermon or other work
|
||||
of the same nature; a dramatic or dramatico-musical work; a
|
||||
choreographic work or entertainment in dumb show; a musical
|
||||
composition with or without words; a cinematographic work to which are
|
||||
assimilated works expressed by a process analogous to cinematography;
|
||||
a work of drawing, painting, architecture, sculpture, engraving or
|
||||
lithography; a photographic work to which are assimilated works
|
||||
expressed by a process analogous to photography; a work of applied
|
||||
art; an illustration, map, plan, sketch or three-dimensional work
|
||||
relative to geography, topography, architecture or science; a
|
||||
performance; a broadcast; a phonogram; a compilation of data to the
|
||||
extent it is protected as a copyrightable work; or a work performed by
|
||||
a variety or circus performer to the extent it is not otherwise
|
||||
considered a literary or artistic work.
|
||||
g. "You" means an individual or entity exercising rights under this
|
||||
License who has not previously violated the terms of this License with
|
||||
respect to the Work, or who has received express permission from the
|
||||
Licensor to exercise rights under this License despite a previous
|
||||
violation.
|
||||
h. "Publicly Perform" means to perform public recitations of the Work and
|
||||
to communicate to the public those public recitations, by any means or
|
||||
process, including by wire or wireless means or public digital
|
||||
performances; to make available to the public Works in such a way that
|
||||
members of the public may access these Works from a place and at a
|
||||
place individually chosen by them; to perform the Work to the public
|
||||
by any means or process and the communication to the public of the
|
||||
performances of the Work, including by public digital performance; to
|
||||
broadcast and rebroadcast the Work by any means including signs,
|
||||
sounds or images.
|
||||
i. "Reproduce" means to make copies of the Work by any means including
|
||||
without limitation by sound or visual recordings and the right of
|
||||
fixation and reproducing fixations of the Work, including storage of a
|
||||
protected performance or phonogram in digital form or other electronic
|
||||
medium.
|
||||
|
||||
2. Fair Dealing Rights. Nothing in this License is intended to reduce,
|
||||
limit, or restrict any uses free from copyright or rights arising from
|
||||
limitations or exceptions that are provided for in connection with the
|
||||
copyright protection under copyright law or other applicable laws.
|
||||
|
||||
3. License Grant. Subject to the terms and conditions of this License,
|
||||
Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
|
||||
perpetual (for the duration of the applicable copyright) license to
|
||||
exercise the rights in the Work as stated below:
|
||||
|
||||
a. to Reproduce the Work, to incorporate the Work into one or more
|
||||
Collections, and to Reproduce the Work as incorporated in the
|
||||
Collections;
|
||||
b. to create and Reproduce Adaptations provided that any such Adaptation,
|
||||
including any translation in any medium, takes reasonable steps to
|
||||
clearly label, demarcate or otherwise identify that changes were made
|
||||
to the original Work. For example, a translation could be marked "The
|
||||
original work was translated from English to Spanish," or a
|
||||
modification could indicate "The original work has been modified.";
|
||||
c. to Distribute and Publicly Perform the Work including as incorporated
|
||||
in Collections; and,
|
||||
d. to Distribute and Publicly Perform Adaptations.
|
||||
e. For the avoidance of doubt:
|
||||
|
||||
i. Non-waivable Compulsory License Schemes. In those jurisdictions in
|
||||
which the right to collect royalties through any statutory or
|
||||
compulsory licensing scheme cannot be waived, the Licensor
|
||||
reserves the exclusive right to collect such royalties for any
|
||||
exercise by You of the rights granted under this License;
|
||||
ii. Waivable Compulsory License Schemes. In those jurisdictions in
|
||||
which the right to collect royalties through any statutory or
|
||||
compulsory licensing scheme can be waived, the Licensor waives the
|
||||
exclusive right to collect such royalties for any exercise by You
|
||||
of the rights granted under this License; and,
|
||||
iii. Voluntary License Schemes. The Licensor waives the right to
|
||||
collect royalties, whether individually or, in the event that the
|
||||
Licensor is a member of a collecting society that administers
|
||||
voluntary licensing schemes, via that society, from any exercise
|
||||
by You of the rights granted under this License.
|
||||
|
||||
The above rights may be exercised in all media and formats whether now
|
||||
known or hereafter devised. The above rights include the right to make
|
||||
such modifications as are technically necessary to exercise the rights in
|
||||
other media and formats. Subject to Section 8(f), all rights not expressly
|
||||
granted by Licensor are hereby reserved.
|
||||
|
||||
4. Restrictions. The license granted in Section 3 above is expressly made
|
||||
subject to and limited by the following restrictions:
|
||||
|
||||
a. You may Distribute or Publicly Perform the Work only under the terms
|
||||
of this License. You must include a copy of, or the Uniform Resource
|
||||
Identifier (URI) for, this License with every copy of the Work You
|
||||
Distribute or Publicly Perform. You may not offer or impose any terms
|
||||
on the Work that restrict the terms of this License or the ability of
|
||||
the recipient of the Work to exercise the rights granted to that
|
||||
recipient under the terms of the License. You may not sublicense the
|
||||
Work. You must keep intact all notices that refer to this License and
|
||||
to the disclaimer of warranties with every copy of the Work You
|
||||
Distribute or Publicly Perform. When You Distribute or Publicly
|
||||
Perform the Work, You may not impose any effective technological
|
||||
measures on the Work that restrict the ability of a recipient of the
|
||||
Work from You to exercise the rights granted to that recipient under
|
||||
the terms of the License. This Section 4(a) applies to the Work as
|
||||
incorporated in a Collection, but this does not require the Collection
|
||||
apart from the Work itself to be made subject to the terms of this
|
||||
License. If You create a Collection, upon notice from any Licensor You
|
||||
must, to the extent practicable, remove from the Collection any credit
|
||||
as required by Section 4(b), as requested. If You create an
|
||||
Adaptation, upon notice from any Licensor You must, to the extent
|
||||
practicable, remove from the Adaptation any credit as required by
|
||||
Section 4(b), as requested.
|
||||
b. If You Distribute, or Publicly Perform the Work or any Adaptations or
|
||||
Collections, You must, unless a request has been made pursuant to
|
||||
Section 4(a), keep intact all copyright notices for the Work and
|
||||
provide, reasonable to the medium or means You are utilizing: (i) the
|
||||
name of the Original Author (or pseudonym, if applicable) if supplied,
|
||||
and/or if the Original Author and/or Licensor designate another party
|
||||
or parties (e.g., a sponsor institute, publishing entity, journal) for
|
||||
attribution ("Attribution Parties") in Licensor's copyright notice,
|
||||
terms of service or by other reasonable means, the name of such party
|
||||
or parties; (ii) the title of the Work if supplied; (iii) to the
|
||||
extent reasonably practicable, the URI, if any, that Licensor
|
||||
specifies to be associated with the Work, unless such URI does not
|
||||
refer to the copyright notice or licensing information for the Work;
|
||||
and (iv) , consistent with Section 3(b), in the case of an Adaptation,
|
||||
a credit identifying the use of the Work in the Adaptation (e.g.,
|
||||
"French translation of the Work by Original Author," or "Screenplay
|
||||
based on original Work by Original Author"). The credit required by
|
||||
this Section 4 (b) may be implemented in any reasonable manner;
|
||||
provided, however, that in the case of a Adaptation or Collection, at
|
||||
a minimum such credit will appear, if a credit for all contributing
|
||||
authors of the Adaptation or Collection appears, then as part of these
|
||||
credits and in a manner at least as prominent as the credits for the
|
||||
other contributing authors. For the avoidance of doubt, You may only
|
||||
use the credit required by this Section for the purpose of attribution
|
||||
in the manner set out above and, by exercising Your rights under this
|
||||
License, You may not implicitly or explicitly assert or imply any
|
||||
connection with, sponsorship or endorsement by the Original Author,
|
||||
Licensor and/or Attribution Parties, as appropriate, of You or Your
|
||||
use of the Work, without the separate, express prior written
|
||||
permission of the Original Author, Licensor and/or Attribution
|
||||
Parties.
|
||||
c. Except as otherwise agreed in writing by the Licensor or as may be
|
||||
otherwise permitted by applicable law, if You Reproduce, Distribute or
|
||||
Publicly Perform the Work either by itself or as part of any
|
||||
Adaptations or Collections, You must not distort, mutilate, modify or
|
||||
take other derogatory action in relation to the Work which would be
|
||||
prejudicial to the Original Author's honor or reputation. Licensor
|
||||
agrees that in those jurisdictions (e.g. Japan), in which any exercise
|
||||
of the right granted in Section 3(b) of this License (the right to
|
||||
make Adaptations) would be deemed to be a distortion, mutilation,
|
||||
modification or other derogatory action prejudicial to the Original
|
||||
Author's honor and reputation, the Licensor will waive or not assert,
|
||||
as appropriate, this Section, to the fullest extent permitted by the
|
||||
applicable national law, to enable You to reasonably exercise Your
|
||||
right under Section 3(b) of this License (right to make Adaptations)
|
||||
but not otherwise.
|
||||
|
||||
5. Representations, Warranties and Disclaimer
|
||||
|
||||
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR
|
||||
OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY
|
||||
KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE,
|
||||
INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF
|
||||
LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS,
|
||||
WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION
|
||||
OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
|
||||
|
||||
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE
|
||||
LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR
|
||||
ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES
|
||||
ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS
|
||||
BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
|
||||
|
||||
7. Termination
|
||||
|
||||
a. This License and the rights granted hereunder will terminate
|
||||
automatically upon any breach by You of the terms of this License.
|
||||
Individuals or entities who have received Adaptations or Collections
|
||||
from You under this License, however, will not have their licenses
|
||||
terminated provided such individuals or entities remain in full
|
||||
compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will
|
||||
survive any termination of this License.
|
||||
b. Subject to the above terms and conditions, the license granted here is
|
||||
perpetual (for the duration of the applicable copyright in the Work).
|
||||
Notwithstanding the above, Licensor reserves the right to release the
|
||||
Work under different license terms or to stop distributing the Work at
|
||||
any time; provided, however that any such election will not serve to
|
||||
withdraw this License (or any other license that has been, or is
|
||||
required to be, granted under the terms of this License), and this
|
||||
License will continue in full force and effect unless terminated as
|
||||
stated above.
|
||||
|
||||
8. Miscellaneous
|
||||
|
||||
a. Each time You Distribute or Publicly Perform the Work or a Collection,
|
||||
the Licensor offers to the recipient a license to the Work on the same
|
||||
terms and conditions as the license granted to You under this License.
|
||||
b. Each time You Distribute or Publicly Perform an Adaptation, Licensor
|
||||
offers to the recipient a license to the original Work on the same
|
||||
terms and conditions as the license granted to You under this License.
|
||||
c. If any provision of this License is invalid or unenforceable under
|
||||
applicable law, it shall not affect the validity or enforceability of
|
||||
the remainder of the terms of this License, and without further action
|
||||
by the parties to this agreement, such provision shall be reformed to
|
||||
the minimum extent necessary to make such provision valid and
|
||||
enforceable.
|
||||
d. No term or provision of this License shall be deemed waived and no
|
||||
breach consented to unless such waiver or consent shall be in writing
|
||||
and signed by the party to be charged with such waiver or consent.
|
||||
e. This License constitutes the entire agreement between the parties with
|
||||
respect to the Work licensed here. There are no understandings,
|
||||
agreements or representations with respect to the Work not specified
|
||||
here. Licensor shall not be bound by any additional provisions that
|
||||
may appear in any communication from You. This License may not be
|
||||
modified without the mutual written agreement of the Licensor and You.
|
||||
f. The rights granted under, and the subject matter referenced, in this
|
||||
License were drafted utilizing the terminology of the Berne Convention
|
||||
for the Protection of Literary and Artistic Works (as amended on
|
||||
September 28, 1979), the Rome Convention of 1961, the WIPO Copyright
|
||||
Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996
|
||||
and the Universal Copyright Convention (as revised on July 24, 1971).
|
||||
These rights and subject matter take effect in the relevant
|
||||
jurisdiction in which the License terms are sought to be enforced
|
||||
according to the corresponding provisions of the implementation of
|
||||
those treaty provisions in the applicable national law. If the
|
||||
standard suite of rights granted under applicable copyright law
|
||||
includes additional rights not granted under this License, such
|
||||
additional rights are deemed to be included in the License; this
|
||||
License is not intended to restrict the license of any rights under
|
||||
applicable law.
|
||||
|
||||
|
||||
Creative Commons Notice
|
||||
|
||||
Creative Commons is not a party to this License, and makes no warranty
|
||||
whatsoever in connection with the Work. Creative Commons will not be
|
||||
liable to You or any party on any legal theory for any damages
|
||||
whatsoever, including without limitation any general, special,
|
||||
incidental or consequential damages arising in connection to this
|
||||
license. Notwithstanding the foregoing two (2) sentences, if Creative
|
||||
Commons has expressly identified itself as the Licensor hereunder, it
|
||||
shall have all rights and obligations of Licensor.
|
||||
|
||||
Except for the limited purpose of indicating to the public that the
|
||||
Work is licensed under the CCPL, Creative Commons does not authorize
|
||||
the use by either party of the trademark "Creative Commons" or any
|
||||
related trademark or logo of Creative Commons without the prior
|
||||
written consent of Creative Commons. Any permitted use will be in
|
||||
compliance with Creative Commons' then-current trademark usage
|
||||
guidelines, as may be published on its website or otherwise made
|
||||
available upon request from time to time. For the avoidance of doubt,
|
||||
this trademark restriction does not form part of this License.
|
||||
|
||||
Creative Commons may be contacted at http://creativecommons.org/.
|
|
@ -1,311 +0,0 @@
|
|||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
summary: >
|
||||
Hovered element still remains in `:hover` state after scrolling away.
|
||||
upstream_bug: >
|
||||
IE#926665
|
||||
origin: >
|
||||
Bootstrap#14211
|
||||
|
||||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
summary: >
|
||||
When hovering over a `<select>` menu item, the cursor for the element underneath the menu is displayed.
|
||||
upstream_bug: >
|
||||
IE#963961
|
||||
origin: >
|
||||
Bootstrap#14528
|
||||
|
||||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
summary: >
|
||||
CSS `border-radius` sometimes causes lines of bleed-through of the `background-color` of the parent element.
|
||||
upstream_bug: >
|
||||
IE#1463734
|
||||
origin: >
|
||||
Bootstrap#16671
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
`.table-bordered` with an empty `<tbody>` is missing borders.
|
||||
upstream_bug: >
|
||||
Mozilla#1023761
|
||||
origin: >
|
||||
Bootstrap#13453
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
`max-width: 100%;` doesn't work inside tables.
|
||||
upstream_bug: >
|
||||
Mozilla#975632
|
||||
origin: >
|
||||
Bootstrap#10690
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
Button elements with `width: 100%` become cropped in long tables.
|
||||
upstream_bug: >
|
||||
Mozilla#1060131
|
||||
origin: >
|
||||
Bootstrap#14320
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.
|
||||
upstream_bug: >
|
||||
Mozilla#654072
|
||||
origin: >
|
||||
Bootstrap#793
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
summary: >
|
||||
`focus` events should not be fired at the `document` object
|
||||
upstream_bug: >
|
||||
Mozilla#1228802
|
||||
origin: >
|
||||
Bootstrap#18365
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox (Windows)
|
||||
summary: >
|
||||
Right border of `<select>` menu is sometimes missing when screen is set to uncommon resolution
|
||||
upstream_bug: >
|
||||
Mozilla#1139853
|
||||
origin: >
|
||||
Bootstrap#15990
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome (OS X)
|
||||
summary: >
|
||||
Clicking above `<input type="number">` increment button flashes the decrement button.
|
||||
upstream_bug: >
|
||||
Chromium#419108
|
||||
origin: >
|
||||
Offshoot of Bootstrap#8350 & Chromium#337668
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome (OS X)
|
||||
summary: >
|
||||
Caps Lock indicator not shown in `<input type="password">` with `display: block`
|
||||
upstream_bug: >
|
||||
Chromium#460200
|
||||
origin: >
|
||||
Bootstrap#15832
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
Focus ring of image map within a modal is displayed in the wrong location.
|
||||
upstream_bug: >
|
||||
Chromium#475128
|
||||
origin: >
|
||||
Bootstrap#16180
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
Incorrect viewport size used for media queries when printing.
|
||||
upstream_bug: >
|
||||
Chromium#273306
|
||||
origin: >
|
||||
Bootstrap#12078
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
CSS infinite linear animation with alpha transparency leaks memory.
|
||||
upstream_bug: >
|
||||
Chromium#429375
|
||||
origin: >
|
||||
Bootstrap#14409
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
`:focus` `outline` style causes cursor to not be displayed when toggling a `readonly` `<input>` to read-write.
|
||||
upstream_bug: >
|
||||
Chromium#465274
|
||||
origin: >
|
||||
Bootstrap#16022
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
`width: 1%` on nested table cell causes its table to hog horizontal space.
|
||||
upstream_bug: >
|
||||
Chromium#427994
|
||||
origin: >
|
||||
Bootstrap#16372
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
`table-cell` borders not overlapping despite `margin-right: -1px`
|
||||
upstream_bug: >
|
||||
Chromium#534750
|
||||
origin: >
|
||||
Bootstrap#17438, Bootstrap#14237
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome (Windows & Linux)
|
||||
summary: >
|
||||
Animation glitch when returning to inactive tab after animations occurred while tab was hidden.
|
||||
upstream_bug: >
|
||||
Chromium#449180
|
||||
origin: >
|
||||
Bootstrap#15298
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari
|
||||
summary: >
|
||||
`width: 1%` on nested table cell causes its table to hog horizontal space.
|
||||
upstream_bug: >
|
||||
WebKit#144696, Safari#20839572
|
||||
origin: >
|
||||
Bootstrap#16372
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari
|
||||
summary: >
|
||||
Incorrect placement of `position: fixed` element when it's a child of a `position: relative; left: X%;` element.
|
||||
upstream_bug: >
|
||||
WebKit#147284, Safari#21993128
|
||||
origin: >
|
||||
Bootstrap#16814
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (OS X)
|
||||
summary: >
|
||||
Scrollbar clipped in `select[multiple]` with padding.
|
||||
upstream_bug: >
|
||||
WebKit#128489, Safari#19208483
|
||||
origin: >
|
||||
Bootstrap#12536
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (OS X)
|
||||
summary: >
|
||||
Weird button behavior with some `<input type="number">` elements.
|
||||
upstream_bug: >
|
||||
WebKit#137269, Safari#18834768
|
||||
origin: >
|
||||
Bootstrap#8350,
|
||||
Normalize#283,
|
||||
Chromium#337668
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (OS X)
|
||||
summary: >
|
||||
Small font size when printing webpage with fixed-width `.container`.
|
||||
upstream_bug: >
|
||||
WebKit#138192, Safari#19435018
|
||||
origin: >
|
||||
Bootstrap#14868
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (OS X)
|
||||
summary: >
|
||||
Focus ring of image map within a modal is displayed in the wrong location.
|
||||
upstream_bug: >
|
||||
WebKit#143527, Safari#21908735
|
||||
origin: >
|
||||
Bootstrap#16180
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iPad)
|
||||
summary: >
|
||||
`<select>` menu on iPad causes shifting of hit-testing areas
|
||||
upstream_bug: >
|
||||
WebKit#150079, Safari#23082521
|
||||
origin: >
|
||||
Bootstrap#14975
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
`transform: translate3d(0,0,0);` rendering bug.
|
||||
upstream_bug: >
|
||||
WebKit#138162, Safari#18804973
|
||||
origin: >
|
||||
Bootstrap#14603
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Text input's cursor doesn't move while scrolling the page.
|
||||
upstream_bug: >
|
||||
WebKit#138201, Safari#18819624
|
||||
origin: >
|
||||
Bootstrap#14708
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Can't move cursor to start of text after entering long string of text into `<input type="text">`
|
||||
upstream_bug: >
|
||||
WebKit#148061, Safari#22299624
|
||||
origin: >
|
||||
Bootstrap#16988
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
`display: block` causes text of temporal `<input>`s to become vertically misaligned
|
||||
upstream_bug: >
|
||||
WebKit#139848, Safari#19434878
|
||||
origin: >
|
||||
Bootstrap#11266, Bootstrap#13098
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Tapping on `<body>` doesn't fire `click` events
|
||||
upstream_bug: >
|
||||
WebKit#151933
|
||||
origin: >
|
||||
Bootstrap#16028
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS 9+)
|
||||
summary: >
|
||||
Sometimes excessive automatic zoom is applied after opening a modal, and the user isn't allowed to zoom out
|
||||
upstream_bug: >
|
||||
WebKit#150715
|
||||
origin: >
|
||||
WebKit#138201
|
|
@ -1,35 +0,0 @@
|
|||
- name: Mark Otto
|
||||
user: mdo
|
||||
gravatar: bc4ab438f7a4ce1c406aadc688427f2c
|
||||
|
||||
- name: Jacob Thornton
|
||||
user: fat
|
||||
gravatar: a98244cbdacaf1c0b55499466002f7a8
|
||||
|
||||
- name: Chris Rebert
|
||||
user: cvrebert
|
||||
gravatar: edec428c425453955f770095a7d26c50
|
||||
|
||||
- name: Julian Thilo
|
||||
user: juthilo
|
||||
gravatar: 0f7dd3ce58a416be5685ea6194f82b11
|
||||
|
||||
- name: XhmikosR
|
||||
user: xhmikosr
|
||||
gravatar: e37759b1ea0125d4e97b1e00b5eed26f
|
||||
|
||||
- name: Heinrich Fenkart
|
||||
user: hnrch02
|
||||
gravatar: 0d53f5d3d3d28bd470f394d98f7ef48f
|
||||
|
||||
- name: Patrick H. Lauke
|
||||
user: patrickhlauke
|
||||
gravatar: 357f279672db832fc41a5a2f36559fcb
|
||||
|
||||
- name: Thomas McDonald
|
||||
user: thomas-mcdonald
|
||||
gravatar: 24cd55ab1a62ffb113ab8c02f64c9301
|
||||
|
||||
- name: Gleb Mazovetskiy
|
||||
user: glebm
|
||||
gravatar: 729f685b8e8d7e9feed18c177c82e59b
|
|
@ -1,67 +0,0 @@
|
|||
- title: Getting started
|
||||
pages:
|
||||
- title: Introduction
|
||||
- title: Download
|
||||
- title: Browsers & devices
|
||||
- title: Options
|
||||
- title: Flexbox
|
||||
- title: Build tools
|
||||
- title: Best practices
|
||||
|
||||
- title: Layout
|
||||
pages:
|
||||
- title: Overview
|
||||
- title: Grid
|
||||
- title: Media object
|
||||
- title: Responsive utilities
|
||||
|
||||
- title: Content
|
||||
pages:
|
||||
- title: Reboot
|
||||
- title: Typography
|
||||
- title: Code
|
||||
- title: Images
|
||||
- title: Tables
|
||||
- title: Figures
|
||||
|
||||
- title: Components
|
||||
pages:
|
||||
- title: Buttons
|
||||
- title: Button group
|
||||
- title: Button dropdown
|
||||
- title: Forms
|
||||
- title: Input group
|
||||
- title: Dropdowns
|
||||
- title: Jumbotron
|
||||
- title: Label
|
||||
- title: Alerts
|
||||
- title: Card
|
||||
- title: Navs
|
||||
- title: Navbar
|
||||
- title: Breadcrumb
|
||||
- title: Pagination
|
||||
- title: Progress
|
||||
- title: List group
|
||||
- title: Modal
|
||||
- title: Scrollspy
|
||||
- title: Tooltips
|
||||
- title: Popovers
|
||||
- title: Collapse
|
||||
- title: Carousel
|
||||
- title: Utilities
|
||||
|
||||
# - title: Extend
|
||||
# pages:
|
||||
# - title: Approach
|
||||
# - title: Icon fonts
|
||||
|
||||
- title: About
|
||||
pages:
|
||||
- title: History
|
||||
- title: Team
|
||||
- title: Accessibility
|
||||
- title: Brand
|
||||
- title: License
|
||||
- title: Translations
|
||||
|
||||
- title: Migration
|
|
@ -1,19 +0,0 @@
|
|||
- name: Lyft
|
||||
url: https://www.lyft.com
|
||||
expo_url: http://expo.getbootstrap.com/2014/10/29/lyft/
|
||||
img: lyft
|
||||
|
||||
- name: Vogue
|
||||
url: http://www.vogue.com
|
||||
expo_url: http://expo.getbootstrap.com/2014/09/30/vogue/
|
||||
img: vogue
|
||||
|
||||
- name: Riot Design
|
||||
url: http://riotdesign.eu/en/
|
||||
expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
|
||||
img: riot
|
||||
|
||||
- name: Newsweek
|
||||
url: http://www.newsweek.com/
|
||||
expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
|
||||
img: newsweek
|
|
@ -1,9 +0,0 @@
|
|||
- name: Chinese
|
||||
code: zh
|
||||
description: Bootstrap 中文文档
|
||||
url: http://v4.bootcss.com/
|
||||
|
||||
- name: Chinese
|
||||
code: zh
|
||||
description: Bootstrap 4 中文文档教程
|
||||
url: http://boot4.com/
|
|
@ -1 +0,0 @@
|
|||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
|
|
@ -1,58 +0,0 @@
|
|||
<footer class="bd-footer text-muted" role="contentinfo">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links">
|
||||
<li><a href="{{ site.repo }}">GitHub</a></li>
|
||||
<li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li><a href="{{ site.baseurl }}/examples/">Examples</a></li>
|
||||
<li><a href="{{ site.baseurl }}/about/history/">About</a></li>
|
||||
</ul>
|
||||
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Currently v{{ site.current_version }}. Code licensed <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="{{ site.cdn.jquery }}"></script>
|
||||
<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
|
||||
<script src="{{ site.baseurl }}/assets/js/vendor/tether.min.js"></script>
|
||||
|
||||
{% if site.github %}
|
||||
<script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
|
||||
{% else %}
|
||||
<script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
|
||||
{% endif %}
|
||||
|
||||
{% if site.github %}
|
||||
<script src="{{ site.baseurl }}/assets/js/docs.min.js"></script>
|
||||
{% else %}
|
||||
{% for file in site.data.configBridge.paths.docsJs %}
|
||||
<script src="{{ site.baseurl }}/{{ file }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
|
||||
|
||||
{% if page.layout == "docs" %}
|
||||
<script src="{{ site.baseurl }}/assets/js/vendor/jekyll-search.min.js"></script>
|
||||
|
||||
<script>
|
||||
SimpleJekyllSearch.init({
|
||||
searchInput: document.getElementById('search-input'),
|
||||
resultsContainer: document.getElementById('search-results'),
|
||||
searchResultTemplate: '<a class="dropdown-item" href="{url}">{title}</a>',
|
||||
noResultsText: '<div class="dropdown-item no-results">Sorry, there are no results for that search.</div>',
|
||||
json: '/search.json'
|
||||
})
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
background: '#777',
|
||||
foreground: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
|
@ -1,37 +0,0 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
|
||||
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
|
||||
<title>
|
||||
{% if page.layout == "home" %}
|
||||
{{ page.title }}
|
||||
{% else %}
|
||||
{{ page.title }} · Bootstrap
|
||||
{% endif %}
|
||||
</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
{% if site.github %}
|
||||
<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
{% else %}
|
||||
<link href="{{ site.baseurl }}/dist/css/bootstrap.css" rel="stylesheet">
|
||||
{% endif %}
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
|
||||
<link rel="icon" href="{{ site.baseurl }}/favicon.ico">
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
|
@ -1,60 +0,0 @@
|
|||
<div class="bd-sidebar">
|
||||
|
||||
<form class="bd-search hidden-sm-down">
|
||||
<input type="text" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
|
||||
<div class="dropdown-menu bd-search-results" id="search-results"></div>
|
||||
</form>
|
||||
|
||||
<nav class="bd-links" id="docsNavbarContent">
|
||||
{% for group in site.data.nav %}
|
||||
{% assign link = group.pages | first %}
|
||||
{% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
|
||||
{% assign active = nil %}
|
||||
|
||||
{% if page.url contains slug %}
|
||||
{% assign active = 'active' %}
|
||||
{% endif %}
|
||||
|
||||
<div class="bd-toc-item {{ active }}">
|
||||
{% if slug == "examples" %}
|
||||
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/">
|
||||
{% else %}
|
||||
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' }}">
|
||||
{% endif %}
|
||||
{{ group.title }}
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav">
|
||||
{% for doc in group.pages %}
|
||||
{% assign slug = doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' %}
|
||||
{% assign active = nil %}
|
||||
|
||||
{% if page.url contains slug %}
|
||||
{% assign active = 'active bd-sidenav-active' %}
|
||||
{% endif %}
|
||||
|
||||
<li class="{{ active }}">
|
||||
<a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}">
|
||||
{{ doc.title }}
|
||||
</a>
|
||||
|
||||
{% comment %}
|
||||
{% unless doc.sections == nil %}
|
||||
<ul class="nav">
|
||||
{% for section in doc.sections %}
|
||||
<li>
|
||||
<a href="#{{ section.title | downcase | replace: ' ', '-' }}">
|
||||
{{ section.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endunless %}
|
||||
{% endcomment %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
|
@ -1,45 +0,0 @@
|
|||
<header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
|
||||
{% comment %}
|
||||
<nav class="nav navbar-nav pull-xs-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v{{ site.current_version }}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item" href="#">v4.0.0-alpha.2</a>
|
||||
<a class="dropdown-item" href="#">v3.3.5</a>
|
||||
<a class="dropdown-item" href="#">v3.3.4</a>
|
||||
<a class="dropdown-item" href="#">v3.3.2</a>
|
||||
<a class="dropdown-item" href="#">v3.3.1</a>
|
||||
<a class="dropdown-item" href="#">v3.3.0</a>
|
||||
<a class="dropdown-item" href="#">v3.2.0</a>
|
||||
<a class="dropdown-item" href="#">v3.1.1</a>
|
||||
<a class="dropdown-item" href="#">v3.1.0</a>
|
||||
<a class="dropdown-item" href="#">v3.0.3</a>
|
||||
<a class="dropdown-item" href="#">v3.0.2</a>
|
||||
<a class="dropdown-item" href="#">v3.0.1</a>
|
||||
<a class="dropdown-item" href="#">v3.0.0</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcomment %}
|
||||
|
||||
<div class="clearfix">
|
||||
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
|
||||
☰
|
||||
</button>
|
||||
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
|
||||
Bootstrap
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
|
||||
<nav class="nav navbar-nav">
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
|
||||
<a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
<a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
<a class="nav-item nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
|
||||
<a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
|
@ -1,41 +0,0 @@
|
|||
{% if page.group == "getting-started" %}
|
||||
<h1>Getting started</h1>
|
||||
<p class="lead">
|
||||
An overview of Bootstrap, including how to download and use it, some basic templates and examples, and more.
|
||||
</p>
|
||||
{% elsif page.group == "layout" %}
|
||||
<h1>Layout</h1>
|
||||
<p class="lead">
|
||||
Options for structuring your pages with Bootstrap, including global styles, required scaffolding, grid system, and more.
|
||||
</p>
|
||||
{% elsif page.group == "content" %}
|
||||
<h1>Content</h1>
|
||||
<p class="lead">
|
||||
Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, and more.
|
||||
</p>
|
||||
{% elsif page.group == "components" %}
|
||||
<h1>Components</h1>
|
||||
<p class="lead">
|
||||
Over a dozen reusable components built to provide buttons, dropdowns, input groups, navigation, alerts, and much more.
|
||||
</p>
|
||||
{% elsif page.group == "javascript" %}
|
||||
<h1>JavaScript plugins</h1>
|
||||
<p class="lead">
|
||||
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
|
||||
</p>
|
||||
{% elsif page.group == "about" %}
|
||||
<h1>About</h1>
|
||||
<p class="lead">
|
||||
Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.
|
||||
</p>
|
||||
{% elsif page.group == "migration" %}
|
||||
<h1>Migration</h1>
|
||||
<p class="lead">
|
||||
Guidance on how to upgrade from Bootstrap v3.x to v4.x with emphasis on major changes, what's new, and what's been removed.
|
||||
</p>
|
||||
{% elsif page.group == "browser-bugs" %}
|
||||
<h1>Wall of browser bugs</h1>
|
||||
<p class="lead">
|
||||
A list of the browser bugs that Bootstrap is currently grappling with.
|
||||
</p>
|
||||
{% endif %}
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% include header.html %}
|
||||
</head>
|
||||
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
||||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||||
<div class="container">
|
||||
<span class="skiplink-text">Skip to main content</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{% include nav-home.html %}
|
||||
|
||||
<div id="content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% include header.html %}
|
||||
</head>
|
||||
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
||||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||||
<div class="container">
|
||||
<span class="skiplink-text">Skip to main content</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{% include nav-home.html %}
|
||||
|
||||
<div class="bd-pageheader">
|
||||
<div class="container">
|
||||
{% include page-headers.html %}
|
||||
{% include ads.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-md-push-9 bd-sidebar">
|
||||
{% include nav-docs.html %}
|
||||
</div>
|
||||
<div class="col-md-9 col-md-pull-3 bd-content">
|
||||
<h1 class="bd-title" id="content">{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% include header.html %}
|
||||
</head>
|
||||
<body class="bd-home">
|
||||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||||
<div class="container">
|
||||
<span class="skiplink-text">Skip to main content</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{% include nav-home.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="bd-pageheader text-xs-center text-sm-left">
|
||||
<div class="container">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p class="lead">
|
||||
Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
|
||||
</p>
|
||||
{% include ads.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container bd-content">
|
||||
{{ content }}
|
||||
</div>
|
|
@ -1,10 +0,0 @@
|
|||
require 'yaml'
|
||||
|
||||
module Bridge
|
||||
class Generator < Jekyll::Generator
|
||||
def generate(site)
|
||||
path = File.join(site.source, "../grunt/configBridge.json")
|
||||
site.data["configBridge"] = YAML.load_file(path)
|
||||
end
|
||||
end
|
||||
end
|
|
@ -1,25 +0,0 @@
|
|||
module Jekyll
|
||||
module BugFilter
|
||||
def bugify(input)
|
||||
upstream_map = {
|
||||
"Bootstrap" => "https://github.com/twbs/bootstrap/issues/",
|
||||
"IE" => ["https://connect.microsoft.com/IE/feedback/details/", "IE bug"],
|
||||
"Mozilla" => ["https://bugzilla.mozilla.org/show_bug.cgi?id=", "Mozilla bug"],
|
||||
"Chromium" => ["https://code.google.com/p/chromium/issues/detail?id=", "Chromium issue"],
|
||||
"WebKit" => ["https://bugs.webkit.org/show_bug.cgi?id=", "WebKit bug"],
|
||||
"Safari" => ["https://openradar.appspot.com/", "Apple Safari Radar"],
|
||||
"Normalize" => ["https://github.com/necolas/normalize.css/issues/", "Normalize"]
|
||||
}
|
||||
|
||||
upstream_map.each do |key, data|
|
||||
url = data.is_a?(Array) ? data[0] : data
|
||||
label = data.is_a?(Array) ? "#{data[1]} " : ""
|
||||
input = input.gsub(/#{key}#(\d+)/, "<a href=\"#{url}\\1\">#{label}#\\1</a>")
|
||||
end
|
||||
|
||||
return input
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
Liquid::Template.register_filter(Jekyll::BugFilter)
|
|
@ -1,28 +0,0 @@
|
|||
# Source: https://stackoverflow.com/questions/19169849/how-to-get-markdown-processed-content-in-jekyll-tag-plugin
|
||||
|
||||
module Jekyll
|
||||
module Tags
|
||||
class CalloutTag < Liquid::Block
|
||||
|
||||
def initialize(tag_name, type, tokens)
|
||||
super
|
||||
type.strip!
|
||||
if %w(info danger warning).include?(type)
|
||||
@type = type
|
||||
else
|
||||
puts "#{type} callout not supported. Defaulting to info"
|
||||
@type = "info"
|
||||
end
|
||||
end
|
||||
|
||||
def render(context)
|
||||
site = context.registers[:site]
|
||||
converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
|
||||
output = converter.convert(super(context))
|
||||
"<div class=\"bd-callout bd-callout-#{@type}\">#{output}</div>"
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
Liquid::Template.register_tag('callout', Jekyll::Tags::CalloutTag)
|
|
@ -1,85 +0,0 @@
|
|||
module Jekyll
|
||||
module Tags
|
||||
class ExampleBlock < Liquid::Block
|
||||
include Liquid::StandardFilters
|
||||
|
||||
# The regular expression syntax checker. Start with the language specifier.
|
||||
# Follow that by zero or more space separated options that take one of three
|
||||
# forms: name, name=value, or name="<quoted list>"
|
||||
#
|
||||
# <quoted list> is a space-separated list of numbers
|
||||
SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+\w+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/
|
||||
|
||||
def initialize(tag_name, markup, tokens)
|
||||
super
|
||||
if markup.strip =~ SYNTAX
|
||||
@lang = $1.downcase
|
||||
@options = {}
|
||||
if defined?($2) && $2 != ''
|
||||
# Split along 3 possible forms -- key="<quoted list>", key=value, or key
|
||||
$2.scan(/(?:\w+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt|
|
||||
key, value = opt.split('=')
|
||||
# If a quoted list, convert to array
|
||||
if value && value.include?("\"")
|
||||
value.gsub!(/"/, "")
|
||||
value = value.split
|
||||
end
|
||||
@options[key.to_sym] = value || true
|
||||
end
|
||||
end
|
||||
@options[:linenos] = "inline" if @options.key?(:linenos) and @options[:linenos] == true
|
||||
else
|
||||
raise SyntaxError.new <<-eos
|
||||
Syntax Error in tag 'highlight' while parsing the following markup:
|
||||
|
||||
#{markup}
|
||||
|
||||
Valid syntax: highlight <lang> [linenos]
|
||||
eos
|
||||
end
|
||||
end
|
||||
|
||||
def render(context)
|
||||
prefix = context["highlighter_prefix"] || ""
|
||||
suffix = context["highlighter_suffix"] || ""
|
||||
code = super.to_s.strip
|
||||
|
||||
output = case context.registers[:site].highlighter
|
||||
|
||||
when 'rouge'
|
||||
render_rouge(code)
|
||||
end
|
||||
|
||||
rendered_output = example(code) + add_code_tag(output)
|
||||
prefix + rendered_output + suffix
|
||||
end
|
||||
|
||||
def example(output)
|
||||
"<div class=\"bd-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>"
|
||||
end
|
||||
|
||||
def remove_holderjs(code)
|
||||
code = code.gsub(/"holder.js.+?"/, '"..."')
|
||||
end
|
||||
|
||||
def render_rouge(code)
|
||||
require 'rouge'
|
||||
formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false)
|
||||
lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText
|
||||
code = remove_holderjs(code)
|
||||
code = formatter.format(lexer.lex(code))
|
||||
"<div class=\"highlight\"><pre>#{code}</pre></div>"
|
||||
end
|
||||
|
||||
def add_code_tag(code)
|
||||
# Add nested <code> tags to code blocks
|
||||
code = code.sub(/<pre>\n*/,'<pre><code class="language-' + @lang.to_s.gsub("+", "-") + '" data-lang="' + @lang.to_s + '">')
|
||||
code = code.sub(/\n*<\/pre>/,"</code></pre>")
|
||||
code.strip
|
||||
end
|
||||
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
Liquid::Template.register_tag('example', Jekyll::Tags::ExampleBlock)
|
|
@ -1,20 +0,0 @@
|
|||
module Jekyll
|
||||
class MarkdownBlock < Liquid::Block
|
||||
alias_method :render_block, :render
|
||||
|
||||
def initialize(tag_name, markup, tokens)
|
||||
super
|
||||
end
|
||||
|
||||
# Uses the default Jekyll markdown parser to
|
||||
# parse the contents of this block
|
||||
#
|
||||
def render(context)
|
||||
site = context.registers[:site]
|
||||
converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
|
||||
converter.convert(render_block(context))
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
Liquid::Template.register_tag('markdown', Jekyll::MarkdownBlock)
|
|
@ -1,76 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Brand guidelines
|
||||
group: about
|
||||
---
|
||||
|
||||
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](http://mailchimp.com/about/brand-assets/).
|
||||
|
||||
## Mark and logo
|
||||
|
||||
Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in Helvetica Neue Bold. **Do not use the Twitter bird** in association with Bootstrap.
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<div class="bd-booticon bd-booticon-lg">B</div>
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<div class="bd-booticon bd-booticon-lg bd-booticon-inverse">B</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<h1>Bootstrap</h1>
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<h1>Bootstrap</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Download mark
|
||||
|
||||
Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Name
|
||||
|
||||
The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<h3>Bootstrap</h3>
|
||||
<strong class="text-success">Right</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item">
|
||||
<h3 class="text-muted">BootStrap</h3>
|
||||
<strong class="text-warning">Wrong</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item">
|
||||
<h3 class="text-muted">Twitter Bootstrap</h3>
|
||||
<strong class="text-warning">Wrong</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Colors
|
||||
|
||||
Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
|
||||
|
||||
<div class="bd-brand">
|
||||
<div class="color-swatches">
|
||||
<div class="color-swatch bd-purple"></div>
|
||||
<div class="color-swatch bd-purple-light"></div>
|
||||
<div class="color-swatch bd-purple-lighter"></div>
|
||||
<div class="color-swatch bd-gray"></div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: History
|
||||
group: about
|
||||
redirect_from: "/about/"
|
||||
---
|
||||
|
||||
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
|
||||
|
||||
Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
|
||||
|
||||
Originally [released](https://blog.twitter.com/2011/bootstrap-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
|
|
@ -1,33 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: License FAQs
|
||||
group: about
|
||||
---
|
||||
|
||||
Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
|
||||
|
||||
#### It requires you to:
|
||||
|
||||
* Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works
|
||||
|
||||
#### It permits you to:
|
||||
|
||||
- Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
|
||||
- Use Bootstrap in packages or distributions that you create
|
||||
- Modify the source code
|
||||
- Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license
|
||||
|
||||
#### It forbids you to:
|
||||
|
||||
- Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
|
||||
- Hold the creators or copyright holders of Bootstrap liable
|
||||
- Redistribute any piece of Bootstrap without proper attribution
|
||||
- Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
|
||||
- Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
|
||||
|
||||
#### It does not require you to:
|
||||
|
||||
- Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
|
||||
- Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
|
||||
|
||||
The full Bootstrap license is located [in the project repository]({{ site.repo }}/blob/master/LICENSE) for more information.
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Team
|
||||
group: about
|
||||
---
|
||||
|
||||
Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
|
||||
|
||||
<div class="list-group bd-team">
|
||||
{% for member in site.data.core-team %}
|
||||
<div class="list-group-item">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user={{ member.user }}&type=follow"></iframe>
|
||||
<a class="team-member" href="https://github.com/{{ member.user }}">
|
||||
<img src="https://secure.gravatar.com/avatar/{{ member.gravatar }}" alt="@{{ member.user }}" width="32" height="32">
|
||||
<strong>{{ member.name }}</strong> <small>@{{ member.user }}</small>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
Get involved with Bootstrap development by [opening an issue](https://github.com/twbs/bootstrap/issues/new) or submitting a pull request. Read our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for information on how we develop.
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Translations
|
||||
group: about
|
||||
---
|
||||
|
||||
Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
|
||||
|
||||
<ul>
|
||||
{% for language in site.data.translations %}
|
||||
<li><a href="{{ language.url }}" hreflang="{{ language.code }}">{{ language.description }} ({{ language.name }})</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
**We don't help organize or host translations, we just link to them.**
|
||||
|
||||
Finished a new or better translation? Open a pull request to add it to our list.
|
Before Width: | Height: | Size: 6.0 KiB |
|
@ -1,20 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
|
||||
<g id="outline" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
|
||||
<g id="bg_1_">
|
||||
<path fill="#FFFFFF" d="M510,186c25.5,0,49.6,10,67.8,28.2S606,256.5,606,282v408c0,25.5-10,49.6-28.2,67.8S535.5,786,510,786H102
|
||||
c-25.5,0-49.6-10-67.8-28.2S6,715.5,6,690V282c0-25.5,10-49.6,28.2-67.8S76.5,186,102,186H510 M510,180H102
|
||||
C45.9,180,0,225.9,0,282v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V282C612,225.9,566.1,180,510,180L510,180z"/>
|
||||
</g>
|
||||
<g id="B_2_" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,313h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,313L166.3,313z M228.8,462.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8,462.5L228.8,462.5z M228.8,619h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 1.8 KiB |
|
@ -1,18 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
|
||||
<g id="punchout" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M383.5,521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19,0,33.8-4.9,44.2-14.8
|
||||
c10.5-9.8,15.8-23.8,15.8-41.8C399.2,544.8,394,531.2,383.5,521.8z"/>
|
||||
<path fill="#FFFFFF" d="M368.2,449.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102
|
||||
C345.7,462.5,358.2,458.2,368.2,449.8z"/>
|
||||
<path fill="#FFFFFF" d="M510,180H102C45.9,180,0,225.9,0,282v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V282
|
||||
C612,225.9,566.1,180,510,180z M454.2,609.8c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164V313h173.5
|
||||
c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2
|
||||
c11.3,16.2,17,36.4,17,60.8C461.7,584.5,459.2,597.6,454.2,609.8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 1.6 KiB |
|
@ -1,17 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
|
||||
<g id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
|
||||
<path id="bg" fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
|
||||
c56.1,0,102,45.9,102,102V510z"/>
|
||||
<g id="B" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8,282.5L228.8,282.5z M228.8,439h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 176 KiB |
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 156 KiB |
Before Width: | Height: | Size: 197 KiB |
Before Width: | Height: | Size: 158 KiB |
Before Width: | Height: | Size: 194 KiB |
Before Width: | Height: | Size: 11 KiB |
|
@ -1,51 +0,0 @@
|
|||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
/*!
|
||||
* Copyright 2014-2015 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
* details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
// Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function emulatedIEMajorVersion() {
|
||||
var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent)
|
||||
if (groups === null) {
|
||||
return null
|
||||
}
|
||||
var ieVersionNum = parseInt(groups[1], 10)
|
||||
var ieMajorVersion = Math.floor(ieVersionNum)
|
||||
return ieMajorVersion
|
||||
}
|
||||
|
||||
function actualNonEmulatedIEMajorVersion() {
|
||||
// Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
|
||||
// IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx
|
||||
// @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx
|
||||
var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')()
|
||||
if (jscriptVersion === undefined) {
|
||||
return 11 // IE11+ not in emulation mode
|
||||
}
|
||||
if (jscriptVersion < 9) {
|
||||
return 8 // IE8 (or lower; haven't tested on IE<8)
|
||||
}
|
||||
return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode
|
||||
}
|
||||
|
||||
var ua = window.navigator.userAgent
|
||||
if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) {
|
||||
return // Opera, which might pretend to be IE
|
||||
}
|
||||
var emulated = emulatedIEMajorVersion()
|
||||
if (emulated === null) {
|
||||
return // Not IE
|
||||
}
|
||||
var nonEmulated = actualNonEmulatedIEMajorVersion()
|
||||
|
||||
if (emulated !== nonEmulated) {
|
||||
window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
|
||||
}
|
||||
})();
|
|
@ -1,23 +0,0 @@
|
|||
/*!
|
||||
* IE10 viewport hack for Surface/desktop Windows 8 bug
|
||||
* Copyright 2014-2015 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
// See the Getting Started docs for more information:
|
||||
// http://getbootstrap.com/getting-started/#support-ie10-width
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||
var msViewportStyle = document.createElement('style')
|
||||
msViewportStyle.appendChild(
|
||||
document.createTextNode(
|
||||
'@-ms-viewport{width:auto!important}'
|
||||
)
|
||||
)
|
||||
document.head.appendChild(msViewportStyle)
|
||||
}
|
||||
|
||||
})();
|
|
@ -1,83 +0,0 @@
|
|||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (http://getbootstrap.com)
|
||||
* Copyright 2011-2015 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
* details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global Clipboard, anchors */
|
||||
|
||||
!function ($) {
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
|
||||
// Tooltip and popover demos
|
||||
$('.tooltip-demo').tooltip({
|
||||
selector: '[data-toggle="tooltip"]',
|
||||
container: 'body'
|
||||
})
|
||||
|
||||
$('[data-toggle="popover"]').popover()
|
||||
|
||||
// Demos within modals
|
||||
$('.tooltip-test').tooltip()
|
||||
$('.popover-test').popover()
|
||||
|
||||
// Indeterminate checkbox example
|
||||
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
|
||||
|
||||
// Disable empty links in docs examples
|
||||
$('.bd-example [href=#]').click(function (e) {
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
// Insert copy to clipboard button before .highlight
|
||||
$('.highlight').each(function () {
|
||||
var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
|
||||
$(this).before(btnHtml)
|
||||
$('.btn-clipboard').tooltip()
|
||||
})
|
||||
|
||||
var clipboard = new Clipboard('.btn-clipboard', {
|
||||
target: function (trigger) {
|
||||
return trigger.parentNode.nextElementSibling
|
||||
}
|
||||
})
|
||||
|
||||
clipboard.on('success', function (e) {
|
||||
$(e.trigger)
|
||||
.attr('title', 'Copied!')
|
||||
.tooltip('_fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', 'Copy to clipboard')
|
||||
.tooltip('_fixTitle')
|
||||
|
||||
e.clearSelection()
|
||||
})
|
||||
|
||||
clipboard.on('error', function (e) {
|
||||
var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
|
||||
|
||||
$(e.trigger)
|
||||
.attr('title', fallbackMsg)
|
||||
.tooltip('_fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', 'Copy to clipboard')
|
||||
.tooltip('_fixTitle')
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
}(jQuery)
|
||||
|
||||
;(function () {
|
||||
'use strict';
|
||||
|
||||
anchors.options.placement = 'left';
|
||||
anchors.add('.bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
|
||||
})();
|
|
@ -1,6 +0,0 @@
|
|||
/*!
|
||||
* AnchorJS - v2.0.0 - 2015-10-31
|
||||
* https://github.com/bryanbraun/anchorjs
|
||||
* Copyright (c) 2015 Bryan Braun; Licensed MIT
|
||||
*/
|
||||
function AnchorJS(A){"use strict";function t(A){o.options.icon=o.options.hasOwnProperty("icon")?A.icon:"",o.options.visible=o.options.hasOwnProperty("visible")?A.visible:"hover",o.options.placement=o.options.hasOwnProperty("placement")?A.placement:"right",o.options.class=o.options.hasOwnProperty("class")?A.class:"",o.options.truncate=o.options.hasOwnProperty("truncate")?Math.floor(A.truncate):64}function e(){if(null===document.head.querySelector("style.anchorjs")){var A,t=document.createElement("style"),e=" .anchorjs-link { opacity: 0; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }",o=" *:hover > .anchorjs-link, .anchorjs-link:focus { opacity: 1; }",n=' @font-face { font-family: "anchorjs-icons"; font-style: normal; font-weight: normal; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"); }',i=" [data-anchorjs-icon]::after { content: attr(data-anchorjs-icon); }";t.className="anchorjs",t.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(t):document.head.insertBefore(t,A),t.sheet.insertRule(e,t.sheet.cssRules.length),t.sheet.insertRule(o,t.sheet.cssRules.length),t.sheet.insertRule(i,t.sheet.cssRules.length),t.sheet.insertRule(n,t.sheet.cssRules.length)}}var o=this;this.options=A||{},t(A),this.add=function(A){var o,n,i,s,a,r,l,c,h,g,B,u;if(t(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(o=document.querySelectorAll(A),0===o.length)return!1;for(e(),n=document.querySelectorAll("[id]"),i=[].map.call(n,function(A){return A.id}),a=0;a<o.length;a++){if(o[a].hasAttribute("id"))s=o[a].getAttribute("id");else{r=o[a].textContent,l=this.urlify(r),g=l,h=0;do void 0!==c&&(g=l+"-"+h),c=i.indexOf(g),h+=1;while(-1!==c);c=void 0,i.push(g),o[a].setAttribute("id",g),s=g}B=s.replace(/-/g," "),u=document.createElement("a"),u.className="anchorjs-link "+this.options.class,u.href="#"+s,u.setAttribute("aria-label","Anchor link for: "+B),u.setAttribute("data-anchorjs-icon",this.options.icon),"always"===this.options.visible&&(u.style.opacity="1"),""===this.options.icon&&(u.style.fontFamily="anchorjs-icons",u.style.fontStyle="normal",u.style.fontVariant="normal",u.style.fontWeight="normal",u.style.lineHeight=1,"left"===this.options.placement&&(u.style.lineHeight="inherit")),"left"===this.options.placement?(u.style.position="absolute",u.style.marginLeft="-1em",u.style.paddingRight="0.5em",o[a].insertBefore(u,o[a].firstChild)):(u.style.paddingLeft="0.375em",o[a].appendChild(u))}return this},this.remove=function(A){for(var t,e=document.querySelectorAll(A),o=0;o<e.length;o++)t=e[o].querySelector(".anchorjs-link"),t&&e[o].removeChild(t);return this},this.urlify=function(A){var e,o=/[& +$,:;=?@"#{}|^~[`%!'\]\.\/\(\)\*\\]/g;return t(this.options),e=A.replace(/\'/gi,"").replace(o,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()}}var anchors=new AnchorJS;
|
|
@ -1,68 +0,0 @@
|
|||
//
|
||||
// Carbon ads
|
||||
//
|
||||
|
||||
.carbonad {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
padding: 1.25rem !important;
|
||||
margin: 2rem ($grid-gutter-width * -1) -2rem !important;
|
||||
overflow: hidden; // clearfix
|
||||
font-size: .8rem !important;
|
||||
font-family: inherit !important;
|
||||
line-height: 1rem !important;
|
||||
color: $bd-purple-light !important;
|
||||
text-align: left;
|
||||
background: darken($bd-purple, 10%) !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.carbonad-img {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.carbonad-text,
|
||||
.carbonad-tag {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin-left: 145px !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.carbonad-text {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.carbonad-tag {
|
||||
color: inherit !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.carbonad-text a,
|
||||
.carbonad-tag a {
|
||||
color: $bd-purple-light !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.carbonad #azcarbon > img {
|
||||
display: none; // hide what I assume are tracking images
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.carbonad {
|
||||
width: 330px !important;
|
||||
padding: 1rem !important;
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
|
||||
}
|
|
@ -1,22 +0,0 @@
|
|||
.anchorjs-link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.anchorjs-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
*:hover > .anchorjs-link {
|
||||
opacity: .75;
|
||||
-webkit-transition: color .16s linear;
|
||||
-o-transition: color .16s linear;
|
||||
transition: color .16s linear;
|
||||
}
|
||||
|
||||
*:hover > .anchorjs-link:hover,
|
||||
.anchorjs-link:focus {
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
}
|
|
@ -1,25 +0,0 @@
|
|||
//
|
||||
// Bootstrap "B" Booticon
|
||||
//
|
||||
|
||||
.bd-booticon {
|
||||
display: block;
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
font-size: 6.5rem;
|
||||
line-height: 9rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
background-color: $bd-purple;
|
||||
border-radius: 15%;
|
||||
|
||||
&.inverse {
|
||||
color: $bd-purple;
|
||||
background-color: #fff;
|
||||
}
|
||||
&.outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid $bd-purple-light;
|
||||
}
|
||||
}
|
|
@ -1,108 +0,0 @@
|
|||
//
|
||||
// Brand guidelines
|
||||
//
|
||||
|
||||
// Logo series wrapper
|
||||
.bd-brand-logos {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
color: #563d7c;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
// Individual items
|
||||
.bd-brand-item {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.bd-brand-item + .bd-brand-item {
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
.bd-brand-logos .inverse {
|
||||
color: #fff;
|
||||
background-color: #563d7c;
|
||||
}
|
||||
|
||||
// Heading content within
|
||||
.bd-brand-item h1,
|
||||
.bd-brand-item h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bd-brand-item .bd-booticon {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Make the icons stand out on what is/isn't okay
|
||||
// .bd-brand-item .glyphicon {
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// margin: 10px auto -10px;
|
||||
// line-height: 30px;
|
||||
// color: #fff;
|
||||
// border-radius: 50%;
|
||||
// }
|
||||
// .bd-brand-item .glyphicon-ok {
|
||||
// background-color: #5cb85c;
|
||||
// }
|
||||
// .bd-brand-item .glyphicon-remove {
|
||||
// background-color: #d9534f;
|
||||
// }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-brand-item {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
.bd-brand-item + .bd-brand-item {
|
||||
border-top: 0;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
.bd-brand-item h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Color swatches
|
||||
//
|
||||
|
||||
.color-swatches {
|
||||
margin: 0 -5px;
|
||||
overflow: hidden; // clearfix
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
float: left;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-right: .25rem;
|
||||
margin-left: .25rem;
|
||||
border-radius: .25rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Docs colors
|
||||
.color-swatches {
|
||||
.bd-purple {
|
||||
background-color: $bd-purple;
|
||||
}
|
||||
.bd-purple-light {
|
||||
background-color: $bd-purple-light;
|
||||
}
|
||||
.bd-purple-lighter {
|
||||
background-color: #e5e1ea;
|
||||
}
|
||||
.bd-gray {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
|
@ -1,12 +0,0 @@
|
|||
// Wall of Browser Bugs
|
||||
//
|
||||
// Better display for the responsive table on the Wall of Browser Bugs.
|
||||
|
||||
.bd-browser-bugs {
|
||||
td p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
th:first-child {
|
||||
width: 18%;
|
||||
}
|
||||
}
|
|
@ -1,17 +0,0 @@
|
|||
// Buttons
|
||||
//
|
||||
// Custom buttons for the docs.
|
||||
|
||||
.btn-bs {
|
||||
font-weight: 500;
|
||||
color: $bd-purple-bright;
|
||||
border-color: $bd-purple-bright;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #fff;
|
||||
background-color:$bd-purple-bright;
|
||||
border-color: $bd-purple-bright;
|
||||
}
|
||||
}
|
|
@ -1,36 +0,0 @@
|
|||
//
|
||||
// Callouts
|
||||
//
|
||||
|
||||
.bd-callout {
|
||||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid #eee;
|
||||
border-left-width: .25rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.bd-callout h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.bd-callout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bd-callout code {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-callout + .bd-callout {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
// Variations
|
||||
@mixin bs-callout-variant($color) {
|
||||
border-left-color: $color;
|
||||
|
||||
h4 { color: $color; }
|
||||
}
|
||||
.bd-callout-info { @include bs-callout-variant($bd-info); }
|
||||
.bd-callout-warning { @include bs-callout-variant($bd-warning); }
|
||||
.bd-callout-danger { @include bs-callout-variant($bd-danger); }
|
|
@ -1,38 +0,0 @@
|
|||
// clipboard.js
|
||||
//
|
||||
// Flash-based `Copy` buttons for code snippets.
|
||||
|
||||
.bd-clipboard {
|
||||
position: relative;
|
||||
display: none;
|
||||
float: right;
|
||||
|
||||
+ .highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-clipboard {
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: .5rem;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
padding: .25rem .5rem;
|
||||
font-size: 75%;
|
||||
color: #818a91;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border-radius: .25rem;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-clipboard {
|
||||
display: block;
|
||||
}
|
||||
}
|
|
@ -1,348 +0,0 @@
|
|||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row {
|
||||
.row {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
> [class^="col-"] {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(86,61,124,.15);
|
||||
border: 1px solid rgba(86,61,124,.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Container illustrations
|
||||
//
|
||||
|
||||
.bd-example-container {
|
||||
min-width: 16rem;
|
||||
max-width: 25rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.bd-example-container-header {
|
||||
height: 3rem;
|
||||
margin-bottom: .5rem;
|
||||
background-color: lighten($brand-primary, 50%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-example-container-sidebar {
|
||||
float: right;
|
||||
width: 4rem;
|
||||
height: 8rem;
|
||||
background-color: lighten($brand-warning, 25%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-example-container-body {
|
||||
height: 8rem;
|
||||
margin-right: 4.5rem;
|
||||
background-color: lighten($bd-purple, 25%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-example-container-fluid {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Docs examples
|
||||
//
|
||||
|
||||
.bd-example {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
margin: 1rem -1rem;
|
||||
border: solid #f7f7f9;
|
||||
border-width: .2rem 0 0;
|
||||
@include clearfix();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 1.5rem;
|
||||
border-width: .2rem;
|
||||
}
|
||||
|
||||
+ .highlight,
|
||||
+ .clipboard + .highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
+ p {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
// Undo width of container
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
> .form-control {
|
||||
+ .form-control {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Card examples should be horizontal
|
||||
> .card {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
> .nav + .nav,
|
||||
> .alert + .alert,
|
||||
> .navbar + .navbar,
|
||||
> .progress + .progress,
|
||||
> .progress + .btn {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
> .dropdown-menu:first-child {
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example > .close {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Typography
|
||||
.bd-example-type .table .type-info {
|
||||
color: #999;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.bd-example-type .table td {
|
||||
padding: 1rem 0;
|
||||
border-color: #eee;
|
||||
}
|
||||
.bd-example-type .table tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
.bd-example-type h1,
|
||||
.bd-example-type h2,
|
||||
.bd-example-type h3,
|
||||
.bd-example-type h4,
|
||||
.bd-example-type h5,
|
||||
.bd-example-type h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Contextual background colors
|
||||
.bd-example-bg-classes p {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
// Images
|
||||
.bd-example > img {
|
||||
+ img {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.bd-example > .btn-group {
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.bd-example > .btn-toolbar + .btn-toolbar {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
// Forms
|
||||
.bd-example-control-sizing select,
|
||||
.bd-example-control-sizing input[type="text"] + input[type="text"] {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.bd-example-form .input-group {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.bd-example > textarea.form-control {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
// List groups
|
||||
.bd-example > .list-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
// Navbars
|
||||
.bd-example {
|
||||
.navbar-fixed-top {
|
||||
position: static;
|
||||
margin: -1rem -1rem 1rem;
|
||||
}
|
||||
.navbar-fixed-bottom {
|
||||
position: static;
|
||||
margin: 1rem -1rem -1rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.navbar-fixed-top {
|
||||
margin: -1.5rem -1.5rem 1rem;
|
||||
}
|
||||
.navbar-fixed-bottom {
|
||||
margin: 1rem -1.5rem -1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.bd-example .pagination {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Pager
|
||||
.bd-example > .pager {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Example modals
|
||||
.bd-example-modal {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.bd-example-modal .modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
.bd-example-modal .modal-dialog {
|
||||
left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Example dropdowns
|
||||
.bd-example > .dropdown > .dropdown-toggle {
|
||||
float: left;
|
||||
}
|
||||
.bd-example > .dropdown > .dropdown-menu {
|
||||
position: static;
|
||||
display: block;
|
||||
margin-bottom: .25rem;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
// Example tabbable tabs
|
||||
.bd-example-tabs .nav-tabs {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.bd-example-tooltips {
|
||||
text-align: center;
|
||||
}
|
||||
.bd-example-tooltips > .btn {
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
// Popovers
|
||||
.bd-example-popover-static {
|
||||
padding-bottom: 1.5rem;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.bd-example-popover-static .popover {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 260px;
|
||||
margin: 1.25rem;
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bd-example-tooltip-static .tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 10px 20px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Scrollspy demo on fixed height div
|
||||
.scrollspy-example {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Helpers
|
||||
.bd-example > {
|
||||
.center-block:not(img) {
|
||||
max-width: 200px;
|
||||
padding: .5rem;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.bg-primary,
|
||||
.bg-success,
|
||||
.bg-info,
|
||||
.bg-warning,
|
||||
.bg-danger,
|
||||
.bg-inverse {
|
||||
&:not(.navbar) {
|
||||
padding: .5rem;
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Code snippets
|
||||
//
|
||||
|
||||
.highlight {
|
||||
padding: 1rem;
|
||||
margin: 1rem -1rem;
|
||||
background-color: #f7f7f9;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1.5rem;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.highlight pre {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.highlight pre code {
|
||||
font-size: inherit;
|
||||
color: $gray-dark; // Effectively the base text color
|
||||
}
|
||||
|
||||
|
||||
// Pseudo focus
|
||||
//
|
||||
// Custom `:focus` state for showing how it looks in the docs.
|
||||
|
||||
#focusedInput {
|
||||
border-color: $input-border-focus;
|
||||
outline: 0;
|
||||
outline: thin dotted \9; // IE9
|
||||
box-shadow: 0 0 .5rem $input-box-shadow-focus;
|
||||
}
|
|
@ -1,85 +0,0 @@
|
|||
//
|
||||
// Automatically style Markdown-based tables like a Bootstrap `.table`.
|
||||
//
|
||||
|
||||
.bd-content {
|
||||
> table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-y: auto;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
// Cells
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: $table-cell-padding;
|
||||
line-height: $line-height;
|
||||
vertical-align: top;
|
||||
border: 1px solid $table-border-color;
|
||||
|
||||
> p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent breaking of code (e.g., Grunt tasks list)
|
||||
td:first-child > code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Docs sections
|
||||
//
|
||||
|
||||
.bd-content {
|
||||
> h2:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
> ul li,
|
||||
> ol li {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-title {
|
||||
@include media-breakpoint-up(sm) {
|
||||
font-size: 3rem;
|
||||
|
||||
+ p {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Markdown generated ToC
|
||||
//
|
||||
|
||||
#markdown-toc {
|
||||
// Hide the first child li because it's always going to be "Contents".
|
||||
> li:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
}
|
|
@ -1,24 +0,0 @@
|
|||
//
|
||||
// Examples
|
||||
//
|
||||
|
||||
.bd-examples .img-thumbnail {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
.bd-examples h4 {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.bd-examples p {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.bd-examples {
|
||||
margin-right: -.75rem;
|
||||
margin-left: -.75rem;
|
||||
}
|
||||
.bd-examples > [class^="col-"] {
|
||||
padding-right: .75rem;
|
||||
padding-left: .75rem;
|
||||
}
|
||||
}
|
|
@ -1,21 +0,0 @@
|
|||
.bd-featured-sites {
|
||||
margin-right: -1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.bd-featured-sites .col-xs-6 {
|
||||
padding: 1px;
|
||||
}
|
||||
.bd-featured-sites .img-fluid {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-featured-sites .col-sm-3:first-child img {
|
||||
border-top-left-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
.bd-featured-sites .col-sm-3:last-child img {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
}
|
|
@ -1,97 +0,0 @@
|
|||
.bd-featurette {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
.highlight {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-right: auto;
|
||||
margin-bottom: 2rem;
|
||||
margin-left: auto;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.col-sm-6:first-child {
|
||||
padding-right: ($grid-gutter-width * 1.5);
|
||||
};
|
||||
.col-sm-6:last-child {
|
||||
padding-left: ($grid-gutter-width * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-featurette-title {
|
||||
margin-bottom: .5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.half-rule {
|
||||
width: 6rem;
|
||||
margin: 2.5rem auto;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.bd-featurette h4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
}
|
||||
.bd-featurette-img {
|
||||
display: block;
|
||||
margin-bottom: 1.25rem;
|
||||
color: #333;
|
||||
}
|
||||
.bd-featurette-img:hover {
|
||||
color: $brand-primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
.bd-featurette-img img {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.bd-featurette .img-fluid {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-featurette {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
.bd-featurette-title {
|
||||
font-size: 2.5rem;
|
||||
|
||||
+ .lead {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
.bd-featurette .lead {
|
||||
max-width: 80%;
|
||||
}
|
||||
.bd-featurette .img-fluid {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
|
@ -1,41 +0,0 @@
|
|||
//
|
||||
// Footer
|
||||
//
|
||||
|
||||
.bd-footer {
|
||||
padding: 4rem 0;
|
||||
margin-top: 4rem;
|
||||
font-size: 85%;
|
||||
background-color: #f7f7f7;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: $gray;
|
||||
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-footer-links {
|
||||
padding-left: 0;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
+ li {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,92 +0,0 @@
|
|||
.bd-masthead {
|
||||
position: relative;
|
||||
padding: 3rem ($grid-gutter-width / 2) 2rem;
|
||||
color: $bd-purple-light;
|
||||
text-align: center;
|
||||
background-image: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(darken($bd-purple, 20%))}', endColorstr='#{ie-hex-str(lighten(saturate($bd-purple, 5%), 15%))}', gradientType='1'); /* For IE9 */
|
||||
|
||||
.bd-booticon {
|
||||
margin: 0 auto 2rem;
|
||||
color: $bd-purple-light;
|
||||
border-color: $bd-purple-light;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.25rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: $bd-yellow;
|
||||
border-color: $bd-yellow;
|
||||
|
||||
&:hover {
|
||||
color: $bd-graphite;
|
||||
background-color: $bd-yellow;
|
||||
border-color: $bd-yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.carbonad {
|
||||
margin-bottom: -2rem !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
.btn {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.carbonad {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-bottom: 4rem;
|
||||
|
||||
.bd-header {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.carbonad {
|
||||
margin-top: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.lead {
|
||||
width: 85%;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,38 +0,0 @@
|
|||
//
|
||||
// Main navbar
|
||||
//
|
||||
|
||||
.bd-navbar {
|
||||
font-size: 87.5%; // 14px
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $bd-graphite-light;
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $gray-dark;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: darken($gray-dark, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.nav-link {
|
||||
float: none;
|
||||
|
||||
+ .nav-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,58 +0,0 @@
|
|||
.bd-pageheader {
|
||||
padding: 2rem ($grid-gutter-width / 2);
|
||||
margin-bottom: 1.5rem;
|
||||
color: $bd-purple-light;
|
||||
text-align: center;
|
||||
background-color: $bd-purple;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
margin-bottom: 3rem;
|
||||
text-align: left;
|
||||
|
||||
.carbonad {
|
||||
margin: 2rem 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
h1,
|
||||
p {
|
||||
margin-right: 380px;
|
||||
}
|
||||
|
||||
.carbonad {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: .75rem; // offset from the .container's padding
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,92 +0,0 @@
|
|||
//
|
||||
// Responsive tests
|
||||
//
|
||||
|
||||
// Responsive (scrollable) doc tables
|
||||
.table-responsive .highlight pre {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// Utility classes table
|
||||
.bd-table th small,
|
||||
.responsive-utilities th small {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
}
|
||||
.responsive-utilities tbody th {
|
||||
font-weight: normal;
|
||||
}
|
||||
.responsive-utilities td {
|
||||
text-align: center;
|
||||
}
|
||||
.responsive-utilities td.is-visible {
|
||||
color: #468847;
|
||||
background-color: #dff0d8 !important;
|
||||
}
|
||||
.responsive-utilities td.is-hidden {
|
||||
color: #ccc;
|
||||
background-color: #f9f9f9 !important;
|
||||
}
|
||||
|
||||
// Responsive tests
|
||||
.responsive-utilities-test {
|
||||
margin-top: .25rem;
|
||||
}
|
||||
.responsive-utilities-test .col-xs-6 {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.responsive-utilities-test span {
|
||||
display: block;
|
||||
padding: 1rem .5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.visible-on,
|
||||
.hidden-on {
|
||||
.col-xs-6 {
|
||||
> .not-visible {
|
||||
color: #999;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
.visible-on,
|
||||
.hidden-on {
|
||||
.col-xs-6 {
|
||||
.visible {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
border: 1px solid #d6e9c6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-only(xs) {
|
||||
.hidden-xs-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-only(sm) {
|
||||
.hidden-sm-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-only(md) {
|
||||
.hidden-md-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-only(lg) {
|
||||
.hidden-lg-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-only(xl) {
|
||||
.hidden-xl-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
|
@ -1,107 +0,0 @@
|
|||
//
|
||||
// Side navigation
|
||||
//
|
||||
|
||||
.bd-sidebar {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-search {
|
||||
position: relative;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.form-control {
|
||||
height: 2.45rem;
|
||||
padding-top: .4rem;
|
||||
padding-bottom: .4rem;
|
||||
background-color: #fafafa;
|
||||
|
||||
&:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-search-results {
|
||||
right: 0;
|
||||
display: block;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: .9rem;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding-left: .75rem;
|
||||
padding-right: .75rem;
|
||||
|
||||
&:first-child { margin-top: .25rem; }
|
||||
&:last-child { margin-bottom: .25rem; }
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: .75rem 1rem;
|
||||
color: #7a7a7a;
|
||||
text-align: center;
|
||||
white-space: normal; // Undo .dropdown-item defaults
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bd-sidenav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bd-toc-link {
|
||||
display: block;
|
||||
padding: .25rem .75rem;
|
||||
color: $gray;
|
||||
}
|
||||
.bd-toc-link:hover,
|
||||
.bd-toc-link:focus {
|
||||
color: $brand-primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
.active > .bd-toc-link {
|
||||
font-weight: 500;
|
||||
color: $gray-dark;
|
||||
}
|
||||
.active > .bd-sidenav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bd-toc-item.active {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.bd-toc-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.bd-toc-item:last-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
// All levels of nav
|
||||
.bd-sidebar .nav > li > a {
|
||||
display: block;
|
||||
padding: .25rem .75rem;
|
||||
font-size: 90%;
|
||||
color: #99979c;
|
||||
}
|
||||
.bd-sidebar .nav > li > a:hover,
|
||||
.bd-sidebar .nav > li > a:focus {
|
||||
color: $brand-primary;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.bd-sidebar .nav > .active > a,
|
||||
.bd-sidebar .nav > .active:hover > a,
|
||||
.bd-sidebar .nav > .active:focus > a {
|
||||
font-weight: 500;
|
||||
color: $gray-dark;
|
||||
background-color: transparent;
|
||||
}
|
|
@ -1,12 +0,0 @@
|
|||
#skippy {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
color: #fff;
|
||||
background-color: $bd-purple;
|
||||
outline: 0;
|
||||
|
||||
.skiplink-text {
|
||||
padding: .5em;
|
||||
outline: 1px dotted;
|
||||
}
|
||||
}
|
|
@ -1,64 +0,0 @@
|
|||
.hll { background-color: #ffffcc }
|
||||
.c { color: #999; }
|
||||
.err { color: #AA0000; background-color: #FFAAAA }
|
||||
.k { color: #006699; }
|
||||
.o { color: #555555 }
|
||||
.cm { color: #999; }
|
||||
.cp { color: #009999 }
|
||||
.c1 { color: #999; }
|
||||
.cs { color: #999; }
|
||||
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 }
|
||||
.ge { font-style: italic }
|
||||
.gr { color: #FF0000 }
|
||||
.gh { color: #003300; }
|
||||
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 }
|
||||
.go { color: #AAAAAA }
|
||||
.gp { color: #000099; }
|
||||
.gu { color: #003300; }
|
||||
.gt { color: #99CC66 }
|
||||
.kc { color: #006699; }
|
||||
.kd { color: #006699; }
|
||||
.kn { color: #006699; }
|
||||
.kp { color: #006699 }
|
||||
.kr { color: #006699; }
|
||||
.kt { color: #007788; }
|
||||
.m { color: #FF6600 }
|
||||
.s { color: #d44950 }
|
||||
.na { color: #4f9fcf }
|
||||
.nb { color: #336666 }
|
||||
.nc { color: #00AA88; }
|
||||
.no { color: #336600 }
|
||||
.nd { color: #9999FF }
|
||||
.ni { color: #999999; }
|
||||
.ne { color: #CC0000; }
|
||||
.nf { color: #CC00FF }
|
||||
.nl { color: #9999FF }
|
||||
.nn { color: #00CCFF; }
|
||||
.nt { color: #2f6f9f; }
|
||||
.nv { color: #003333 }
|
||||
.ow { color: #000000; }
|
||||
.w { color: #bbbbbb }
|
||||
.mf { color: #FF6600 }
|
||||
.mh { color: #FF6600 }
|
||||
.mi { color: #FF6600 }
|
||||
.mo { color: #FF6600 }
|
||||
.sb { color: #CC3300 }
|
||||
.sc { color: #CC3300 }
|
||||
.sd { color: #CC3300; font-style: italic }
|
||||
.s2 { color: #CC3300 }
|
||||
.se { color: #CC3300; }
|
||||
.sh { color: #CC3300 }
|
||||
.si { color: #AA0000 }
|
||||
.sx { color: #CC3300 }
|
||||
.sr { color: #33AAAA }
|
||||
.s1 { color: #CC3300 }
|
||||
.ss { color: #FFCC33 }
|
||||
.bp { color: #336666 }
|
||||
.vc { color: #003333 }
|
||||
.vg { color: #003333 }
|
||||
.vi { color: #003333 }
|
||||
.il { color: #FF6600 }
|
||||
|
||||
.css .o,
|
||||
.css .o + .nt,
|
||||
.css .nt + .nt { color: #999; }
|
|
@ -1,28 +0,0 @@
|
|||
.bd-team {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.team-member {
|
||||
line-height: 2rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.team-member:hover {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.github-btn {
|
||||
border: none;
|
||||
float: right;
|
||||
width: 180px;
|
||||
height: 1.25rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
img {
|
||||
float: left;
|
||||
width: 2rem;
|
||||
margin-right: .5rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
}
|
|
@ -1,64 +0,0 @@
|
|||
/*!
|
||||
* Bootstrap Docs (http://getbootstrap.com)
|
||||
* Copyright 2011-2015 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
* details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
// Dev notes
|
||||
//
|
||||
// Background information on nomenclature and architecture decisions here.
|
||||
//
|
||||
// - Bootstrap variables and mixins are included for easy reuse.
|
||||
// Doing so gives us access to the same core utilities provided by Bootstrap.
|
||||
// For example, consistent media queries through those mixins.
|
||||
//
|
||||
// - Bootstrap's **docs variables** are prefixed with `%bd-`.
|
||||
// These custom colors avoid collision with the components Bootstrap provides.
|
||||
//
|
||||
// - Classes are prefixed with `.bd-`.
|
||||
// These classes indicate custom-built or modified components for the design
|
||||
// and layout of the Bootstrap docs. They are not included in our builds.
|
||||
//
|
||||
// Happy Bootstrapping!
|
||||
|
||||
// Load Bootstrap variables and mixins
|
||||
@import "../../../scss/variables";
|
||||
@import "../../../scss/mixins";
|
||||
|
||||
// Local docs variables
|
||||
$bd-purple: #563d7c;
|
||||
$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%);
|
||||
$bd-purple-light: #cdbfe3;
|
||||
$bd-graphite: #2a2730;
|
||||
$bd-graphite-light: lighten($bd-graphite, 40%);
|
||||
$bd-yellow: #ffe484;
|
||||
$bd-danger: #d9534f;
|
||||
$bd-warning: #f0ad4e;
|
||||
$bd-info: #5bc0de;
|
||||
|
||||
// Load docs components
|
||||
@import "booticon";
|
||||
@import "nav";
|
||||
@import "masthead";
|
||||
@import "featurettes";
|
||||
@import "featured-sites";
|
||||
@import "ads";
|
||||
@import "content";
|
||||
@import "page-header";
|
||||
@import "skiplink";
|
||||
@import "sidebar";
|
||||
@import "footer";
|
||||
@import "component-examples";
|
||||
@import "responsive-tests";
|
||||
@import "buttons";
|
||||
@import "callouts";
|
||||
@import "examples";
|
||||
@import "team";
|
||||
@import "browser-bugs";
|
||||
@import "brand";
|
||||
@import "clipboard-js";
|
||||
|
||||
// Load docs dependencies
|
||||
@import "syntax";
|
||||
@import "anchor";
|
|
@ -1,39 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Wall of browser bugs
|
||||
group: browser-bugs
|
||||
---
|
||||
|
||||
Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.
|
||||
|
||||
We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs]({{ site.baseurl }}/getting-started/browsers-devices/#supported-browsers).
|
||||
|
||||
Also see [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o).
|
||||
|
||||
See also:
|
||||
* [Chromium issue 536263: [meta] Issues affecting Bootstrap](https://code.google.com/p/chromium/issues/detail?id=536263)
|
||||
* [Mozilla bug 1230801: Fix the issues that affect Bootstrap](https://bugzilla.mozilla.org/show_bug.cgi?id=1230801)
|
||||
* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="bd-browser-bugs table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser(s)</th>
|
||||
<th>Summary of bug</th>
|
||||
<th>Upstream bug(s)</th>
|
||||
<th>Bootstrap issue(s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for bug in site.data.browser-bugs %}
|
||||
<tr>
|
||||
<td>{{ bug.browser }}</td>
|
||||
<td>{{ bug.summary | markdownify | bugify }}</td>
|
||||
<td>{{ bug.upstream_bug | bugify }}</td>
|
||||
<td>{{ bug.origin | bugify }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
|
@ -1,114 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Alerts
|
||||
group: components
|
||||
---
|
||||
|
||||
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Examples
|
||||
|
||||
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
|
||||
|
||||
{% example html %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
<strong>Well done!</strong> You successfully read this important alert message.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Link color
|
||||
|
||||
Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
|
||||
|
||||
{% example html %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Dismissing
|
||||
|
||||
Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
|
||||
|
||||
- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
|
||||
- Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button.
|
||||
- On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
|
||||
- To animate alerts when dismissing them, be sure to add the `.fade` and `.in` classes.
|
||||
|
||||
You can see this in action with a live demo:
|
||||
|
||||
{% example html %}
|
||||
<div class="alert alert-warning alert-dismissible fade in" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## JavaScript behavior
|
||||
|
||||
### Triggers
|
||||
|
||||
Enable dismissal of an alert via JavaScript:
|
||||
|
||||
{% highlight js %}
|
||||
$(".alert").alert()
|
||||
{% endhighlight %}
|
||||
|
||||
Or with `data` attributes on a button **within the alert**, as demonstrated above:
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
{% endhighlight %}
|
||||
|
||||
Note that closing an alert will remove it from the DOM.
|
||||
|
||||
### Methods
|
||||
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `$().alert()` | Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) |
|
||||
| `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed. |
|
||||
|
||||
{% highlight js %}$(".alert").alert('close'){% endhighlight %}
|
||||
|
||||
### Events
|
||||
|
||||
Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
|
||||
|
||||
| Event | Description |
|
||||
| --- | --- |
|
||||
| `close.bs.alert` | This event fires immediately when the <code>close</code> instance method is called. |
|
||||
| `closed.bs.alert` | This event is fired when the alert has been closed (will wait for CSS transitions to complete). |
|
||||
|
||||
{% highlight js %}
|
||||
$('#myAlert').on('closed.bs.alert', function () {
|
||||
// do something…
|
||||
})
|
||||
{% endhighlight %}
|
|
@ -1,24 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Breadcrumb
|
||||
group: components
|
||||
---
|
||||
|
||||
Indicate the current page's location within a navigational hierarchy.
|
||||
|
||||
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).
|
||||
|
||||
{% example html %}
|
||||
<ol class="breadcrumb">
|
||||
<li class="active">Home</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li class="active">Library</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb" style="margin-bottom: 5px;">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Library</a></li>
|
||||
<li class="active">Data</li>
|
||||
</ol>
|
||||
{% endexample %}
|
|
@ -1,307 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Button dropdown
|
||||
group: components
|
||||
---
|
||||
|
||||
Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.
|
||||
|
||||
{% callout danger %}
|
||||
#### Plugin dependency
|
||||
|
||||
Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dropdowns/) to be included in your version of Bootstrap.
|
||||
{% endcallout %}
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
### Single button dropdowns
|
||||
|
||||
Turn a button into a dropdown toggle with some basic markup changes.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Single button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
### Split button dropdowns
|
||||
|
||||
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Split button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
### Sizing
|
||||
|
||||
Button dropdowns work with buttons of all sizes.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
</div><!-- /example -->
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Large button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
### Dropup variation
|
||||
|
||||
Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-primary">Right dropup</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
|
@ -1,157 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Button group
|
||||
group: components
|
||||
---
|
||||
|
||||
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin).
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Basic example
|
||||
|
||||
Wrap a series of buttons with `.btn` in `.btn-group`.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Button toolbar
|
||||
|
||||
Combine sets of button groups into button toolbars for more complex components.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-secondary">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-secondary">7</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-secondary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Sizing
|
||||
|
||||
Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group" role="group" aria-label="Default button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
|
||||
<div class="btn-group" role="group" aria-label="...">...</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
|
||||
{% endhighlight %}
|
||||
|
||||
## Nesting
|
||||
|
||||
Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Vertical variation
|
||||
|
||||
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="btn-group-vertical">
|
||||
...
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
## Tooltips and popovers
|
||||
|
||||
Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **You'll have to specify the option `container: 'body'`** to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
|
|
@ -1,185 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Buttons
|
||||
group: components
|
||||
redirect_from: "/components/"
|
||||
---
|
||||
|
||||
Use Bootstrap's custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Examples
|
||||
|
||||
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
|
||||
|
||||
{% example html %}
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
|
||||
<!-- Secondary, outline button -->
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
|
||||
<!-- Contextual button for informational alert messages -->
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
|
||||
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
{% endexample %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Conveying meaning to assistive technologies
|
||||
|
||||
Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
|
||||
{% endcallout %}
|
||||
|
||||
## Button tags
|
||||
|
||||
The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
|
||||
|
||||
When using button classes on `<a>` elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a `role="button"` to appropriately convey their purpose to assistive technologies such as screen readers.
|
||||
|
||||
{% example html %}
|
||||
<a class="btn btn-primary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-primary" type="submit">Button</button>
|
||||
<input class="btn btn-primary" type="button" value="Input">
|
||||
<input class="btn btn-primary" type="submit" value="Submit">
|
||||
{% endexample %}
|
||||
|
||||
## Outline buttons
|
||||
|
||||
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-*-outline` ones to remove all background images and colors on any button.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary-outline">Primary</button>
|
||||
<button type="button" class="btn btn-secondary-outline">Secondary</button>
|
||||
<button type="button" class="btn btn-success-outline">Success</button>
|
||||
<button type="button" class="btn btn-info-outline">Info</button>
|
||||
<button type="button" class="btn btn-warning-outline">Warning</button>
|
||||
<button type="button" class="btn btn-danger-outline">Danger</button>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Sizes
|
||||
|
||||
Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
||||
{% endexample %}
|
||||
|
||||
Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
{% endexample %}
|
||||
|
||||
## Active state
|
||||
|
||||
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
|
||||
{% endexample %}
|
||||
|
||||
## Disabled state
|
||||
|
||||
Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.
|
||||
|
||||
{% callout info %}
|
||||
**Heads up!** IE9 and below render disabled buttons with gray, shadowed text that we can't override.
|
||||
{% endcallout %}
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
|
||||
{% endexample %}
|
||||
|
||||
As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it.
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
|
||||
{% endexample %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Link functionality caveat
|
||||
|
||||
This class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11\. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.
|
||||
{% endcallout %}
|
||||
|
||||
## Button plugin
|
||||
|
||||
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
|
||||
|
||||
### Toggle states
|
||||
|
||||
Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Single toggle
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
### Checkbox and radio buttons
|
||||
|
||||
Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling. Add `data-toggle="buttons"` to a `.btn-group` containing those modified buttons to enable toggling in their respective styles.
|
||||
|
||||
The checked state for these buttons is **only updated via `click` event** on the button. If you use another method to update the input—e.g., with `<input type="reset">` or by manually applying the input's `checked` property—you'll need to toggle `.active` on the `<label>` manually.
|
||||
|
||||
Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Checkbox 2
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Checkbox 3
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Methods
|
||||
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `$().button('toggle')` |Toggles push state. Gives the button the appearance that it has been activated. |
|
|
@ -1,456 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Cards
|
||||
group: components
|
||||
---
|
||||
|
||||
A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
|
||||
|
||||
If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Example
|
||||
|
||||
Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content like images, feel free to put the `.card-block` class on the `.card` element to consolidate your markup.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Content types
|
||||
|
||||
Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
<div class="card-block">
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
|
||||
</div>
|
||||
<img data-src="holder.js/100px180/?text=Image" alt="Card image">
|
||||
<div class="card-block">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Sizing
|
||||
|
||||
Constrain the width of cards via custom CSS, our predefined grid classes, or with custom styles using our grid mixins.
|
||||
|
||||
Using the grid:
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="card card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Using custom widths:
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-block" style="width: 18rem;">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Text alignment
|
||||
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/components/utilities/#text-alignment).
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
<div class="card card-block text-xs-center">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
<div class="card card-block text-xs-right">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Header and footer
|
||||
|
||||
Add an optional header and/or footer within a card.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<h3 class="card-header">Featured</h3>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Quote
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-xs-center">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-muted">
|
||||
2 days ago
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Image caps
|
||||
|
||||
Similar to headers and footers, cards include top and bottom image caps.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<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>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<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>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Image overlays
|
||||
|
||||
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-inverse` (see below).
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-inverse">
|
||||
<img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
|
||||
<div class="card-img-overlay">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<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>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Inverted text
|
||||
|
||||
Cards include a class for quickly toggling **the text color**. By default, cards use dark text and assume a light background. **Add `.card-inverse` for white text** and specify the `background-color` and `border-color` to go with it.
|
||||
|
||||
You can also use `.card-inverse` with the [contextual backgrounds variants](#background-variants).
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
|
||||
<div class="card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Background variants
|
||||
|
||||
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-inverse card-primary text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-success text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-info text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-warning text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-danger text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Groups
|
||||
|
||||
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
|
||||
|
||||
Only applies to small devices and above.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<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>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Decks
|
||||
|
||||
Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
|
||||
|
||||
Only applies to small devices and above.
|
||||
|
||||
**ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-deck-wrapper">
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Columns
|
||||
|
||||
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Only applies to small devices and above.
|
||||
|
||||
**Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts).
|
||||
|
||||
{% example html %}
|
||||
<div class="card-columns">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title that wraps to a new line</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-block card-inverse card-primary text-xs-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||||
<footer>
|
||||
<small>
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card card-block text-xs-center">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img" data-src="holder.js/100px260/" alt="Card image">
|
||||
</div>
|
||||
<div class="card card-block text-xs-right">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
|
@ -1,247 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Carousel
|
||||
group: components
|
||||
---
|
||||
|
||||
A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](http://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Example
|
||||
|
||||
{% example html %}
|
||||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<div class="carousel-item active">
|
||||
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
<span class="icon-prev" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
<span class="icon-next" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Transition animations not supported in Internet Explorer 9
|
||||
|
||||
Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. We have intentionally decided not to include jQuery-based fallbacks for the transitions.
|
||||
{% endcallout %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Initial active element required
|
||||
|
||||
The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
|
||||
{% endcallout %}
|
||||
|
||||
### Optional captions
|
||||
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
|
||||
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<div class="carousel-item active">
|
||||
<img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
|
||||
<div class="carousel-caption">
|
||||
<h3>First slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
|
||||
<div class="carousel-caption">
|
||||
<h3>Second slide label</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image">
|
||||
<div class="carousel-caption">
|
||||
<h3>Third slide label</h3>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
|
||||
<span class="icon-prev" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
|
||||
<span class="icon-next" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="carousel-item">
|
||||
<img src="..." alt="...">
|
||||
<div class="carousel-caption">
|
||||
<h3>...</h3>
|
||||
<p>...</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
{% callout danger %}
|
||||
#### Accessibility issue
|
||||
|
||||
The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
|
||||
{% endcallout %}
|
||||
|
||||
## Usage
|
||||
|
||||
### Multiple carousels
|
||||
|
||||
Carousels require the use of an `id` on the outermost container (the `.carousel`) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's `id`, be sure to update the relevant controls.
|
||||
|
||||
### Via data attributes
|
||||
|
||||
Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.
|
||||
|
||||
The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**
|
||||
|
||||
### Via JavaScript
|
||||
|
||||
Call carousel manually with:
|
||||
|
||||
{% highlight js %}
|
||||
$('.carousel').carousel()
|
||||
{% endhighlight %}
|
||||
|
||||
### Options
|
||||
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">Type</th>
|
||||
<th style="width: 50px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>interval</td>
|
||||
<td>number</td>
|
||||
<td>5000</td>
|
||||
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pause</td>
|
||||
<td>string</td>
|
||||
<td>"hover"</td>
|
||||
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>wrap</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether the carousel should cycle continuously or have hard stops.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>keyboard</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether the carousel should react to keyboard events.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
### Methods
|
||||
|
||||
#### `.carousel(options)`
|
||||
|
||||
Initializes the carousel with an optional options `object` and starts cycling through items.
|
||||
|
||||
{% highlight js %}
|
||||
$('.carousel').carousel({
|
||||
interval: 2000
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
#### `.carousel('cycle')`
|
||||
|
||||
Cycles through the carousel items from left to right.
|
||||
|
||||
#### `.carousel('pause')`
|
||||
|
||||
Stops the carousel from cycling through items.
|
||||
|
||||
#### `.carousel(number)`
|
||||
|
||||
Cycles the carousel to a particular frame (0 based, similar to an array).
|
||||
|
||||
#### `.carousel('prev')`
|
||||
|
||||
Cycles to the previous item.
|
||||
|
||||
#### `.carousel('next')`
|
||||
|
||||
Cycles to the next item.
|
||||
|
||||
### Events
|
||||
|
||||
Bootstrap's carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
|
||||
|
||||
- `direction`: The direction in which the carousel is sliding (either `"left"` or `"right"`).
|
||||
- `relatedTarget`: The DOM element that is being slid into place as the active item.
|
||||
|
||||
All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>slide.bs.carousel</td>
|
||||
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>slid.bs.carousel</td>
|
||||
<td>This event is fired when the carousel has completed its slide transition.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% highlight js %}
|
||||
$('#myCarousel').on('slide.bs.carousel', function () {
|
||||
// do something…
|
||||
})
|
||||
{% endhighlight %}
|
|
@ -1,209 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Collapse
|
||||
group: components
|
||||
---
|
||||
|
||||
The Bootstrap collapse plugin allows you to toggle content on your pages with a bit of JavaScript and some classes. Flexible plugin that utilizes a handful of classes (from the **required [transitions plugin]({{ site.baseurl }}/components/transitions/)**) for easy toggle behavior.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Example
|
||||
|
||||
Click the buttons below to show and hide another element via class changes:
|
||||
|
||||
- `.collapse` hides content
|
||||
- `.collapsing` is applied during transitions
|
||||
- `.collapse.in` shows content
|
||||
|
||||
You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
|
||||
|
||||
{% example html %}
|
||||
<p>
|
||||
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-block">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Accordion example
|
||||
|
||||
Extend the default collapse behavior to create an accordion.
|
||||
|
||||
{% example html %}
|
||||
<div id="accordion" role="tablist" aria-multiselectable="true">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingTwo">
|
||||
<h4 class="panel-title">
|
||||
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingThree">
|
||||
<h4 class="panel-title">
|
||||
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Accessibility
|
||||
|
||||
Be sure to add `aria-expanded` to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `in` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.
|
||||
|
||||
Additionally, if your control element is targetting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you may add an additional `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
|
||||
|
||||
## Usage
|
||||
|
||||
The collapse plugin utilizes a few classes to handle the heavy lifting:
|
||||
|
||||
- `.collapse` hides the content
|
||||
- `.collapse.in` shows the content
|
||||
- `.collapsing` is added when the transition starts, and removed when it finishes
|
||||
|
||||
These classes can be found in `_animation.scss`.
|
||||
|
||||
### Via data attributes
|
||||
|
||||
Just add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of a collapsible element. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `in`.
|
||||
|
||||
To add accordion-like group management to a collapsible control, add the data attribute `data-parent="#selector"`. Refer to the demo to see this in action.
|
||||
|
||||
### Via JavaScript
|
||||
|
||||
Enable manually with:
|
||||
|
||||
{% highlight js %}
|
||||
$('.collapse').collapse()
|
||||
{% endhighlight %}
|
||||
|
||||
### Options
|
||||
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">Type</th>
|
||||
<th style="width: 50px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>parent</td>
|
||||
<td>selector</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>panel</code> class)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Toggles the collapsible element on invocation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
### Methods
|
||||
|
||||
#### `.collapse(options)`
|
||||
|
||||
Activates your content as a collapsible element. Accepts an optional options `object`.
|
||||
|
||||
{% highlight js %}
|
||||
$('#myCollapsible').collapse({
|
||||
toggle: false
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
#### `.collapse('toggle')`
|
||||
|
||||
Toggles a collapsible element to shown or hidden.
|
||||
|
||||
#### `.collapse('show')`
|
||||
|
||||
Shows a collapsible element.
|
||||
|
||||
#### `.collapse('hide')`
|
||||
|
||||
Hides a collapsible element.
|
||||
|
||||
### Events
|
||||
|
||||
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.bs.collapse</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.collapse</td>
|
||||
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.collapse</td>
|
||||
<td>
|
||||
This event is fired immediately when the <code>hide</code> method has been called.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.collapse</td>
|
||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% highlight js %}
|
||||
$('#myCollapsible').on('hidden.bs.collapse', function () {
|
||||
// do something…
|
||||
})
|
||||
{% endhighlight %}
|