mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-21 13:29:00 +01:00
v4 without jquery: updated button, carousel, collapse docs (#27173)
This commit is contained in:
aTable
XhmikosR
parent
a2f1d79045
commit
e866b1ae43
@ -157,7 +157,24 @@ Note that pre-checked buttons require you to manually add the `.active` class to
|
||||
|
||||
### Methods
|
||||
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `$().button('toggle')` | Toggles push state. Gives the button the appearance that it has been activated. |
|
||||
| `$().button('dispose')` | Destroys an element's button. |
|
||||
You can create a button instance with the button constructor, for example:
|
||||
|
||||
{% highlight js %}
|
||||
var button = document.getElementById('myButton')
|
||||
var bsButton = new bootstrap.Button(button)
|
||||
{% endhighlight %}
|
||||
|
||||
| Method | Description |
|
||||
| --------- | ------------------------------------------------------------------------------- |
|
||||
| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
|
||||
| `dispose` | Destroys an element's button. |
|
||||
|
||||
For example, to toggle all buttons
|
||||
|
||||
{% highlight js %}
|
||||
var buttons = document.querySelectorAll('.btn')
|
||||
buttons.forEach(function (button) {
|
||||
var button = new bootstrap.Button(button)
|
||||
button.toggle()
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
@ -228,7 +228,8 @@ The `data-ride="carousel"` attribute is used to mark a carousel as animating sta
|
||||
Call carousel manually with:
|
||||
|
||||
{% highlight js %}
|
||||
$('.carousel').carousel()
|
||||
var myCarousel = document.querySelector('#myCarousel')
|
||||
var carousel = new bootstrap.Carousel(myCarousel)
|
||||
{% endhighlight %}
|
||||
|
||||
### Options
|
||||
@ -265,8 +266,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ride</td>
|
||||
<td>string</td>
|
||||
<td>slide</td>
|
||||
<td>string | boolean</td>
|
||||
<td>false</td>
|
||||
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
|
||||
</tr>
|
||||
@ -289,39 +290,26 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
|
||||
{% include callout-danger-async-methods.md %}
|
||||
|
||||
#### `.carousel(options)`
|
||||
|
||||
Initializes the carousel with an optional options `object` and starts cycling through items.
|
||||
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
|
||||
|
||||
{% highlight js %}
|
||||
$('.carousel').carousel({
|
||||
interval: 2000
|
||||
var myCarousel = document.querySelector('#myCarousel')
|
||||
var carousel = new bootstrap.Carousel(myCarousel, {
|
||||
interval: 2000,
|
||||
wrap: false
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
#### `.carousel('cycle')`
|
||||
|
||||
Cycles through the carousel items from left to right.
|
||||
|
||||
#### `.carousel('pause')`
|
||||
|
||||
Stops the carousel from cycling through items.
|
||||
|
||||
#### `.carousel(number)`
|
||||
|
||||
Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
|
||||
|
||||
#### `.carousel('prev')`
|
||||
|
||||
Cycles to the previous item. **Returns to the caller before the previous item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
|
||||
|
||||
#### `.carousel('next')`
|
||||
|
||||
Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
|
||||
|
||||
#### `.carousel('dispose')`
|
||||
|
||||
Destroys an element's carousel.
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `cycle` | Cycles through the carousel items from left to right. |
|
||||
| `pause` | Stops the carousel from cycling through items. |
|
||||
| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (i.e. before the `slid.bs.carousel` event occurs). |
|
||||
| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs). |
|
||||
| `nextWhenVisible` | Only go to the next slide when the page, carousel and the carousel parent is visible. |
|
||||
| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (i.e. before the `slid.bs.carousel` event occurs). |
|
||||
| `dispose` | Destroys an element's carousel. |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -187,31 +187,23 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
|
||||
{% include callout-danger-async-methods.md %}
|
||||
|
||||
#### `.collapse(options)`
|
||||
|
||||
Activates your content as a collapsible element. Accepts an optional options `object`.
|
||||
|
||||
You can create a collapse instance with the constructor, for example:
|
||||
|
||||
{% highlight js %}
|
||||
$('#myCollapsible').collapse({
|
||||
var myCollapse = document.getElementById('myCollapse')
|
||||
var bsCollapse = new bootstrap.Collapse(myCollapse, {
|
||||
toggle: false
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
#### `.collapse('toggle')`
|
||||
|
||||
Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs).
|
||||
|
||||
#### `.collapse('show')`
|
||||
|
||||
Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (i.e. before the `shown.bs.collapse` event occurs).
|
||||
|
||||
#### `.collapse('hide')`
|
||||
|
||||
Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (i.e. before the `hidden.bs.collapse` event occurs).
|
||||
|
||||
#### `.collapse('dispose')`
|
||||
|
||||
Destroys an element's collapse.
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). |
|
||||
| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (i.e. before the `shown.bs.collapse` event occurs).|
|
||||
| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (i.e. before the `hidden.bs.collapse` event occurs).|
|
||||
| `dispose` | Destroys an element's collapse. |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user