mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-16 19:50:37 +03:00
bs4 sync
This commit is contained in:
Kevin Ross
parent
2e9ca8e6c9
commit
4ef53e4e15
|
|
@ -41,6 +41,9 @@ Alerts are available for any length of text, as well as an optional dismiss butt
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
### Link color
|
||||
|
||||
Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
|
||||
|
|
|
|||
|
|
@ -50,11 +50,8 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
|
|||
<button type="button" class="btn btn-link">Link</button>
|
||||
{% endexample %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Conveying meaning to assistive technologies
|
||||
|
||||
Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
|
||||
{% endcallout %}
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
## Button tags
|
||||
|
||||
|
|
@ -72,7 +69,7 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
|
|||
|
||||
## Outline buttons
|
||||
|
||||
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-*-outline` ones to remove all background images and colors on any button.
|
||||
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
|
|
|
|||
|
|
@ -373,6 +373,9 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
## Outline variants
|
||||
|
||||
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
|
||||
|
|
|
|||
|
|
@ -343,7 +343,9 @@ Because of this, you may need to manually address the width and alignment of ind
|
|||
|
||||
### Using the Grid
|
||||
|
||||
For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with `.form-control`—use the `.form-control-label` class.
|
||||
For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
|
||||
|
||||
Be sure to add `.form-control-label` to your `<label>`s as well so they're vertically centered with their associated labels.
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
|
|
@ -773,6 +775,33 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
|
|||
</label>
|
||||
{% endexample %}
|
||||
|
||||
#### Validation states
|
||||
|
||||
Add other states to your custom forms with our validation classes.
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group has-success">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group has-danger m-b-0">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
#### Stacked
|
||||
|
||||
|
|
@ -828,3 +857,22 @@ Here's how it works:
|
|||
- We declare a `height` on the `<input>` for proper spacing for surrounding content.
|
||||
|
||||
In other words, it's an entirely custom element, all generated via CSS.
|
||||
|
||||
#### Translating or customizing the strings
|
||||
|
||||
The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for easy translation of the "Browse" and "Choose file..." text into other languages. Simply override or add entries to the `$custom-file-text` SCSS variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`):
|
||||
|
||||
{% highlight scss %}
|
||||
$custom-file-text: (
|
||||
placeholder: (
|
||||
en: "Choose file...",
|
||||
es: "Seleccionar archivo..."
|
||||
),
|
||||
button-label: (
|
||||
en: "Browse",
|
||||
es: "Navegar"
|
||||
)
|
||||
);
|
||||
{% endhighlight %}
|
||||
|
||||
You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.
|
||||
|
|
|
|||
|
|
@ -35,22 +35,22 @@ The most basic list group is simply an unordered list with list items, and the p
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
## Labels
|
||||
## Tags
|
||||
|
||||
Add labels to any list group item to show unread counts, activity, etc.
|
||||
Add tags 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-xs-right">14</span>
|
||||
<span class="tag tag-default tag-pill pull-xs-right">14</span>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="label label-default label-pill pull-xs-right">2</span>
|
||||
<span class="tag tag-default tag-pill pull-xs-right">2</span>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="label label-default label-pill pull-xs-right">1</span>
|
||||
<span class="tag tag-default tag-pill pull-xs-right">1</span>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -115,6 +115,9 @@ Use contextual classes to style list items, default or linked. Also includes `.a
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
## Custom content
|
||||
|
||||
Add nearly any HTML within, even for linked list groups like the one below.
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ Here's an example of all the sub-components included in a default, light navbar:
|
|||
|
||||
### Brand
|
||||
|
||||
The `.navbar-brand` can be applied to most elements, but an anchor works best.
|
||||
The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
|
|
@ -75,7 +75,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best.
|
|||
</nav>
|
||||
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<h1 class="navbar-brand">Navbar</h1>
|
||||
<h1 class="navbar-brand m-b-0">Navbar</h1>
|
||||
</nav>
|
||||
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -24,12 +24,24 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
|
|||
|
||||
### Example
|
||||
|
||||
To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress" value="0" max="100">0%</progress>
|
||||
<progress class="progress" value="25" max="100">25%</progress>
|
||||
<progress class="progress" value="50" max="100">50%</progress>
|
||||
<progress class="progress" value="75" max="100">75%</progress>
|
||||
<progress class="progress" value="100" max="100">100%</progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-1">Reticulating splines… 0%</div>
|
||||
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-2">Reticulating splines… 25%</div>
|
||||
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-3">Reticulating splines… 50%</div>
|
||||
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-4">Reticulating splines… 75%</div>
|
||||
<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
|
||||
|
||||
<div class="text-xs-center" id="example-caption-5">Reticulating splines… 100%</div>
|
||||
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
|
||||
{% endexample %}
|
||||
|
||||
### IE9 support
|
||||
|
|
@ -37,9 +49,10 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
|
|||
Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress" value="25" max="100">
|
||||
<div class="text-xs-center" id="example-caption-6">Reticulating splines… 25%</div>
|
||||
<progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
|
||||
<div class="progress">
|
||||
<span class="progress-bar" style="width: 25%;">25%</span>
|
||||
<span class="progress-bar" style="width: 25%;"></span>
|
||||
</div>
|
||||
</progress>
|
||||
{% endexample %}
|
||||
|
|
@ -49,10 +62,10 @@ Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can w
|
|||
Progress bars use some of the same button and alert classes for consistent styles.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress progress-success" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-info" value="50" max="100">50%</progress>
|
||||
<progress class="progress progress-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress progress-danger" value="100" max="100">100%</progress>
|
||||
<progress class="progress progress-success" value="25" max="100"></progress>
|
||||
<progress class="progress progress-info" value="50" max="100"></progress>
|
||||
<progress class="progress progress-warning" value="75" max="100"></progress>
|
||||
<progress class="progress progress-danger" value="100" max="100"></progress>
|
||||
{% endexample %}
|
||||
|
||||
### Striped
|
||||
|
|
@ -60,11 +73,11 @@ Progress bars use some of the same button and alert classes for consistent style
|
|||
Uses a gradient to create a striped effect.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress progress-striped" value="10" max="100">10%</progress>
|
||||
<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
|
||||
<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>
|
||||
<progress class="progress progress-striped" value="10" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-success" value="25" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-info" value="50" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-warning" value="75" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-danger" value="100" max="100"></progress>
|
||||
{% endexample %}
|
||||
|
||||
### Animated stripes
|
||||
|
|
@ -74,12 +87,12 @@ The striped gradient can also be animated. Add `.progress-animated` to `.progres
|
|||
**Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
|
||||
|
||||
<div class="bd-example">
|
||||
<progress class="progress progress-striped" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-striped" value="25" max="100"></progress>
|
||||
<button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Toggle animation
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>
|
||||
<progress class="progress progress-striped progress-animated" value="25" max="100"></progress>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
60
docs/components/tag.md
Normal file
60
docs/components/tag.md
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Tags
|
||||
group: components
|
||||
---
|
||||
|
||||
[//]: # 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 %}
|
||||
|
||||
|
||||
|
||||
Small and adaptive tag for adding context to just about any content.
|
||||
|
||||
## Example
|
||||
|
||||
Tags scale to match the size of the immediate parent element by using relative font sizing and `em` units.
|
||||
|
||||
{% example html %}
|
||||
<h1>Example heading <span class="tag tag-default">New</span></h1>
|
||||
<h2>Example heading <span class="tag tag-default">New</span></h2>
|
||||
<h3>Example heading <span class="tag tag-default">New</span></h3>
|
||||
<h4>Example heading <span class="tag tag-default">New</span></h4>
|
||||
<h5>Example heading <span class="tag tag-default">New</span></h5>
|
||||
<h6>Example heading <span class="tag tag-default">New</span></h6>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual variations
|
||||
|
||||
Add any of the below mentioned modifier classes to change the appearance of a tag.
|
||||
|
||||
{% example html %}
|
||||
<span class="tag tag-default">Default</span>
|
||||
<span class="tag tag-primary">Primary</span>
|
||||
<span class="tag tag-success">Success</span>
|
||||
<span class="tag tag-info">Info</span>
|
||||
<span class="tag tag-warning">Warning</span>
|
||||
<span class="tag tag-danger">Danger</span>
|
||||
{% endexample %}
|
||||
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
## Pill tags
|
||||
|
||||
Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
|
||||
|
||||
{% example html %}
|
||||
<span class="tag tag-pill tag-default">Default</span>
|
||||
<span class="tag tag-pill tag-primary">Primary</span>
|
||||
<span class="tag tag-pill tag-success">Success</span>
|
||||
<span class="tag tag-pill tag-info">Info</span>
|
||||
<span class="tag tag-pill tag-warning">Warning</span>
|
||||
<span class="tag tag-pill tag-danger">Danger</span>
|
||||
{% endexample %}
|
||||
|
|
@ -171,11 +171,8 @@ Similar to the contextual text color classes, easily set the background of an el
|
|||
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
|
||||
{% endcallout %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Conveying meaning to assistive technologies
|
||||
|
||||
Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
|
||||
{% endcallout %}
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
## Close icon
|
||||
|
||||
|
|
|
|||
|
|
@ -45,20 +45,24 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
|
|||
|
||||
## Native font stack
|
||||
|
||||
The default web (Helvetica Neue, Helvetica, and Arial) fonts have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this Smashing Magazine article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
|
||||
The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
|
||||
|
||||
{% highlight sass %}
|
||||
$font-family-sans-serif:
|
||||
// Safari for OS X and iOS (San Francisco)
|
||||
-apple-system,
|
||||
// Chrome for OS X (San Francisco) and Windows (Segoe UI)
|
||||
// Chrome for OS X (San Francisco)
|
||||
BlinkMacSystemFont,
|
||||
// Windows
|
||||
"Segoe UI",
|
||||
// Android
|
||||
"Roboto",
|
||||
// Linux distros
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||
// Linux
|
||||
"Oxygen", // KDE
|
||||
"Ubuntu",
|
||||
"Cantarell", // GNOME
|
||||
// Firefox OS [R.I.P.]
|
||||
"Fira Sans",
|
||||
// Older Android
|
||||
"Droid Sans",
|
||||
// Basic web fallback
|
||||
|
|
@ -200,7 +204,7 @@ Various form elements have been rebooted for simpler base styles. Here are some
|
|||
- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
|
||||
- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
|
||||
- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
|
||||
- `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
|
||||
- `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
|
||||
- `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
|
||||
|
||||
These changes, and more, are demonstrated below.
|
||||
|
|
|
|||
|
|
@ -431,6 +431,9 @@ Use contextual classes to color table rows or individual cells.
|
|||
</table>
|
||||
</div>
|
||||
|
||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||
{{ callout-include | markdownify }}
|
||||
|
||||
{% highlight html %}
|
||||
<!-- On rows -->
|
||||
<tr class="table-active">...</tr>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/labels";
|
||||
@import "bootstrap/scss/tags";
|
||||
@import "bootstrap/scss/jumbotron";
|
||||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/progress";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user