From 2e6d4e9439d489dc1c45f27d626a4f5d3399e483 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Jun 2012 22:28:10 -0700 Subject: [PATCH] more rearrangement and removal of about sections in js docs --- docs/javascript.html | 138 +++++++++++------------ docs/templates/pages/javascript.mustache | 138 +++++++++++------------ 2 files changed, 134 insertions(+), 142 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index e424cf1aa532..62c30f8641f0 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -610,10 +610,9 @@

Events

Togglable tabs bootstrap-tab.js

-

This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.

Example tabs

-

Click the tabs below to toggle between hidden panes, even via dropdown menus.

+

Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.

-

About Tooltips

-

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.

-

Example use of Tooltips

+

Examples

+

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. @@ -843,12 +841,9 @@

.tooltip('toggle')

Popovers bootstrap-popover.js

-

About popovers

-

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

+

Example

+

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.

* Requires Tooltip to be included

- -

Example hover popover

-

Hover over the button to trigger the popover.

hover for popover
@@ -958,11 +953,9 @@

.popover('toggle')

Alert messages bootstrap-alert.js

-

About alerts

-

The alert plugin is a tiny class for adding close functionality to alerts.

Example alerts

-

The alerts plugin works on regular alert messages, and block messages.

+

Add dismiss functionality to all alerge messages with this plugin.

@@ -1036,25 +1029,31 @@

Events

Buttons bootstrap-button.js

-

About

-

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

-

Example uses

-

Use the buttons plugin for states and toggles.

+

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

+

Add data-loading-text="Loading..." to use a loading state on a button.

+
+<button class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
+

Single toggle

+

Add data-toggle="button" to activate toggling on a single button.

+
+<button class="btn" data-toggle="button">Single Toggle</button>
+

Checkbox

+

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

@@ -1062,8 +1061,16 @@

Checkbox

+
+<div class="btn-group" data-toggle="buttons-checkbox">
+  <button class="btn">Left</button>
+  <button class="btn">Middle</button>
+  <button class="btn">Right</button>
+</div>
+

Radio

+

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

@@ -1071,6 +1078,13 @@

Radio

+
+<div class="btn-group" data-toggle="buttons-radio">
+  <button class="btn">Left</button>
+  <button class="btn">Middle</button>
+  <button class="btn">Right</button>
+</div>
+
@@ -1082,24 +1096,6 @@

Usage

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

-
-<!-- Add data-toggle="button" to activate toggling on a single button -->
-<button class="btn" data-toggle="button">Single Toggle</button>
-
-<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
-<div class="btn-group" data-toggle="buttons-checkbox">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
-</div>
-
-<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
-<div class="btn-group" data-toggle="buttons-radio">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
-</div>
-

Options

None

@@ -1186,13 +1182,26 @@

Example accordion

+
+<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
+  simple collapsible
+</button>
+
+<div id="demo" class="collapse in"> … </div>
+

Usage

-

Enable via javascript:

+ +

Via data attributes

+

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

+

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

+ +

Via javascript

+

Enable manually with:

$(".collapse").collapse()

Options

@@ -1221,18 +1230,7 @@

Options

-

Markup

-

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

-
-<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
-  simple collapsible
-</button>
 
-<div id="demo" class="collapse in"> … </div>
-
- Heads up! - To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action. -

Methods

.collapse(options)

@@ -1293,12 +1291,8 @@

Events

Carousel bootstrap-carousel.js

-

About

-

A generic plugin for cycling through elements. A merry-go-round.

-

Example carousel

-

Watch the slideshow below.

- +

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

+
+<div id="myCarousel" class="carousel slide">
+  <!-- Carousel items -->
+  <div class="carousel-inner">
+    <div class="active item">…</div>
+    <div class="item">…</div>
+    <div class="item">…</div>
+  </div>
+  <!-- Carousel nav -->
+  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+</div>
+
-
+
Heads up! When implementing this carousel, remove the images we have provided and replace them with your own.
@@ -1339,7 +1346,12 @@

Third Thumbnail label

Usage

-

Call via javascript:

+ +

Via data attributes

+

...

+ +

Via javascript

+

Call carousel manually with:

$('.carousel').carousel()

Options

@@ -1369,22 +1381,6 @@

Options

-

Markup

-

Data attributes are used for the previous and next conrols. Check out the example markup below.

