From 521ff5c8a7c87b30de3491bfcefe4dd5f49382c4 Mon Sep 17 00:00:00 2001 From: Francis Brunelle Date: Wed, 31 Jul 2013 22:37:36 -0400 Subject: add nav to media object and thumbnails --- components.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 227526a28..862bf93f0 100644 --- a/components.html +++ b/components.html @@ -1694,7 +1694,7 @@ body { padding-bottom: 70px; }

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

-

Default thumbnails

+

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

@@ -1731,7 +1731,7 @@ body { padding-bottom: 70px; }
{% endhighlight %} -

Custom content thumbnails

+

Custom content thumbnails

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

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

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

-

Default example

+

Default media

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

@@ -2059,7 +2059,7 @@ body { padding-bottom: 70px; }
{% endhighlight %} -

Media list

+

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

    -- cgit v1.2.3 From d0b94ead9a660adeca599b2cc49ce5134d432f2f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 2 Aug 2013 09:32:58 -0700 Subject: Fix #9008: consolidate `.alert-block` styles into `.alert` --- components.html | 17 ----------------- 1 file changed, 17 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 227526a28..13a8da2b3 100644 --- a/components.html +++ b/components.html @@ -1813,23 +1813,6 @@ body { padding-bottom: 70px; } Warning! Best check yo self, you're not looking too good.
-{% endhighlight %} - -

Block alerts

-

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

-
-
- -

Warning!

-

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Warning!

-

...

-
{% endhighlight %}

Contextual alternatives

-- cgit v1.2.3 From 6b850132d056a136dc4734c4d68c9e1c23b7843e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 2 Aug 2013 17:57:19 -0700 Subject: Remove requirement of `.list-group-flush` when list groups are in panels Fixes #8900 --- components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 13a8da2b3..d5ee08cc3 100644 --- a/components.html +++ b/components.html @@ -2350,7 +2350,7 @@ body { padding-bottom: 70px; }

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.

