mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
Renaming
This commit is contained in:
FezVrasta
parent
e94719c4e7
commit
14068a9438
|
|
@ -1,4 +1,4 @@
|
|||
# Hacking Bootstrap Material Design
|
||||
# Hacking Material Design for Bootstrap
|
||||
|
||||
This project makes use of Gulp to build all our source codes.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<h1 align=center>Bootstrap Material Design</h1>
|
||||
<h1 align=center>Material Design for Bootstrap</h1>
|
||||
|
||||
Bootstrap Material Design is the best way to use [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html)
|
||||
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 Bootstrap Material Design CSS instead of Bootstrap CSS, and include the JavaScript at
|
||||
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.
|
||||
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ the end of your document (just before the `</body>` tag), and everything will be
|
|||
## Support
|
||||
|
||||
The things to do are a lot and the time is little, if you are a passionate developer
|
||||
with experience with Bootstrap and Bootstrap Material Design and you have some spare
|
||||
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).
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
[](https://gratipay.com/FezVrasta)
|
||||
|
||||
|
||||
Bootstrap Material Design is the best way to use [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html)
|
||||
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 Bootstrap Material Design CSS instead of Bootstrap CSS, and include the JavaScript at
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bootstrap-material-design",
|
||||
"description": "Bootstrap Material Design 4",
|
||||
"description": "Material Design for Bootstrap 4",
|
||||
"keywords": [
|
||||
"material",
|
||||
"design",
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
Maintained by our core team with the help of <a href="https://github.com/FezVrasta/bootstrap-material-design/graphs/contributors">our contributors</a>.
|
||||
</p>
|
||||
<p>Code licensed <a rel="license" href="https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
|
||||
<p>Bootstrap Material Design v{{ site.data.version }} is a customization of <a href="http://getbootstrap.com" target="_other">Bootstrap</a> v{{ site.data.bootstrap_version }} documentation and source.</p>
|
||||
<p>Material Design for Bootstrap v{{ site.data.version }} is a customization of <a href="http://getbootstrap.com" target="_other">Bootstrap</a> v{{ site.data.bootstrap_version }} documentation and source.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
|
||||
<!-- Bootstrap Material Design generic -->
|
||||
<!-- Material Design for Bootstrap generic -->
|
||||
<link href="{{ site.baseurl }}/dist/bootstrap-material-design.min.css" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
|
||||
<!-- Bootstrap Material Design customization for Documentation (consider Documentation the application) -->
|
||||
<!-- Material Design for Bootstrap customization for Documentation (consider Documentation the application) -->
|
||||
<link href="{{ site.baseurl }}/dist/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap Material Design">
|
||||
<meta name="keywords" content="Bootstrap Material Design, Sass">
|
||||
<meta name="author" content="Federico Zivolo, Kevin Ross, and Bootstrap Material Design contributors">
|
||||
<meta name="description" content="Material Design for Bootstrap">
|
||||
<meta name="keywords" content="Material Design for Bootstrap, Sass">
|
||||
<meta name="author" content="Federico Zivolo, Kevin Ross, and Material Design for Bootstrap contributors">
|
||||
|
||||
<title>
|
||||
{% if page.layout == "home" %}
|
||||
{{ page.title }}
|
||||
{% else %}
|
||||
{{ page.title }} · Bootstrap Material Design
|
||||
{{ page.title }} · Material Design for Bootstrap
|
||||
{% endif %}
|
||||
</title>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
<div class="d-flex justify-content-between d-lg-none">
|
||||
<a class="navbar-brand" href="{{ site.baseurl }}/">
|
||||
Bootstrap Material Design
|
||||
Material Design for Bootstrap
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap Material Design');">Bootstrap Material Design</a>
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Bootstrap');">Material Design for Bootstrap</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{% if page.group == "getting-started" %}
|
||||
<h1>Getting started</h1>
|
||||
<p class="lead">
|
||||
An overview of Bootstrap Material Design, including how to download and use it, some basic templates and examples, and more.
|
||||
An overview of Material Design for Bootstrap, including how to download and use it, some basic templates and examples, and more.
|
||||
</p>
|
||||
{% elsif page.group == "layout" %}
|
||||
<h1>Layout</h1>
|
||||
<p class="lead">
|
||||
Options for structuring your pages with Bootstrap Material Design, including global styles and more.
|
||||
Options for structuring your pages with Material Design for Bootstrap, including global styles and more.
|
||||
</p>
|
||||
{% elsif page.group == "content" %}
|
||||
<h1>Content</h1>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
{% elsif page.group == "material-design" %}
|
||||
<h1>Material Design</h1>
|
||||
<p class="lead">
|
||||
A quick reference display for Bootstrap Material Design components with additional options.
|
||||
A quick reference display for Material Design for Bootstrap components with additional options.
|
||||
</p>
|
||||
{% elsif page.group == "components" %}
|
||||
<h1>Components</h1>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
{% elsif page.group == "javascript" %}
|
||||
<h1>JavaScript plugins</h1>
|
||||
<p class="lead">
|
||||
Bring Bootstrap Material Design's components to life with jQuery plugins. Easily include them all, or one by one.
|
||||
Bring Material Design for Bootstrap's components to life with jQuery plugins. Easily include them all, or one by one.
|
||||
</p>
|
||||
{% elsif page.group == "about" %}
|
||||
<h1>About</h1>
|
||||
|
|
@ -36,11 +36,11 @@
|
|||
{% elsif page.group == "migration" %}
|
||||
<h1>Migration</h1>
|
||||
<p class="lead">
|
||||
Guidance on how to upgrade from Bootstrap Material Design v3.x to v4.x with emphasis on major changes, what's new, and what's been removed.
|
||||
Guidance on how to upgrade from Material Design for Bootstrap v3.x to v4.x with emphasis on major changes, what's new, and what's been removed.
|
||||
</p>
|
||||
{% elsif page.group == "browser-bugs" %}
|
||||
<h1>Wall of browser bugs</h1>
|
||||
<p class="lead">
|
||||
A list of the browser bugs that Bootstrap Material Design is currently grappling with.
|
||||
A list of the browser bugs that Material Design for Bootstrap is currently grappling with.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@ group: about
|
|||
redirect_from: "/about/"
|
||||
---
|
||||
|
||||
Originally created by Federico Zivolo [@FezVrasta](https://github.com/FezVrasta) in late 2014, Bootstrap Material Design has become
|
||||
Originally created by Federico Zivolo [@FezVrasta](https://github.com/FezVrasta) in late 2014, Material Design for Bootstrap has become
|
||||
the most popular Material Design implementation for Bootstrap in the world.
|
||||
|
|
|
|||
|
|
@ -4,29 +4,29 @@ title: License FAQs
|
|||
group: about
|
||||
---
|
||||
|
||||
Bootstrap Material Design is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Federico Zivolo.
|
||||
Material Design for Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Federico Zivolo.
|
||||
Boiled down to smaller chunks, it can be described with the following conditions.
|
||||
|
||||
#### It requires you to:
|
||||
|
||||
* Keep the license and copyright notice included in Bootstrap Material Design's files when you use them in your works
|
||||
* Keep the license and copyright notice included in Material Design for Bootstrap's files when you use them in your works
|
||||
|
||||
#### It permits you to:
|
||||
|
||||
- Freely download and use Bootstrap Material Design, in whole or in part, for personal, private, company internal, or commercial purposes
|
||||
- Use Bootstrap Material Design in packages or distributions that you create
|
||||
- Freely download and use Material Design for Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
|
||||
- Use Material Design for Bootstrap in packages or distributions that you create
|
||||
- Modify the source code
|
||||
- Grant a sublicense to modify and distribute Bootstrap Material Design to third parties not included in the license
|
||||
- Grant a sublicense to modify and distribute Material Design for Bootstrap to third parties not included in the license
|
||||
|
||||
#### It forbids you to:
|
||||
|
||||
- Hold the authors and license owners liable for damages as Bootstrap Material Design is provided without warranty
|
||||
- Hold the creators or copyright holders of Bootstrap Material Design liable
|
||||
- Redistribute any piece of Bootstrap Material Design without proper attribution
|
||||
- Hold the authors and license owners liable for damages as Material Design for Bootstrap is provided without warranty
|
||||
- Hold the creators or copyright holders of Material Design for Bootstrap liable
|
||||
- Redistribute any piece of Material Design for Bootstrap without proper attribution
|
||||
|
||||
#### It does not require you to:
|
||||
|
||||
- Include the source of Bootstrap Material Design itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
|
||||
- Submit changes that you make to Bootstrap Material Design back to the Bootstrap Material Design project (though such feedback is encouraged)
|
||||
- Include the source of Material Design for Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
|
||||
- Submit changes that you make to Material Design for Bootstrap back to the Material Design for Bootstrap project (though such feedback is encouraged)
|
||||
|
||||
The full Bootstrap Material Design license is located [in the project repository]({{ site.repo }}/blob/master/LICENSE.md) for more information.
|
||||
The full Material Design for Bootstrap license is located [in the project repository]({{ site.repo }}/blob/master/LICENSE.md) for more information.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Team
|
|||
group: about
|
||||
---
|
||||
|
||||
Bootstrap Material Design is maintained by a small group of invaluable core contributors,
|
||||
Material Design for Bootstrap is maintained by a small group of invaluable core contributors,
|
||||
with the support and involvement of our community.
|
||||
|
||||
<div class="list-group bd-team">
|
||||
|
|
|
|||
|
|
@ -14,3 +14,8 @@
|
|||
border-radius: 3px;
|
||||
box-shadow: 0 5px 5px -2px rgba(31, 31, 31, 0.4);
|
||||
}
|
||||
|
||||
.block-link-center {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ redirect_from: "/components/"
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: components
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
@ -75,16 +75,16 @@ Here are some representative examples of these classes:
|
|||
{% endhighlight %}
|
||||
|
||||
### Horizontal centering
|
||||
Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
|
||||
Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||
Centered element
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="m-x-auto" style="width: 200px;">
|
||||
<div class="mx-auto" style="width: 200px;">
|
||||
Centered element
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: content
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: content
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: content
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ Add classes to an `<img>` element to easily style images in any project.
|
|||
|
||||
## Aligning images
|
||||
|
||||
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
|
||||
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
|
||||
|
|
@ -72,11 +72,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
|
|||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners">
|
||||
<img data-src="holder.js/200x200" class="img-rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<img src="..." class="img-rounded m-x-auto d-block" alt="...">
|
||||
<img src="..." class="img-rounded mx-auto d-block" alt="...">
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ redirect_from: "/content/"
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: content
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: content
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Examples
|
|||
|
||||
## Templates
|
||||
|
||||
Templates that give a quick structural start to using Bootstrap Material Design.
|
||||
Templates that give a quick structural start to using Material Design for Bootstrap.
|
||||
|
||||
<div class="card-deck">
|
||||
<div class="card card-block">
|
||||
|
|
@ -36,7 +36,7 @@ Templates that give a quick structural start to using Bootstrap Material Design.
|
|||
|
||||
## Components
|
||||
|
||||
Components and templates to help folks quickly get started with Bootstrap Material Design and demonstrate best practices for adding onto the framework.
|
||||
Components and templates to help folks quickly get started with Material Design for Bootstrap and demonstrate best practices for adding onto the framework.
|
||||
|
||||
<div class="card-deck">
|
||||
<div class="card card-block">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ js: example.js
|
|||
|
||||
<div class="container">
|
||||
|
||||
<form class="form-signin m-x-auto">
|
||||
<form class="form-signin mx-auto">
|
||||
<h2>Please sign in</h2>
|
||||
<div class="form-group">
|
||||
<label for="inputEmail" class="bmd-label-floating">Email address</label>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Best practices
|
|||
group: getting-started
|
||||
---
|
||||
|
||||
We've designed and developed Bootstrap Material Design to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves.
|
||||
We've designed and developed Material Design for Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves.
|
||||
|
||||
{% callout info %}
|
||||
**Heads up!** This copy is a work in progress.
|
||||
|
|
@ -13,4 +13,4 @@ We've designed and developed Bootstrap Material Design to work in a number of en
|
|||
## SASS
|
||||
|
||||
### Avoid vendor prefixes
|
||||
Bootstrap Material Design uses Autoprefixer (included in our gulpfile and build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time.
|
||||
Material Design for Bootstrap uses Autoprefixer (included in our gulpfile and build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time.
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ group: getting-started
|
|||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ title: Building
|
|||
group: getting-started
|
||||
---
|
||||
|
||||
Bootstrap Material Design uses [Gulp v4](http://gulpjs.com) for its CSS and JavaScript build system and Jekyll for the written documentation. Our gulpfile includes convenient methods for working with the framework, including compiling code, running tests, and more.
|
||||
Material Design for Bootstrap uses [Gulp v4](http://gulpjs.com) for its CSS and JavaScript build system and Jekyll for the written documentation. Our gulpfile includes convenient methods for working with the framework, including compiling code, running tests, and more.
|
||||
|
||||
## Tooling setup
|
||||
|
||||
To use our gulpfile and run our documentation locally, you'll need a copy of Bootstrap Material Design's source files, Node, and Gulp v4. Follow these steps and you should be ready to rock:
|
||||
To use our gulpfile and run our documentation locally, you'll need a copy of Material Design for Bootstrap's source files, Node, and Gulp v4. Follow these steps and you should be ready to rock:
|
||||
|
||||
1. [Download and install Node](https://nodejs.org/download), which we use to manage our dependencies.
|
||||
2. Install the Gulp command line tools, `gulp-cli`, with `npm install -g gulpjs/gulp-cli#4.0`.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Customization options
|
|||
group: getting-started
|
||||
---
|
||||
|
||||
Bootstrap Material Design 4 is designed to be customized via Sass variables. You may customize any Bootstrap or BMD variable.
|
||||
Material Design for Bootstrap 4 is designed to be customized via Sass variables. You may customize any Bootstrap or BMD variable.
|
||||
|
||||
{% callout info %}
|
||||
The following assumes you have [setup your build tools and are building successfully](../building).
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ For the current time, please use the `v4-dev` branch for **all package managers
|
|||
|
||||
|
||||
|
||||
**Bootstrap Material Design v{{ site.data.version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
|
||||
**Material Design for Bootstrap v{{ site.data.version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
|
||||
|
||||
<div class="row m-t-md">
|
||||
<div class="col-sm-6">
|
||||
|
|
@ -23,7 +23,7 @@ For the current time, please use the `v4-dev` branch for **all package managers
|
|||
Download just the compiled and minified CSS and JavaScript. Doesn't include any documentation or original source files.
|
||||
|
||||
{% comment %}
|
||||
<a href="{{ site.data.download.dist }}" class="btn btn-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap Material Design</a>
|
||||
<a href="{{ site.data.download.dist }}" class="btn btn-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Material Design for Bootstrap</a>
|
||||
{% endcomment %}
|
||||
<span class="text-muted">Coming soon!</span>
|
||||
{% endmarkdown %}
|
||||
|
|
@ -40,24 +40,24 @@ Download everything: source Sass, JavaScript, and documentation files. **Require
|
|||
|
||||
## Package managers
|
||||
|
||||
Pull in Bootstrap Material Design's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap Material Design will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
|
||||
Pull in Material Design for Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Material Design for Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
|
||||
|
||||
### npm
|
||||
|
||||
Install Bootstrap Material Design in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap-material-design):
|
||||
Install Material Design for Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap-material-design):
|
||||
|
||||
{% highlight bash %}$ npm install bootstrap-material-design@{{ site.data.version }}{% endhighlight %}
|
||||
|
||||
`require('bootstrap-material-design')` will load all of Bootstrap Material Design's jQuery plugins onto the jQuery object.
|
||||
`require('bootstrap-material-design')` will load all of Material Design for Bootstrap's jQuery plugins onto the jQuery object.
|
||||
|
||||
Bootstrap Material Design's `package.json` contains some additional metadata under the following keys:
|
||||
Material Design for Bootstrap's `package.json` contains some additional metadata under the following keys:
|
||||
|
||||
- `sass` - path to Bootstrap Material Design's main [Sass](http://sass-lang.com/) source file
|
||||
- `style` - path to Bootstrap Material Design's non-minified CSS that's been precompiled using the default settings (no customization)
|
||||
- `sass` - path to Material Design for Bootstrap's main [Sass](http://sass-lang.com/) source file
|
||||
- `style` - path to Material Design for Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
|
||||
|
||||
### Bower
|
||||
|
||||
Install and manage Bootstrap Material Design's Sass and JavaScript using [Bower](http://bower.io).
|
||||
Install and manage Material Design for Bootstrap's Sass and JavaScript using [Bower](http://bower.io).
|
||||
|
||||
{% highlight bash %}$ bower install bootstrap-material-design#v{{ site.data.version }}{% endhighlight %}
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ $ meteor add FezVrasta/bootstrap-material-design@={{ site.data.version }}
|
|||
|
||||
### Composer
|
||||
|
||||
You can also install and manage Bootstrap Material Design's Sass and JavaScript using [Composer](https://getcomposer.org):
|
||||
You can also install and manage Material Design for Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org):
|
||||
|
||||
{% highlight bash %}
|
||||
$ composer require FezVrasta/bootstrap-material-design
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ group: getting-started
|
|||
redirect_from: "/getting-started/"
|
||||
---
|
||||
|
||||
This is Bootstrap Material Design, the world's most popular framework for building responsive, mobile-first Material Design sites and applications.
|
||||
This is Material Design for Bootstrap, the world's most popular framework for building responsive, mobile-first Material Design sites and applications.
|
||||
Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.
|
||||
|
||||
Here's how to quickly get started with the Bootstrap Material Design CDN and a template starter page.
|
||||
Here's how to quickly get started with the Material Design for Bootstrap CDN and a template starter page.
|
||||
|
||||
## Contents
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ Here's how to quickly get started with the Bootstrap Material Design CDN and a t
|
|||
|
||||
## Quick start
|
||||
|
||||
Looking to quickly add Bootstrap Material Design to your project? Use the Bootstrap Material Design CDN,
|
||||
Looking to quickly add Material Design for Bootstrap to your project? Use the Material Design for Bootstrap CDN,
|
||||
provided for free by the folks at MaxCDN. Using a package manager or need to download the source files?
|
||||
[Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ Copy-paste the font and stylesheet `<link>` into your `<head>` before all other
|
|||
<link rel="stylesheet" href="{{ site.data.cdn.font_roboto }}">
|
||||
<link rel="stylesheet" href="{{ site.data.cdn.font_icons }}">
|
||||
|
||||
<!-- Bootstrap Material Design -->
|
||||
<!-- Material Design for Bootstrap -->
|
||||
<link rel="stylesheet" href="{{ site.data.cdn.css }}">
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
@ -74,13 +74,13 @@ Put it all together and your pages should look like this:
|
|||
<link rel="stylesheet" href="{{ site.data.cdn.font_roboto }}">
|
||||
<link rel="stylesheet" href="{{ site.data.cdn.font_icons }}">
|
||||
|
||||
<!-- Bootstrap Material Design -->
|
||||
<!-- Material Design for Bootstrap -->
|
||||
<link rel="stylesheet" href="{{ site.data.cdn.css }}">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
<!-- jQuery first, then tether, then Bootstrap Material Design JS. -->
|
||||
<!-- jQuery first, then tether, then Material Design for Bootstrap JS. -->
|
||||
<script src="{{ site.data.cdn.jquery }}"></script>
|
||||
<script src="{{ site.data.cdn.tether }}"></script>
|
||||
<script src="{{ site.data.cdn.js }}"></script>
|
||||
|
|
@ -97,11 +97,11 @@ That's all you need for overall page requirements. Visit the [Layout docs]({{ si
|
|||
|
||||
## Important globals
|
||||
|
||||
Bootstrap Material Design employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in.
|
||||
Material Design for Bootstrap employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in.
|
||||
|
||||
### HTML5 doctype
|
||||
|
||||
Bootstrap Material Design requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
|
||||
Material Design for Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
|
||||
|
||||
{% highlight html %}
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -112,7 +112,7 @@ Bootstrap Material Design requires the use of the HTML5 doctype. Without it, you
|
|||
|
||||
### Responsive meta tag
|
||||
|
||||
Bootstrap Material Design is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your `<head>`.
|
||||
Material Design for Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your `<head>`.
|
||||
|
||||
{% highlight html %}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
|
@ -123,7 +123,7 @@ You can see an example of this in action in the [starter template](#starter-temp
|
|||
|
||||
## Community
|
||||
|
||||
Stay up to date on the development of Bootstrap Material Design and reach out to the community with these helpful resources.
|
||||
Stay up to date on the development of Material Design for Bootstrap and reach out to the community with these helpful resources.
|
||||
|
||||
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-material-design`](https://stackoverflow.com/questions/tagged/bootstrap-material-design)).
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Release process
|
|||
group: getting-started
|
||||
---
|
||||
|
||||
Bootstrap Material Design has a well defined release process that is automated by [Gulp](http://gulpjs.com). See the [Build Tools](../build-tools) section for setup.
|
||||
Material Design for Bootstrap has a well defined release process that is automated by [Gulp](http://gulpjs.com). See the [Build Tools](../build-tools) section for setup.
|
||||
|
||||
## Creating a release
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
layout: home
|
||||
title: Bootstrap Material Design, the world's most popular mobile-first and responsive Material Design front-end framework.
|
||||
title: Material Design for Bootstrap, the world's most popular mobile-first and responsive Material Design front-end framework.
|
||||
---
|
||||
|
||||
<main class="bd-masthead" id="content" role="main">
|
||||
<div class="container">
|
||||
<span class="bd-booticon outline">BMD</span>
|
||||
<p class="lead">Bootstrap Material Design, the world's most popular mobile-first and responsive Material Design front-end framework.</p>
|
||||
<p class="lead">Material Design for Bootstrap, the world's most popular mobile-first and responsive Material Design front-end framework.</p>
|
||||
<p class="lead">
|
||||
<a href="{{ site.baseurl }}/getting-started/download" class="btn btn-primary btn-raised btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.data.version }}');">Download</a>
|
||||
</p>
|
||||
|
|
@ -18,19 +18,19 @@ title: Bootstrap Material Design, the world's most popular mobile-first and resp
|
|||
<div class="bd-featurette">
|
||||
<div class="container">
|
||||
<h2 class="bd-featurette-title">Easy to get started.</h2>
|
||||
<p class="lead">Quickly include Bootstrap Material Design's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap Material Design CDN.</p>
|
||||
<p class="lead">Quickly include Material Design for Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Material Design for Bootstrap CDN.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 m-b-lg">
|
||||
<h4>Managed dependencies</h4>
|
||||
<p>Include Bootstrap Material Design's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our gulpfile and readme.</p>
|
||||
<p>Include Material Design for Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our gulpfile and readme.</p>
|
||||
<p>
|
||||
<a class="btn btn-bs btn-primary" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6 m-b-lg">
|
||||
<h4>Bootstrap Material Design CDN</h4>
|
||||
<p>When you just need to include Bootstrap Material Design's compiled CSS and JS, use the Bootstrap Material Design CDN, free from the Max CDN folks.</p>
|
||||
<h4>Material Design for Bootstrap CDN</h4>
|
||||
<p>When you just need to include Material Design for Bootstrap's compiled CSS and JS, use the Material Design for Bootstrap CDN, free from the Max CDN folks.</p>
|
||||
<p>
|
||||
<a class="btn btn-bs btn-primary" href="{{ site.baseurl }}/getting-started/introduction">See Getting Started</a>
|
||||
</p>
|
||||
|
|
@ -43,15 +43,15 @@ title: Bootstrap Material Design, the world's most popular mobile-first and resp
|
|||
<div class="container">
|
||||
<h2 class="bd-featurette-title">Material Kit <span class="mk-pro-badge">PRO</span></h2>
|
||||
<p class="lead">
|
||||
Get more from Bootstrap Material Design with our official Material Kit PRO. It features a huge number of components built to fit together and look amazing. Included you will find PSD, examples and sources.
|
||||
Get more from Material Design for Bootstrap with our official Material Kit PRO. It features a huge number of components built to fit together and look amazing. Included you will find PSD, examples and sources.
|
||||
</p>
|
||||
|
||||
<p class="lead">
|
||||
<a href="{{ site.mkp }}" class="btn btn-outline-primary btn-lg" onclick="ga('send', 'event', 'Home', 'MKP More Details Button');">More details</a>
|
||||
</p>
|
||||
|
||||
<a href="{{ site.mkp }}" onclick="ga('send', 'event', 'Home', 'MKP Banner Link');">
|
||||
<img class="img-fluid m-x-auto" src="assets/img/mk-pro-banner.jpg" alt="Material Kit PRO" width="1024" height="388">
|
||||
<a href="{{ site.mkp }}" class="block-link-center" onclick="ga('send', 'event', 'Home', 'MKP Banner Link');">
|
||||
<img class="img-fluid mx-auto" src="assets/img/mk-pro-banner.jpg" alt="Material Kit PRO" width="1024" height="388">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,41 +59,41 @@ title: Bootstrap Material Design, the world's most popular mobile-first and resp
|
|||
<div class="bd-featurette">
|
||||
<div class="container">
|
||||
<h2 class="bd-featurette-title">Designed for everyone, everywhere.</h2>
|
||||
<p class="lead">Bootstrap Material Design makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
|
||||
<p class="lead">Material Design for Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4 m-b-lg">
|
||||
<img src="assets/img/sass.png" alt="Sass support" class="img-fluid">
|
||||
<h4>Preprocessor</h4>
|
||||
<p>Bootstrap Material Design ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
|
||||
<p>Material Design for Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 m-b-lg">
|
||||
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
|
||||
<h4>One framework, every device.</h4>
|
||||
<p>Bootstrap Material Design easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
|
||||
<p>Material Design for Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 m-b-lg">
|
||||
<img src="assets/img/components.png" alt="Components" class="img-fluid">
|
||||
<h4>Full of features</h4>
|
||||
<p>With Bootstrap Material Design, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
|
||||
<p>With Material Design for Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="half-rule m-t-0">
|
||||
|
||||
<p><strong>Bootstrap Material Design is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
|
||||
<p><strong>Material Design for Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
|
||||
<a href="{{ site.repo }}" class="btn btn-bs btn-primary" onclick="ga('send', 'event', 'Home', 'GitHub Button');">View the GitHub project</a>
|
||||
|
||||
<br /><br />
|
||||
<hr class="half-rule m-t-0">
|
||||
|
||||
<p>Looking for the <strong>Bootstrap 3 compatible</strong> version of Bootstrap Material Design? Head over the following link to find it.</p>
|
||||
<a class="btn btn-bs btn-primary" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html" onclick="ga('send', 'event', 'Home', 'Bootstrap Material Design V3 Button');">Get BMD3 Version</a>
|
||||
<p>Looking for the <strong>Bootstrap 3 compatible</strong> version of Material Design for Bootstrap? Head over the following link to find it.</p>
|
||||
<a class="btn btn-bs btn-primary" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html" onclick="ga('send', 'event', 'Home', 'Material Design for Bootstrap V3 Button');">Get BMD3 Version</a>
|
||||
|
||||
<br /><br />
|
||||
<hr class="half-rule m-t-0">
|
||||
|
||||
<p>Would you like to support the development of Bootstrap Material Design? Please donate with PayPal or buy <a href="{{ site.mkp }}" target="_blank" onclick="ga('send', 'event', 'Home', 'MKP Support Button');">Material Kit PRO</a>!</p>
|
||||
<p>Would you like to support the development of Material Design for Bootstrap? Please donate with PayPal or buy <a href="{{ site.mkp }}" target="_blank" onclick="ga('send', 'event', 'Home', 'MKP Support Button');">Material Kit PRO</a>!</p>
|
||||
<form action="https://www.paypal.com/cgi-bin/webscr" id="paypal" method="post" target="_blank">
|
||||
<input type="hidden" name="cmd" value="_s-xclick">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Collapse inline
|
|||
group: material-design
|
||||
---
|
||||
|
||||
The Bootstrap Material Design `CollapseInline` plugin allows you to toggle inline content on your pages with a bit of JavaScript and some classes. This plugin utilizes a handful of classes from the [Bootstrap collapse plugin]({{ site.baseurl }}/components/collapse/) for easy toggle behavior. Since most functionality and documentation (including a rich set of Javascript events) is already provided by the [Bootstrap collapse plugin]({{ site.baseurl }}/components/collapse/), the following will focus only on some samples utilizing the BMD `CollapseInline` component.
|
||||
The Material Design for Bootstrap `CollapseInline` plugin allows you to toggle inline content on your pages with a bit of JavaScript and some classes. This plugin utilizes a handful of classes from the [Bootstrap collapse plugin]({{ site.baseurl }}/components/collapse/) for easy toggle behavior. Since most functionality and documentation (including a rich set of Javascript events) is already provided by the [Bootstrap collapse plugin]({{ site.baseurl }}/components/collapse/), the following will focus only on some samples utilizing the BMD `CollapseInline` component.
|
||||
|
||||
## Contents
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Drawers
|
|||
group: material-design
|
||||
---
|
||||
|
||||
The Bootstrap Material Design `Drawer` provides a markup structure and plugin that allows you to display content on the bounds of any containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The BMD implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes.
|
||||
The Material Design for Bootstrap `Drawer` provides a markup structure and plugin that allows you to display content on the bounds of any containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The BMD implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes.
|
||||
|
||||
## Contents
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ title: Extensions
|
|||
group: material-design
|
||||
---
|
||||
|
||||
Bootstrap Material Design provides seamlessly integration with some extensions.
|
||||
Material Design for Bootstrap provides seamlessly integration with some extensions.
|
||||
|
||||
- [SnackbarJS]({{ site.baseurl }}/material-design/snackbars)
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ Bootstrap provides several form control styles, layout options, and custom compo
|
|||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
Form controls flavored by Bootstrap Material Design customizations such as `bmd-label-floating`.
|
||||
Form controls flavored by Material Design for Bootstrap customizations such as `bmd-label-floating`.
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="form-group">
|
||||
|
|
@ -82,7 +82,7 @@ Form controls flavored by Bootstrap Material Design customizations such as `bmd-
|
|||
|
||||
## Classes
|
||||
|
||||
Below is a complete list of options supported by Bootstrap Material Design and the classes that customize them. Additional documentation is available for each group.
|
||||
Below is a complete list of options supported by Material Design for Bootstrap and the classes that customize them. Additional documentation is available for each group.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Labels
|
|||
group: material-design
|
||||
---
|
||||
|
||||
Below is a complete list of `<label>` class options supported by Bootstrap Material Design:
|
||||
Below is a complete list of `<label>` class options supported by Material Design for Bootstrap:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ In order to make snackbars work, make sure to include `snackbar.min.js` before `
|
|||
{% endhighlight %}
|
||||
|
||||
{% callout info %}
|
||||
**Heads up!** You don't need to include SnackbarJS CSS, it's already bundled in Bootstrap Material Design.
|
||||
**Heads up!** You don't need to include SnackbarJS CSS, it's already bundled in Material Design for Bootstrap.
|
||||
{% endcallout %}
|
||||
|
||||
## Examples
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Migrating to v4
|
|||
group: migration
|
||||
---
|
||||
|
||||
Bootstrap Material Design 4 is a major rewrite of almost the entire project.
|
||||
Material Design for Bootstrap 4 is a major rewrite of almost the entire project.
|
||||
The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components.
|
||||
|
||||
{% callout info %}
|
||||
|
|
@ -43,7 +43,7 @@ Here are the big ticket items you'll want to be aware of when moving from BMD v3
|
|||
- Refactored nearly all components to use more unnested classes instead of children selectors.
|
||||
|
||||
### Misc
|
||||
- Non-responsive usage of Bootstrap Material Design is no longer supported.
|
||||
- Non-responsive usage of Material Design for Bootstrap is no longer supported.
|
||||
|
||||
|
||||
## By component
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const referenceDocNotice =
|
|||
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs\n
|
||||
{% callout info %}\n**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to demonstrate rendering with Bootstrap Material Design default styling.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
\n\n$2`
|
||||
|
|
|
|||
2
js/bootstrapMaterialDesign.js
vendored
2
js/bootstrapMaterialDesign.js
vendored
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* $.bootstrapMaterialDesign(config) is a macro class to configure the components generally
|
||||
* used in Bootstrap Material Design. You may pass overrides to the configurations
|
||||
* used in Material Design for Bootstrap. You may pass overrides to the configurations
|
||||
* which will be passed into each component, or you may omit use of this class and
|
||||
* configure each component separately.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bootstrap-material-design",
|
||||
"description": "Bootstrap Material Design 4",
|
||||
"description": "Material Design for Bootstrap 4",
|
||||
"version": "4.0.2",
|
||||
"keywords": [
|
||||
"material",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user