From: Mark Otto Date: Tue, 30 Apr 2013 18:32:11 +0000 (-0700) Subject: nuke line numbers X-Git-Tag: v3.0.0-rc1~394 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=e67d3818ed962a69cb970fa9255647a087c643c9;p=thirdparty%2Fbootstrap.git nuke line numbers --- diff --git a/docs/docs.html b/docs/docs.html index b134416cc5..60711f5daa 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -85,7 +85,7 @@ title: Bootstrap Documentation

HTML template

Copy and paste the HTML from below to get started with a bare bones Bootstrap document.

-{% highlight html linenos %} +{% highlight html %} @@ -220,13 +220,13 @@ title: Bootstrap Documentation

There are varying degrees to customizing components, but most fall into two camps: light customizations and complete visual overhauls. Luckily, there are plenty of examples of both.

We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the Twitter Translation Center (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, .btn-ttc.

Instead of using the provided Bootstrap buttons, which only require just one class to start, .btn, we'll add our own modifier class, .btn-ttc. This will give us a slightly custom look with minimal effort.

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

In the custom stylesheet, add the following CSS:

-{% highlight css linenos %} +{% highlight css %} /* Custom button -------------------------------------------------- */ @@ -293,7 +293,7 @@ title: Bootstrap Documentation

HTML5 doctype required

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

-{% highlight html linenos %} +{% highlight html %} ... @@ -303,7 +303,7 @@ title: Bootstrap Documentation

Mobile first

With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

-{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -361,7 +361,7 @@ title: Bootstrap Documentation
6
-{% highlight html linenos %} +{% highlight html %}
1
1
@@ -402,7 +402,7 @@ title: Bootstrap Documentation
6 offset 3
-{% highlight html linenos %} +{% highlight html %}
...
...
@@ -432,7 +432,7 @@ title: Bootstrap Documentation
-{% highlight html linenos %} +{% highlight html %}
Level 1: 9 columns @@ -455,7 +455,7 @@ title: Bootstrap Documentation
3
-{% highlight html linenos %} +{% highlight html %}
9
3
@@ -469,7 +469,7 @@ title: Bootstrap Documentation
4 cols, 6 small cols
4 cols, 12 small cols
-{% highlight html linenos %} +{% highlight html %}
4 cols, 6 small cols
4 cols, 6 small cols
@@ -482,7 +482,7 @@ title: Bootstrap Documentation

Variables

Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

-{% highlight css linenos %} +{% highlight css %} @grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px; @@ -490,7 +490,7 @@ title: Bootstrap Documentation

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

-{% highlight css linenos %} +{% highlight css %} // Creates a wrapper for a series of columns .make-row() { // Negative margin the row out to align the content of columns @@ -524,7 +524,7 @@ title: Bootstrap Documentation

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.

-{% highlight css linenos %} +{% highlight css %} .wrapper { .make-row(); } @@ -536,7 +536,7 @@ title: Bootstrap Documentation .make-column-offset(1); } {% endhighlight %} -{% highlight html linenos %} +{% highlight html %}
...
...
@@ -589,7 +589,7 @@ title: Bootstrap Documentation
-{% highlight html linenos %} +{% highlight html %}

...

...

...

@@ -606,7 +606,7 @@ title: Bootstrap Documentation

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

-{% highlight html linenos %} +{% highlight html %}

...

{% endhighlight %} @@ -616,7 +616,7 @@ title: Bootstrap Documentation

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

-{% highlight html linenos %} +{% highlight html %}

...

{% endhighlight %} @@ -634,7 +634,7 @@ title: Bootstrap Documentation

This line of text is meant to be treated as fine print.

-{% highlight html linenos %} +{% highlight html %} This line of text is meant to be treated as fine print. {% endhighlight %} @@ -644,7 +644,7 @@ title: Bootstrap Documentation

The following snippet of text is rendered as bold text.

-{% highlight html linenos %} +{% highlight html %} rendered as bold text {% endhighlight %} @@ -653,7 +653,7 @@ title: Bootstrap Documentation

The following snippet of text is rendered as italicized text.

-{% highlight html linenos %} +{% highlight html %} rendered as italicized text {% endhighlight %} @@ -666,7 +666,7 @@ title: Bootstrap Documentation

Center aligned text.

Right aligned text.

-{% highlight html linenos %} +{% highlight html %}

Left aligned text.

Center aligned text.

Right aligned text.

@@ -680,7 +680,7 @@ title: Bootstrap Documentation

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

-{% highlight html linenos %} +{% highlight html %}

...

...

...

@@ -697,7 +697,7 @@ title: Bootstrap Documentation

An abbreviation of the word attribute is attr.

-{% highlight html linenos %} +{% highlight html %} attr {% endhighlight %} @@ -706,7 +706,7 @@ title: Bootstrap Documentation

HTML is the best thing since sliced bread.

-{% highlight html linenos %} +{% highlight html %} HTML {% endhighlight %} @@ -726,7 +726,7 @@ title: Bootstrap Documentation first.last@example.com -{% highlight html linenos %} +{% highlight html %}
Twitter, Inc.
795 Folsom Ave, Suite 600
@@ -752,7 +752,7 @@ title: Bootstrap Documentation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-{% highlight html linenos %} +{% highlight html %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

@@ -769,7 +769,7 @@ title: Bootstrap Documentation Someone famous in Source Title -{% highlight html linenos %} +{% highlight html %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title @@ -784,7 +784,7 @@ title: Bootstrap Documentation Someone famous in Source Title
-{% highlight html linenos %} +{% highlight html %}
...
@@ -815,7 +815,7 @@ title: Bootstrap Documentation
  • Eget porttitor lorem
    • -{% highlight html linenos %} +{% highlight html %} @@ -835,7 +835,7 @@ title: Bootstrap Documentation
  • Eget porttitor lorem
    • -{% highlight html linenos %} +{% highlight html %}
    1. ...
    @@ -862,7 +862,7 @@ title: Bootstrap Documentation
  • Eget porttitor lorem
    • -{% highlight html linenos %} +{% highlight html %} @@ -877,7 +877,7 @@ title: Bootstrap Documentation
  • Nulla volutpat
    • -{% highlight html linenos %} +{% highlight html %} @@ -896,7 +896,7 @@ title: Bootstrap Documentation
    Etiam porta sem malesuada magna mollis euismod.
    -{% highlight html linenos %} +{% highlight html %}
    ...
    ...
    @@ -918,7 +918,7 @@ title: Bootstrap Documentation
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    -{% highlight html linenos %} +{% highlight html %}
    ...
    ...
    @@ -944,7 +944,7 @@ title: Bootstrap Documentation
    For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %} For example, <section> should be wrapped as inline. {% endhighlight %} @@ -953,7 +953,7 @@ For example, <section> should be wrapped as inline. 
    <p>Sample text here...</p>
    -{% highlight html linenos %} +{% highlight html %} 
    <p>Sample text here...</p>
    {% endhighlight %} @@ -1003,7 +1003,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} ...
    @@ -1051,7 +1051,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} ...
    @@ -1095,7 +1095,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} ...
    @@ -1134,7 +1134,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} ...
    @@ -1174,7 +1174,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} ...
    @@ -1254,7 +1254,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} ... 1 @@ -1292,7 +1292,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %}
    Legend @@ -1325,7 +1325,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %}
    @@ -1370,7 +1370,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    @@ -1410,7 +1410,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -1419,7 +1419,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -1447,7 +1447,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    -{% highlight html linenos %} +{% highlight html %} @@ -1507,7 +1507,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -1550,7 +1550,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -1559,7 +1559,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -1594,7 +1594,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    @@ -1643,7 +1643,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    @@ -1694,7 +1694,7 @@ For example, <section> should be wrapped as inline. .00
    -{% highlight html linenos %} +{% highlight html %}
    @ @@ -1730,7 +1730,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    @ @@ -1764,7 +1764,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    @@ -1811,7 +1811,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    @@ -1879,7 +1879,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    @@ -1907,7 +1907,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %} @@ -1943,7 +1943,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %} @@ -1972,7 +1972,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %}
    @@ -1994,7 +1994,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    @@ -2007,7 +2007,7 @@ For example, <section> should be wrapped as inline.
    Inline help text
    -{% highlight html linenos %} +{% highlight html %} Inline help text {% endhighlight %} @@ -2017,7 +2017,7 @@ For example, <section> should be wrapped as inline. A longer block of help text that breaks onto a new line and may extend beyond one line. -{% highlight html linenos %} +{% highlight html %} A longer block of help text that breaks onto a new line and may extend beyond one line. {% endhighlight %} @@ -2044,7 +2044,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %} @@ -2088,7 +2088,7 @@ For example, <section> should be wrapped as inline.

    -{% highlight html linenos %} +{% highlight html %}

    @@ -2114,7 +2114,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -2129,7 +2129,7 @@ For example, <section> should be wrapped as inline.

    -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -2145,7 +2145,7 @@ For example, <section> should be wrapped as inline. Primary link Link

    -{% highlight html linenos %} +{% highlight html %} Primary link Link {% endhighlight %} @@ -2166,7 +2166,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} Link @@ -2199,7 +2199,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %} @@ -2220,16 +2220,16 @@ For example, <section> should be wrapped as inline.

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

    .pull-left

    Float an element left

    -{% highlight html linenos %} +{% highlight html %}
    ...
    {% endhighlight %} -{% highlight css linenos %} +{% highlight css %} .pull-left { float: left; } @@ -2237,10 +2237,10 @@ For example, <section> should be wrapped as inline.

    .pull-right

    Float an element right

    -{% highlight html linenos %} +{% highlight html %}
    ...
    {% endhighlight %} -{% highlight css linenos %} +{% highlight css %} .pull-right { float: right; } @@ -2248,10 +2248,10 @@ For example, <section> should be wrapped as inline.

    .clearfix

    Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

    -{% highlight html linenos %} +{% highlight html %}
    ...
    {% endhighlight %} -{% highlight css linenos %} +{% highlight css %} // Mixin .clearfix { &:before, @@ -2570,7 +2570,7 @@ For example, <section> should be wrapped as inline.

    How to use

    Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:

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

    Want to change the icon color? Just change the color of the parent element.

    @@ -2593,7 +2593,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %}
    @@ -2623,7 +2623,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    User @@ -2641,7 +2641,7 @@ For example, <section> should be wrapped as inline.
    Star
    -{% highlight html linenos %} +{% highlight html %} Star {% endhighlight %} @@ -2649,7 +2649,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -2663,7 +2663,7 @@ For example, <section> should be wrapped as inline.
  • Misc
    • -{% highlight html linenos %} +{% highlight html %}
    • Home
    • Library
      • @@ -2684,7 +2684,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %}
      @@ -2721,7 +2721,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    -{% highlight html linenos %} +{% highlight html %} -{% highlight html linenos %} +{% highlight html %}
      ...
    @@ -3319,7 +3319,7 @@ For example, <section> should be wrapped as inline.
  • Disabled link
    • -{% highlight html linenos %} +{% highlight html %}
      ...
    • Disabled link
      • @@ -3357,7 +3357,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
      ...
    • @@ -3391,7 +3391,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
      ...
    • @@ -3430,7 +3430,7 @@ For example, <section> should be wrapped as inline.
    -{% highlight html linenos %} +{% highlight html %}
    Title
      @@ -3450,7 +3450,7 @@ For example, <section> should be wrapped as inline. Title
    -{% highlight html linenos %} +{% highlight html %} Title {% endhighlight %} @@ -3465,7 +3465,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %}
    • Home
    • Link
      • @@ -3483,7 +3483,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %}
      @@ -3517,7 +3517,7 @@ For example, <section> should be wrapped as inline. -{% highlight html linenos %} +{% highlight html %}
      ...
      @@ -3526,7 +3526,7 @@ For example, <section> should be wrapped as inline.

      Body padding required

      The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:

      -{% highlight css linenos %} +{% highlight css %} body { padding-top: 64px; } @@ -3553,7 +3553,7 @@ body {
      -{% highlight html linenos %} +{% highlight html %}
      ...
      @@ -3562,7 +3562,7 @@ body {

      Body padding required

      The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:

      -{% highlight css linenos %} +{% highlight css %} body { padding-bottom: 64px; } @@ -3589,7 +3589,7 @@ body {
      -{% highlight html linenos %} +{% highlight html %}
      ...
      @@ -3645,7 +3645,7 @@ body { -{% highlight html linenos %} +{% highlight html %}
      @@ -3722,7 +3722,7 @@ body {
      -{% highlight html linenos %} +{% highlight html %}
      ...
      @@ -3754,7 +3754,7 @@ body {
    • Data
    -{% highlight html linenos %} +{% highlight html %} -{% highlight html linenos %} +{% highlight html %}
    • «
    • 1
      • @@ -3811,7 +3811,7 @@ body {
    • »
    -{% highlight html linenos %} +{% highlight html %}
    • «
    • 1
      • @@ -3819,7 +3819,7 @@ body {
    {% endhighlight %}

    You can optionally swap out active or disabled anchors for <span> to remove click functionality while retaining intended styles.

    -{% highlight html linenos %} +{% highlight html %}
    • «
    • 1
      • @@ -3876,7 +3876,7 @@ body {
    -{% highlight html linenos %} +{% highlight html %}
      ...
      ...
      ...
    @@ -3895,7 +3895,7 @@ body {
  • Next
    • -{% highlight html linenos %} +{% highlight html %} -{% highlight html linenos %} +{% highlight html %} -{% highlight html linenos %} +{% highlight html %}
      @@ -3953,7 +3953,7 @@ body {
      Example heading New
      Example heading New
      -{% highlight html linenos %} +{% highlight html %}

      Example heading New

      {% endhighlight %} @@ -3966,7 +3966,7 @@ body { Danger Info -{% highlight html linenos %} +{% highlight html %} Default Success Warning @@ -3989,7 +3989,7 @@ body {
      Inbox 42
      -{% highlight html linenos %} +{% highlight html %} Inbox 42 {% endhighlight %} @@ -4026,7 +4026,7 @@ body {
    -{% highlight html linenos %} +{% highlight html %} -{% highlight html linenos %} +{% highlight html %} -{% highlight html linenos %} +{% highlight html %}
    • Cras justo odio
    • Dapibus ac facilisis in
      • @@ -4540,7 +4540,7 @@ body {
    -{% highlight html linenos %} +{% highlight html %}
    • @@ -4567,7 +4567,7 @@ body {
    -{% highlight html linenos %} +{% highlight html %}
    • 14 @@ -4597,7 +4597,7 @@ body {
    -{% highlight html linenos %} +{% highlight html %}     -{% highlight html linenos %} +{% highlight html %}
    Panel heading
    @@ -4804,7 +4804,7 @@ body { Look, I'm in a well!
    -{% highlight html linenos %} +{% highlight html %}
    ...
    {% endhighlight %}

    Optional classes

    @@ -4814,7 +4814,7 @@ body { Look, I'm in a well! -{% highlight html linenos %} +{% highlight html %}
    ...
    {% endhighlight %} @@ -4823,7 +4823,7 @@ body { Look, I'm in a well! -{% highlight html linenos %} +{% highlight html %}
    ...
    {% endhighlight %} @@ -4856,23 +4856,23 @@ body {

    You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.

    That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: -{% highlight js linenos %} +{% highlight js %} $('body').off('.data-api') {% endhighlight %}

    Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:

    -{% highlight js linenos %} +{% highlight js %} $('body').off('.alert.data-api') {% endhighlight %}

    Programmatic API

    We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.

    -{% highlight js linenos %} +{% highlight js %} $(".btn.danger").button("toggle").addClass("fat") {% endhighlight %}

    All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):

    -{% highlight js linenos %} +{% highlight js %} $("#myModal").modal() // initialized with defaults $("#myModal").modal({ keyboard: false }) // initialized with no keyboard $("#myModal").modal('show') // initializes and invokes show immediately

    @@ -4882,7 +4882,7 @@ $("#myModal").modal('show') // initializes and invokes show immed

    No conflict

    Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.

    -{% highlight js linenos %} +{% highlight js %} var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality {% endhighlight %} @@ -4890,7 +4890,7 @@ $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the boot

    Events

    Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.

    All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.

    -{% highlight js linenos %} +{% highlight js %} $('#myModal').on('show', function (e) { if (!data) return e.preventDefault() // stops modal from being shown }) @@ -4952,7 +4952,7 @@ $('#myModal').on('show', function (e) { -{% highlight html linenos %} +{% highlight html %}
    @@ -5018,7 +5018,7 @@ $('#myModal').on('show', function (e) {
    Launch demo modal
    -{% highlight html linenos %} +{% highlight html %}
    Launch demo modal @@ -5048,13 +5048,13 @@ $('#myModal').on('show', function (e) {

    Via data attributes

    Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

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

    Via JavaScript

    Call a modal with id myModal with a single line of JavaScript:

    - {% highlight js linenos %}$('#myModal').modal(options){% endhighlight %} + {% highlight js %}$('#myModal').modal(options){% endhighlight %}

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

    @@ -5091,7 +5091,7 @@ $('#myModal').on('show', function (e) { path false

    If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

    -{% highlight html linenos %} +{% highlight html %} Click me {% endhighlight %} @@ -5102,7 +5102,7 @@ $('#myModal').on('show', function (e) {

    .modal(options)

    Activates your content as a modal. Accepts an optional options object.

    -{% highlight js linenos %} +{% highlight js %} $('#myModal').modal({ keyboard: false }) @@ -5110,15 +5110,15 @@ $('#myModal').modal({

    .modal('toggle')

    Manually toggles a modal.

    - {% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %} + {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}

    .modal('show')

    Manually opens a modal.

    - {% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %} + {% highlight js %}$('#myModal').modal('show'){% endhighlight %}

    .modal('hide')

    Manually hides a modal.

    - {% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %} + {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}

    Events

    Bootstrap's modal class exposes a few events for hooking into modal functionality.

    @@ -5148,7 +5148,7 @@ $('#myModal').modal({ -{% highlight js linenos %} +{% highlight js %} $('#myModal').on('hidden', function () { // do something… }) @@ -5258,7 +5258,7 @@ $('#myModal').on('hidden', function () {

    Via data attributes

    Add data-toggle="dropdown" to a link or button to toggle a dropdown.

    -{% highlight html linenos %} +{% highlight html %}
    Dropdown trigger
    {% endhighlight %}

    To keep URLs intact, use the data-target attribute instead of href="#".

    -{% highlight html linenos %} +{% highlight html %}
    Dropdown @@ -5280,7 +5280,7 @@ $('#myModal').on('hidden', function () {

    Via JavaScript

    Call the dropdowns via JavaScript:

    -{% highlight js linenos %} +{% highlight js %} $('.dropdown-toggle').dropdown() {% endhighlight %} @@ -5346,7 +5346,7 @@ $('.dropdown-toggle').dropdown()

    Via data attributes

    To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>. Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

    -{% highlight html linenos %} +{% highlight html %} ... @@ -5354,7 +5354,7 @@ $('.dropdown-toggle').dropdown()

    Via JavaScript

    Call the scrollspy via JavaScript:

    -{% highlight js linenos %} +{% highlight js %} $('#navbar-example').scrollspy() {% endhighlight %} @@ -5366,7 +5366,7 @@ $('#navbar-example').scrollspy()

    Methods

    .scrollspy('refresh')

    When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

    -{% highlight js linenos %} +{% highlight js %} $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); @@ -5457,7 +5457,7 @@ $('[data-spy="scroll"]').each(function () {

    Usage

    Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

    -{% highlight js linenos %} +{% highlight js %} $('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); @@ -5465,7 +5465,7 @@ $('#myTab a').click(function (e) { {% endhighlight %}

    You can activate individual tabs in several ways:

    -{% highlight js linenos %} +{% highlight js %} $('#myTab a[href="#profile"]').tab('show'); // Select tab by name $('#myTab a:first').tab('show'); // Select first tab $('#myTab a:last').tab('show'); // Select last tab @@ -5474,7 +5474,7 @@ $('#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 linenos %} +{% highlight html %}
    • Home
    • Profile
      • @@ -5490,7 +5490,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

      Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

      -{% highlight html linenos %} +{% highlight html %}

    Markup

    -{% highlight html linenos %} +{% highlight html %} Hover over me {% endhighlight %} @@ -5664,19 +5664,19 @@ $('#example').tooltip(options)

    .tooltip('show')

    Reveals an element's tooltip.

    - {% highlight js linenos %}$('#element').tooltip('show'){% endhighlight %} + {% highlight js %}$('#element').tooltip('show'){% endhighlight %}

    .tooltip('hide')

    Hides an element's tooltip.

    - {% highlight js linenos %}$('#element').tooltip('hide'){% endhighlight %} + {% highlight js %}$('#element').tooltip('hide'){% endhighlight %}

    .tooltip('toggle')

    Toggles an element's tooltip.

    - {% highlight js linenos %}$('#element').tooltip('toggle'){% endhighlight %} + {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}

    .tooltip('destroy')

    Hides and destroys an element's tooltip.

    - {% highlight js linenos %}$('#element').tooltip('destroy'){% endhighlight %} + {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %} @@ -5756,7 +5756,7 @@ $('#example').tooltip(options)

    Usage

    Enable popovers via JavaScript:

    - {% highlight js linenos %}$('#example').popover(options){% endhighlight %} + {% highlight js %}$('#example').popover(options){% endhighlight %}

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

    @@ -5846,19 +5846,19 @@ $('#example').tooltip(options)

    .popover('show')

    Reveals an elements popover.

    - {% highlight js linenos %}$('#element').popover('show'){% endhighlight %} + {% highlight js %}$('#element').popover('show'){% endhighlight %}

    .popover('hide')

    Hides an elements popover.

    - {% highlight js linenos %}$('#element').popover('hide'){% endhighlight %} + {% highlight js %}$('#element').popover('hide'){% endhighlight %}

    .popover('toggle')

    Toggles an elements popover.

    - {% highlight js linenos %}$('#element').popover('toggle'){% endhighlight %} + {% highlight js %}$('#element').popover('toggle'){% endhighlight %}

    .popover('destroy')

    Hides and destroys an element's popover.

    - {% highlight js linenos %}$('#element').popover('destroy'){% endhighlight %} + {% highlight js %}$('#element').popover('destroy'){% endhighlight %} @@ -5897,11 +5897,11 @@ $('#example').tooltip(options)

    Usage

    Enable dismissal of an alert via JavaScript:

    - {% highlight js linenos %}$(".alert").alert(){% endhighlight %} + {% highlight js %}$(".alert").alert(){% endhighlight %}

    Markup

    Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

    - {% highlight html linenos %}×{% endhighlight %} + {% highlight html %}×{% endhighlight %}

    Methods

    @@ -5910,7 +5910,7 @@ $('#example').tooltip(options)

    .alert('close')

    Closes an alert.

    - {% highlight js linenos %}$(".alert").alert('close'){% endhighlight %} + {% highlight js %}$(".alert").alert('close'){% endhighlight %}

    Events

    @@ -5933,7 +5933,7 @@ $('#example').tooltip(options) -{% highlight js linenos %} +{% highlight js %} $('#my-alert').bind('closed', function () { // do something… }) @@ -5959,7 +5959,7 @@ $('#my-alert').bind('closed', function () { Loading state
    -{% highlight html linenos %} +{% highlight html %} @@ -5970,7 +5970,7 @@ $('#my-alert').bind('closed', function () {
    -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -5989,7 +5989,7 @@ $('#my-alert').bind('closed', function () {
    -{% highlight html linenos %} +{% highlight html %}
    -{% highlight html linenos %} +{% highlight html %}
    -{% highlight html linenos %} +{% highlight html %} {% endhighlight %}

    $().button('loading')

    Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

    -{% highlight html linenos %} +{% highlight html %} {% endhighlight %} @@ -6077,7 +6077,7 @@ $('.nav-tabs').button()

    $().button(string)

    Resets button state - swaps text to any data defined text state.

    -{% highlight html linenos %} +{% highlight html %}