From a8d95d4721e714a7e1d683e14e997faa5ccddaff Mon Sep 17 00:00:00 2001 From: adamjacobbecker Date: Tue, 6 Aug 2013 21:25:36 -0700 Subject: Improve accessibility (Section 508, WCAG) This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices. What was done - Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria) - Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users. - Advised users to always use label elements. For inline forms, they can hide them with `.sr-only` - Added 'Skip navigation' link - Added "Accessibility" section to getting-started.html. What *wasn't* done - Contrast issues (twbs#3572) - Tooltips (twbs#8469) - Documentation re: usage of icons, since they now live in a separate repo Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out. --- components.html | 126 +++++++++++++++++++++++++++++++++----------------------- 1 file changed, 75 insertions(+), 51 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index b39385241..b09431625 100644 --- a/components.html +++ b/components.html @@ -1020,7 +1020,7 @@ base_url: "../"

To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.

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

Make navbars accessible

+

Be sure to add a role="navigation" to every navbar to help with accessibility.

+

Navbar components

A simple link to show your brand or project name only requires an anchor tag.

-
+
@@ -1056,7 +1060,7 @@ base_url: "../"

Nav items are simple to add via unordered lists.

-
+
-
+
{% highlight html %} - + {% endhighlight %}
-- cgit v1.2.3 From 0b9efa95656a4f04b3bf09d55727fcfa9158e65a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 13:20:24 -0700 Subject: fix indentation --- components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index b61d1997e..27bd81ccb 100644 --- a/components.html +++ b/components.html @@ -955,8 +955,8 @@ base_url: "../"
  • Separated link
    • - - + +
    {% highlight html %} -- cgit v1.2.3 From a88888aaeb9c0f0138abbf7824a55aa51c394ea9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 14:49:50 -0700 Subject: fix broken components page, also likely from @kevinsuttle's #9332 --- components.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 27bd81ccb..8a10b21f8 100644 --- a/components.html +++ b/components.html @@ -1179,7 +1179,7 @@ base_url: "../"

    Add .navbar-fixed-top.

    -
    +
    +
    {% highlight html %} {% highlight html %} {% highlight html %} -
    +
    - + {% endhighlight %} -- cgit v1.2.3 From a86f5d24f8ce1c0ce06be74ed3602fbb83ea6594 Mon Sep 17 00:00:00 2001 From: Kevin Suttle Date: Sun, 11 Aug 2013 21:41:31 -0400 Subject: Give forms and search fields proper ARIA roles http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/#tablex http://www.w3.org/TR/wai-aria/roles#form http://www.w3.org/TR/wai-aria/roles#search --- components.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 8a10b21f8..ea75fe32d 100644 --- a/components.html +++ b/components.html @@ -532,7 +532,7 @@ base_url: "../"

    Basic input group

    -
    +
    @ @@ -569,7 +569,7 @@ base_url: "../"

    Optional sizes

    Add the relative form sizing classes to the .input-group-addon.

    - +
    @ @@ -692,7 +692,7 @@ base_url: "../"

    Buttons with dropdowns

    - +
    @@ -762,7 +762,7 @@ base_url: "../" {% endhighlight %}

    Segmented dropdown groups

    - +
    @@ -1083,14 +1083,14 @@ base_url: "../"
    {% highlight html %} - + @@ -1285,8 +1285,8 @@ body { padding-bottom: 70px; } -
    - + +
    • Link
      • @@ -1355,8 +1355,8 @@ body { padding-bottom: 70px; }
    • Link
    • Link
    -
    - + +
    @@ -1405,8 +1405,8 @@ body { padding-bottom: 70px; } -
    - + +
    • Link
      • -- cgit v1.2.3 From 6dbf588237529fc8909bf65caa103fd4fc224fbc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 01:20:22 -0700 Subject: fixes #9310: alerts aren't dismissable by default, now requires .alert-dismissable if you need a close button --- components.html | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index ea75fe32d..4364af0be 100644 --- a/components.html +++ b/components.html @@ -1880,40 +1880,30 @@ body { padding-bottom: 70px; }

    Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

    -

    Default alert

    +

    Default alert

    Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

    -
    -

    Ensure proper behavior across all devices

    -

    Be sure to use the <button> element with the data-dismiss="alert" data attribute.

    -
    -
    - Warning! Best check yo self, you're not looking too good.
    {% highlight html %}
    - Warning! Best check yo self, you're not looking too good.
    {% endhighlight %} -

    Contextual alternatives

    +

    Contextual alternatives

    Add optional classes to change an alert's connotation.

    - Oh snap! Change a few things up and try submitting again.
    - Well done! You successfully read this important alert message.
    - Heads up! This alert needs your attention, but it's not super important.
    @@ -1923,19 +1913,36 @@ body { padding-bottom: 70px; }
    ...
    {% endhighlight %} - +

    Dismissable alerts

    +

    Build on any alert by adding an optional .alert-dismissable and close button.

    +
    +
    + + Warning! Best check yo self, you're not looking too good. +
    +
    +{% highlight html %} +
    + + Warning! Best check yo self, you're not looking too good. +
    +{% endhighlight %} + +
    +

    Ensure proper behavior across all devices

    +

    Be sure to use the <button> element with the data-dismiss="alert" data attribute.

    +
    + +

    Use the .alert-link utility class to quickly provide matching colored links within any alert.

    - Oh snap! Change a few things up and try submitting again.
    - Well done! You successfully read this important alert message.
    - Heads up! This alert needs your attention, but it's not super important.
    -- cgit v1.2.3 From 5e73cc90d9104dc251fba5dcaf203523785ee9a5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 01:39:43 -0700 Subject: fixes #9266 manually on account of list group file reorganization --- components.html | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 4364af0be..4c52d59f3 100644 --- a/components.html +++ b/components.html @@ -2289,14 +2289,10 @@ body { padding-bottom: 70px; } Cras justo odio - Dapibus ac facilisis in - - Morbi leo risus - - Porta ac consectetur ac - - Vestibulum at eros - + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros
    {% highlight html %} @@ -2304,14 +2300,10 @@ body { padding-bottom: 70px; } Cras justo odio - Dapibus ac facilisis in - - Morbi leo risus - - Porta ac consectetur ac - - Vestibulum at eros - + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros
    {% endhighlight %} -- cgit v1.2.3 From 38b2083f3cfd41711260a3b847e58594750a31eb Mon Sep 17 00:00:00 2001 From: Bas Bosman Date: Mon, 12 Aug 2013 17:19:55 +0200 Subject: Aria role search instead of form --- components.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 4c52d59f3..00bd56bf1 100644 --- a/components.html +++ b/components.html @@ -1285,8 +1285,8 @@ body { padding-bottom: 70px; } -
    - + +
    • Link
      • @@ -1355,8 +1355,8 @@ body { padding-bottom: 70px; }
    • Link
    • Link
    -
    - + +
    @@ -1405,8 +1405,8 @@ body { padding-bottom: 70px; } -
    - + +
    • Link
      • -- cgit v1.2.3 From 8dd45053ce70227f9a18531f7a110cc05c41c15e Mon Sep 17 00:00:00 2001 From: Bas Bosman Date: Mon, 12 Aug 2013 17:55:25 +0200 Subject: Add missing aria-hidden attribs to close buttons --- components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 4c52d59f3..07c26593c 100644 --- a/components.html +++ b/components.html @@ -1917,13 +1917,13 @@ body { padding-bottom: 70px; }

      Build on any alert by adding an optional .alert-dismissable and close button.

      - + Warning! Best check yo self, you're not looking too good.
      {% highlight html %}
      - + Warning! Best check yo self, you're not looking too good.
      {% endhighlight %} -- cgit v1.2.3 From a78c8d9c04e83a22d6eebc2e3d54cb2ccf6b614c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 14:03:57 -0700 Subject: Newfangled input and button group sizing (fixes #9295) Instead of applying `.btn-` or `.input-` to individual elements in button and input groups, we now have new sizing classes to keep your markup a little leaner. * Add `.input-group-sm` or `.input-group-lg` to your `.input-group` to replicate `.input-sm` and `.input-lg`, respectively. * Add `.btn-group-xs`, `.btn-group-sm`, or `.btn-group-lg` to your `.btn-group` to replicate `.btn-xs`, `.btn-sm`, and `. btn-lg`, respectively. Both sets of new sizing classes simply use the existing individual sizing classes as mixins, so customization of them is automatically inherited when compiling. --- components.html | 57 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 45 insertions(+), 12 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 7031647d6..d49e153f5 100644 --- a/components.html +++ b/components.html @@ -152,6 +152,39 @@ base_url: "../"
      ...
      ...
      +{% endhighlight %} + +

      Button group sizing

      +

      Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

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

      Nested button groups

      @@ -568,11 +601,11 @@ base_url: "../" {% endhighlight %}

      Optional sizes

      -

      Add the relative form sizing classes to the .input-group-addon.

      +

      Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

      -
      - @ - +
      + @ +

      @@ -580,14 +613,14 @@ base_url: "../"

      -
      - @ - +
      + @ +
      {% highlight html %} -
      - @ +
      + @
      @@ -596,9 +629,9 @@ base_url: "../"
      -
      - @ - +
      + @ +
      {% endhighlight %} -- cgit v1.2.3 From 5b9717ef67e679d3ae2a70023d042136db00ce71 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Aug 2013 16:00:51 -0700 Subject: add alt text to thumbnail s --- components.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index d49e153f5..c30ea31a8 100644 --- a/components.html +++ b/components.html @@ -1819,22 +1819,22 @@ body { padding-bottom: 70px; }
      - + Generic placeholder thumbnail
      - + Generic placeholder thumbnail
      - + Generic placeholder thumbnail
      - + Generic placeholder thumbnail
      @@ -1843,7 +1843,7 @@ body { padding-bottom: 70px; }
      - + ...
      ... -- cgit v1.2.3 From 598f811fa0838ba6153e07862621f13e6c877ca4 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Aug 2013 16:01:43 -0700 Subject: add alt text to media object s --- components.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index c30ea31a8..9bfd43982 100644 --- a/components.html +++ b/components.html @@ -2148,7 +2148,7 @@ body { padding-bottom: 70px; }
      - + Generic placeholder image

      Media heading

      @@ -2157,14 +2157,14 @@ body { padding-bottom: 70px; }
      - + Generic placeholder image

      Media heading

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      - + Generic placeholder image

      Media heading

      @@ -2177,7 +2177,7 @@ body { padding-bottom: 70px; } {% highlight html %}
      - + ...

      Media heading

      @@ -2192,7 +2192,7 @@ body { padding-bottom: 70px; }
      • - + Generic placeholder image

        Media heading

        @@ -2200,7 +2200,7 @@ body { padding-bottom: 70px; }
        - + Generic placeholder image

        Nested media heading

        @@ -2208,7 +2208,7 @@ body { padding-bottom: 70px; }
        - + Generic placeholder image

        Nested media heading

        @@ -2220,7 +2220,7 @@ body { padding-bottom: 70px; }
        - + Generic placeholder image

        Nested media heading

        @@ -2231,7 +2231,7 @@ body { padding-bottom: 70px; }
      • - + Generic placeholder image

        Media heading

        @@ -2244,7 +2244,7 @@ body { padding-bottom: 70px; }
        • - + ...

          Media heading

          -- cgit v1.2.3 From 10356f9d67e6d5a1f3440e58c81e054f078501d7 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Aug 2013 16:48:00 -0700 Subject: rm unnecessary blank id attribute --- components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index 9bfd43982..1631751d9 100644 --- a/components.html +++ b/components.html @@ -1124,7 +1124,7 @@ base_url: "../"
      - +
        @@ -1388,7 +1388,7 @@ body { padding-bottom: 70px; }
      • Link
      • Link
      -
      @@ -1438,7 +1438,7 @@ body { padding-bottom: 70px; }
    -
      -- cgit v1.2.3 From 3ec793072072773c2d834d99d7e4307629c18058 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Aug 2013 18:09:25 -0700 Subject: add ARIA roles to Dropdown examples in Components docs --- components.html | 52 ++++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 39039a448..ceb745688 100644 --- a/components.html +++ b/components.html @@ -20,11 +20,11 @@ base_url: "../"
      @@ -32,11 +32,11 @@ base_url: "../"
      {% endhighlight %} @@ -54,22 +54,22 @@ base_url: "../"
      {% highlight html %} {% endhighlight %} @@ -79,17 +79,17 @@ base_url: "../"
      {% highlight html %} {% endhighlight %} -- cgit v1.2.3 From b33989a97791560f064e723cfff2ec5b4ac65eba Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Aug 2013 18:59:58 -0700 Subject: add src attribute to holder.js-powered s so that they validate use `data:` URL of empty invalid PNG: src="data:image/png;base64," --- components.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index ceb745688..d213030bb 100644 --- a/components.html +++ b/components.html @@ -1819,22 +1819,22 @@ body { padding-bottom: 70px; }
      - Generic placeholder thumbnail + Generic placeholder thumbnail
      - Generic placeholder thumbnail + Generic placeholder thumbnail
      - Generic placeholder thumbnail + Generic placeholder thumbnail
      - Generic placeholder thumbnail + Generic placeholder thumbnail
      @@ -1856,7 +1856,7 @@ body { padding-bottom: 70px; }
      - +

      Thumbnail label

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      @@ -1866,7 +1866,7 @@ body { padding-bottom: 70px; }
      - +

      Thumbnail label

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      @@ -1876,7 +1876,7 @@ body { padding-bottom: 70px; }
      - +

      Thumbnail label

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      @@ -2148,7 +2148,7 @@ body { padding-bottom: 70px; }
      - Generic placeholder image + Generic placeholder image

      Media heading

      @@ -2157,14 +2157,14 @@ body { padding-bottom: 70px; }
      - Generic placeholder image + Generic placeholder image

      Media heading

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      - Generic placeholder image + Generic placeholder image

      Media heading

      @@ -2192,7 +2192,7 @@ body { padding-bottom: 70px; }
      • - Generic placeholder image + Generic placeholder image

        Media heading

        @@ -2200,7 +2200,7 @@ body { padding-bottom: 70px; }
        - Generic placeholder image + Generic placeholder image

        Nested media heading

        @@ -2208,7 +2208,7 @@ body { padding-bottom: 70px; }
        - Generic placeholder image + Generic placeholder image

        Nested media heading

        @@ -2220,7 +2220,7 @@ body { padding-bottom: 70px; }
        - Generic placeholder image + Generic placeholder image

        Nested media heading

        @@ -2231,7 +2231,7 @@ body { padding-bottom: 70px; }
      • - Generic placeholder image + Generic placeholder image

        Media heading

        -- cgit v1.2.3 From f2cea2dc476806b164687da331128dd5cc5132fb Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Aug 2013 19:29:16 -0700 Subject: add alt text to s in components.html --- components.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index d213030bb..a63219444 100644 --- a/components.html +++ b/components.html @@ -1856,7 +1856,7 @@ body { padding-bottom: 70px; }
        - + Generic placeholder thumbnail

        Thumbnail label

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        @@ -1866,7 +1866,7 @@ body { padding-bottom: 70px; }
        - + Generic placeholder thumbnail

        Thumbnail label

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        @@ -1876,7 +1876,7 @@ body { padding-bottom: 70px; }
        - + Generic placeholder thumbnail

        Thumbnail label

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        @@ -1890,7 +1890,7 @@ body { padding-bottom: 70px; }
        - + ...

        Thumbnail label

        ...

        -- cgit v1.2.3 From f111c3e763b4a3e10efe0da4e41cd5b4847a2b74 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Aug 2013 19:45:13 -0700 Subject: Components docs: Dropdowns section: add .sr-only toggle buttons so aria-labelledby validates --- components.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index a63219444..bbfcf69c6 100644 --- a/components.html +++ b/components.html @@ -19,7 +19,8 @@ base_url: "../"

        Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

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

        Plugin dependency

        +

        The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

        +
        +

        Make navbars accessible

        Be sure to add a role="navigation" to every navbar to help with accessibility.

        -

        Navbar components

        - - -

        A simple link to show your brand or project name only requires an anchor tag.

        -
        - -
        -{% highlight html %} -Title -{% endhighlight %} - - -

        Nav items are simple to add via unordered lists.

        -
        - -
        -{% highlight html %} - -{% endhighlight %} - - -

        To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.

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

        Optional navbar content

        +

        Quickly add other types of content, beyond links or forms, to a navbar with a few classes.

        For buttons not residing in a <form>, add this class to vertically center buttons within a navbar.

        {% highlight html %} {% endhighlight %} -

        Text

        +

        Text in navbars

        Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

        {% highlight html %} - +

        Signed in as Mark Otto

        {% endhighlight %} - +

        For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

        {% highlight html %} - +

        Signed in as Mark Otto

        {% endhighlight %} @@ -1212,15 +1247,26 @@ base_url: "../"

        Add .navbar-fixed-top.

        -
        {% highlight html %} @@ -1242,14 +1288,25 @@ body { padding-top: 70px; }

        Add .navbar-fixed-bottom instead.

        {% highlight html %} @@ -1270,15 +1327,26 @@ body { padding-bottom: 70px; }

        Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

        -
        {% highlight html %} @@ -1288,175 +1356,30 @@ body { padding-bottom: 70px; } {% endhighlight %} - -

        To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .navbar-toggle.

        -
        - -
        -{% highlight html %} - -{% endhighlight %} - -
        -

        Plugin dependency

        -

        The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

        -
        - - - -

        For instances where you have too many items in your navbar to fight within the viewport of a small device, add .nav-collapse-scrollable to your navbar's .nav-collapse to set a max-height and smooth scrolling.

        -
        - -
        -{% highlight html %} - -{% endhighlight %} - -

        Modify the look of the navbar by adding .navbar-inverse.

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

        Panel title

        - Panel content +
        + Panel content +

        Panel title

        - Panel content +
        + Panel content +

        Panel title

        - Panel content +
        + Panel content +

        Panel title

        - Panel content +
        + Panel content +
        {% highlight html %} @@ -2486,7 +2512,9 @@ body { padding-bottom: 70px; }
        Panel heading
        -

        Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +
        +

        Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +
          @@ -2502,7 +2530,9 @@ body { padding-bottom: 70px; }
          Panel heading
          -

          ...

          +
          +

          ...

          +
            -- cgit v1.2.3 From f15f259876d77004fadf5b5937af5ab6b5eabb8e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 09:59:38 -0700 Subject: derp --- components.html | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index bbfcf69c6..b619d0db0 100644 --- a/components.html +++ b/components.html @@ -230,11 +230,41 @@ base_url: "../"

            Vertical button groups

            Make a set of buttons appear vertically stacked rather than horizontally.

            -
            +
            +
            + + +
            +
            + + +
            +
            + + +
            {% highlight html %} -- cgit v1.2.3 From 69a3e9b4d07cdaa281525c067f11ea83e1863f1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 10:24:18 -0700 Subject: enable button groups in vertical button groups --- components.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index b619d0db0..fe4cf1631 100644 --- a/components.html +++ b/components.html @@ -230,7 +230,7 @@ base_url: "../"

            Vertical button groups

            Make a set of buttons appear vertically stacked rather than horizontally.

            -
            +
            @@ -265,6 +265,16 @@ base_url: "../"
          • Dropdown link
          +
          + + +
        {% highlight html %} -- cgit v1.2.3 From e61c71e0775f676c3e404e7a8853949c78bc4511 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 14:23:10 -0700 Subject: fix up broken tests by removing empty attr --- components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index bbfb2c86f..ef98af541 100644 --- a/components.html +++ b/components.html @@ -1128,7 +1128,7 @@ base_url: "../"
    -