mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-09 08:10:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

implemented bs4 docs copy to keep default samples in sync

Browse Source
This commit is contained in:
Kevin Ross 2015-12-03 14:18:30 -06:00
parent 0553b962c7
commit d03ae8c270
6 changed files with 81 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Gruntfile.js
View File

@ -330,7 +330,7 @@ module.exports = function (grunt) {
],
dest: 'docs/dist/'
},
'bs-docs': {
'bs-docs-components': {
expand: true,
cwd: '../bootstrap/docs/components',
src: [
@ -549,7 +549,7 @@ module.exports = function (grunt) {
grunt.registerTask('docs-css', ['sass:docs', 'postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
grunt.registerTask('docs-js', ['uglify:docsJs']);
grunt.registerTask('lint-docs-js', ['jscs:assets']);
grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
grunt.registerTask('docs', ['copy:bs-docs-components', 'docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
grunt.registerTask('prep-release', ['dist', 'docs', 'jekyll:github', 'htmlmin', 'compress']);

22
docs/components/card.md
View File

@ -130,13 +130,13 @@ You can quickly change the text alignment of any card—in its entirety or speci
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-block text-center">
<div class="card card-block text-xs-center">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-block text-right">
<div class="card card-block text-xs-right">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
@ -186,7 +186,7 @@ Add an optional header and/or footer within a card.
{% endexample %}
{% example html %}
<div class="card text-center">
<div class="card text-xs-center">
<div class="card-header">
Featured
</div>
@ -260,7 +260,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
{% example html %}
<div class="card card-inverse card-primary text-center">
<div class="card card-inverse card-primary text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -268,7 +268,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-success text-center">
<div class="card card-inverse card-success text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -276,7 +276,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-info text-center">
<div class="card card-inverse card-info text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -284,7 +284,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-warning text-center">
<div class="card card-inverse card-warning text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -292,7 +292,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-danger text-center">
<div class="card card-inverse card-danger text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -409,7 +409,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block card-inverse card-primary text-center">
<div class="card card-block card-inverse card-primary text-xs-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
@ -419,7 +419,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
</footer>
</blockquote>
</div>
<div class="card card-block text-center">
<div class="card card-block text-xs-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -427,7 +427,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
<div class="card">
<img class="card-img" data-src="holder.js/100px260/" alt="Card image">
</div>
<div class="card card-block text-right">
<div class="card card-block text-xs-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>

6
docs/components/list-group.md
View File

@ -31,15 +31,15 @@ Add labels to any list group item to show unread counts, activity, etc.
{% example html %}
<ul class="list-group">
<li class="list-group-item">
<span class="label label-default label-pill pull-right">14</span>
<span class="label label-default label-pill pull-xs-right">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="label label-default label-pill pull-right">2</span>
<span class="label label-default label-pill pull-xs-right">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="label label-default label-pill pull-right">1</span>
<span class="label label-default label-pill pull-xs-right">1</span>
Morbi leo risus
</li>
</ul>

10
docs/components/navbar.md
View File

@ -17,7 +17,7 @@ Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` and a [color scheme](#color-schemes).
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use `.pull-left` and `.pull-right` to quickly align sub-components.
- Use `.pull-*-left` and `.pull-*-right` to quickly align sub-components.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
## Supported content
@ -48,7 +48,7 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
@ -78,7 +78,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-info-outline" type="submit">Search</button>
</form>
@ -99,7 +99,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary-outline" type="submit">Search</button>
</form>
@ -120,7 +120,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary-outline" type="submit">Search</button>
</form>

36
docs/components/navs.md
View File

@ -17,7 +17,7 @@ If you are using navs to provide a navigation bar, be sure to add a `role="navig
## Base nav
Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but **not the active state**.
Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this by specifying additional styles. Includes styles for the disabled state, but **not the active state**.
{% example html %}
<ul class="nav">
@ -36,7 +36,7 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
</ul>
{% endexample %}
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element.
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. The change in nav item display below **is intentional** as `<li>`s have a different default `display` than regular `<a>` elements.
{% example html %}
<nav class="nav">
@ -47,6 +47,38 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
</nav>
{% endexample %}
## Inline
Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
{% example html %}
<nav class="nav nav-inline">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
The same works for a navigation built with lists.
{% example html %}
<ul class="nav nav-inline">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
## Tabs
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).

42
docs/components/utilities.md
View File

@ -94,13 +94,23 @@ Assign `margin` or `padding` to an element or a subset of its sides with shortha
Easily realign text to components with text alignment classes.
{% example html %}
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
{% endexample %}
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{% example html %}
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
{% endexample %}
## Text transform
Transform text in components with text capitalization classes.
@ -168,25 +178,25 @@ Use a generic close icon for dismissing content like modals and alerts. **Be sur
</button>
{% endexample %}
## Floats
## Responsive floats
Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins.
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
Two similar non-responsive mixins (`pull-left` and `pull-right`) are also available.
{% example html %}
<div class="pull-left">Float left</div>
<div class="pull-right">Float right</div>
<div class="pull-xs-left">Float left on all viewport sizes</div>
<div class="pull-xs-right">Float right on all viewport sizes</div>
<div class="pull-xs-none">Don't float on all viewport sizes</div>
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div>
{% endexample %}
{% highlight scss %}
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
// Related simple non-responsive mixins
.element {
@include pull-left;
}