From d79431ca02683c9d1c754201260f66e5dda15614 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Dec 2013 16:29:55 -0800 Subject: Document new modal sizes --- javascript.html | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 64 insertions(+), 3 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 39dbc6e8e..b693eaaf9 100644 --- a/javascript.html +++ b/javascript.html @@ -223,9 +223,9 @@ $('#myModal').on('show.bs.modal', function (e) { - - - + + + {% endhighlight %} @@ -235,6 +235,67 @@ $('#myModal').on('show.bs.modal', function (e) {

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

+

Optional sizes

+

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.

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

Usage

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .model-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

-- cgit v1.2.3 From 1264cb714057188c743fad416ffaef35bc0b9d2d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 11:41:46 -0800 Subject: update tooltip docs --- javascript.html | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index b693eaaf9..ee8324245 100644 --- a/javascript.html +++ b/javascript.html @@ -904,6 +904,12 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { +{% highlight html %} + + + + +{% endhighlight %}

Opt-in functionality

@@ -926,9 +932,17 @@ $('#example').tooltip(options) {% endhighlight %}

Markup

-

The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).

+

The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).

+
+

Multiple-line links

+

Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

+
{% highlight html linenos %} -
+ +Hover over me + + +
Tooltip!
@@ -1011,11 +1025,6 @@ $('#example').tooltip(options)

Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.

-

Markup

-{% highlight html %} -Hover over me -{% endhighlight %} -

Methods

$().tooltip(options)

-- cgit v1.2.3 From cb3d9dfe8310a94a7b742ed62e088d64e93baba3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 11:44:16 -0800 Subject: Fixes #11833: add warning to docs for popover multiple line positioning; update it's docs with example markup, too --- javascript.html | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index ee8324245..76c9807eb 100644 --- a/javascript.html +++ b/javascript.html @@ -906,8 +906,11 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
{% highlight html %} + + + {% endhighlight %} @@ -1170,6 +1173,29 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
+{% highlight html %} + + + + + + + +{% endhighlight %} + +
+

Multiple-line links

+

Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

+

Usage

-- cgit v1.2.3 From a925a0b985281ce34666c9a8a5630ba258904cb5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 12:27:46 -0800 Subject: Browser/device support docs update * Fixes #11055: add mention of select menu styling on Android stock browsers with included optional fix * Update IDs and docs nav to include bookmark links to each section * Add callout to navbar docs about fixed position, inputs, and virtual keyboard --- javascript.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 76c9807eb..d83358a39 100644 --- a/javascript.html +++ b/javascript.html @@ -74,7 +74,7 @@ $('#myModal').on('show.bs.modal', function (e) {

Third-party libraries

-

Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the mailing list if you need help.

+

Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own.

@@ -110,7 +110,7 @@ $('#myModal').on('show.bs.modal', function (e) {

Mobile device caveats

-

There are some caveats regarding using modals on mobile devices. See our browser support docs for details.

+

There are some caveats regarding using modals on mobile devices. See our browser support docs for details.

Static example

-- cgit v1.2.3 From be508e043c2a5f53b352066a1628693adfa7755e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 15 Dec 2013 18:13:50 -0800 Subject: copyediting --- javascript.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index d83358a39..9dcef28f8 100644 --- a/javascript.html +++ b/javascript.html @@ -2053,7 +2053,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.

Here's how the affix plugin works:

    -
  1. To start, the plugin adds .affix-top to indicate the element is in it's top-most position. At this point no CSS positioning is required.
    2. +
  2. To start, the plugin adds .affix-top to indicate the element is in its top-most position. At this point no CSS positioning is required.
  3. Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's code CSS).
  4. If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.
-- cgit v1.2.3 From f8cee54f4bd59c4c311a39d3a1d482489125c585 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 15 Dec 2013 19:07:14 -0800 Subject: use unique IDs for modal labels in doc examples so HTML validates --- javascript.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 9dcef28f8..c330a4792 100644 --- a/javascript.html +++ b/javascript.html @@ -245,7 +245,7 @@ $('#myModal').on('show.bs.modal', function (e) { -