-
    +
    • Cras justo odio
    • Dapibus ac facilisis in
    • Morbi leo risus
      • @@ -2366,7 +2366,7 @@ body { padding-bottom: 70px; }

      ...

      -
        +
        • Cras justo odio
        • Dapibus ac facilisis in
        • Morbi leo risus
          • -- cgit v1.2.3 From 23ef8c0c209844dd8b92d2a5ac82daffa7bd2914 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 3 Aug 2013 21:39:57 -0700 Subject: Greater standardization of sizing terminology In class names: * large => lg * small => sm * mini => xs ("Extra small") In screen size categories: * Tiny => Extra small --- components.html | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 86b4e71da..4bbafb63f 100644 --- a/components.html +++ b/components.html @@ -385,7 +385,7 @@ base_url: "../"
          -
            @@ -397,7 +397,7 @@ base_url: "../"
          -
            @@ -413,7 +413,7 @@ base_url: "../" {% highlight html %}
            -
              @@ -423,7 +423,7 @@ base_url: "../"
              -
                @@ -535,8 +535,8 @@ base_url: "../"

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

                - @ - + @ +

                @@ -545,14 +545,14 @@ base_url: "../"

                - @ - + @ +
                {% highlight html %}
                - @ - + @ +
                @@ -561,8 +561,8 @@ base_url: "../"
                - @ - + @ +
                {% endhighlight %} @@ -1446,10 +1446,10 @@ body { padding-bottom: 70px; }

                Sizes

                -

                Fancy larger or smaller pagination? Add .pagination-large or .pagination-small for additional sizes.

                +

                Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

                -
                  +
                  • «
                  • 1
                  • 2
                    • @@ -1471,7 +1471,7 @@ body { padding-bottom: 70px; }
                -
                  +
                  • «
                  • 1
                  • 2
                    • @@ -1483,9 +1483,9 @@ body { padding-bottom: 70px; }
                {% highlight html %} -
                  ...
                +
                  ...
                  ...
                -
                  ...
                +
                  ...
                {% endhighlight %} @@ -1659,14 +1659,14 @@ body { padding-bottom: 70px; }

                Hello, world!

                This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

                -

                Learn more

                +

                Learn more

              {% highlight html %}

              Hello, world!

              ...

              -

              Learn more

              +

              Learn more

              {% endhighlight %} @@ -2402,20 +2402,20 @@ body { padding-bottom: 70px; }

              Optional classes

              Control padding and rounded corners with two optional modifier classes.

              -
              +
              Look, I'm in a well!
              {% highlight html %} -
              ...
              +
              ...
              {% endhighlight %}
              -
              +
              Look, I'm in a well!
              {% highlight html %} -
              ...
              +
              ...
              {% endhighlight %}
              -- cgit v1.2.3 From 7a04e95b719c118ef531511300617f3edd361b08 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 3 Aug 2013 21:58:31 -0700 Subject: rm stray space in components.html --- components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index 4bbafb63f..d33eb54f6 100644 --- a/components.html +++ b/components.html @@ -1446,7 +1446,7 @@ body { padding-bottom: 70px; }

              Sizes

              -

              Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

              +

              Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

                -- cgit v1.2.3 From b9c572184f18a5c228dedd41e3b93b94c8d71b7b Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 3 Aug 2013 21:59:01 -0700 Subject: add .btn-xs to .btn-group example --- components.html | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) (limited to 'components.html') diff --git a/components.html b/components.html index d33eb54f6..4ba7cce45 100644 --- a/components.html +++ b/components.html @@ -408,6 +408,18 @@ base_url: "../"
              • Separated link
              +
              + + +
              {% highlight html %} @@ -430,6 +442,15 @@ base_url: "../" ...
            + + +
            + +
              + ... +
            {% endhighlight %} -- cgit v1.2.3 From a84e07b27220eddb075d4df65fe24d26c722df7a Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 3 Aug 2013 23:23:40 -0700 Subject: components.html: rm disconnected sentence fragment --- components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index 4ba7cce45..3e1875852 100644 --- a/components.html +++ b/components.html @@ -50,7 +50,7 @@ base_url: "../" {% endhighlight %} -

            Add a header to break up label sections of actions in any dropdown menu.

            +

            Add a header to label sections of actions in any dropdown menu.

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

          Vertical button groups

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

          -- cgit v1.2.3 From b6390d298aa71e6dccb10e539097fbc7aaa45b8a Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 4 Aug 2013 00:06:56 -0700 Subject: trivial docs grammar improvements --- components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index 7b0f0d0ed..289034060 100644 --- a/components.html +++ b/components.html @@ -246,7 +246,7 @@ base_url: "../"

          Single button dropdowns

          -

          Turn a button into dropdown toggle with some basic markup changes.

          +

          Turn a button into a dropdown toggle with some basic markup changes.

          -- cgit v1.2.3 From c15f5a89a07316404b289fc0c65db1a4e52c95d1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Aug 2013 14:19:32 -0700 Subject: Enable scrollable responsive nav bar Fixes #9007 in a hopefully decent way --- components.html | 44 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index 289034060..bf8c45afe 100644 --- a/components.html +++ b/components.html @@ -1326,7 +1326,49 @@ body { padding-bottom: 70px; }
          -

          Inverted variation

          + +

          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.

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

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

          -- cgit v1.2.3 From c4281f39190b99ed543b046430e32ff488092ecd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Aug 2013 15:30:28 -0700 Subject: Update labels to include a base class * Builds on the new button styles by requiring a `.btn-default` for the regular, gray labels * Updates components examples to show new stuff --- components.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index bf8c45afe..8ce62ae3e 100644 --- a/components.html +++ b/components.html @@ -1629,28 +1629,28 @@ body { padding-bottom: 70px; }

          Example

          -

          Example heading New

          -

          Example heading New

          -

          Example heading New

          -

          Example heading New

          -
          Example heading New
          -
          Example heading New
          +

          Example heading New

          +

          Example heading New

          +

          Example heading New

          +

          Example heading New

          +
          Example heading New
          +
          Example heading New
          {% highlight html %} -

          Example heading New

          +

          Example heading New

          {% endhighlight %}

          Available variations

          Add any of the below mentioned modifier classes to change the appearance of a label.

          - Default + Default Success Warning Danger Info
          {% highlight html %} -Default +Default Success Warning Danger -- cgit v1.2.3 From b29b8acd28984b1fae4817781c0553feea0958e7 Mon Sep 17 00:00:00 2001 From: Rakhat Jabagin Date: Tue, 6 Aug 2013 09:19:07 +0600 Subject: remove repeated 'pagination' class in code example --- components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index 8ce62ae3e..da3a69413 100644 --- a/components.html +++ b/components.html @@ -1562,7 +1562,7 @@ body { padding-bottom: 70px; }
          {% highlight html %}
            ...
          -
            ...
          +
            ...
            ...
          {% endhighlight %} -- cgit v1.2.3 From b976956432ccf2e0d6f809da1ca6a9d8e99eb39b Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 6 Aug 2013 12:09:44 -0700 Subject: Fix #9132, but in the correct branch People, don't PR against `gh-pages` please! --- components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'components.html') diff --git a/components.html b/components.html index da3a69413..b39385241 100644 --- a/components.html +++ b/components.html @@ -1312,7 +1312,7 @@ body { padding-bottom: 70px; } Title - +
          ...
          -- cgit v1.2.3 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; } -
- + +
- -