mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 01:57:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

bs4 docs sync

Browse Source
This commit is contained in:
Kevin Ross 2016-01-14 13:26:22 -06:00
parent 1d91b1cbe2
commit 8ee26b7158
9 changed files with 158 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/assets/scss/_component-examples.scss
View File

@ -205,11 +205,6 @@
margin-bottom: .5rem;
}
// Pager
.bd-example > .pager {
margin-top: 0;
}
// Example modals
.bd-example-modal {
background-color: #f5f5f5;
@ -230,15 +225,15 @@
}
// Example dropdowns
//.bd-example > .dropdown > .dropdown-toggle {
// float: left;
//}
//.bd-example > .dropdown > .dropdown-menu {
// position: static;
// display: block;
// margin-bottom: .25rem;
// clear: left;
//}
.bd-example > .dropdown > .dropdown-toggle {
float: left;
}
.bd-example > .dropdown > .dropdown-menu {
position: static;
display: block;
margin-bottom: .25rem;
clear: left;
}
// Example tabbable tabs
.bd-example-tabs .nav-tabs {

16
docs/components/breadcrumb.md
View File

@ -15,11 +15,7 @@ See the <a href="/material-design/buttons">Material Design</a> section for more
Indicate the current page's location within a navigational hierarchy.
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
Works fine with or without the usage of list markup.
Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
{% example html %}
<ol class="breadcrumb">
@ -34,11 +30,15 @@ Works fine with or without the usage of list markup.
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
<!-- Or use a div instead of a list -->
<div class="breadcrumb">
{% endexample %}
Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.
{% example html %}
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</div>
</nav>
{% endexample %}

1
docs/components/buttons.md
View File

@ -67,6 +67,7 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
{% endexample %}
## Outline buttons

87
docs/components/forms.md
View File

@ -95,7 +95,7 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
</form>
{% endexample %}
Below is a complete list of the specific from controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
<table>
<thead>
@ -174,6 +174,91 @@ Below is a complete list of the specific from controls supported by Bootstrap an
</tbody>
</table>
### Textual inputs
Here are examples of `.form-control` applied to each textual HTML5 `<input>` `type`.
{% example html %}
<div class="form-group row">
<label for="example-text-input" class="col-xs-2 form-control-label">Text</label>
<div class="col-xs-10">
<input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
</div>
</div>
<div class="form-group row">
<label for="example-search-input" class="col-xs-2 form-control-label">Search</label>
<div class="col-xs-10">
<input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
</div>
</div>
<div class="form-group row">
<label for="example-email-input" class="col-xs-2 form-control-label">Email</label>
<div class="col-xs-10">
<input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
</div>
</div>
<div class="form-group row">
<label for="example-url-input" class="col-xs-2 form-control-label">URL</label>
<div class="col-xs-10">
<input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
</div>
</div>
<div class="form-group row">
<label for="example-tel-input" class="col-xs-2 form-control-label">Telephone</label>
<div class="col-xs-10">
<input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
</div>
</div>
<div class="form-group row">
<label for="example-password-input" class="col-xs-2 form-control-label">Password</label>
<div class="col-xs-10">
<input class="form-control" type="password" value="hunter2" id="example-password-input">
</div>
</div>
<div class="form-group row">
<label for="example-number-input" class="col-xs-2 form-control-label">Number</label>
<div class="col-xs-10">
<input class="form-control" type="number" value="42" id="example-number-input">
</div>
</div>
<div class="form-group row">
<label for="example-datetime-local-input" class="col-xs-2 form-control-label">Date and time</label>
<div class="col-xs-10">
<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
</div>
</div>
<div class="form-group row">
<label for="example-date-input" class="col-xs-2 form-control-label">Date</label>
<div class="col-xs-10">
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
</div>
</div>
<div class="form-group row">
<label for="example-month-input" class="col-xs-2 form-control-label">Month</label>
<div class="col-xs-10">
<input class="form-control" type="month" value="2011-08" id="example-month-input">
</div>
</div>
<div class="form-group row">
<label for="example-week-input" class="col-xs-2 form-control-label">Week</label>
<div class="col-xs-10">
<input class="form-control" type="week" value="2011-W33" id="example-week-input">
</div>
</div>
<div class="form-group row">
<label for="example-time-input" class="col-xs-2 form-control-label">Time</label>
<div class="col-xs-10">
<input class="form-control" type="time" value="13:45:00" id="example-time-input">
</div>
</div>
<div class="form-group row">
<label for="example-color-input" class="col-xs-2 form-control-label">Color</label>
<div class="col-xs-10">
<input class="form-control" type="color" value="#563d7c" id="example-color-input">
</div>
</div>
{% endexample %}
## Form layouts
Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

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

@ -23,7 +23,7 @@ List groups are a flexible and powerful component for displaying not only simple
{:toc}
## Basic example
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
{% example html %}
<ul class="list-group">
@ -113,6 +113,7 @@ Use contextual classes to style list items, default or linked. Also includes `.a
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>

39
docs/components/navs.md
View File

@ -33,13 +33,13 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
{% example html %}
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link active" href="#">Active</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>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
@ -53,20 +53,20 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
<nav class="nav">
<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" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</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.
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" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
@ -76,13 +76,13 @@ 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>
<a class="nav-link active" href="#">Active</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>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
@ -103,7 +103,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
@ -124,7 +124,7 @@ Take that same HTML, but use `.nav-pills` instead:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
@ -132,9 +132,9 @@ Take that same HTML, but use `.nav-pills` instead:
</ul>
{% endexample %}
## Stacked pills
### Stacked pills
Just add `.nav-stacked` to the `.nav.nav-pills`.
Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-link` becomes block-level, allowing for larger hit areas via mouse or tap.
{% example html %}
<ul class="nav nav-pills nav-stacked">
@ -145,7 +145,7 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
@ -153,6 +153,17 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
</ul>
{% endexample %}
As always, stacked pills are possible without `<ul>`s.
{% example html %}
<nav class="nav nav-pills nav-stacked">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
## Using dropdowns
Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
@ -175,7 +186,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
@ -201,7 +212,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>

2
docs/components/pagination.md
View File

@ -15,7 +15,7 @@ See the <a href="/material-design/buttons">Material Design</a> section for more
Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pager).
Provide pagination links for your site or app with the multi-page pagination component.
## Contents

8
docs/content/typography.md
View File

@ -244,6 +244,14 @@ Align terms and descriptions horizontally by using our grid system's predefined
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-3">Nested definition list</dt>
<dd class="col-sm-9">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
{% endexample %}

18
grunt/jekyll-debug.rb Normal file
View File

@ -0,0 +1,18 @@
#!/usr/bin/env ruby
#
require 'rubygems'
version = ">= 0"
if ARGV.first
str = ARGV.first
str = str.dup.force_encoding("BINARY") if str.respond_to? :force_encoding
if str =~ /\A_(.*)_\z/ and Gem::Version.correct?($1) then
version = $1
ARGV.shift
end
end
gem 'jekyll', version
load Gem.bin_path('jekyll', 'jekyll', version)