Skip to content
Permalink
Browse files

Merge branch 'master' into responsive-container-fixes

  • Loading branch information...
XhmikosR committed Aug 4, 2019
2 parents fd2cf7e + 8c362f0 commit 933e147723acb02d81fc96dd0a4a13544310196a
@@ -36,8 +36,8 @@
"css-minify-docs": "cross-env-shell cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output site/static/docs/$npm_package_version_short/assets/css/docs.min.css site/static/docs/$npm_package_version_short/assets/css/docs.min.css",
"css-prefix": "npm-run-all --parallel css-prefix-*",
"css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
"css-prefix-docs": "cross-env-shell postcss --config build/postcss.config.js --replace \"site/static/docs/$npm_package_version_short/assets/css/*.css\" \"site/static/docs/$npm_package_version_short/assets/css/*.css\"",
"css-prefix-docs-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\" \"site/content/**/*.css\"",
"css-prefix-docs": "cross-env-shell postcss --config build/postcss.config.js --replace \"site/static/docs/$npm_package_version_short/assets/css/*.css\"",
"css-prefix-docs-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"",
"js": "npm-run-all js-compile js-minify js-copy",
"js-copy": "cross-env-shell shx mkdir -p site/static/docs/$npm_package_version_short/dist/ && cross-env-shell shx cp -r dist/js/ site/static/docs/$npm_package_version_short/dist/",
"js-main": "npm-run-all js-lint js-compile js-minify-main",
@@ -152,15 +152,15 @@ Add badges to any list group item to show unread counts, activity, and more with
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
{{< /example >}}
@@ -281,19 +281,25 @@ You can activate a list group navigation without writing any JavaScript by simpl
Enable tabbable list item via JavaScript (each list item needs to be activated individually):

{{< highlight js >}}
$('#myList a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (e) {
e.preventDefault()
tabTrigger.show()
})
})
{{< /highlight >}}

You can activate individual list item in several ways:

{{< highlight js >}}
$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
{{< /highlight >}}

### Fade effect
@@ -311,7 +317,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane

### Methods

#### $().tab
#### constructor

Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.

@@ -331,18 +337,35 @@ Activates a list item element and content container. Tab should have either a `d
</div>

<script>
$(function () {
$('#myList a:last-child').tab('show')
})
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)

firstTab.show()
</script>
{{< /highlight >}}

#### .tab('show')
#### show

Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs).

{{< highlight js >}}
$('#someListItem').tab('show')
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)

tab.show()
{{< /highlight >}}

#### dispose

Destroys an element's tab.

#### getInstance

*Static* method which allows you to get the tab instance associated with a DOM element

{{< highlight js >}}
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
{{< /highlight >}}

### Events
@@ -384,7 +407,8 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will
</table>

{{< highlight js >}}
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
var tabEl = document.querySelector('a[data-toggle="list"]')
tabEl.addEventListener('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
@@ -19,7 +19,7 @@ <h2>Checkout form</h2>
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge badge-secondary badge-pill">3</span>
<span class="badge bg-secondary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
@@ -49,7 +49,7 @@
<a class="nav-link active" href="#">Dashboard</a>
<a class="nav-link" href="#">
Friends
<span class="badge badge-pill bg-light align-text-bottom">27</span>
<span class="badge bg-light rounded-pill align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">Explore</a>
<a class="nav-link" href="#">Suggestions</a>
@@ -62,14 +62,14 @@ If you want to have `<input readonly>` elements in your form styled as plain tex

{{< example >}}
<form class="form-inline">
<div class="mb-3 mb-2">
<div class="mb-3">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="mb-3 mx-sm-3 mb-2">
<div class="mb-3 mx-sm-3">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
</form>
{{< /example >}}
@@ -37,6 +37,10 @@ Some plugins and CSS components depend on other plugins. If you include plugins

Our dropdowns, popovers and tooltips also depend on [Popper.js](https://popper.js.org/).

## Still want to use jQuery? It's possible!

Bootstrap 5 is designed to be used without jQuery, but it's still possible to use our components with jQuery. **If Bootstrap detects `jQuery` in the `window` object** it'll add all of our components in jQuery's plugin system; this means you'll be able to do `$('[data-toggle="tooltip"]').tooltip()` to enable tooltips. The same goes for our other components.

## Data attributes

Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to **only use one set of data attributes on a single element** (e.g., you cannot trigger a tooltip and modal from the same button.)
@@ -13,7 +13,7 @@ The `$utilities` map contains all utilities and is later merged with your custom

- `property`: Name of the property, this can be a string or an array of strings (needed for eg. horizontal paddings or margins).
- `responsive` _(optional)_: Boolean indicating if responsive classes need to be generated. `false` by default.
- `class` _(optional)_: Variable to change the class name if you don't want it to be the same as the property.
- `class` _(optional)_: Variable to change the class name if you don't want it to be the same as the property. In case you don't provide the `class` key and `property` key is an array of strings, the class name will be the first element of the `property` array.
- `values`: This can be a list of values or a map if you don't want the class name to be the same as the value. If null is used as map key, it isn't rendered.
- `print` _(optional)_: Boolean indicating if print classes need to be generated. `false` by default.

@@ -32,7 +32,7 @@ For left, right, and center alignment, responsive classes are available that use
Wrap text with a `.text-wrap` class.

{{< example >}}
<div class="badge badge-primary text-wrap" style="width: 6rem;">
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
{{< /example >}}
@@ -10,7 +10,7 @@ <h2>{{ $release.group }}</h2>
<a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version.v $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version.v }}/">
{{ $version.v }}
{{ if (eq $version.v $.Site.Params.docs_version) -}}
<span class="badge badge-primary">Latest</span>
<span class="badge bg-primary">Latest</span>
{{- end }}
</a>
{{ if (eq (add $i 1) $len) }}</div>{{ end }}

0 comments on commit 933e147

Please sign in to comment.
You can’t perform that action at this time.