|
@ -1,15 +0,0 @@
|
|||
root = true
|
||||
[*]
|
||||
insert_final_newline = true
|
||||
[*.js]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
[*.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
[*.less]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
[*.sass]
|
||||
indent_style = space
|
||||
indent_size = 2
|
42
.gitignore
vendored
|
@ -1,42 +0,0 @@
|
|||
# https://git-scm.com/docs/gitignore
|
||||
# https://help.github.com/articles/ignoring-files
|
||||
# Example .gitignore files: https://github.com/github/gitignore
|
||||
|
||||
|
||||
# Jekyll metadata
|
||||
_gh_pages
|
||||
_site
|
||||
docs/.jekyll-metadata
|
||||
docs/dist
|
||||
|
||||
*.log
|
||||
.sass-cache
|
||||
Thumbs.db
|
||||
.DS_Store
|
||||
/node_modules/
|
||||
.grunt/
|
||||
/bower_components/
|
||||
.build*
|
||||
/_SpecRunner.html
|
||||
Gemfile.lock
|
||||
dist/sassc
|
||||
|
||||
|
||||
# not needed on gh-pages branch
|
||||
Gruntfile.js
|
||||
LICENSE.md
|
||||
CONTRIBUTING.md
|
||||
package.json
|
||||
README.md
|
||||
docs
|
||||
less
|
||||
sass
|
||||
scripts
|
||||
meteor
|
||||
bower.json
|
||||
testcase.html
|
||||
package.js
|
||||
.versions
|
||||
ISSUE_TEMPLATE.md
|
||||
material-design-color-palette.jpg
|
||||
grunt/**
|
17
.npmignore
|
@ -1,17 +0,0 @@
|
|||
demo\
|
||||
fonts\
|
||||
scripts\
|
||||
test\
|
||||
|
||||
.editorconfig
|
||||
.gitignore
|
||||
.jshintrc
|
||||
.npmignore
|
||||
.travis.yml
|
||||
.versions
|
||||
bootstrap-elements.html
|
||||
bower.json
|
||||
CONTRIBUTING.md
|
||||
Gruntfile.js
|
||||
index.html
|
||||
package.js
|
128
CONTRIBUTING.md
Normal file
|
@ -0,0 +1,128 @@
|
|||
## **TLDR;** Issues will be closed unless they are accompanied by a test case using one of our [CodePen templates](#codepen-templates).
|
||||
|
||||
# Contributing
|
||||
|
||||
Looking to contribute something to bootstrap-material-design? **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/FezVrasta/bootstrap-material-design/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-material-design`](https://stackoverflow.com/questions/tagged/bootstrap-material-design) tag) is the best place to get help.
|
||||
|
||||
* Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others.
|
||||
|
||||
* Please **do not** post comments consisting solely of "+1" or ":thumbsup:". Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) instead. We reserve the right to delete comments which violate this rule.
|
||||
|
||||
* Please **do not** open issues or pull requests regarding the code in dependencies such as: [`Bootstrap`](https://github.com/twbs/bootstrap) (open them in their respective repositories).
|
||||
|
||||
* Please **do not** open issues without clearly stating the problem and desired result. [See the bug reports section](#bug-reports) for more information on creating effective issues.
|
||||
|
||||
* Please **close your own issue** once it is resolved.
|
||||
|
||||
|
||||
## 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:
|
||||
|
||||
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** — create a [reduced test case](https://css-tricks.com/reduced-test-cases/) using one of **our** [Codepen templates](#codepen-templates).
|
||||
|
||||
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.
|
||||
|
||||
## Codepen templates
|
||||
When submitting an issue, you must submit a Codepen demonstrating your issue. Please be sure to use the template below that is specific for your version:
|
||||
|
||||
- [`v4` Codepen template](http://codepen.io/rosskevin/pen/eJMMVB)
|
||||
- [`v3` Codepen template](http://codepen.io/rosskevin/pen/VvRgrN)
|
||||
|
||||
|
||||
## Why was my issue summarily closed?
|
||||
Please don't take this the wrong way, but we receive a lot of issues and in order to effectively help, we need you to follow the guidelines.
|
||||
|
||||
We try our best to maintain a great project, and do so with a considerable amount of our personal time and effort. Following these guidelines facilitates an efficient way to communicate about bugs or simply help. Failure to follow these guidelines leads to confusion and wasted time.
|
||||
|
||||
Many times, we find that the process of creating the [Codepen test case](#codepen-templates) solves the user's problem, and shows that an interaction with code outside this library are causing undesirable side effects.
|
||||
|
||||
If you do not take the time to read and follow these guidelines (including submitting a reduced test case with _**our** Codepen template_), then why should we take more time to help you?
|
||||
|
||||
|
||||
## 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 and the [Google Material Design specification itself](http://www.google.com/design/spec/material-design/introduction.html). 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).
|
||||
|
||||
**In general, do not edit `dist` or `gh-pages` files directly!** Those files are automatically generated.
|
||||
|
||||
Similarly, when contributing to the documentation, you should edit the documentation source files in the docs directory.
|
||||
|
||||
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-material-design.git
|
||||
# Navigate to the newly cloned directory
|
||||
cd bootstrap-material-design
|
||||
# Assign the original repo to a remote called "upstream"
|
||||
git remote add upstream https://github.com/FezVrasta/bootstrap-material-design.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 with messages written in english. 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.
|
||||
|
||||
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. Referenc any open issue in the description so it is automatically linked.
|
||||
|
||||
**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).
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
### Coding styles
|
||||
Before committing ensure your changes follow our coding standards by running `gulp` for `v4` or `grunt dist docs` for `v3`. This will run the various code style check tools and provide feedback.
|
17
HACKING.md
Normal file
|
@ -0,0 +1,17 @@
|
|||
# Hacking Material Design for Bootstrap
|
||||
|
||||
This project makes use of Gulp to build all our source codes.
|
||||
|
||||
You can get a full list of available commands running:
|
||||
|
||||
```
|
||||
npm run gulp -- --tasks
|
||||
```
|
||||
|
||||
Then, simply run:
|
||||
|
||||
```
|
||||
npm run gulp dist:default // or any other task name
|
||||
```
|
||||
|
||||
To trigger the relative task and run it.
|
26
ISSUE_TEMPLATE.md
Normal file
|
@ -0,0 +1,26 @@
|
|||
<!--
|
||||
|
||||
All bug reports must contain a test case using our Codepen template;
|
||||
Bug reports without it will be summarily closed:
|
||||
- Codepen template - http://codepen.io/rosskevin/pen/eJMMVB
|
||||
|
||||
Make sure to search for existing issues before opening a new one.
|
||||
|
||||
If you are experiencing an issue with the version 3 of this theme, you must know
|
||||
that we are no longer maintaining the old version and we are only accepting PR to
|
||||
fix existing issues. New issues without an associated PR will be closed.
|
||||
More info at https://github.com/FezVrasta/bootstrap-material-design/issues/1004
|
||||
|
||||
-->
|
||||
|
||||
#### Test Case
|
||||
_(Codepen URL here)_
|
||||
|
||||
#### Summary
|
||||
_A summary of the issue and the browser/OS environment in which it occurs. If suitable, include the steps required to reproduce the bug._
|
||||
|
||||
#### Expected result
|
||||
_Description of expectation, mockup, etc._
|
||||
|
||||
#### Additional Information
|
||||
_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)._
|
30
LICENSE.md
Normal file
|
@ -0,0 +1,30 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015-2016, Federico Zivolo and contributors - https://github.com/FezVrasta/bootstrap-material-design
|
||||
|
||||
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.
|
||||
|
||||
|
||||
## Acknowledgements:
|
||||
|
||||
- Some original Bootstrap code and documentation http://getbootstrap.com
|
||||
`Copyright (c) 2011-2015 Twitter, Inc`
|
||||
|
||||
- Some original MDL code http://www.getmdl.io/
|
||||
`Copyright 2015 Google Inc. All Rights Reserved.`
|
55
README.md
Normal file
|
@ -0,0 +1,55 @@
|
|||
<h1 align=center>Material Design for Bootstrap</h1>
|
||||
|
||||
Material Design for Bootstrap is the best way to use [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html)
|
||||
in your Bootstrap 4 based application.
|
||||
Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at
|
||||
the end of your document (just before the `</body>` tag), and everything will be converted to Material Design.
|
||||
|
||||
|
||||
## Documentation
|
||||
|
||||
- [Getting Started](http://fezvrasta.github.io/bootstrap-material-design/getting-started/introduction/)
|
||||
- [Building](http://fezvrasta.github.io/bootstrap-material-design/getting-started/building/)
|
||||
- [Material Design components](http://fezvrasta.github.io/bootstrap-material-design/material-design/list-groups/)
|
||||
- [Bootstrap default rendering reference documentation](http://fezvrasta.github.io/bootstrap-material-design/components/buttons/)
|
||||
- [Migration](http://fezvrasta.github.io/bootstrap-material-design/migration/)
|
||||
|
||||
|
||||
## Support
|
||||
|
||||
The things to do are a lot and the time is little, if you are a passionate developer
|
||||
with experience with Bootstrap and Material Design for Bootstrap and you have some spare
|
||||
time, please consider becoming a contributor of this project!
|
||||
If you are interested contact @FezVrasta or just adopt one of our [issues](https://github.com/FezVrasta/bootstrap-material-design/issues).
|
||||
|
||||
If you like this project you may support it by [donating](http://fezvrasta.github.io/bootstrap-material-design), starring this repository or reporting issues.
|
||||
All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/eJMMVB) test case where possible.
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
### Development
|
||||
If you want to get involved, please do so by submitting pull requests.
|
||||
Before undertaking any major PR effort, please check the [existing issues](https://github.com/FezVrasta/bootstrap-material-design/issues).
|
||||
If there isn't one, please file a new issue so we can discuss and assign the work so effort is not duplicated.
|
||||
Thank you!
|
||||
|
||||
### Standard guidelines
|
||||
Please read through our [contributing guidelines](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. All HTML and CSS should conform to the [Code Guide](http://codeguide.co/), maintained by [Mark Otto](https://github.com/mdo), one of Bootstrap's founders.
|
||||
|
||||
Editor preferences are available in the [editor config](https://github.com/FezVrasta/bootstrap-material-design/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
|
||||
|
||||
|
||||
## Versioning
|
||||
|
||||
For transparency into our release cycle and in striving to maintain backward compatibility, this project 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/fezvrasta/bootstrap-material-design/releases) for changelogs
|
||||
of each release version.
|
||||
|
||||
|
||||
## License
|
||||
[MIT License](LICENSE.md)
|
10
about/index.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/about/history/">
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/about/history/">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.0/about/history/">Click here if you are not redirected.</a>
|
||||
<script>location="https://getbootstrap.com/docs/4.0/about/history/"</script>
|
||||
</html>
|
6
assets/brand/bootstrap-outline.svg
Executable file
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 180 612 612">
|
||||
<g fill="#FFF" 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 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 786H102c-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 186h408m0-6H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102z"/>
|
||||
<path 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-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313zm62.5 149.5h102c15 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-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
6
assets/brand/bootstrap-punchout.svg
Executable file
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 180 612 612">
|
||||
<g fill="#FFF" 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 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 10.5-9.8 15.8-23.8 15.8-41.8-.1-17.6-5.3-31.2-15.8-40.6zm-15.3-72c10-8.5 15-20.8 15-36.8 0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102c15 0 27.5-4.3 37.5-12.7z"/>
|
||||
<path d="M510 180H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102zm-55.8 429.8c-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.3z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/brand/bootstrap-social-logo.png
Executable file
After Width: | Height: | Size: 42 KiB |
BIN
assets/brand/bootstrap-social.png
Executable file
After Width: | Height: | Size: 262 KiB |
6
assets/brand/bootstrap-solid.svg
Executable file
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
|
||||
<g 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 fill="#3F51B5" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
|
||||
<path fill="#FFF" 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-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 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-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
1347
assets/css/docs.css
Normal file
7
assets/css/docs.min.css
vendored
Normal file
61
assets/img/MD4B.svg
Normal file
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="475px" height="421px" viewBox="0 0 475 421" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 46.1 (44463) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Untitled</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<polygon id="path-1" points="171.285341 147.434439 436.724395 240.057155 303.714659 358.923161 38.2756053 266.300446"></polygon>
|
||||
<filter x="-14.8%" y="-16.5%" width="129.6%" height="155.8%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="0" dy="14" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="14" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.26 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<polygon id="path-3" points="171.009735 83.2812324 436.448789 173.674869 303.439054 289.680218 38 199.286582"></polygon>
|
||||
<filter x="-10.3%" y="-12.1%" width="120.6%" height="139.7%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.106091486 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
|
||||
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0918817935 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<polygon id="path-5" points="171.009735 6.84374714 436.448789 98.303243 303.439054 215.676448 38 124.216952"></polygon>
|
||||
<filter x="-4.1%" y="-5.0%" width="108.3%" height="115.8%" filterUnits="objectBoundingBox" id="filter-6">
|
||||
<feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0767946105 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
|
||||
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.105383832 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Rectangle">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#1A237E" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
<g id="Rectangle">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use fill="#283593" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<g id="Rectangle">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
|
||||
<use fill="#3F51B5" fill-rule="evenodd" xlink:href="#path-5"></use>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 4.6 KiB |
BIN
assets/img/bootstrap-stack.png
Executable file
After Width: | Height: | Size: 51 KiB |
BIN
assets/img/bootstrap-themes.png
Executable file
After Width: | Height: | Size: 79 KiB |
BIN
assets/img/mk-pro-banner.jpg
Normal file
After Width: | Height: | Size: 286 KiB |
BIN
assets/img/mk-pro-banner.png
Normal file
After Width: | Height: | Size: 913 KiB |
19
assets/js/docs.min.js
vendored
Executable file
52
assets/js/ie-emulation-modes-warning.js
Executable file
|
@ -0,0 +1,52 @@
|
|||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
/*!
|
||||
* Copyright 2014-2015 The Bootstrap Authors
|
||||
* 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; @*/')() // eslint-disable-line no-new-func
|
||||
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!')
|
||||
}
|
||||
}())
|
24
assets/js/ie10-viewport-bug-workaround.js
Executable file
|
@ -0,0 +1,24 @@
|
|||
/*!
|
||||
* IE10 viewport hack for Surface/desktop Windows 8 bug
|
||||
* Copyright 2014-2017 The Bootstrap Authors
|
||||
* Copyright 2014-2017 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
// See the Getting Started docs for more information:
|
||||
// https://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)
|
||||
}
|
||||
|
||||
}())
|
121
assets/js/src/application.js
Executable file
|
@ -0,0 +1,121 @@
|
|||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 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() {
|
||||
$('body').bootstrapMaterialDesign();
|
||||
|
||||
// Indeterminate checkbox example
|
||||
$('.bd-example-indeterminate [type="checkbox"]').prop(
|
||||
'indeterminate',
|
||||
true
|
||||
);
|
||||
|
||||
// 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-content [href="#"]').click(function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// Modal relatedTarget demo
|
||||
$('#exampleModal').on('show.bs.modal', function(event) {
|
||||
var $button = $(event.relatedTarget); // Button that triggered the modal
|
||||
var recipient = $button.data('whatever'); // Extract info from data-* attributes
|
||||
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
|
||||
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
|
||||
var $modal = $(this);
|
||||
$modal.find('.modal-title').text('New message to ' + recipient);
|
||||
$modal.find('.modal-body input').val(recipient);
|
||||
});
|
||||
|
||||
// Activate animated progress bar
|
||||
$('.bd-toggle-animated-progress').on('click', function() {
|
||||
$(this)
|
||||
.siblings('.progress')
|
||||
.find('.progress-bar-striped')
|
||||
.toggleClass('progress-bar-animated');
|
||||
});
|
||||
|
||||
// Insert copy to clipboard button before .highlight
|
||||
$('.highlight').each(function() {
|
||||
var btnHtml =
|
||||
'<div class="bd-clipboard"><button class="btn-clipboard" title="Copy to clipboard">Copy</button></div>';
|
||||
$(this).before(btnHtml);
|
||||
$('.btn-clipboard').tooltip().on('mouseleave', function() {
|
||||
// explicitly hide tooltip, since after clicking it remains
|
||||
// focused (as it's a button), so tooltip would otherwise
|
||||
// remain visible until focus is moved away
|
||||
$(this).tooltip('hide');
|
||||
});
|
||||
});
|
||||
|
||||
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 modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-';
|
||||
var fallbackMsg = 'Press ' + modifierKey + 'C to copy';
|
||||
|
||||
$(e.trigger)
|
||||
.attr('title', fallbackMsg)
|
||||
.tooltip('_fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', 'Copy to clipboard')
|
||||
.tooltip('_fixTitle');
|
||||
});
|
||||
|
||||
anchors.options = {
|
||||
icon: '#',
|
||||
};
|
||||
anchors.add(
|
||||
'.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'
|
||||
);
|
||||
$(
|
||||
'.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'
|
||||
).wrapInner('<div></div>');
|
||||
});
|
||||
})(jQuery);
|
6
assets/js/vendor/anchor.min.js
vendored
Executable file
7
assets/js/vendor/clipboard.min.js
vendored
Executable file
13
assets/js/vendor/holder.min.js
vendored
Executable file
4
assets/js/vendor/jquery-slim.min.js
vendored
Executable file
4
assets/js/vendor/popper.min.js
vendored
Executable file
Before Width: | Height: | Size: 69 KiB |
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 234 KiB |
Before Width: | Height: | Size: 77 KiB |
3426
dist/css/bootstrap-material-design.css
vendored
1
dist/css/bootstrap-material-design.css.map
vendored
2
dist/css/bootstrap-material-design.min.css
vendored
47
dist/css/ripples.css
vendored
|
@ -1,47 +0,0 @@
|
|||
.withripple {
|
||||
position: relative;
|
||||
}
|
||||
.ripple-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ripple {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: -10px;
|
||||
margin-top: -10px;
|
||||
border-radius: 100%;
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transform-origin: 50%;
|
||||
-ms-transform-origin: 50%;
|
||||
-o-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ripple.ripple-on {
|
||||
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||
-o-transition: opacity 0.15s ease-in 0s, -o-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.ripple.ripple-out {
|
||||
-webkit-transition: opacity 0.1s linear 0s !important;
|
||||
-o-transition: opacity 0.1s linear 0s !important;
|
||||
transition: opacity 0.1s linear 0s !important;
|
||||
opacity: 0;
|
||||
}
|
||||
/*# sourceMappingURL=ripples.css.map */
|
1
dist/css/ripples.css.map
vendored
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,mBAAA;CCCH;ADCD;EACI,mBAAA;EACA,OAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;EACA,uBAAA;EACA,qBAAA;CCCH;ADCD;EACI,mBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,oBAAA;EACA,uBAAA;EACA,sCAAA;EACA,4BAAA;MAAA,wBAAA;OAAA,uBAAA;UAAA,oBAAA;EACA,8BAAA;MAAA,0BAAA;OAAA,yBAAA;UAAA,sBAAA;EACA,WAAA;EACA,qBAAA;CCCH;ADCD;EACI,uGAAA;OAAA,6FAAA;UAAA,uFAAA;EACA,aAAA;CCCH;ADCD;EACI,sDAAA;OAAA,iDAAA;UAAA,8CAAA;EACA,WAAA;CCCH","file":"ripples.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-container {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: #000; // fallback color\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n",".withripple {\n position: relative;\n}\n.ripple-container {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: #000;\n background-color: rgba(0, 0, 0, 0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]}
|
2
dist/css/ripples.min.css
vendored
|
@ -1,2 +0,0 @@
|
|||
.withripple{position:relative}.ripple-container{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:#000;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;-o-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(.4,0,.2,1) .1s;-o-transition:opacity .15s ease-in 0s,-o-transform .5s cubic-bezier(.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(.4,0,.2,1) .1s;opacity:.1}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;-o-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}
|
||||
/*# sourceMappingURL=ripples.min.css.map */
|
1
dist/css/ripples.min.css.map
vendored
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["less/ripples.less"],"names":[],"mappings":"AAAA,YACI,SAAA,SAEJ,kBACI,SAAA,SACA,IAAA,EACA,KAAA,EACA,QAAA,EACA,MAAA,KACA,OAAA,KACA,SAAA,OACA,cAAA,QACA,eAAA,KAEJ,QACI,SAAA,SACA,MAAA,KACA,OAAA,KACA,YAAA,MACA,WAAA,MACA,cAAA,KACA,iBAAA,KACA,iBAAA,gBACA,kBAAA,SAAA,cAAA,SAAA,aAAA,SAAA,UAAA,SACA,yBAAA,IAAA,qBAAA,IAAA,oBAAA,IAAA,iBAAA,IACA,QAAA,EACA,eAAA,KAEJ,kBACI,mBAAA,QAAA,KAAA,QAAA,GAAA,kBAAA,IAAA,wBAAA,IAAA,cAAA,QAAA,KAAA,QAAA,GAAA,aAAA,IAAA,wBAAA,IAAA,WAAA,QAAA,KAAA,QAAA,GAAA,UAAA,IAAA,wBAAA,IACA,QAAA,GAEJ,mBACI,mBAAA,QAAA,IAAA,OAAA,aAAA,cAAA,QAAA,IAAA,OAAA,aAAA,WAAA,QAAA,IAAA,OAAA,aACA,QAAA"}
|
352
dist/js/material.js
vendored
|
@ -1,352 +0,0 @@
|
|||
/* globals jQuery */
|
||||
|
||||
(function ($) {
|
||||
// Selector to select only not already processed elements
|
||||
$.expr[":"].notmdproc = function (obj) {
|
||||
if ($(obj).data("mdproc")) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
function _isChar(evt) {
|
||||
if (typeof evt.which == "undefined") {
|
||||
return true;
|
||||
} else if (typeof evt.which == "number" && evt.which > 0) {
|
||||
return (
|
||||
!evt.ctrlKey
|
||||
&& !evt.metaKey
|
||||
&& !evt.altKey
|
||||
&& evt.which != 8 // backspace
|
||||
&& evt.which != 9 // tab
|
||||
&& evt.which != 13 // enter
|
||||
&& evt.which != 16 // shift
|
||||
&& evt.which != 17 // ctrl
|
||||
&& evt.which != 20 // caps lock
|
||||
&& evt.which != 27 // escape
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function _addFormGroupFocus(element) {
|
||||
var $element = $(element);
|
||||
if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox??
|
||||
$element.closest(".form-group").addClass("is-focused");
|
||||
}
|
||||
}
|
||||
|
||||
function _toggleDisabledState($element, state) {
|
||||
var $target;
|
||||
if ($element.hasClass('checkbox-inline') || $element.hasClass('radio-inline')) {
|
||||
$target = $element;
|
||||
} else {
|
||||
$target = $element.closest('.checkbox').length ? $element.closest('.checkbox') : $element.closest('.radio');
|
||||
}
|
||||
return $target.toggleClass('disabled', state);
|
||||
}
|
||||
|
||||
function _toggleTypeFocus($input) {
|
||||
var disabledToggleType = false;
|
||||
if ($input.is($.material.options.checkboxElements) || $input.is($.material.options.radioElements)) {
|
||||
disabledToggleType = true;
|
||||
}
|
||||
$input.closest('label').hover(function () {
|
||||
var $i = $(this).find('input');
|
||||
var isDisabled = $i.prop('disabled'); // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
|
||||
if (disabledToggleType) {
|
||||
_toggleDisabledState($(this), isDisabled);
|
||||
}
|
||||
if (!isDisabled) {
|
||||
_addFormGroupFocus($i); // need to find the input so we can check disablement
|
||||
}
|
||||
},
|
||||
function () {
|
||||
_removeFormGroupFocus($(this).find('input'));
|
||||
});
|
||||
}
|
||||
|
||||
function _removeFormGroupFocus(element) {
|
||||
$(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
|
||||
}
|
||||
|
||||
$.material = {
|
||||
"options": {
|
||||
// These options set what will be started by $.material.init()
|
||||
"validate": true,
|
||||
"input": true,
|
||||
"ripples": true,
|
||||
"checkbox": true,
|
||||
"togglebutton": true,
|
||||
"radio": true,
|
||||
"arrive": true,
|
||||
"autofill": false,
|
||||
|
||||
"withRipples": [
|
||||
".btn:not(.btn-link)",
|
||||
".card-image",
|
||||
".navbar a:not(.withoutripple)",
|
||||
".dropdown-menu a",
|
||||
".nav-tabs a:not(.withoutripple)",
|
||||
".withripple",
|
||||
".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"
|
||||
].join(","),
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox], label.checkbox-inline > input[type=checkbox]",
|
||||
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio], label.radio-inline > input[type=radio]"
|
||||
},
|
||||
"checkbox": function (selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
var $input = $((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class='checkbox-material'><span class='check'></span></span>");
|
||||
|
||||
_toggleTypeFocus($input);
|
||||
},
|
||||
"togglebutton": function (selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
var $input = $((selector) ? selector : this.options.togglebuttonElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class='toggle'></span>");
|
||||
|
||||
_toggleTypeFocus($input);
|
||||
},
|
||||
"radio": function (selector) {
|
||||
// Add fake-radio to material radios
|
||||
var $input = $((selector) ? selector : this.options.radioElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class='circle'></span><span class='check'></span>");
|
||||
|
||||
_toggleTypeFocus($input);
|
||||
},
|
||||
"input": function (selector) {
|
||||
$((selector) ? selector : this.options.inputElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each(function () {
|
||||
var $input = $(this);
|
||||
|
||||
// Requires form-group standard markup (will add it if necessary)
|
||||
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
|
||||
if ($formGroup.length === 0 && $input.attr('type') !== "hidden" && !$input.attr('hidden')) {
|
||||
$input.wrap("<div class='form-group'></div>");
|
||||
$formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
|
||||
}
|
||||
|
||||
// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
|
||||
if ($input.attr("data-hint")) {
|
||||
$input.after("<p class='help-block'>" + $input.attr("data-hint") + "</p>");
|
||||
$input.removeAttr("data-hint");
|
||||
}
|
||||
|
||||
// Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
|
||||
var legacySizes = {
|
||||
"input-lg": "form-group-lg",
|
||||
"input-sm": "form-group-sm"
|
||||
};
|
||||
$.each(legacySizes, function (legacySize, standardSize) {
|
||||
if ($input.hasClass(legacySize)) {
|
||||
$input.removeClass(legacySize);
|
||||
$formGroup.addClass(standardSize);
|
||||
}
|
||||
});
|
||||
|
||||
// Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
|
||||
if ($input.hasClass("floating-label")) {
|
||||
var placeholder = $input.attr("placeholder");
|
||||
$input.attr("placeholder", null).removeClass("floating-label");
|
||||
var id = $input.attr("id");
|
||||
var forAttribute = "";
|
||||
if (id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$formGroup.addClass("label-floating");
|
||||
$input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
|
||||
}
|
||||
|
||||
// Set as empty if is empty (damn I must improve this...)
|
||||
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
|
||||
// Support for file input
|
||||
if ($formGroup.find("input[type=file]").length > 0) {
|
||||
$formGroup.addClass("is-fileinput");
|
||||
}
|
||||
});
|
||||
},
|
||||
"attachInputEventHandlers": function () {
|
||||
var validate = this.options.validate;
|
||||
|
||||
$(document)
|
||||
.on("keydown paste", ".form-control", function (e) {
|
||||
if (_isChar(e)) {
|
||||
$(this).closest(".form-group").removeClass("is-empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function () {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
|
||||
|
||||
if ($input.val() === "") {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
else {
|
||||
$formGroup.removeClass("is-empty");
|
||||
}
|
||||
|
||||
// Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
|
||||
// Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
|
||||
// the form-group on change.
|
||||
//
|
||||
// NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
|
||||
// BUT, I've left it here for backwards compatibility.
|
||||
if (validate) {
|
||||
if (isValid) {
|
||||
$formGroup.removeClass("has-error");
|
||||
}
|
||||
else {
|
||||
$formGroup.addClass("has-error");
|
||||
}
|
||||
}
|
||||
})
|
||||
.on("focus", ".form-control, .form-group.is-fileinput", function () {
|
||||
_addFormGroupFocus(this);
|
||||
})
|
||||
.on("blur", ".form-control, .form-group.is-fileinput", function () {
|
||||
_removeFormGroupFocus(this);
|
||||
})
|
||||
// make sure empty is added back when there is a programmatic value change.
|
||||
// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
|
||||
.on("change", ".form-group input", function () {
|
||||
var $input = $(this);
|
||||
if ($input.attr("type") == "file") {
|
||||
return;
|
||||
}
|
||||
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var value = $input.val();
|
||||
if (value) {
|
||||
$formGroup.removeClass("is-empty");
|
||||
} else {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
})
|
||||
// set the fileinput readonly field with the name of the file
|
||||
.on("change", ".form-group.is-fileinput input[type='file']", function () {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var value = "";
|
||||
$.each(this.files, function (i, file) {
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
if (value) {
|
||||
$formGroup.removeClass("is-empty");
|
||||
} else {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
$formGroup.find("input.form-control[readonly]").val(value);
|
||||
});
|
||||
},
|
||||
"ripples": function (selector) {
|
||||
$((selector) ? selector : this.options.withRipples).ripples();
|
||||
},
|
||||
"autofill": function () {
|
||||
// This part of code will detect autofill when the page is loading (username and password inputs for example)
|
||||
var loading = setInterval(function () {
|
||||
$("input[type!=checkbox]").each(function () {
|
||||
var $this = $(this);
|
||||
if ($this.val() && $this.val() !== $this.attr("value")) {
|
||||
$this.trigger("change");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
|
||||
setTimeout(function () {
|
||||
clearInterval(loading);
|
||||
}, 10000);
|
||||
},
|
||||
"attachAutofillEventHandlers": function () {
|
||||
// Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
|
||||
var focused;
|
||||
$(document)
|
||||
.on("focus", "input", function () {
|
||||
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
||||
focused = setInterval(function () {
|
||||
$inputs.each(function () {
|
||||
var $this = $(this);
|
||||
if ($this.val() !== $this.attr("value")) {
|
||||
$this.trigger("change");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
})
|
||||
.on("blur", ".form-group input", function () {
|
||||
clearInterval(focused);
|
||||
});
|
||||
},
|
||||
"init": function (options) {
|
||||
this.options = $.extend({}, this.options, options);
|
||||
var $document = $(document);
|
||||
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
this.ripples();
|
||||
}
|
||||
if (this.options.input) {
|
||||
this.input();
|
||||
this.attachInputEventHandlers();
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
this.checkbox();
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
this.togglebutton();
|
||||
}
|
||||
if (this.options.radio) {
|
||||
this.radio();
|
||||
}
|
||||
if (this.options.autofill) {
|
||||
this.autofill();
|
||||
this.attachAutofillEventHandlers();
|
||||
}
|
||||
|
||||
if (document.arrive && this.options.arrive) {
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
$document.arrive(this.options.withRipples, function () {
|
||||
$.material.ripples($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.input) {
|
||||
$document.arrive(this.options.inputElements, function () {
|
||||
$.material.input($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
$document.arrive(this.options.checkboxElements, function () {
|
||||
$.material.checkbox($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.radio) {
|
||||
$document.arrive(this.options.radioElements, function () {
|
||||
$.material.radio($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
$document.arrive(this.options.togglebuttonElements, function () {
|
||||
$.material.togglebutton($(this));
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
2
dist/js/material.min.js
vendored
1
dist/js/material.min.js.map
vendored
324
dist/js/ripples.js
vendored
|
@ -1,324 +0,0 @@
|
|||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||
/* globals jQuery, navigator */
|
||||
|
||||
(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Define the name of the plugin
|
||||
*/
|
||||
var ripples = "ripples";
|
||||
|
||||
|
||||
/**
|
||||
* Get an instance of the plugin
|
||||
*/
|
||||
var self = null;
|
||||
|
||||
|
||||
/**
|
||||
* Define the defaults of the plugin
|
||||
*/
|
||||
var defaults = {};
|
||||
|
||||
|
||||
/**
|
||||
* Create the main plugin function
|
||||
*/
|
||||
function Ripples(element, options) {
|
||||
self = this;
|
||||
|
||||
this.element = $(element);
|
||||
|
||||
this.options = $.extend({}, defaults, options);
|
||||
|
||||
this._defaults = defaults;
|
||||
this._name = ripples;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Initialize the plugin
|
||||
*/
|
||||
Ripples.prototype.init = function() {
|
||||
var $element = this.element;
|
||||
|
||||
$element.on("mousedown touchstart", function(event) {
|
||||
/**
|
||||
* Verify if the user is just touching on a device and return if so
|
||||
*/
|
||||
if(self.isTouch() && event.type === "mousedown") {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Verify if the current element already has a ripple wrapper element and
|
||||
* creates if it doesn't
|
||||
*/
|
||||
if(!($element.find(".ripple-container").length)) {
|
||||
$element.append("<div class=\"ripple-container\"></div>");
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Find the ripple wrapper
|
||||
*/
|
||||
var $wrapper = $element.children(".ripple-container");
|
||||
|
||||
|
||||
/**
|
||||
* Get relY and relX positions
|
||||
*/
|
||||
var relY = self.getRelY($wrapper, event);
|
||||
var relX = self.getRelX($wrapper, event);
|
||||
|
||||
|
||||
/**
|
||||
* If relY and/or relX are false, return the event
|
||||
*/
|
||||
if(!relY && !relX) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the ripple color
|
||||
*/
|
||||
var rippleColor = self.getRipplesColor($element);
|
||||
|
||||
|
||||
/**
|
||||
* Create the ripple element
|
||||
*/
|
||||
var $ripple = $("<div></div>");
|
||||
|
||||
$ripple
|
||||
.addClass("ripple")
|
||||
.css({
|
||||
"left": relX,
|
||||
"top": relY,
|
||||
"background-color": rippleColor
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Append the ripple to the wrapper
|
||||
*/
|
||||
$wrapper.append($ripple);
|
||||
|
||||
|
||||
/**
|
||||
* Make sure the ripple has the styles applied (ugly hack but it works)
|
||||
*/
|
||||
(function() { return window.getComputedStyle($ripple[0]).opacity; })();
|
||||
|
||||
|
||||
/**
|
||||
* Turn on the ripple animation
|
||||
*/
|
||||
self.rippleOn($element, $ripple);
|
||||
|
||||
|
||||
/**
|
||||
* Call the rippleEnd function when the transition "on" ends
|
||||
*/
|
||||
setTimeout(function() {
|
||||
self.rippleEnd($ripple);
|
||||
}, 500);
|
||||
|
||||
|
||||
/**
|
||||
* Detect when the user leaves the element
|
||||
*/
|
||||
$element.on("mouseup mouseleave touchend", function() {
|
||||
$ripple.data("mousedown", "off");
|
||||
|
||||
if($ripple.data("animating") === "off") {
|
||||
self.rippleOut($ripple);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the new size based on the element height/width and the ripple width
|
||||
*/
|
||||
Ripples.prototype.getNewSize = function($element, $ripple) {
|
||||
|
||||
return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the relX
|
||||
*/
|
||||
Ripples.prototype.getRelX = function($wrapper, event) {
|
||||
var wrapperOffset = $wrapper.offset();
|
||||
|
||||
if(!self.isTouch()) {
|
||||
/**
|
||||
* Get the mouse position relative to the ripple wrapper
|
||||
*/
|
||||
return event.pageX - wrapperOffset.left;
|
||||
} else {
|
||||
/**
|
||||
* Make sure the user is using only one finger and then get the touch
|
||||
* position relative to the ripple wrapper
|
||||
*/
|
||||
event = event.originalEvent;
|
||||
|
||||
if(event.touches.length === 1) {
|
||||
return event.touches[0].pageX - wrapperOffset.left;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the relY
|
||||
*/
|
||||
Ripples.prototype.getRelY = function($wrapper, event) {
|
||||
var wrapperOffset = $wrapper.offset();
|
||||
|
||||
if(!self.isTouch()) {
|
||||
/**
|
||||
* Get the mouse position relative to the ripple wrapper
|
||||
*/
|
||||
return event.pageY - wrapperOffset.top;
|
||||
} else {
|
||||
/**
|
||||
* Make sure the user is using only one finger and then get the touch
|
||||
* position relative to the ripple wrapper
|
||||
*/
|
||||
event = event.originalEvent;
|
||||
|
||||
if(event.touches.length === 1) {
|
||||
return event.touches[0].pageY - wrapperOffset.top;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the ripple color
|
||||
*/
|
||||
Ripples.prototype.getRipplesColor = function($element) {
|
||||
|
||||
var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
|
||||
|
||||
return color;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Verify if the client browser has transistion support
|
||||
*/
|
||||
Ripples.prototype.hasTransitionSupport = function() {
|
||||
var thisBody = document.body || document.documentElement;
|
||||
var thisStyle = thisBody.style;
|
||||
|
||||
var support = (
|
||||
thisStyle.transition !== undefined ||
|
||||
thisStyle.WebkitTransition !== undefined ||
|
||||
thisStyle.MozTransition !== undefined ||
|
||||
thisStyle.MsTransition !== undefined ||
|
||||
thisStyle.OTransition !== undefined
|
||||
);
|
||||
|
||||
return support;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Verify if the client is using a mobile device
|
||||
*/
|
||||
Ripples.prototype.isTouch = function() {
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* End the animation of the ripple
|
||||
*/
|
||||
Ripples.prototype.rippleEnd = function($ripple) {
|
||||
$ripple.data("animating", "off");
|
||||
|
||||
if($ripple.data("mousedown") === "off") {
|
||||
self.rippleOut($ripple);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Turn off the ripple effect
|
||||
*/
|
||||
Ripples.prototype.rippleOut = function($ripple) {
|
||||
$ripple.off();
|
||||
|
||||
if(self.hasTransitionSupport()) {
|
||||
$ripple.addClass("ripple-out");
|
||||
} else {
|
||||
$ripple.animate({"opacity": 0}, 100, function() {
|
||||
$ripple.trigger("transitionend");
|
||||
});
|
||||
}
|
||||
|
||||
$ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
|
||||
$ripple.remove();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Turn on the ripple effect
|
||||
*/
|
||||
Ripples.prototype.rippleOn = function($element, $ripple) {
|
||||
var size = self.getNewSize($element, $ripple);
|
||||
|
||||
if(self.hasTransitionSupport()) {
|
||||
$ripple
|
||||
.css({
|
||||
"-ms-transform": "scale(" + size + ")",
|
||||
"-moz-transform": "scale(" + size + ")",
|
||||
"-webkit-transform": "scale(" + size + ")",
|
||||
"transform": "scale(" + size + ")"
|
||||
})
|
||||
.addClass("ripple-on")
|
||||
.data("animating", "on")
|
||||
.data("mousedown", "on");
|
||||
} else {
|
||||
$ripple.animate({
|
||||
"width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
|
||||
"height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
|
||||
"margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
|
||||
"margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
|
||||
"opacity": 0.2
|
||||
}, 500, function() {
|
||||
$ripple.trigger("transitionend");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Create the jquery plugin function
|
||||
*/
|
||||
$.fn.ripples = function(options) {
|
||||
return this.each(function() {
|
||||
if(!$.data(this, "plugin_" + ripples)) {
|
||||
$.data(this, "plugin_" + ripples, new Ripples(this, options));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
2
dist/js/ripples.min.js
vendored
|
@ -1,2 +0,0 @@
|
|||
!function(a,b,c,d){"use strict";function e(b,c){g=this,this.element=a(b),this.options=a.extend({},h,c),this._defaults=h,this._name=f,this.init()}var f="ripples",g=null,h={};e.prototype.init=function(){var c=this.element;c.on("mousedown touchstart",function(d){if(!g.isTouch()||"mousedown"!==d.type){c.find(".ripple-container").length||c.append('<div class="ripple-container"></div>');var e=c.children(".ripple-container"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(c),j=a("<div></div>");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(c,j),setTimeout(function(){g.rippleEnd(j)},500),c.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"===j.data("animating")&&g.rippleOut(j)})}}})},e.prototype.getNewSize=function(a,b){return Math.max(a.outerWidth(),a.outerHeight())/b.outerWidth()*2.5},e.prototype.getRelX=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageX-c.left:!1):b.pageX-c.left},e.prototype.getRelY=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageY-c.top:!1):b.pageY-c.top},e.prototype.getRipplesColor=function(a){var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return c},e.prototype.hasTransitionSupport=function(){var a=c.body||c.documentElement,b=a.style,e=b.transition!==d||b.WebkitTransition!==d||b.MozTransition!==d||b.MsTransition!==d||b.OTransition!==d;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(a){a.data("animating","off"),"off"===a.data("mousedown")&&g.rippleOut(a)},e.prototype.rippleOut=function(a){a.off(),g.hasTransitionSupport()?a.addClass("ripple-out"):a.animate({opacity:0},100,function(){a.trigger("transitionend")}),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})},e.prototype.rippleOn=function(a,b){var c=g.getNewSize(a,b);g.hasTransitionSupport()?b.css({"-ms-transform":"scale("+c+")","-moz-transform":"scale("+c+")","-webkit-transform":"scale("+c+")",transform:"scale("+c+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):b.animate({width:2*Math.max(a.outerWidth(),a.outerHeight()),height:2*Math.max(a.outerWidth(),a.outerHeight()),"margin-left":-1*Math.max(a.outerWidth(),a.outerHeight()),"margin-top":-1*Math.max(a.outerWidth(),a.outerHeight()),opacity:.2},500,function(){b.trigger("transitionend")})},a.fn.ripples=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document);
|
||||
//# sourceMappingURL=ripples.min.js.map
|
1
dist/js/ripples.min.js.map
vendored
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"CAGA,SAAUA,EAAGC,EAAQC,EAAUC,GAE7B,YAuBA,SAASC,GAAQC,EAASC,GACxBC,EAAOC,KAEPA,KAAKH,QAAUL,EAAEK,GAEjBG,KAAKF,QAAUN,EAAES,UAAWC,EAAUJ,GAEtCE,KAAKG,UAAYD,EACjBF,KAAKI,MAAQC,EAEbL,KAAKM,OA5BP,GAAID,GAAU,UAMVN,EAAO,KAMPG,IAuBJN,GAAQW,UAAUD,KAAO,WACvB,GAAIE,GAAYR,KAAKH,OAErBW,GAASC,GAAG,uBAAwB,SAASC,GAI3C,IAAGX,EAAKY,WAA4B,cAAfD,EAAME,KAA3B,CASKJ,EAASK,KAAK,qBAA2B,QAC5CL,EAASM,OAAO,uCAOlB,IAAIC,GAAWP,EAASQ,SAAS,qBAM7BC,EAAOlB,EAAKmB,QAAQH,EAAUL,GAC9BS,EAAOpB,EAAKqB,QAAQL,EAAUL,EAMlC,IAAIO,GAASE,EAAb,CAQA,GAAIE,GAActB,EAAKuB,gBAAgBd,GAMnCe,EAAU/B,EAAE,cAEhB+B,GACCC,SAAS,UACTC,KACCC,KAAQP,EACRQ,IAAOV,EACPW,mBAAoBP,IAOtBN,EAASD,OAAOS,GAMhB,WAAc,MAAO9B,GAAOoC,iBAAiBN,EAAQ,IAAIO,WAMzD/B,EAAKgC,SAASvB,EAAUe,GAMxBS,WAAW,WACTjC,EAAKkC,UAAUV,IACd,KAMHf,EAASC,GAAG,8BAA+B,WACzCc,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,UAWvB3B,EAAQW,UAAU6B,WAAa,SAAS5B,EAAUe,GAEhD,MAAQc,MAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAAiBjB,EAAQgB,aAAgB,KAO5F3C,EAAQW,UAAUa,QAAU,SAASL,EAAWL,GAC9C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGE,MAAQL,EAAcf,MAGzC,GAZAhB,EAAMoC,MAAQL,EAAcf,MAoBvC9B,EAAQW,UAAUW,QAAU,SAASH,EAAUL,GAC7C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGG,MAAQN,EAAcd,KAGzC,GAZAjB,EAAMqC,MAAQN,EAAcd,KAoBvC/B,EAAQW,UAAUe,gBAAkB,SAASd,GAE3C,GAAIwC,GAAQxC,EAAS0B,KAAK,gBAAkB1B,EAAS0B,KAAK,gBAAkBzC,EAAOoC,iBAAiBrB,EAAS,IAAIwC,KAEjH,OAAOA,IAOTpD,EAAQW,UAAU0C,qBAAuB,WACvC,GAAIC,GAAYxD,EAASyD,MAAQzD,EAAS0D,gBACtCC,EAAYH,EAASI,MAErBC,EACFF,EAAUG,aAAe7D,GACzB0D,EAAUI,mBAAqB9D,GAC/B0D,EAAUK,gBAAkB/D,GAC5B0D,EAAUM,eAAiBhE,GAC3B0D,EAAUO,cAAgBjE,CAG5B,OAAO4D,IAOT3D,EAAQW,UAAUI,QAAU,WAC1B,MAAO,iEAAiEkD,KAAKC,UAAUC,YAOzFnE,EAAQW,UAAU0B,UAAY,SAASV,GACrCA,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,IAQnB3B,EAAQW,UAAU4B,UAAY,SAASZ,GACrCA,EAAQyC,MAELjE,EAAKkD,uBACN1B,EAAQC,SAAS,cAEjBD,EAAQ0C,SAASnC,QAAW,GAAI,IAAK,WACnCP,EAAQ2C,QAAQ,mBAIpB3C,EAAQd,GAAG,mEAAoE,WAC7Ec,EAAQ4C,YAQZvE,EAAQW,UAAUwB,SAAW,SAASvB,EAAUe,GAC9C,GAAI6C,GAAOrE,EAAKqC,WAAW5B,EAAUe,EAElCxB,GAAKkD,uBACN1B,EACCE,KACC4C,gBAAiB,SAAWD,EAAO,IACnCE,iBAAkB,SAAWF,EAAO,IACpCG,oBAAqB,SAAWH,EAAO,IACvCI,UAAa,SAAWJ,EAAO,MAEhC5C,SAAS,aACTU,KAAK,YAAa,MAClBA,KAAK,YAAa,MAEnBX,EAAQ0C,SACNQ,MAAmE,EAA1DpC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAClDkC,OAAoE,EAA1DrC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACnDmC,cAAyE,GAA1DtC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACxDoC,aAAwE,GAA1DvC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACvDV,QAAW,IACV,IAAK,WACNP,EAAQ2C,QAAQ,oBAStB1E,EAAEqF,GAAGxE,QAAU,SAASP,GACtB,MAAOE,MAAK8E,KAAK,WACXtF,EAAE0C,KAAKlC,KAAM,UAAYK,IAC3Bb,EAAE0C,KAAKlC,KAAM,UAAYK,EAAS,GAAIT,GAAQI,KAAMF,QAKzDiF,OAAQtF,OAAQC","file":"ripples.min.js"}
|
1320
docs/4.0/about/brand/index.html
Normal file
1246
docs/4.0/about/history/index.html
Normal file
1276
docs/4.0/about/license/index.html
Normal file
1328
docs/4.0/about/team/index.html
Normal file
1254
docs/4.0/about/translations/index.html
Normal file
1925
docs/4.0/browser-bugs/index.html
Normal file
1497
docs/4.0/components/alerts/index.html
Normal file
1377
docs/4.0/components/badge/index.html
Normal file
1287
docs/4.0/components/breadcrumb/index.html
Normal file
1502
docs/4.0/components/button-group/index.html
Normal file
1507
docs/4.0/components/buttons/index.html
Normal file
2661
docs/4.0/components/card/index.html
Normal file
1633
docs/4.0/components/carousel/index.html
Normal file
1650
docs/4.0/components/collapse/index.html
Normal file
2032
docs/4.0/components/dropdowns/index.html
Normal file
2999
docs/4.0/components/forms/index.html
Normal file
10
docs/4.0/components/index.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/components/buttons/">
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/components/buttons/">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.0/components/buttons/">Click here if you are not redirected.</a>
|
||||
<script>location="https://getbootstrap.com/docs/4.0/components/buttons/"</script>
|
||||
</html>
|
1660
docs/4.0/components/input-group/index.html
Normal file
1281
docs/4.0/components/jumbotron/index.html
Normal file
1740
docs/4.0/components/list-group/index.html
Normal file
1946
docs/4.0/components/modal/index.html
Normal file
2072
docs/4.0/components/navbar/index.html
Normal file
2108
docs/4.0/components/navs/index.html
Normal file
1527
docs/4.0/components/pagination/index.html
Normal file
1652
docs/4.0/components/popovers/index.html
Normal file
1446
docs/4.0/components/progress/index.html
Normal file
1610
docs/4.0/components/scrollspy/index.html
Normal file
1621
docs/4.0/components/tooltips/index.html
Normal file
1302
docs/4.0/content/code/index.html
Normal file
1269
docs/4.0/content/figures/index.html
Normal file
1309
docs/4.0/content/images/index.html
Normal file
10
docs/4.0/content/index.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/content/reboot/">
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/content/reboot/">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.0/content/reboot/">Click here if you are not redirected.</a>
|
||||
<script>location="https://getbootstrap.com/docs/4.0/content/reboot/"</script>
|
||||
</html>
|
1637
docs/4.0/content/reboot/index.html
Normal file
2363
docs/4.0/content/tables/index.html
Normal file
1664
docs/4.0/content/typography/index.html
Normal file
58
docs/4.0/examples/album/album.css
Executable file
|
@ -0,0 +1,58 @@
|
|||
body {
|
||||
min-height: 75rem; /* Can be removed; just added for demo purposes */
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.jumbotron p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.jumbotron-heading {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.jumbotron .container {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.album {
|
||||
min-height: 50rem; /* Can be removed; just added for demo purposes */
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.card {
|
||||
float: left;
|
||||
width: 33.333%;
|
||||
padding: .75rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card > img {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-bottom: .25rem;
|
||||
}
|
132
docs/4.0/examples/album/index.html
Executable file
|
@ -0,0 +1,132 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../../../favicon.ico">
|
||||
|
||||
<title>Album example for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="album.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="collapse bg-dark" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 py-4">
|
||||
<h4 class="text-white">About</h4>
|
||||
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 py-4">
|
||||
<h4 class="text-white">Contact</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
||||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||||
<li><a href="#" class="text-white">Email me</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-dark bg-dark">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="#" class="navbar-brand">Album</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<div class="container">
|
||||
<h1 class="jumbotron-heading">Album example</h1>
|
||||
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary">Main call to action</a>
|
||||
<a href="#" class="btn btn-secondary">Secondary action</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="album text-muted">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="text-muted">
|
||||
<div class="container">
|
||||
<p class="float-right">
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
|
||||
<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../assets/js/vendor/holder.min.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" });
|
||||
});
|
||||
</script>
|
||||
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
</body>
|
||||
</html>
|
166
docs/4.0/examples/blog/blog.css
Executable file
|
@ -0,0 +1,166 @@
|
|||
/*
|
||||
* Globals
|
||||
*/
|
||||
|
||||
@media (min-width: 48em) {
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Georgia, "Times New Roman", Times, serif;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Override Bootstrap's default container.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 60rem;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Masthead for nav
|
||||
*/
|
||||
|
||||
.blog-masthead {
|
||||
margin-bottom: 3rem;
|
||||
background-color: #428bca;
|
||||
-webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
|
||||
box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
/* Nav links */
|
||||
.nav-link {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
font-weight: 500;
|
||||
color: #cdddeb;
|
||||
}
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Active state gets a caret at the bottom */
|
||||
.nav-link.active {
|
||||
color: #fff;
|
||||
}
|
||||
.nav-link.active:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -.3rem;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
border-right: .3rem solid transparent;
|
||||
border-bottom: .3rem solid;
|
||||
border-left: .3rem solid transparent;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Blog name and description
|
||||
*/
|
||||
|
||||
.blog-header {
|
||||
padding-bottom: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: .05rem solid #eee;
|
||||
}
|
||||
.blog-title {
|
||||
margin-bottom: 0;
|
||||
font-size: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
.blog-description {
|
||||
font-size: 1.1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
.blog-title {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Main column and sidebar layout
|
||||
*/
|
||||
|
||||
/* Sidebar modules for boxing content */
|
||||
.sidebar-module {
|
||||
padding: 1rem;
|
||||
/*margin: 0 -1rem 1rem;*/
|
||||
}
|
||||
.sidebar-module-inset {
|
||||
padding: 1rem;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.sidebar-module-inset p:last-child,
|
||||
.sidebar-module-inset ul:last-child,
|
||||
.sidebar-module-inset ol:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Pagination */
|
||||
.blog-pagination {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.blog-pagination > .btn {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Blog posts
|
||||
*/
|
||||
|
||||
.blog-post {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.blog-post-title {
|
||||
margin-bottom: .25rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.blog-post-meta {
|
||||
margin-bottom: 1.25rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
|
||||
.blog-footer {
|
||||
padding: 2.5rem 0;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
border-top: .05rem solid #e5e5e5;
|
||||
}
|
||||
.blog-footer p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
166
docs/4.0/examples/blog/index.html
Executable file
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../../../favicon.ico">
|
||||
|
||||
<title>Blog Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="blog.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="blog-masthead">
|
||||
<div class="container">
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" href="#">Home</a>
|
||||
<a class="nav-link" href="#">New features</a>
|
||||
<a class="nav-link" href="#">Press</a>
|
||||
<a class="nav-link" href="#">New hires</a>
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blog-header">
|
||||
<div class="container">
|
||||
<h1 class="blog-title">The Bootstrap Blog</h1>
|
||||
<p class="lead blog-description">An example blog template built with Bootstrap.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-8 blog-main">
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">Sample blog post</h2>
|
||||
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
|
||||
|
||||
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
|
||||
<hr>
|
||||
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<blockquote>
|
||||
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
</blockquote>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<h2>Heading</h2>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<ul>
|
||||
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
||||
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
||||
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
||||
</ul>
|
||||
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
<ol>
|
||||
<li>Vestibulum id ligula porta felis euismod semper.</li>
|
||||
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
|
||||
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
|
||||
</ol>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">Another blog post</h2>
|
||||
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
|
||||
|
||||
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<blockquote>
|
||||
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
</blockquote>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">New feature</h2>
|
||||
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
|
||||
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<ul>
|
||||
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
||||
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
||||
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
||||
</ul>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
|
||||
<nav class="blog-pagination">
|
||||
<a class="btn btn-outline-primary" href="#">Older</a>
|
||||
<a class="btn btn-outline-secondary disabled" href="#">Newer</a>
|
||||
</nav>
|
||||
|
||||
</div><!-- /.blog-main -->
|
||||
|
||||
<div class="col-sm-3 offset-sm-1 blog-sidebar">
|
||||
<div class="sidebar-module sidebar-module-inset">
|
||||
<h4>About</h4>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
</div>
|
||||
<div class="sidebar-module">
|
||||
<h4>Archives</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">March 2014</a></li>
|
||||
<li><a href="#">February 2014</a></li>
|
||||
<li><a href="#">January 2014</a></li>
|
||||
<li><a href="#">December 2013</a></li>
|
||||
<li><a href="#">November 2013</a></li>
|
||||
<li><a href="#">October 2013</a></li>
|
||||
<li><a href="#">September 2013</a></li>
|
||||
<li><a href="#">August 2013</a></li>
|
||||
<li><a href="#">July 2013</a></li>
|
||||
<li><a href="#">June 2013</a></li>
|
||||
<li><a href="#">May 2013</a></li>
|
||||
<li><a href="#">April 2013</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="sidebar-module">
|
||||
<h4>Elsewhere</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div><!-- /.blog-sidebar -->
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
|
||||
<footer class="blog-footer">
|
||||
<p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
<p>
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
</body>
|
||||
</html>
|
91
docs/4.0/examples/carousel/carousel.css
Executable file
|
@ -0,0 +1,91 @@
|
|||
/* GLOBAL STYLES
|
||||
-------------------------------------------------- */
|
||||
/* Padding below the footer and lighter body text */
|
||||
|
||||
body {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
|
||||
/* CUSTOMIZE THE CAROUSEL
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Carousel base class */
|
||||
.carousel {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
/* Since positioning the image, we need to help out the caption */
|
||||
.carousel-caption {
|
||||
z-index: 10;
|
||||
bottom: 3rem;
|
||||
}
|
||||
|
||||
/* Declare heights because of positioning of img element */
|
||||
.carousel-item {
|
||||
height: 32rem;
|
||||
background-color: #777;
|
||||
}
|
||||
.carousel-item > img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
height: 32rem;
|
||||
}
|
||||
|
||||
|
||||
/* MARKETING CONTENT
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Center align the text within the three columns below the carousel */
|
||||
.marketing .col-lg-4 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.marketing h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.marketing .col-lg-4 p {
|
||||
margin-right: .75rem;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
|
||||
/* Featurettes
|
||||
------------------------- */
|
||||
|
||||
.featurette-divider {
|
||||
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
|
||||
}
|
||||
|
||||
/* Thin out the marketing headings */
|
||||
.featurette-heading {
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -.05rem;
|
||||
}
|
||||
|
||||
|
||||
/* RESPONSIVE CSS
|
||||
-------------------------------------------------- */
|
||||
|
||||
@media (min-width: 40em) {
|
||||
/* Bump up size of carousel content */
|
||||
.carousel-caption p {
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.featurette-heading {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
.featurette-heading {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
}
|
186
docs/4.0/examples/carousel/index.html
Executable file
|
@ -0,0 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../../../favicon.ico">
|
||||
|
||||
<title>Carousel Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="carousel.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Carousel</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption d-none d-md-block text-left">
|
||||
<h1>Example headline.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h1>Another example headline.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption d-none d-md-block text-right">
|
||||
<h1>One more for good measure.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Marketing messaging and featurettes
|
||||
================================================== -->
|
||||
<!-- Wrap the rest of the page in another container to center all the content. -->
|
||||
|
||||
<div class="container marketing">
|
||||
|
||||
<!-- Three columns of text below the carousel -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
||||
<h2>Heading</h2>
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
||||
<!-- START THE FEATURETTES -->
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
|
||||
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7 order-md-2">
|
||||
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
|
||||
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
|
||||
</div>
|
||||
<div class="col-md-5 order-md-1">
|
||||
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
|
||||
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<!-- /END THE FEATURETTES -->
|
||||
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p class="float-right"><a href="#">Back to top</a></p>
|
||||
<p>© 2017 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
|
||||
</div><!-- /.container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
|
||||
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
|
||||
<script src="../../../../assets/js/vendor/holder.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
</body>
|
||||
</html>
|
160
docs/4.0/examples/cover/cover.css
Executable file
|
@ -0,0 +1,160 @@
|
|||
/*
|
||||
* Globals
|
||||
*/
|
||||
|
||||
/* Links */
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Custom default button */
|
||||
.btn-secondary,
|
||||
.btn-secondary:hover,
|
||||
.btn-secondary:focus {
|
||||
color: #333;
|
||||
text-shadow: none; /* Prevent inheritance from `body` */
|
||||
background-color: #fff;
|
||||
border: .05rem solid #fff;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
}
|
||||
body {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
/* Extra markup and styles for table-esque vertical and horizontal centering */
|
||||
.site-wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%; /* For at least Firefox */
|
||||
min-height: 100%;
|
||||
-webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
|
||||
box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
|
||||
}
|
||||
.site-wrapper-inner {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
.cover-container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Padding for spacing */
|
||||
.inner {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.masthead {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.masthead-brand {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link {
|
||||
padding: .25rem 0;
|
||||
font-weight: bold;
|
||||
color: rgba(255,255,255,.5);
|
||||
background-color: transparent;
|
||||
border-bottom: .25rem solid transparent;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link:hover,
|
||||
.nav-masthead .nav-link:focus {
|
||||
border-bottom-color: rgba(255,255,255,.25);
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link + .nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-masthead .active {
|
||||
color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.masthead-brand {
|
||||
float: left;
|
||||
}
|
||||
.nav-masthead {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Cover
|
||||
*/
|
||||
|
||||
.cover {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.cover .btn-lg {
|
||||
padding: .75rem 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
|
||||
.mastfoot {
|
||||
color: rgba(255,255,255,.5);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Affix and center
|
||||
*/
|
||||
|
||||
@media (min-width: 40em) {
|
||||
/* Pull out the header and footer */
|
||||
.masthead {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.mastfoot {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
/* Start the vertical centering */
|
||||
.site-wrapper-inner {
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* Handle the widths */
|
||||
.masthead,
|
||||
.mastfoot,
|
||||
.cover-container {
|
||||
width: 100%; /* Must be percentage or pixels for horizontal alignment */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
.masthead,
|
||||
.mastfoot,
|
||||
.cover-container {
|
||||
width: 42rem;
|
||||
}
|
||||
}
|
68
docs/4.0/examples/cover/index.html
Executable file
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../../../favicon.ico">
|
||||
|
||||
<title>Cover Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="cover.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="site-wrapper-inner">
|
||||
|
||||
<div class="cover-container">
|
||||
|
||||
<div class="masthead clearfix">
|
||||
<div class="inner">
|
||||
<h3 class="masthead-brand">Cover</h3>
|
||||
<nav class="nav nav-masthead">
|
||||
<a class="nav-link active" href="#">Home</a>
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
<a class="nav-link" href="#">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner cover">
|
||||
<h1 class="cover-heading">Cover your page.</h1>
|
||||
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
|
||||
<p class="lead">
|
||||
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mastfoot">
|
||||
<div class="inner">
|
||||
<p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
</body>
|
||||
</html>
|
70
docs/4.0/examples/dashboard/dashboard.css
Executable file
|
@ -0,0 +1,70 @@
|
|||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
/* Move down content because we have a fixed navbar that is 3.5rem tall */
|
||||
body {
|
||||
padding-top: 3.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Typography
|
||||
*/
|
||||
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 9px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 51px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Sidebar navigation */
|
||||
.sidebar {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sidebar .nav {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar .nav-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar .nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dashboard
|
||||
*/
|
||||
|
||||
/* Placeholders */
|
||||
.placeholders {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.placeholder img {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
262
docs/4.0/examples/dashboard/index.html
Executable file
|
@ -0,0 +1,262 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../../../favicon.ico">
|
||||
|
||||
<title>Dashboard Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="dashboard.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Dashboard</a>
|
||||
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Settings</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Reports</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Analytics</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Export</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Nav item</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Nav item again</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">One more nav</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Another nav item</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Nav item again</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">One more nav</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Another nav item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
<section class="row text-center placeholders">
|
||||
<div class="col-6 col-sm-3 placeholder">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
|
||||
<h4>Label</h4>
|
||||
<div class="text-muted">Something else</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 placeholder">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
|
||||
<h4>Label</h4>
|
||||
<span class="text-muted">Something else</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 placeholder">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
|
||||
<h4>Label</h4>
|
||||
<span class="text-muted">Something else</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 placeholder">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
|
||||
<h4>Label</h4>
|
||||
<span class="text-muted">Something else</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Section title</h2>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Header</th>
|
||||
<th>Header</th>
|
||||
<th>Header</th>
|
||||
<th>Header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1,001</td>
|
||||
<td>Lorem</td>
|
||||
<td>ipsum</td>
|
||||
<td>dolor</td>
|
||||
<td>sit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,002</td>
|
||||
<td>amet</td>
|
||||
<td>consectetur</td>
|
||||
<td>adipiscing</td>
|
||||
<td>elit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>Integer</td>
|
||||
<td>nec</td>
|
||||
<td>odio</td>
|
||||
<td>Praesent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>libero</td>
|
||||
<td>Sed</td>
|
||||
<td>cursus</td>
|
||||
<td>ante</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,004</td>
|
||||
<td>dapibus</td>
|
||||
<td>diam</td>
|
||||
<td>Sed</td>
|
||||
<td>nisi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,005</td>
|
||||
<td>Nulla</td>
|
||||
<td>quis</td>
|
||||
<td>sem</td>
|
||||
<td>at</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,006</td>
|
||||
<td>nibh</td>
|
||||
<td>elementum</td>
|
||||
<td>imperdiet</td>
|
||||
<td>Duis</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,007</td>
|
||||
<td>sagittis</td>
|
||||
<td>ipsum</td>
|
||||
<td>Praesent</td>
|
||||
<td>mauris</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,008</td>
|
||||
<td>Fusce</td>
|
||||
<td>nec</td>
|
||||
<td>tellus</td>
|
||||
<td>sed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,009</td>
|
||||
<td>augue</td>
|
||||
<td>semper</td>
|
||||
<td>porta</td>
|
||||
<td>Mauris</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,010</td>
|
||||
<td>massa</td>
|
||||
<td>Vestibulum</td>
|
||||
<td>lacinia</td>
|
||||
<td>arcu</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,011</td>
|
||||
<td>eget</td>
|
||||
<td>nulla</td>
|
||||
<td>Class</td>
|
||||
<td>aptent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,012</td>
|
||||
<td>taciti</td>
|
||||
<td>sociosqu</td>
|
||||
<td>ad</td>
|
||||
<td>litora</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,013</td>
|
||||
<td>torquent</td>
|
||||
<td>per</td>
|
||||
<td>conubia</td>
|
||||
<td>nostra</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,014</td>
|
||||
<td>per</td>
|
||||
<td>inceptos</td>
|
||||
<td>himenaeos</td>
|
||||
<td>Curabitur</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,015</td>
|
||||
<td>sodales</td>
|
||||
<td>ligula</td>
|
||||
<td>in</td>
|
||||
<td>libero</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
</body>
|
||||
</html>
|
27
docs/4.0/examples/grid/grid.css
Executable file
|
@ -0,0 +1,27 @@
|
|||
body {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.row .row {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[class*="col-"] {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
background-color: rgba(86,61,124,.15);
|
||||
border: 1px solid rgba(86,61,124,.2);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
141
docs/4.0/examples/grid/index.html
Executable file
|
@ -0,0 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../../../favicon.ico">
|
||||
|
||||
<title>Grid Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="grid.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<h1>Bootstrap grid examples</h1>
|
||||
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
|
||||
|
||||
<h3>Five grid tiers</h3>
|
||||
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">.col-4</div>
|
||||
<div class="col-4">.col-4</div>
|
||||
<div class="col-4">.col-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">.col-sm-4</div>
|
||||
<div class="col-sm-4">.col-sm-4</div>
|
||||
<div class="col-sm-4">.col-sm-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">.col-lg-4</div>
|
||||
<div class="col-lg-4">.col-lg-4</div>
|
||||
<div class="col-lg-4">.col-lg-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4">.col-xl-4</div>
|
||||
<div class="col-xl-4">.col-xl-4</div>
|
||||
<div class="col-xl-4">.col-xl-4</div>
|
||||
</div>
|
||||
|
||||
<h3>Three equal columns</h3>
|
||||
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<h3>Three unequal columns</h3>
|
||||
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-3">.col-md-3</div>
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
<div class="col-md-3">.col-md-3</div>
|
||||
</div>
|
||||
|
||||
<h3>Two columns</h3>
|
||||
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-8">.col-md-8</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<h3>Full width, single column</h3>
|
||||
<p class="text-warning">No grid classes are necessary for full-width elements.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Two columns with two nested columns</h3>
|
||||
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
|
||||
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
.col-md-8
|
||||
<div class="row">
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Mixed: mobile and desktop</h3>
|
||||
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
|
||||
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
|
||||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">.col-6</div>
|
||||
<div class="col-6">.col-6</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Mixed: mobile, tablet, and desktop</h3>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-8">.col-12 .col-sm-6 .col-lg-8</div>
|
||||
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
</body>
|
||||
</html>
|
353
docs/4.0/examples/index.html
Normal file
|
@ -0,0 +1,353 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<title>
|
||||
|
||||
Examples · Bootstrap Material Design
|
||||
|
||||
</title>
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="Examples">
|
||||
<meta name="twitter:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
|
||||
<!-- Facebook -->
|
||||
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/examples/">
|
||||
<meta property="og:title" content="Examples">
|
||||
<meta property="og:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap-material-design.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="icon" href="/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','https://www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</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>
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
|
||||
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
|
||||
|
||||
</a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.0/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.0
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.0/">Latest (4.x)</a>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/3.3.7/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
|
||||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
|
||||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
|
||||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container my-5">
|
||||
<main class="bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Examples</h1>
|
||||
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
|
||||
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
|
||||
|
||||
<p><a href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip">Download the Bootstrap source code</a> to snag these examples.</p>
|
||||
|
||||
<h2 id="framework">Framework</h2>
|
||||
|
||||
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
|
||||
|
||||
<div class="row bd-examples">
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/starter-template/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/starter-template.jpg" alt="" />
|
||||
<h4>Starter template</h4>
|
||||
</a>
|
||||
<p>Nothing but the basics: compiled CSS and JavaScript.</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/grid/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/grid.jpg" alt="" />
|
||||
<h4>Grids</h4>
|
||||
</a>
|
||||
<p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
|
||||
</div>
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/jumbotron/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron.jpg" alt="" />
|
||||
<h4>Jumbotron</h4>
|
||||
</a>
|
||||
<p>Build around the jumbotron with a navbar and some basic grid columns.</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/narrow-jumbotron/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron-narrow.jpg" alt="" />
|
||||
<h4>Narrow jumbotron</h4>
|
||||
</a>
|
||||
<p>Build a more custom page by narrowing the default container and jumbotron.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="navbars">Navbars</h2>
|
||||
|
||||
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
|
||||
|
||||
<div class="row bd-examples">
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/navbars/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar.jpg" alt="" />
|
||||
<h4>Navbar</h4>
|
||||
</a>
|
||||
<p>Super basic template that includes the navbar along with some additional content.</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/navbar-top/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-static.jpg" alt="" />
|
||||
<h4>Static top navbar</h4>
|
||||
</a>
|
||||
<p>Super basic template with a static top navbar along with some additional content.</p>
|
||||
</div>
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/navbar-top-fixed/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-fixed.jpg" alt="" />
|
||||
<h4>Fixed navbar</h4>
|
||||
</a>
|
||||
<p>Super basic template with a fixed top navbar along with some additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="custom-components">Custom components</h2>
|
||||
|
||||
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
|
||||
|
||||
<div class="row bd-examples">
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/album/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/album.jpg" alt="" />
|
||||
<h4>Album</h4>
|
||||
</a>
|
||||
<p>Simple one-page template for photo galleries, portfolios, and more.</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/cover/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/cover.jpg" alt="" />
|
||||
<h4>Cover</h4>
|
||||
</a>
|
||||
<p>A one-page template for building simple and beautiful home pages.</p>
|
||||
</div>
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/carousel/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/carousel.jpg" alt="" />
|
||||
<h4>Carousel</h4>
|
||||
</a>
|
||||
<p>Customize the navbar and carousel, then add some new components.</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/blog/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/blog.jpg" alt="" />
|
||||
<h4>Blog</h4>
|
||||
</a>
|
||||
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
|
||||
</div>
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/dashboard/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/dashboard.jpg" alt="" />
|
||||
<h4>Dashboard</h4>
|
||||
</a>
|
||||
<p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/signin/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sign-in.jpg" alt="" />
|
||||
<h4>Sign-in page</h4>
|
||||
</a>
|
||||
<p>Custom form layout and design for a simple sign in form.</p>
|
||||
</div>
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/justified-nav/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/justified-nav.jpg" alt="" />
|
||||
<h4>Justified nav</h4>
|
||||
</a>
|
||||
<p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/sticky-footer/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer.jpg" alt="" />
|
||||
<h4>Sticky footer</h4>
|
||||
</a>
|
||||
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
|
||||
</div>
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/sticky-footer-navbar/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer-navbar.jpg" alt="" />
|
||||
<h4>Sticky footer w/ navbar</h4>
|
||||
</a>
|
||||
<p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="experiments">Experiments</h2>
|
||||
|
||||
<p>Examples that focus on future-friendly features or techniques.</p>
|
||||
|
||||
<div class="row bd-examples">
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/offcanvas/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/offcanvas.jpg" alt="" />
|
||||
<h4>Offcanvas</h4>
|
||||
</a>
|
||||
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<footer class="bd-footer text-muted">
|
||||
<div class="container-fluid p-3 p-md-5">
|
||||
<ul class="bd-footer-links">
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li><a href="/examples/">Examples</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
</ul>
|
||||
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a href="https://twitter.com/fat" target="_blank" rel="noopener">@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 v4.0.0-beta. Code licensed <a rel="license noopener" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license noopener" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js"></script>
|
||||
|
||||
|
||||
<script src="/dist/js/bootstrap-material-design.js"></script>
|
||||
|
||||
|
||||
|
||||
<script src="/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/assets/js/vendor/holder.min.js"></script>
|
||||
<script src="/assets/js/src/application.js"></script>
|
||||
|
||||
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="/assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
101
docs/4.0/examples/jumbotron/index.html
Executable file
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../../../favicon.ico">
|
||||
|
||||
<title>Jumbotron Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="jumbotron.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<h1 class="display-3">Hello, world!</h1>
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
||||
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2017</p>
|
||||
</footer>
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
</body>
|
||||
</html>
|
4
docs/4.0/examples/jumbotron/jumbotron.css
Executable file
|
@ -0,0 +1,4 @@
|
|||
/* Move down content because we have a fixed navbar that is 3.5rem tall */
|
||||
body {
|
||||
padding-top: 3.5rem;
|
||||
}
|