diff --git a/site/docs/4.3/components/buttons.md b/site/docs/4.3/components/buttons.md index 118679752a..f100192042 100644 --- a/site/docs/4.3/components/buttons.md +++ b/site/docs/4.3/components/buttons.md @@ -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 %} diff --git a/site/docs/4.3/components/carousel.md b/site/docs/4.3/components/carousel.md index 455e2d9e51..36cea4f00b 100644 --- a/site/docs/4.3/components/carousel.md +++ b/site/docs/4.3/components/carousel.md @@ -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

On touch-enabled devices, when set to "hover", cycling will pause on touchend (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.

- ride - string + slide + string | boolean false Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load. @@ -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 diff --git a/site/docs/4.3/components/collapse.md b/site/docs/4.3/components/collapse.md index 893b8b6643..10e32a6571 100644 --- a/site/docs/4.3/components/collapse.md +++ b/site/docs/4.3/components/collapse.md @@ -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