mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-02 21:04:13 +03:00
Documented everything to-date with migration notes. Reviewed and removed unneeded docs from initial seed of BS documentation. Moved synced BS documentation down under it's own heading.
This commit is contained in:
Kevin Ross
parent
c886660719
commit
4fff87c613
|
|
@ -243,7 +243,7 @@ This performs an initial build and watches both the core and docs sources for ch
|
|||
(assuming the above is done)
|
||||
|
||||
```bash
|
||||
jekyll serve
|
||||
jekyll serve --baseurl ""
|
||||
```
|
||||
|
||||
## Releasing
|
||||
|
|
|
|||
24
Gruntfile.js
24
Gruntfile.js
|
|
@ -12,8 +12,8 @@ module.exports = function (grunt) {
|
|||
'$1\n\n'
|
||||
+ '[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs\n\n'
|
||||
+ '{% callout info %}\n**Bootstrap Reference Documentation** \n'
|
||||
+ 'This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. \n'
|
||||
+ 'It is being rendered with Material Design for Bootstrap to demonstrate default styling. \n'
|
||||
+ 'This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. \n'
|
||||
+ 'It is included here to demonstrate rendering with Material Design for Bootstrap default styling. \n'
|
||||
+ 'See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.\n'
|
||||
+ '{% endcallout %}'
|
||||
+ '\n\n$2'
|
||||
|
|
@ -429,16 +429,16 @@ module.exports = function (grunt) {
|
|||
dest: 'docs/components/'
|
||||
},
|
||||
'bs-docs-content': {
|
||||
//options: {
|
||||
// // https://regex101.com/r/cZ7aO8/2
|
||||
// process: function (content, srcpath) {
|
||||
// return content
|
||||
// // insert docs reference
|
||||
// .replace(/(---[\s\S]+?---)([\s\S]+)/mg, referenceDocNotice)
|
||||
// // remove sample text 'display' as this is a particular style and is confusing
|
||||
// .replace(/Fancy display heading/, 'Fancy heading');
|
||||
// }
|
||||
//},
|
||||
options: {
|
||||
// https://regex101.com/r/cZ7aO8/2
|
||||
process: function (content, srcpath) {
|
||||
return content
|
||||
// insert docs reference
|
||||
.replace(/(---[\s\S]+?---)([\s\S]+)/mg, referenceDocNotice)
|
||||
// remove sample text 'display' as this is a particular style and is confusing
|
||||
.replace(/Fancy display heading/, 'Fancy heading');
|
||||
}
|
||||
},
|
||||
expand: true,
|
||||
cwd: '../bootstrap/docs/content',
|
||||
src: [
|
||||
|
|
|
|||
14
_config.yml
14
_config.yml
|
|
@ -20,8 +20,10 @@ source: docs
|
|||
destination: _gh_pages
|
||||
host: 0.0.0.0
|
||||
port: 9000
|
||||
#baseurl: "/bootstrap-material-design"
|
||||
#url: "http://fezvrasta.github.io"
|
||||
|
||||
|
||||
|
||||
|
||||
encoding: UTF-8
|
||||
exclude: [assets/scss/]
|
||||
|
||||
|
|
@ -30,9 +32,11 @@ gems:
|
|||
- jekyll-seo-tag
|
||||
- jekyll-sitemap
|
||||
|
||||
# Custom vars
|
||||
#current_version: 4.0.0-alpha
|
||||
repo: https://github.com/fezvrasta/bootstrap-material-design
|
||||
# Site vars
|
||||
#url: "http://fezvrasta.github.io"
|
||||
repo: https://github.com/fezvrasta/bootstrap-material-design
|
||||
baseurl: "/bootstrap-material-design"
|
||||
url: "http://rosskevin.github.io"
|
||||
|
||||
# other variables generated in
|
||||
|
||||
|
|
|
|||
|
|
@ -8,21 +8,6 @@
|
|||
- title: Build tools
|
||||
- title: Best practices
|
||||
|
||||
- title: Layout
|
||||
pages:
|
||||
- title: Overview
|
||||
- title: Grid
|
||||
- title: Media object
|
||||
- title: Responsive utilities
|
||||
|
||||
- title: Content
|
||||
pages:
|
||||
- title: Typography
|
||||
- title: Code
|
||||
- title: Images
|
||||
- title: Tables
|
||||
- title: Figures
|
||||
|
||||
- title: Material Design
|
||||
pages:
|
||||
- title: Test
|
||||
|
|
@ -33,6 +18,31 @@
|
|||
- title: Labels
|
||||
- title: Selections
|
||||
|
||||
- title: About
|
||||
pages:
|
||||
- title: History
|
||||
- title: Team
|
||||
- title: License
|
||||
|
||||
# change nav-docs.html if you change this name to insert "Bootstrap Reference Documentation"
|
||||
- title: Migration
|
||||
|
||||
#- title: Layout
|
||||
# pages:
|
||||
# - title: Overview
|
||||
# - title: Grid
|
||||
# - title: Media object
|
||||
# - title: Responsive utilities
|
||||
|
||||
- title: Content
|
||||
pages:
|
||||
- title: Typography
|
||||
- title: Code
|
||||
- title: Images
|
||||
- title: Tables
|
||||
- title: Figures
|
||||
|
||||
|
||||
- title: Components
|
||||
pages:
|
||||
- title: Buttons
|
||||
|
|
@ -64,11 +74,4 @@
|
|||
# - title: Approach
|
||||
# - title: Icon fonts
|
||||
|
||||
- title: About
|
||||
pages:
|
||||
- title: History
|
||||
- title: Team
|
||||
# - title: Accessibility
|
||||
- title: License
|
||||
|
||||
- title: Migration
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
<script src="{{ site.baseurl }}/dist/js/{{ site.data.name }}.min.js"></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/docs.min.js"></script>
|
||||
{% else %}
|
||||
<!--<script src="{{ site.baseurl }}/dist/js/{{ site.data.name }}.js"></script>-->
|
||||
{% for file in site.data.configBridge.paths.coreJs %}
|
||||
<script src="{{ site.baseurl }}/{{ file }}"></script>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,6 @@
|
|||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
|
||||
<!-- Material Design for Bootstrap CSS (includes a compiled/customized version of Bootstrap) -->
|
||||
<!--<link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.min.css" rel="stylesheet">-->
|
||||
|
||||
<!-- Material Design for Bootstrap customization for Documentation (consider Documentation the application) -->
|
||||
{% if site.github %}
|
||||
<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -55,6 +55,13 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if group.title == "Migration" %}
|
||||
<div class="bd-toc-item mdb-toc-item-reference">
|
||||
<div>Bootstrap Reference Documentation</div>
|
||||
<hr>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -91,3 +91,4 @@ $bd-info: $brand-info; // #5bc0de;
|
|||
@import 'mdb/booticon';
|
||||
@import 'mdb/component-examples';
|
||||
@import 'mdb/clipboard-js';
|
||||
@import 'mdb/sidebar';
|
||||
|
|
|
|||
8
docs/assets/scss/mdb/_sidebar.scss
Normal file
8
docs/assets/scss/mdb/_sidebar.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
.mdb-toc-item-reference {
|
||||
margin-top: 1rem;
|
||||
//margin-bottom: 1rem;
|
||||
padding: .25rem .75rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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,8 +9,8 @@ redirect_from: "/components/"
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ group: components
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
@ -29,10 +29,12 @@ Assign `margin` or `padding` to an element or a subset of its sides with shortha
|
|||
The classes are named using the format: `{property}-{sides}-{size}`
|
||||
|
||||
Where *property* is one of:
|
||||
|
||||
* `m` - for classes that set `margin`
|
||||
* `p` - for classes that set `padding`
|
||||
|
||||
Where *sides* is one of:
|
||||
|
||||
* `t` - for classes that set `margin-top` or `padding-top`
|
||||
* `b` - for classes that set `margin-bottom` or `padding-bottom`
|
||||
* `l` - for classes that set `margin-left` or `padding-left`
|
||||
|
|
@ -42,6 +44,7 @@ Where *sides* is one of:
|
|||
* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element
|
||||
|
||||
Where *size* is one of:
|
||||
|
||||
* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
|
||||
* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
|
||||
* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
|
||||
|
|
|
|||
|
|
@ -4,6 +4,17 @@ title: Code
|
|||
group: content
|
||||
---
|
||||
|
||||
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
{% 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 Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
||||
|
||||
Styles for inline code snippets and longer, multiline blocks of code.
|
||||
|
||||
## Contents
|
||||
|
|
|
|||
|
|
@ -4,6 +4,17 @@ title: Figures
|
|||
group: content
|
||||
---
|
||||
|
||||
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
{% 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 Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
||||
|
||||
Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
|
||||
|
||||
Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
|
||||
|
|
|
|||
|
|
@ -4,6 +4,17 @@ title: Images
|
|||
group: content
|
||||
---
|
||||
|
||||
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
{% 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 Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
||||
|
||||
Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
|
||||
|
||||
## Contents
|
||||
|
|
|
|||
|
|
@ -5,6 +5,17 @@ group: content
|
|||
redirect_from: "/content/"
|
||||
---
|
||||
|
||||
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
{% 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 Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
||||
|
||||
Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.
|
||||
|
||||
Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
|
||||
|
|
|
|||
|
|
@ -4,6 +4,17 @@ title: Tables
|
|||
group: content
|
||||
---
|
||||
|
||||
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
{% 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 Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
||||
|
||||
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
|
||||
|
||||
## Contents
|
||||
|
|
|
|||
|
|
@ -4,6 +4,17 @@ title: Typography
|
|||
group: content
|
||||
---
|
||||
|
||||
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
{% 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 Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
||||
|
||||
Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/components/utilities/).
|
||||
|
||||
## Contents
|
||||
|
|
@ -72,7 +83,7 @@ Use the included utility classes to recreate the small secondary heading text fr
|
|||
|
||||
{% example html %}
|
||||
<h3>
|
||||
Fancy display heading
|
||||
Fancy heading
|
||||
<small class="text-muted">With faded secondary text</small>
|
||||
</h3>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ title: Examples
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -5,8 +5,8 @@
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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,8 +5,8 @@
|
|||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,432 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Grid system
|
||||
group: layout
|
||||
---
|
||||
|
||||
Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and has multiple tiers, one for each [media query range]({{ site.baseurl }}/layout/overview/#responsive-breakpoints). You can use it with Sass mixins or our predefined classes.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## How it works
|
||||
|
||||
At a high level, here's how the grid system works:
|
||||
|
||||
- There are three major components—containers, rows, and columns.
|
||||
- Containers—`.container` for fixed width or `.container-fluid` for full width—center your site's contents and help align your grid content.
|
||||
- Rows are horizontal groups of columns that ensure your columns are lined up properly.
|
||||
- Content should be placed within columns, and only columns may be immediate children of rows.
|
||||
- Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So if you want three equal-width columns, you'd use `.col-sm-4`.
|
||||
- Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element.
|
||||
- Columns have horizontal `padding` to create the gutters between individual columns.
|
||||
- There are five grid tiers, one for each [responsive breakpoint]({{ site.baseurl }}/layout/overview/#responsive-breakpoints): extra small, small, medium, large, and extra large.
|
||||
- Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices).
|
||||
- You can use predefined grid classes or Sass mixins for more semantic markup.
|
||||
|
||||
Sounds good? Great, let's move on to seeing all that in an example.
|
||||
|
||||
## Quick start example
|
||||
|
||||
If you're using Bootstrap's compiled CSS, this the example you'll want to start with.
|
||||
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
The above example creates three equal-width columns on small, medium, large, and extra large devices using our [predefined grid classes](#predefined-classes). Those columns are centered in the page with the parent `.container`.
|
||||
|
||||
## Grid options
|
||||
|
||||
While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths.
|
||||
This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).
|
||||
|
||||
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="text-center">
|
||||
Extra small<br>
|
||||
<small><544px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Small<br>
|
||||
<small>≥544px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Medium<br>
|
||||
<small>≥768px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Large<br>
|
||||
<small>≥992px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Extra large<br>
|
||||
<small>≥1200px</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Grid behavior</th>
|
||||
<td>Horizontal at all times</td>
|
||||
<td colspan="4">Collapsed to start, horizontal above breakpoints</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Container width</th>
|
||||
<td>None (auto)</td>
|
||||
<td>576px</td>
|
||||
<td>720px</td>
|
||||
<td>940px</td>
|
||||
<td>1140px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Class prefix</th>
|
||||
<td><code>.col-xs-</code></td>
|
||||
<td><code>.col-sm-</code></td>
|
||||
<td><code>.col-md-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
<td><code>.col-xl-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row"># of columns</th>
|
||||
<td colspan="5">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Gutter width</th>
|
||||
<td colspan="5">1.875rem / 30px (15px on each side of a column)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Nestable</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Offsets</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Column ordering</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## Sass mixins
|
||||
|
||||
When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [predefined grid classes](#predefined-classes) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
|
||||
|
||||
### Variables
|
||||
|
||||
Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
|
||||
|
||||
{% highlight scss %}
|
||||
$grid-breakpoints: (
|
||||
// Extra small screen / phone
|
||||
xs: 0,
|
||||
// Small screen / phone
|
||||
sm: 544px,
|
||||
// Medium screen / tablet
|
||||
md: 768px,
|
||||
// Large screen / desktop
|
||||
lg: 992px,
|
||||
// Extra large screen / wide desktop
|
||||
xl: 1200px
|
||||
);
|
||||
|
||||
|
||||
$grid-columns: 12;
|
||||
$grid-gutter-width: 1.875rem;
|
||||
{% endhighlight %}
|
||||
|
||||
### Mixins
|
||||
|
||||
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
|
||||
|
||||
{% highlight scss %}
|
||||
// Creates a wrapper for a series of columns
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
margin-left: ($gutter / -2);
|
||||
margin-right: ($gutter / -2);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// Make the element grid-ready (applying everything but the width)
|
||||
@mixin make-col($gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
}
|
||||
|
||||
// Set a width (to be used in or out of media queries)
|
||||
@mixin make-col-span($columns) {
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
|
||||
// Get fancy by offsetting, or changing the sort order
|
||||
@mixin make-col-offset($columns) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
@mixin make-col-push($columns) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
@mixin make-col-pull($columns) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
### Example usage
|
||||
|
||||
You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
|
||||
|
||||
See it in action in <a href="http://jsbin.com/ruxona/edit">this rendered example</a>.
|
||||
|
||||
{% highlight scss %}
|
||||
.container {
|
||||
max-width: 60em;
|
||||
@include make-container();
|
||||
}
|
||||
.row {
|
||||
@include make-row();
|
||||
}
|
||||
.content-main {
|
||||
@include make-col();
|
||||
|
||||
@media (max-width: 32em) {
|
||||
@include make-col-span(6);
|
||||
}
|
||||
@media (min-width: 32.1em) {
|
||||
@include make-col-span(8);
|
||||
}
|
||||
}
|
||||
.content-secondary {
|
||||
@include make-col();
|
||||
|
||||
@media (max-width: 32em) {
|
||||
@include make-col-span(6);
|
||||
}
|
||||
@media (min-width: 32.1em) {
|
||||
@include make-col-span(4);
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="content-main">...</div>
|
||||
<div class="content-secondary">...</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
## Predefined classes
|
||||
|
||||
In addition to our semantic mixins, Bootstrap includes an extensive set of prebuilt classes for quickly creating grid columns. It includes options for device-based column sizing, reordering columns, and more.
|
||||
|
||||
### Example: Stacked-to-horizontal
|
||||
|
||||
Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-8">.col-md-8</div>
|
||||
<div class="col-md-4">.col-md-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-md-6">.col-md-6</div>
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
### Example: Mobile and desktop
|
||||
|
||||
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
|
||||
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
|
||||
<!-- Columns are always 50% wide, on mobile and desktop -->
|
||||
<div class="row">
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
### Example: Mobile, tablet, desktop
|
||||
|
||||
Build on the previous example by creating even more dynamic and powerful layouts with tablet `.col-sm-*` classes.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<!-- Optional: clear the XS cols if their content doesn't match in height -->
|
||||
<div class="clearfix hidden-sm-up"></div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
### Example: Column wrapping
|
||||
|
||||
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-xs-9">.col-xs-9</div>
|
||||
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
|
||||
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
### Example: Responsive column resets
|
||||
|
||||
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes]({{ site.baseurl }}/layout/responsive-utilities/).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
|
||||
<!-- Add the extra clearfix for only the required viewport -->
|
||||
<div class="clearfix hidden-sm-up"></div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
In addition to column clearing at responsive breakpoints, you may need to **reset offsets, pushes, or pulls**. See this in action in [the grid example]({{ site.baseurl }}/examples/grid/).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
|
||||
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
|
||||
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
### Example: Offsetting columns
|
||||
|
||||
Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.col-md-offset-4` moves `.col-md-4` over four columns.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
### Example: Nesting columns
|
||||
|
||||
To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
Level 1: .col-sm-9
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-sm-6">
|
||||
Level 2: .col-xs-8 .col-sm-6
|
||||
</div>
|
||||
<div class="col-xs-4 col-sm-6">
|
||||
Level 2: .col-xs-4 .col-sm-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
### Example: Column ordering
|
||||
|
||||
Easily change the order of our built-in grid columns with `.col-md-push-*` and `.col-md-pull-*` modifier classes.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
|
||||
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
|
@ -1,173 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Media object
|
||||
group: layout
|
||||
---
|
||||
|
||||
The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) is an abstract element used as the basis for building more complex and repetitive components (like blog comments, Tweets, etc). Included is support for left and right aligned content, content alignment options, nesting, and more.
|
||||
|
||||
{% callout info %}
|
||||
**Heads up!** When [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) is enabled, the media object will use `flex` styles wherever possible.
|
||||
{% endcallout %}
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Default media
|
||||
|
||||
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
|
||||
|
||||
{% example html %}
|
||||
<div class="media">
|
||||
<a class="media-left" href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Nesting
|
||||
|
||||
Media components can also be nested.
|
||||
|
||||
{% example html %}
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<div class="media">
|
||||
<a class="media-left" href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Alignment
|
||||
|
||||
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
|
||||
|
||||
{% example html %}
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Top aligned media</h4>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="media">
|
||||
<div class="media-left media-middle">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Middle aligned media</h4>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="media">
|
||||
<div class="media-left media-bottom">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Bottom aligned media</h4>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Media list
|
||||
|
||||
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
|
||||
|
||||
{% example html %}
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<div class="media-left">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="media-left" href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Overview
|
||||
group: layout
|
||||
redirect_from: "/layout/"
|
||||
---
|
||||
|
||||
Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
|
||||
|
||||
## Containers
|
||||
|
||||
Containers are the most basic layout element in Bootstrap and are **required when using our grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time).
|
||||
|
||||
While containers *can* be nested, most layouts do not require a nested container.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="bd-example-container">
|
||||
<div class="bd-example-container-header"></div>
|
||||
<div class="bd-example-container-sidebar"></div>
|
||||
<div class="bd-example-container-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="container">
|
||||
<!-- Content here -->
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="bd-example-container bd-example-container-fluid">
|
||||
<div class="bd-example-container-header"></div>
|
||||
<div class="bd-example-container-sidebar"></div>
|
||||
<div class="bd-example-container-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="container-fluid">
|
||||
...
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
## Responsive breakpoints
|
||||
|
||||
Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
|
||||
|
||||
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
|
||||
|
||||
{% highlight scss %}
|
||||
// Extra small devices (portrait phones, less than 34em)
|
||||
// No media query since this is the default in Bootstrap
|
||||
|
||||
// Small devices (landscape phones, 34em and up)
|
||||
@media (min-width: 34em) { ... }
|
||||
|
||||
// Medium devices (tablets, 48em and up)
|
||||
@media (min-width: 48em) { ... }
|
||||
|
||||
// Large devices (desktops, 62em and up)
|
||||
@media (min-width: 62em) { ... }
|
||||
|
||||
// Extra large devices (large desktops, 75em and up)
|
||||
@media (min-width: 75em) { ... }
|
||||
{% endhighlight %}
|
||||
|
||||
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
|
||||
|
||||
{% highlight scss %}
|
||||
@include media-breakpoint-up(xs) { ... }
|
||||
@include media-breakpoint-up(sm) { ... }
|
||||
@include media-breakpoint-up(md) { ... }
|
||||
@include media-breakpoint-up(lg) { ... }
|
||||
@include media-breakpoint-up(xl) { ... }
|
||||
|
||||
// Example usage:
|
||||
@include media-breakpoint-up(sm) {
|
||||
.some-class {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
|
||||
|
||||
{% highlight scss %}
|
||||
// Extra small devices (portrait phones, less than 34em)
|
||||
@media (max-width: 33.9em) { ... }
|
||||
|
||||
// Small devices (landscape phones, less than 48em)
|
||||
@media (max-width: 47.9em) { ... }
|
||||
|
||||
// Medium devices (tablets, less than 62em)
|
||||
@media (max-width: 61.9em) { ... }
|
||||
|
||||
// Large devices (desktops, less than 75em)
|
||||
@media (max-width: 74.9em) { ... }
|
||||
|
||||
// Extra large devices (large desktops)
|
||||
// No media query since the extra-large breakpoint has no upper bound on its width
|
||||
{% endhighlight %}
|
||||
|
||||
Once again, these media queries are also available via Sass mixins:
|
||||
|
||||
{% highlight scss %}
|
||||
@include media-breakpoint-down(xs) { ... }
|
||||
@include media-breakpoint-down(sm) { ... }
|
||||
@include media-breakpoint-down(md) { ... }
|
||||
@include media-breakpoint-down(lg) { ... }
|
||||
@include media-breakpoint-down(xl) { ... }
|
||||
{% endhighlight %}
|
||||
|
|
@ -1,230 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Responsive utilities
|
||||
group: layout
|
||||
---
|
||||
|
||||
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
|
||||
|
||||
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
|
||||
|
||||
## Available classes
|
||||
|
||||
* The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports.
|
||||
* The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports).
|
||||
* There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
|
||||
* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless.
|
||||
* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
Extra small devices
|
||||
<small>Portrait phones (<34em)</small>
|
||||
</th>
|
||||
<th>
|
||||
Small devices
|
||||
<small>Landscape phones (≥34em)</small>
|
||||
</th>
|
||||
<th>
|
||||
Medium devices
|
||||
<small>Tablets (≥48em)</small>
|
||||
</th>
|
||||
<th>
|
||||
Large devices
|
||||
<small>Desktops (≥62em)</small>
|
||||
</th>
|
||||
<th>
|
||||
Extra large devices
|
||||
<small>Desktops (≥75em)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xs-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-sm-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-md-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-lg-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xl-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xs-up</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-sm-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-md-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-lg-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xl-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2 id="responsive-utilities-print">Print classes</h2>
|
||||
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Browser</th>
|
||||
<th>Print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-print-block</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: block</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-print-inline</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: inline</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-print-inline-block</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-print</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## Test cases
|
||||
|
||||
Resize your browser or load on different devices to test the responsive utility classes.
|
||||
|
||||
Green checkmarks indicate the element **is visible** in your current viewport.
|
||||
|
||||
<div class="row responsive-utilities-test visible-on">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-sm-up visible">✔ Visible on extra small</span>
|
||||
<span class="hidden-xs-down not-visible">Extra small</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-md-up visible">✔ Visible on small or narrower</span>
|
||||
<span class="hidden-sm-down not-visible">Small or narrower</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-lg-up visible">✔ Visible on medium or narrower</span>
|
||||
<span class="hidden-md-down not-visible">Medium or narrower</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-xl-up visible">✔ Visible on large or narrower</span>
|
||||
<span class="hidden-lg-down not-visible">Large or narrower</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row responsive-utilities-test visible-on">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-xs-down visible">✔ Visible on small or wider</span>
|
||||
<span class="hidden-sm-up not-visible">Small or wider</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-sm-down visible">✔ Visible on medium or wider</span>
|
||||
<span class="hidden-md-up not-visible">Medium or wider</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-md-down visible">✔ Visible on large or wider</span>
|
||||
<span class="hidden-lg-up not-visible">Large or wider</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-lg-down visible">✔ Visible on extra large</span>
|
||||
<span class="hidden-xl-up not-visible">Extra large</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row responsive-utilities-test visible-on">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-sm-up visible">✔ Your viewport is exactly extra small</span>
|
||||
<span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-xs-down hidden-md-up visible">✔ Your viewport is exactly small</span>
|
||||
<span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-sm-down hidden-lg-up visible">✔ Your viewport is exactly medium</span>
|
||||
<span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-md-down hidden-xl-up visible">✔ Your viewport is exactly large</span>
|
||||
<span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<span class="hidden-lg-down visible">✔ Your viewport is exactly extra large</span>
|
||||
<span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,25 +67,25 @@ group: material-design
|
|||
## Floating Action
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<button type="button" class="btn btn-primary mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-fab">
|
||||
<button type="button" class="btn btn-secondary mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-fab">
|
||||
<button type="button" class="btn btn-success mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-info btn-fab">
|
||||
<button type="button" class="btn btn-info mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-fab">
|
||||
<button type="button" class="btn btn-warning mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-fab">
|
||||
<button type="button" class="btn btn-danger mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-fab active">
|
||||
<button type="button" class="btn btn-danger mdb-btn-fab active">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
|
@ -93,22 +93,22 @@ group: material-design
|
|||
### Disabled
|
||||
{% example html %}
|
||||
<fieldset disabled>
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<button type="button" class="btn btn-primary mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-fab">
|
||||
<button type="button" class="btn btn-secondary mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-fab">
|
||||
<button type="button" class="btn btn-success mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-info btn-fab">
|
||||
<button type="button" class="btn btn-info mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-fab">
|
||||
<button type="button" class="btn btn-warning mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-fab">
|
||||
<button type="button" class="btn btn-danger mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
</fieldset>
|
||||
|
|
@ -116,22 +116,22 @@ group: material-design
|
|||
|
||||
### Sizes
|
||||
|
||||
Using `btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing element of a `btn-fab` renders a small variation.
|
||||
Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing element of a `mdb-btn-fab` renders a small variation.
|
||||
|
||||
{% example html %}
|
||||
<span class="btn-group-lg">
|
||||
<button type="button" class="btn btn-danger btn-fab">
|
||||
<button type="button" class="btn btn-danger mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
</span>
|
||||
<button type="button" class="btn btn-danger btn-fab">
|
||||
<button type="button" class="btn btn-danger mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-fab btn-fab-sm">
|
||||
<button type="button" class="btn btn-danger mdb-btn-fab mdb-btn-fab-sm">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<span class="btn-group-sm">
|
||||
<button type="button" class="btn btn-danger btn-fab">
|
||||
<button type="button" class="btn btn-danger mdb-btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -95,48 +95,49 @@ Below is a complete list of options supported by Material Design for Bootstrap a
|
|||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-form-group`{% endmarkdown %}
|
||||
<code>.mdb-form-group</code>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
Any group of form controls
|
||||
Any group of form controls (e.g. combination of label/input).
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}This is automatically added by javascript, but if your code is templated, adding `.mdb-form-group`
|
||||
to your form groups or otherwise your groups of controls can reduce rendering churn since the javascript will not
|
||||
add the class after the initial page rendering.{% endmarkdown %}
|
||||
add the class after the initial page rendering. This can also demarcate complex label/input combinations inside the
|
||||
same `.form-group`.{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-label-floating`{% endmarkdown %}
|
||||
<code>.mdb-form-group-sm</code>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
{% markdown %}Added to the `.mdb-form-group`, this will render the combination label/input/help in the smaller variation.{% endmarkdown %}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}TODO{% endmarkdown %}
|
||||
{% markdown %}{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-label-static`{% endmarkdown %}
|
||||
<code>.mdb-form-group-lg</code>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
{% markdown %}Added to the `.mdb-form-group`, this will render the combination label/input/help in the larger variation.{% endmarkdown %}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}TODO{% endmarkdown %}
|
||||
{% markdown %}{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% markdown %}`.mdb-label-placeholder`{% endmarkdown %}
|
||||
<code>.mdb-help</code>
|
||||
</td>
|
||||
<td class="text-nowrap">
|
||||
Any help text
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}TODO{% endmarkdown %}
|
||||
{% markdown %}Mark any help text next to an input with `.mdb-help` to gain behaviors such as showing upon focus.{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -146,12 +147,11 @@ Below is a complete list of options supported by Material Design for Bootstrap a
|
|||
### Form groups
|
||||
|
||||
The `.mdb-form-group` class is usually added to the `.form-group` element. Whereas the `.form-group` adds structure to forms by providing `margin-bottom` around a label and control pairing,
|
||||
the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors. Decorations and size variations are intended to be specified on
|
||||
this element e.g. `.mdb-label-floating`. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`.
|
||||
the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors for a combination of label/input. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`.
|
||||
|
||||
The `.mdb-form-group` is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard
|
||||
markup. If your code is templated, you may want to add `.mdb-form-group` to the markup directly to prevent any rendering churn from the javascript determining
|
||||
and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the `.mdb-form-group`, so in rare cases
|
||||
and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the `.mdb-form-group`, so in rare or complex cases
|
||||
you may need to wrap your markup in an `.mdb-form-group` to get appropriate focus/hover behavior.
|
||||
|
||||
{% example html %}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,56 @@ title: Labels
|
|||
group: material-design
|
||||
---
|
||||
|
||||
Below is a complete list of `<label>` class options supported by Material Design for Bootstrap:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Classes</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.mdb-label-static</code>
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}Statically positioned above the input{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.mdb-label-placeholder</code>
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}
|
||||
Renders a `<label>` as a placeholder
|
||||
|
||||
- _focused_: not visible after first keystroke
|
||||
- _unfocused & empty_: placeholder
|
||||
- _unfocused & filled_: not visible
|
||||
- do not use the placeholder attribute with this option
|
||||
{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.mdb-label-floating</code>
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}
|
||||
Animated combination of placeholder and label:
|
||||
|
||||
- _focused_: label animates from placeholder to static label
|
||||
- _unfocused & empty_: placeholder
|
||||
- _unfocused & filled_: renders the same as `.mdb-label-static`
|
||||
{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ The most notable changes are summarized immediately below, followed by more spec
|
|||
**Heads up!** This will be in flux as work on the v4 alphas progresses. Until then consider it incomplete, and we'd love pull requests to help keep it up to date.
|
||||
{% endcallout %}
|
||||
|
||||
{% callout info %}
|
||||
These migration changes are for MDB, and should be considered **in addition** to the [Bootstrap migration guidelines](http://v4-alpha.getbootstrap.com/migration/).
|
||||
{% endcallout %}
|
||||
|
||||
## Summary
|
||||
|
||||
Here are the big ticket items you'll want to be aware of when moving from MDB v3 to v4.
|
||||
|
|
@ -23,96 +27,74 @@ Here are the big ticket items you'll want to be aware of when moving from MDB v3
|
|||
### Global changes
|
||||
|
||||
- Switched from [Less](http://lesscss.org/) to [SCSS](http://sass-lang.com/) for our source CSS files.
|
||||
- No longer a theme that overrides Bootstrap, instead it is a full customization of Bootstrap.
|
||||
- Switched from `px` to `rem` as our primary CSS unit.
|
||||
- Global font-size increased from `14px` to `16px`.
|
||||
- Added a new grid tier for ~`480px` and below.
|
||||
- Replaced the separate optional theme with configurable options via SCSS variables (e.g., `$enable-gradients: true`).
|
||||
- Switched Javascript to ES6 classes
|
||||
- Globally switched MDB variables and classes to the prefix `mdb-` to avoid confusion with Bootstrap variables.
|
||||
- Added strong scss-lint and eslint rules from Bootstrap
|
||||
- Adopted Bootstrap project organization and Build structure
|
||||
- Reference documentation is now synced from Bootstrap, rendered with MDB to show default rendering examples
|
||||
- File renaming to be equivalent to Bootstrap files
|
||||
|
||||
### Components
|
||||
|
||||
- Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
|
||||
- Dropped the Glyphicons icon font. If you need icons, some options are:
|
||||
- the upstream version of [Glyphicons](http://glyphicons.com/)
|
||||
- [Octicons](https://octicons.github.com/)
|
||||
- [Font Awesome](https://fortawesome.github.io/Font-Awesome/)
|
||||
- Dropped the Affix jQuery plugin. We recommend using a `position: sticky` polyfill instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations.
|
||||
- If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library.
|
||||
- Bootstrap dropped panels, thumbnails, and wells for a new all-encompassing component, cards (now part of BS4).
|
||||
- Refactored nearly all components to use more unnested classes instead of children selectors.
|
||||
|
||||
### Misc
|
||||
- Non-responsive usage of Material Design for Bootstrap is no longer supported.
|
||||
- Dropped the online Customizer in favor of more extensive setup documentation and customized builds.
|
||||
|
||||
|
||||
## By component
|
||||
|
||||
This list highlights key changes by component between v3.x.x and v4.0.0.
|
||||
|
||||
### Reboot
|
||||
### State variants
|
||||
- Removed any state variant that didn't already exist in Bootstrap
|
||||
- Removed use of generic variant mixin
|
||||
|
||||
New to Material Design for Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border` change, moving from `rem` to `em` units on many elements, link styles, and many form element resets.
|
||||
|
||||
### Typography
|
||||
|
||||
- Moved all `.text-` utilities to the `_utilities.scss` file.
|
||||
- Dropped the `.page-header` class entirely.
|
||||
- `.dl-horizontal` now requires grid classes, increasing flexbility in column widths.
|
||||
- Custom `<blockquote>` styling has moved to classes—`.blockquote` and the `.blockquote-reverse` modifier.
|
||||
|
||||
### Images
|
||||
|
||||
- Renamed `.img-responsive` to `.img-fluid`.
|
||||
### [Typography](../content/typography)
|
||||
- Refactored and compared to spec. Aim to be spec compliant.
|
||||
- Added dynamic size/color markers to Bootstrap reference documentation
|
||||
|
||||
### Tables
|
||||
- TODO
|
||||
|
||||
- Nearly all instances of the `>` selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.
|
||||
- Responsive tables no longer require a wrapping element. Instead, just put the `.table-responsive` right on the `<table>`.
|
||||
- Renamed `.table-condensed` to `.table-sm` for consistency.
|
||||
- Added a new `.table-inverse` option.
|
||||
- Added a new `.table-reflow` option.
|
||||
- Added table header modifers: `.thead-default` and `.thead-inverse`
|
||||
### [Forms](../material-design/forms)
|
||||
- Refactored with much less code now that we are customizing Bootstrap
|
||||
- Simpler selectors
|
||||
- Introduced `.mdb-form-group` to provide demarcation for label/input combinations, disconnecting it explicitly from `.form-group` so that they can be used independently.
|
||||
- Spec review for sizing
|
||||
- Bootstrap removed `.help-block`, MDB added `.mdb-help` class to mark added behaviors.
|
||||
- Inverted marker class to use `.is-filled` instead of `.is-empty` for simpler css matches
|
||||
- Bootstrap removed `.form-group-sm` and `.form-group-lg`. `.mdb-form-group-*` variants added to address sizing combinations of label/input/help
|
||||
- V3 MDB `toggle` is now `mdb-switch` for more consistent naming with the spec
|
||||
- TODO - File Input
|
||||
|
||||
### Forms
|
||||
### [Labels](../material-design/labels)
|
||||
- Labels are now (once again) set as a class on the `label` element.
|
||||
- Use of `mdb-` prefixes.
|
||||
|
||||
- Moved element resets to the `_reboot.scss` file.
|
||||
- Renamed `.control-label` to `.form-control-label`.
|
||||
- Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively.
|
||||
- Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now.
|
||||
- Horizontal forms overhauled:
|
||||
- Dropped the `.form-horizontal` class requirement.
|
||||
- `.form-group` no longer mixins the `.row` class, so it's now required for grid layouts.
|
||||
- Added new `.form-control-label` class to vertically center labels with `.form-control`s.
|
||||
### [Buttons](../material-design/buttons)
|
||||
- Bootstrap renamed `.btn-default` to `.btn-secondary`.
|
||||
- Utilized Bootstrap mixins for plain/hover/focus/active
|
||||
- Introduced mixin `mdb-hover-focus-active` to address `.active` in addition to Bootstraps `hover-focus-active`
|
||||
- Refactored shadow behaviors, now more consistent
|
||||
- Changed `btn-fab` to `mdb-btn-fab` to denote MDB only component
|
||||
- `btn-fab-mini` is now `btn-fab-sm` for consistency with Bootstrap size naming
|
||||
- Introduced shadow behaviors to `mdb-btn-fab`. Spec is silent on this.
|
||||
|
||||
### Buttons
|
||||
|
||||
- Renamed `.btn-default` to `.btn-secondary`.
|
||||
|
||||
### Grid system
|
||||
|
||||
- Added a new `~480px` grid breakpoint, meaning there are now five total tiers.
|
||||
|
||||
### Buttons
|
||||
|
||||
- Dropped the `.btn-xs` class entirely.
|
||||
|
||||
### Button group
|
||||
|
||||
- Dropped the `.btn-group-xs` class entirely.
|
||||
|
||||
### Navs
|
||||
|
||||
- Dropped nearly all `>` selectors for simpler styling via un-nested classes.
|
||||
- Instead of HTML-specific selectors like `.nav > li > a`, we use separate classes for `.nav`s, `.nav-item`s, and `.nav-link`s. This makes your HTML more flexible while bringing along increased extensibility.
|
||||
- Started over
|
||||
- Initial focus on `nav-tabs`, `nav-pills`, and `navbar-nav`
|
||||
|
||||
### Pager
|
||||
|
||||
- Renamed `.previous` and `.next` to `.pager-prev` and `.pager-next`.
|
||||
|
||||
### Panels, thumbnails, and wells
|
||||
|
||||
Dropped entirely for the new card component.
|
||||
|
||||
#### Panels
|
||||
|
||||
Guidance included from Bootstrap's documentation:
|
||||
|
||||
- `.panel` to `.card`
|
||||
- `.panel-default` removed and no replacement
|
||||
- `.panel-heading` to `.card-header`
|
||||
|
|
@ -125,73 +107,28 @@ Dropped entirely for the new card component.
|
|||
- `.panel-warning` to `.card-warning` and `.card-inverse`
|
||||
- `.panel-danger` to `.card-danger` and `.card-inverse`
|
||||
|
||||
### Carousel
|
||||
### Cards
|
||||
|
||||
- Renamed `.item` to `.carousel-item`.
|
||||
- Started over with the introduction of cards in Bootstrap V4.
|
||||
|
||||
## Documentation
|
||||
|
||||
Our documentation received an upgrade across the board as well. Here's the low down:
|
||||
|
||||
- We're still using Jekyll, but we have custom plugins in the mix:
|
||||
- We're using Jekyll (seeded from Bootstrap's project itself) and we have custom plugins in the mix:
|
||||
- `example.rb` is a fork of the default `highlight.rb` plugin, allowing for easier example-code handling.
|
||||
- `callout.rb` is a similar fork of that, but designed for our special docs callouts.
|
||||
- `variables.rb` which gathers the version (`package.json`), dependencies (`bower.json`) and makes them available to render text and links in the documentation `site.data`. No more SED to replace versions everywhere!
|
||||
- All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
|
||||
- Pages have been reorganized for simpler content and a more approachable hierarchy.
|
||||
- We moved from regular CSS to SCSS to take full advantage of Material Design for Bootstrap's variables, mixins, and more.
|
||||
- We moved from regular CSS to SCSS to take full advantage of variables, mixins, and more.
|
||||
|
||||
|
||||
## What's new
|
||||
|
||||
We've added new components and changed some existing ones. Here are the new or updated styles.
|
||||
|
||||
| Component | Description |
|
||||
| --- | --- |
|
||||
| Cards | New, more flexible component to replace v3's panels, thumbnails, and wells. |
|
||||
| New navbar | Replaces the previous navbar with a new, simpler component. |
|
||||
| New progress bars | Replaces the old `.progress` `<div>` with a real `<progress>` element. |
|
||||
| New table variants | Adds `.table-inverse`, table head options, replaces `.table-condensed` with `.table-sm`, and `.table-reflow`. |
|
||||
| New utility classes | |
|
||||
|
||||
TODO: audit new classes that didn't exist in v3
|
||||
TODO
|
||||
|
||||
## What's removed
|
||||
The following components have been removed in v4.0.0.
|
||||
|
||||
| Component | Removed from 3.x.x | 4.0.0 Equivalent |
|
||||
| --- | --- | --- |
|
||||
| Panels | | Cards |
|
||||
| Thumbnails | | Cards |
|
||||
| Wells | | Cards |
|
||||
| Justified navs | | |
|
||||
|
||||
TODO: audit classes in v3 that aren't present in v4
|
||||
|
||||
### Responsive utilities
|
||||
|
||||
The following deprecated variables have been removed in v4.0.0:
|
||||
|
||||
* `@screen-phone`, `@screen-tablet`, `@screen-desktop`, `@screen-lg-desktop`. Use the more abstract `$screen-{xs,sm,md,lg,xl}-*` variables instead.
|
||||
* `@screen-sm`, `@screen-md`, `@screen-lg`. Use the more clearly named `$screen-{xs,sm,md,lg,xl}-min` variables instead.
|
||||
* `@screen-xs`, `@screen-xs-min`. The extra small breakpoint has no lower bound, so these variables were logically absurd. Reformulate your expression in terms of `$screen-xs-max` instead.
|
||||
|
||||
The responsive utility classes have also been overhauled.
|
||||
|
||||
- The old classes (`.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`) are gone.
|
||||
- They have been replaced by `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`.
|
||||
- The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or larger (e.g. `.hidden-md-up` hides an element on medium, large, and extra-large devices).
|
||||
- The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller (e.g. `.hidden-md-down` hides an element on extra-small, small, and medium devices).
|
||||
|
||||
Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes (e.g. `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large devices).
|
||||
|
||||
Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results (e.g. `.hidden-md` is more similar to `.hidden-lg-down` than to `.hidden-md-down`). The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.
|
||||
|
||||
## Misc notes to prioritize
|
||||
|
||||
- Removed the `min--moz-device-pixel-ratio` typo hack for retina media queries
|
||||
- Dropped `.hidden` and `.show` because they conflict with jQuery's `$(...).hide()` and `$(...).show()` methods.
|
||||
- Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility).
|
||||
|
||||
TODO: audit list of stuff in v3 that was marked as deprecated
|
||||
|
||||
## Additional notes
|
||||
- Removed support for styled nested tables (for now)
|
||||
TODO
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
// - colored, add their text and bg
|
||||
// - hover color contrasted
|
||||
// - shared shadow state on hover/active/focus
|
||||
&.btn-fab,
|
||||
&.mdb-btn-fab,
|
||||
&.btn-raised,
|
||||
.btn-group-raised & {
|
||||
@include mdb-button-colored();
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
|
||||
// https://www.google.com/design/spec/components/buttons-floating-action-button.html
|
||||
&.btn-fab {
|
||||
&.mdb-btn-fab {
|
||||
// see above for color variations
|
||||
width: $mdb-btn-fab-size;
|
||||
min-width: $mdb-btn-fab-size;
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.btn-fab-sm,
|
||||
&.mdb-btn-fab-sm,
|
||||
.btn-group-sm & {
|
||||
width: $mdb-btn-fab-size-mini;
|
||||
min-width: $mdb-btn-fab-size-mini;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
//.dropdown-menu {
|
||||
// border: 0;
|
||||
// box-shadow: 0 2px 5px 0 $gray-light;
|
||||
// .divider {
|
||||
// background-color: rgba(229, 229, 229, 0.12);
|
||||
// }
|
||||
// li {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// a:hover {
|
||||
// color: $brand-primary;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
|
||||
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px 0 $gray-light;
|
||||
//.divider {
|
||||
// background-color: rgba(229, 229, 229, 0.12);
|
||||
//}
|
||||
li {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
a:hover {
|
||||
color: $brand-primary;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user