-
-<div id="myCarousel" class="carousel slide">
-  <!-- Carousel items -->
-  <div class="carousel-inner">
-    <div class="active item">…</div>
-    <div class="item">…</div>
-    <div class="item">…</div>
-  </div>
-  <!-- Carousel nav -->
-  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
-  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
-</div>
-
-

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index e7c4a5bf0676..0a3a7aa8089d 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -535,10 +535,9 @@ $('[data-spy="scroll"]').each(function () {

{{_i}}Togglable tabs{{/i}} bootstrap-tab.js

-

{{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}

{{_i}}Example tabs{{/i}}

-

{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}

+

{{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}

-

{{_i}}About Tooltips{{/i}}

-

{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}

-

{{_i}}Example use of Tooltips{{/i}}

+

{{_i}}Examples{{/i}}

+

{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}

{{_i}}Hover over the links below to see tooltips:{{/i}}

{{_i}}Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.{{/i}} @@ -768,12 +766,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Popovers{{/i}} bootstrap-popover.js

-

{{_i}}About popovers{{/i}}

-

{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}

+

{{_i}}Example{{/i}}

+

{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.{{/i}}

* {{_i}}Requires Tooltip to be included{{/i}}

- -

{{_i}}Example hover popover{{/i}}

-

{{_i}}Hover over the button to trigger the popover.{{/i}}

{{_i}}hover for popover{{/i}}
@@ -883,11 +878,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

{{_i}}Alert messages{{/i}} bootstrap-alert.js

-

{{_i}}About alerts{{/i}}

-

{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}

{{_i}}Example alerts{{/i}}

-

{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}

+

{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}

@@ -961,25 +954,31 @@ $('#my-alert').bind('closed', function () {

{{_i}}Buttons{{/i}} bootstrap-button.js

-

{{_i}}About{{/i}}

-

{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}

-

{{_i}}Example uses{{/i}}

-

{{_i}}Use the buttons plugin for states and toggles.{{/i}}

+

{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}

{{_i}}Stateful{{/i}}

+

{{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}

{{! /example }} +
+<button class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
+

{{_i}}Single toggle{{/i}}

+

{{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}

{{! /example }} +
+<button class="btn" data-toggle="button">Single Toggle</button>
+

{{_i}}Checkbox{{/i}}

+

{{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}

@@ -987,8 +986,16 @@ $('#my-alert').bind('closed', function () {
{{! /example }} +
+<div class="btn-group" data-toggle="buttons-checkbox">
+  <button class="btn">Left</button>
+  <button class="btn">Middle</button>
+  <button class="btn">Right</button>
+</div>
+

{{_i}}Radio{{/i}}

+

{{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}

@@ -996,6 +1003,13 @@ $('#my-alert').bind('closed', function () {
{{! /example }} +
+<div class="btn-group" data-toggle="buttons-radio">
+  <button class="btn">Left</button>
+  <button class="btn">Middle</button>
+  <button class="btn">Right</button>
+</div>
+
@@ -1007,24 +1021,6 @@ $('#my-alert').bind('closed', function () {

{{_i}}Markup{{/i}}

{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}

-
-<!-- {{_i}}Add data-toggle="button" to activate toggling on a single button{{/i}} -->
-<button class="btn" data-toggle="button">Single Toggle</button>
-
-<!-- {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group{{/i}} -->
-<div class="btn-group" data-toggle="buttons-checkbox">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
-</div>
-
-<!-- {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group{{/i}} -->
-<div class="btn-group" data-toggle="buttons-radio">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
-</div>
-

{{_i}}Options{{/i}}

{{_i}}None{{/i}}

@@ -1111,13 +1107,26 @@ $('#my-alert').bind('closed', function () {
{{! /example }} +
+<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
+  {{_i}}simple collapsible{{/i}}
+</button>
+
+<div id="demo" class="collapse in"> … </div>
+

{{_i}}Usage{{/i}}

-

{{_i}}Enable via javascript:{{/i}}

+ +

{{_i}}Via data attributes{{/i}}

+

{{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

+

{{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}}

+ +

{{_i}}Via javascript{{/i}}

+

{{_i}}Enable manually with:{{/i}}

$(".collapse").collapse()

{{_i}}Options{{/i}}

@@ -1146,18 +1155,7 @@ $('#my-alert').bind('closed', function () { -

{{_i}}Markup{{/i}}

-

{{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

-
-<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
-  {{_i}}simple collapsible{{/i}}
-</button>
 
-<div id="demo" class="collapse in"> … </div>
-
- {{_i}}Heads up!{{/i}} - {{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}} -

{{_i}}Methods{{/i}}

.collapse({{_i}}options{{/i}})

@@ -1218,12 +1216,8 @@ $('#myCollapsible').on('hidden', function () {

{{_i}}Carousel{{/i}} bootstrap-carousel.js

-

{{_i}}About{{/i}}

-

{{_i}}A generic plugin for cycling through elements. A merry-go-round.{{/i}}

-

{{_i}}Example carousel{{/i}}

-

{{_i}}Watch the slideshow below.{{/i}}

- +

{{_i}}The slideshow below shows a generic plugin and component for cycling through elements like a carousel.{{/i}}

{{! /example }} +
+<div id="myCarousel" class="carousel slide">
+  <!-- {{_i}}Carousel items{{/i}} -->
+  <div class="carousel-inner">
+    <div class="active item">…</div>
+    <div class="item">…</div>
+    <div class="item">…</div>
+  </div>
+  <!-- {{_i}}Carousel nav{{/i}} -->
+  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+</div>
+
-
+
{{_i}}Heads up!{{/i}} {{_i}}When implementing this carousel, remove the images we have provided and replace them with your own.{{/i}}
@@ -1264,7 +1271,12 @@ $('#myCollapsible').on('hidden', function () {

{{_i}}Usage{{/i}}

-

{{_i}}Call via javascript:{{/i}}

+ +

{{_i}}Via data attributes{{/i}}

+

{{_i}}...{{/i}}

+ +

{{_i}}Via javascript{{/i}}

+

{{_i}}Call carousel manually with:{{/i}}

$('.carousel').carousel()

{{_i}}Options{{/i}}

@@ -1294,22 +1306,6 @@ $('#myCollapsible').on('hidden', function () { -

{{_i}}Markup{{/i}}

-

{{_i}}Data attributes are used for the previous and next conrols. Check out the example markup below.{{/i}}

-
-<div id="myCarousel" class="carousel slide">
-  <!-- {{_i}}Carousel items{{/i}} -->
-  <div class="carousel-inner">
-    <div class="active item">…</div>
-    <div class="item">…</div>
-    <div class="item">…</div>
-  </div>
-  <!-- {{_i}}Carousel nav{{/i}} -->
-  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
-  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
-</div>
-
-

{{_i}}Methods{{/i}}

.carousel({{_i}}options{{/i}})

{{_i}}Initializes the carousel with an optional options object and starts cycling through items.{{/i}}