From 54fa28441c5f0bdcd9687615f4a6b7a0fab024a3 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Fri, 7 Sep 2018 11:26:02 +0200 Subject: install bootstrap via composer --- .../bootstrap/site/docs/4.1/components/alerts.md | 115 ++ .../bootstrap/site/docs/4.1/components/badge.md | 82 ++ .../site/docs/4.1/components/breadcrumb.md | 58 + .../site/docs/4.1/components/button-group.md | 207 ++++ .../bootstrap/site/docs/4.1/components/buttons.md | 164 +++ .../bootstrap/site/docs/4.1/components/card.md | 682 ++++++++++ .../bootstrap/site/docs/4.1/components/carousel.md | 334 +++++ .../bootstrap/site/docs/4.1/components/collapse.md | 249 ++++ .../site/docs/4.1/components/dropdowns.md | 861 +++++++++++++ .../bootstrap/site/docs/4.1/components/forms.md | 1296 ++++++++++++++++++++ .../site/docs/4.1/components/input-group.md | 361 ++++++ .../site/docs/4.1/components/jumbotron.md | 31 + .../site/docs/4.1/components/list-group.md | 377 ++++++ .../bootstrap/site/docs/4.1/components/modal.md | 675 ++++++++++ .../bootstrap/site/docs/4.1/components/navbar.md | 579 +++++++++ .../bootstrap/site/docs/4.1/components/navs.md | 658 ++++++++++ .../site/docs/4.1/components/pagination.md | 170 +++ .../bootstrap/site/docs/4.1/components/popovers.md | 353 ++++++ .../bootstrap/site/docs/4.1/components/progress.md | 146 +++ .../site/docs/4.1/components/scrollspy.md | 333 +++++ .../bootstrap/site/docs/4.1/components/tooltips.md | 354 ++++++ 21 files changed, 8085 insertions(+) create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/alerts.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/badge.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/breadcrumb.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/button-group.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/buttons.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/card.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/carousel.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/collapse.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/dropdowns.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/forms.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/input-group.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/jumbotron.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/list-group.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/modal.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/navbar.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/navs.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/pagination.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/popovers.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/progress.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/scrollspy.md create mode 100644 vendor/twbs/bootstrap/site/docs/4.1/components/tooltips.md (limited to 'vendor/twbs/bootstrap/site/docs/4.1/components') diff --git a/vendor/twbs/bootstrap/site/docs/4.1/components/alerts.md b/vendor/twbs/bootstrap/site/docs/4.1/components/alerts.md new file mode 100644 index 000000000..6c6cb9936 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/components/alerts.md @@ -0,0 +1,115 @@ +--- +layout: docs +title: Alerts +description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. +group: components +toc: true +--- + +## Examples + +Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing). + +{% capture example %} +{% for color in site.data.theme-colors %} +{% endfor %} +{% endcapture %} +{% include example.html content=example %} + +{% include callout-warning-color-assistive-technologies.md %} + +### Link color + +Use the `.alert-link` utility class to quickly provide matching colored links within any alert. + +{% capture example %} +{% for color in site.data.theme-colors %} +{% endfor %} +{% endcapture %} +{% include example.html content=example %} + +### Additional content + +Alerts can also contain additional HTML elements like headings, paragraphs and dividers. + +{% capture example %} + +{% endcapture %} +{% include example.html content=example %} + + +### Dismissing + +Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: + +- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript. +- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). The compiled version includes this. +- Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. +- On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the ` + +{% endcapture %} +{% include example.html content=example %} + +## JavaScript behavior + +### Triggers + +Enable dismissal of an alert via JavaScript: + +{% highlight js %} +$('.alert').alert() +{% endhighlight %} + +Or with `data` attributes on a button **within the alert**, as demonstrated above: + +{% highlight html %} + +{% endhighlight %} + +Note that closing an alert will remove it from the DOM. + +### Methods + +| Method | Description | +| --- | --- | +| `$().alert()` | Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) | +| `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. | +| `$().alert('dispose')` | Destroys an element's alert. | + +{% highlight js %}$(".alert").alert('close'){% endhighlight %} + +### Events + +Bootstrap's alert plugin exposes a few events for hooking into alert functionality. + +| Event | Description | +| --- | --- | +| `close.bs.alert` | This event fires immediately when the close instance method is called. | +| `closed.bs.alert` | This event is fired when the alert has been closed (will wait for CSS transitions to complete). | + +{% highlight js %} +$('#myAlert').on('closed.bs.alert', function () { + // do something… +}) +{% endhighlight %} diff --git a/vendor/twbs/bootstrap/site/docs/4.1/components/badge.md b/vendor/twbs/bootstrap/site/docs/4.1/components/badge.md new file mode 100644 index 000000000..0e97cbe76 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/components/badge.md @@ -0,0 +1,82 @@ +--- +layout: docs +title: Badges +description: Documentation and examples for badges, our small count and labeling component. +group: components +toc: true +--- + +## Example + +Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. + +
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
+ +{% highlight html %} +

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
+{% endhighlight %} + +Badges can be used as part of links or buttons to provide a counter. + +{% capture example %} + +{% endcapture %} +{% include example.html content=example %} + +Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. + +Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text. + +{% capture example %} + +{% endcapture %} +{% include example.html content=example %} + +## Contextual variations + +Add any of the below mentioned modifier classes to change the appearance of a badge. + +{% capture example %} +{% for color in site.data.theme-colors %} +{{ color.name | capitalize }}{% endfor %} +{% endcapture %} +{% include example.html content=example %} + +{% include callout-warning-color-assistive-technologies.md %} + +## Pill badges + +Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. + +{% capture example %} +{% for color in site.data.theme-colors %} +{{ color.name | capitalize }}{% endfor %} +{% endcapture %} +{% include example.html content=example %} + +## Links + +Using the contextual `.badge-*` classes on an `` element quickly provide _actionable_ badges with hover and focus states. + +{% capture example %} +{% for color in site.data.theme-colors %} +{{ color.name | capitalize }}{% endfor %} +{% endcapture %} +{% include example.html content=example %} diff --git a/vendor/twbs/bootstrap/site/docs/4.1/components/breadcrumb.md b/vendor/twbs/bootstrap/site/docs/4.1/components/breadcrumb.md new file mode 100644 index 000000000..4cc7b3de9 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/components/breadcrumb.md @@ -0,0 +1,58 @@ +--- +layout: docs +title: Breadcrumb +description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. +group: components +--- + +## Example + +{% capture example %} + + + + + +{% endcapture %} +{% include example.html content=example %} + +## Changing the separator + +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). They can be changed by changing `$breadcrumb-divider`. The [quote](https://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method) function is needed to generate the quotes around a string, so if you want `>` as seperator, you can use this: + +```scss +$breadcrumb-divider: quote(">"); +``` + +It's also possible to use a **base64 embedded SVG icon**: + +```scss +$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+); +``` + +The separator can be removed by setting `$breadcrumb-divider` to `none`: + +```scss +$breadcrumb-divider: none; +``` + +## Accessibility + +Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `