From 0add7700adc3ccdef68b7a88ec3537b5e523bf9a Mon Sep 17 00:00:00 2001 From: Kevin Suttle Date: Sat, 24 Aug 2013 11:16:08 -0400 Subject: Add role="button" to buttons These should really be

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

-- cgit v1.2.3 From 79efeec874eda0042b4da1520b418005776466c2 Mon Sep 17 00:00:00 2001 From: Andreas Jendrzey Date: Sun, 25 Aug 2013 10:36:53 +0200 Subject: correct enable selector for button usage following the given examples the correct selector to enable the buttons with javascript is ".btn-group". --- javascript.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 6a0807952..ee3b4d7b0 100644 --- a/javascript.html +++ b/javascript.html @@ -1358,7 +1358,7 @@ $('#my-alert').bind('closed.bs.alert', function () {

Usage

Enable buttons via JavaScript:

{% highlight js %} -$('.nav-tabs').button() +$('.btn-group').button() {% endhighlight %}

Markup

-- cgit v1.2.3 From 92bb465ba3a33dd53f61e01aad97abf10e4f7166 Mon Sep 17 00:00:00 2001 From: Ben Combee Date: Sun, 25 Aug 2013 14:49:15 -0500 Subject: javascript.html: add data-ride note carousel docs were missing mention of the data-ride attribute used to automatically start the carousel at load time --- javascript.html | 1 + 1 file changed, 1 insertion(+) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 6a0807952..4d3d08800 100644 --- a/javascript.html +++ b/javascript.html @@ -1756,6 +1756,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.

+

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load.

Via JavaScript

Call carousel manually with:

-- cgit v1.2.3 From 2970653bdc745d2caab512bf32e51d6a29e51cc2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Aug 2013 18:19:31 -0700 Subject: Fixes #10016 and updates that rather badly formatted callout --- javascript.html | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 4d3d08800..bb08a9556 100644 --- a/javascript.html +++ b/javascript.html @@ -205,7 +205,7 @@ $('#myModal').on('show.bs.modal', function (e) {
-

Modal title

+
... @@ -222,12 +222,8 @@ $('#myModal').on('show.bs.modal', function (e) {

Make modals accessible

-

- Be sure to add role="dialog" to your primary modal div. In the example above, div#myModal.
- Also, the aria-labelledby attribute references your modal title. In this example, h4#myModalLabel.
- Finally, aria-hidden="true" tells assistive technologies to skip DOM elements.
- Additionally, you may give a description of your modal dialog. Use the aria-describedby attribute in the modal's primary <div> to point to this description (this is not shown in the above example). -

+

Be sure to add role="dialog" to .modal, aria-labelledby="myModalLabel" attribute to reference the modal title, and aria-hidden="true" to tell assistive technologies to skip the modal's DOM elements.

+

Additionally, you may give a description of your modal dialog with aria-describedby on .modal.

Usage

-- cgit v1.2.3 From 1445e09b5fcd8112e9753aa47c6df9c558782dd5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Aug 2013 08:05:26 -0700 Subject: Fixes #9991: Better docs for tabbable tabs and fade classes * Adds full code snippets * Adds snippet for `.fade` * Adds callout for `.in` requirement on first fade-able tab --- javascript.html | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index bb08a9556..6cebde638 100644 --- a/javascript.html +++ b/javascript.html @@ -708,15 +708,33 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

{% highlight html %} + + + +
+
...
+
...
+
...
+
...
+
{% endhighlight %} -

To make tabs fade in, add .fade to each .tab-pane.

+

Fade effect

+

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content.

+{% highlight html %} +
+
...
+
...
+
...
+
...
+
+{% endhighlight %}

Methods

$().tab

-- cgit v1.2.3