diff options
Diffstat (limited to 'javascript.html')
| -rw-r--r-- | javascript.html | 122 |
1 files changed, 109 insertions, 13 deletions
diff --git a/javascript.html b/javascript.html index 39dbc6e8e..c330a4792 100644 --- a/javascript.html +++ b/javascript.html @@ -74,7 +74,7 @@ $('#myModal').on('show.bs.modal', function (e) { <div class="bs-callout bs-callout-warning" id="callout-third-party-libs"> <h4>Third-party libraries</h4> - <p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <a href="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p> + <p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p> </div> </div> @@ -110,7 +110,7 @@ $('#myModal').on('show.bs.modal', function (e) { </div> <div class="bs-callout bs-callout-warning"> <h4>Mobile device caveats</h4> - <p>There are some caveats regarding using modals on mobile devices. <a href="{{ page.base_url }}getting-started#mobile-modals">See our browser support docs</a> for details.</p> + <p>There are some caveats regarding using modals on mobile devices. <a href="{{ page.base_url }}getting-started#fixed-position-keyboards">See our browser support docs</a> for details.</p> </div> <h3>Static example</h3> @@ -223,9 +223,9 @@ $('#myModal').on('show.bs.modal', function (e) { <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> - </div><!-- /.modal-content --> - </div><!-- /.modal-dialog --> -</div><!-- /.modal --> + </div> + </div> +</div> {% endhighlight %} @@ -235,6 +235,67 @@ $('#myModal').on('show.bs.modal', function (e) { <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p> </div> + <h2 id="modals-sizes">Optional sizes</h2> + <p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p> + <div class="bs-example"> + <button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button> + <button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button> + </div> +{% highlight html %} +<!-- Large modal --> +<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button> + +<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-lg"> + <div class="modal-content"> + ... + </div> + </div> +</div> + +<!-- Small modal --> +<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button> + +<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-sm"> + <div class="modal-content"> + ... + </div> + </div> +</div> +{% endhighlight %} + + <!-- Modal content for the above example --> + <div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-lg"> + <div class="modal-content"> + + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> + </div> + <div class="modal-body"> + ... + </div> + </div><!-- /.modal-content --> + </div><!-- /.modal-dialog --> + </div><!-- /.modal --> + <div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-sm"> + <div class="modal-content"> + + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> + </div> + <div class="modal-body"> + ... + </div> + </div><!-- /.modal-content --> + </div><!-- /.modal-dialog --> + </div><!-- /.modal --> + + <h2 id="modals-usage">Usage</h2> <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.model-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p> @@ -843,6 +904,15 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> </div> </div><!-- /example --> +{% highlight html %} +<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> + +<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> + +<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> + +<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> +{% endhighlight %} <div class="bs-callout bs-callout-danger"> <h4>Opt-in functionality</h4> @@ -865,9 +935,17 @@ $('#example').tooltip(options) {% endhighlight %} <h3>Markup</h3> - <p>The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p> + <p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> 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 <code>top</code> by the plugin).</p> + <div class="bs-callout bs-callout-warning"> + <h4>Multiple-line links</h4> + <p>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 <code>white-space: nowrap;</code> to your anchors to avoid this.</p> + </div> {% highlight html linenos %} -<div class="tooltip"> +<!-- HTML to write --> +<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a> + +<!-- Generated markup by the plugin --> +<div class="tooltip top"> <div class="tooltip-inner"> Tooltip! </div> @@ -950,11 +1028,6 @@ $('#example').tooltip(options) <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p> </div> - <h3>Markup</h3> -{% highlight html %} -<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a> -{% endhighlight %} - <h3>Methods</h3> <h4>$().tooltip(options)</h4> @@ -1100,6 +1173,29 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { </button> </div> </div><!-- /example --> +{% highlight html %} +<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on left +</button> + +<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on top +</button> + +<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus +sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on bottom +</button> + +<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on right +</button> +{% endhighlight %} + + <div class="bs-callout bs-callout-warning"> + <h4>Multiple-line links</h4> + <p>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 <code>white-space: nowrap;</code> to your anchors to avoid this.</p> + </div> <h2 id="popovers-usage">Usage</h2> @@ -1957,7 +2053,7 @@ $('#myCarousel').on('slide.bs.carousel', function () { <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p> <p>Here's how the affix plugin works:</p> <ol> - <li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in it's top-most position. At this point no CSS positioning is required.</li> + <li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li> <li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li> <li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li> </ol> |