From f12946be5a8e8529f64606ca73fe06e48f9fd583 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 25 Sep 2012 22:40:48 -0700 Subject: thumbnails cleanup: no more UL or LI elements needed, instead just use standard grid markup --- docs/assets/css/bootstrap-responsive.css | 25 +----- docs/assets/css/bootstrap.css | 26 ------ docs/base-css.html | 4 +- docs/components.html | 119 ++++++++----------------- docs/getting-started.html | 2 +- docs/index.html | 6 +- docs/scaffolding.html | 2 +- docs/templates/pages/base-css.mustache | 4 +- docs/templates/pages/components.mustache | 123 +++++++++----------------- docs/templates/pages/getting-started.mustache | 2 +- docs/templates/pages/index.mustache | 6 +- docs/templates/pages/scaffolding.mustache | 2 +- 12 files changed, 93 insertions(+), 228 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 3a1e9e697..f456bc213 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -355,12 +355,6 @@ uneditable-input.offset1 { margin-left: 9.615384615384613%; } - .thumbnails { - margin-left: -30px; - } - .thumbnails > li { - margin-left: 30px; - } } @media (min-width: 768px) and (max-width: 979px) { @@ -486,12 +480,7 @@ .container { width: auto; } - .row, - .thumbnails { - margin-left: 0; - } - .thumbnails > li { - float: none; + .row { margin-left: 0; } [class*="span"], @@ -500,19 +489,7 @@ float: none; width: 100%; margin-left: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - .span12 { - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } - .input-large, - .input-xlarge, - .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8fa27c91f..057753c3b 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -5173,32 +5173,6 @@ input[type="submit"].btn::-moz-focus-inner { border-width: 11px 0 11px 11px; } -.thumbnails { - margin-left: -20px; - list-style: none; -} - -.thumbnails:before, -.thumbnails:after { - display: table; - line-height: 0; - content: ""; -} - -.thumbnails:after { - clear: both; -} - -.row-fluid .thumbnails { - margin-left: 0; -} - -.thumbnails > li { - float: left; - margin-bottom: 20px; - margin-left: 20px; -} - .thumbnail { display: block; padding: 4px; diff --git a/docs/base-css.html b/docs/base-css.html index 3c218e68f..4a4b46b47 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -512,7 +512,7 @@ For example, <code><section></code> should be wrapped as inlin

Add any of the follow classes to the .table base class.

.table-striped

-

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

+

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE8).

@@ -1741,7 +1741,7 @@ For example, <code><section></code> should be wrapped as inlin <img src="..." class="img-circle"> <img src="..." class="img-polaroid"> -

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

+

Heads up! .img-rounded and .img-circle do not work in IE8 due to lack of border-radius support.

diff --git a/docs/components.html b/docs/components.html index ea0e12272..6422c1611 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1884,38 +1884,48 @@

Thumbnails 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.

-
-
    -
  • +
    +
    +
    -
    • -
  • +
+
- -
  • +
    • +
    - -
  • +
    • +
    - - +
    + +
    +<div class="row">
+  <div class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </div>
+  ...
+</div>
+
    -

    Highly customizable

    +

    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.

    -
    -
    +
    @@ -1934,8 +1944,8 @@

    Action Action

    - -
  • +
    • +
    @@ -1944,75 +1954,22 @@

    Action Action

    - - +
    + - -

    Why use thumbnails

    -

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    - -

    Simple, flexible markup

    -

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    - -

    Uses grid column sizes

    -

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    - -

    Markup

    -

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

    -<ul class="thumbnails">
-  <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/300x200" alt="">
-    </a>
-  </li>
-  ...
-</ul>
-
    -

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

    -
    -<ul class="thumbnails">
-  <li class="span4">
+<div class="row">
+  <div class="span4">
     <div class="thumbnail">
       <img src="http://placehold.it/300x200" alt="">
       <h3>Thumbnail label</h3>
       <p>Thumbnail caption...</p>
     </div>
-  </li>
+  </div>
   ...
-</ul>
+</div>
    -

    More examples

    -

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

    - - @@ -2144,7 +2101,7 @@

    Striped

    -

    Uses a gradient to create a striped effect. Not available in IE7-8.

    +

    Uses a gradient to create a striped effect. Not available in IE8.

    @@ -2259,7 +2216,7 @@

    Browser support

    -

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    +

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.

    Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

    diff --git a/docs/getting-started.html b/docs/getting-started.html index 7a6d05e42..b81c79ed6 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -106,7 +106,7 @@

    Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.

    -
    +

    Download compiled

    Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

    diff --git a/docs/index.html b/docs/index.html index 572a25925..9d0beba7e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -108,7 +108,7 @@

    Introducing Bootstrap.

    Need reasons to love Bootstrap? Look no further.

    -
    +

    By nerds, for nerds.

    @@ -117,7 +117,7 @@

    Made for everyone.

    -

    Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

    +

    Bootstrap was made to not only look and behave great in the latest desktop browsers (including IE8+), but in tablet and smartphone browsers via responsive CSS as well.

    @@ -130,7 +130,7 @@

    Built with Bootstrap.

    For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.

    -
    + 
     <div class="container-fluid">
-  <div class="row-fluid">
+  <div class="row">
     <div class="span2">
       <!--Sidebar content-->
     </div>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index e48cdb8bb..e41aa408e 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -449,7 +449,7 @@
           
    {{_i}}Add any of the follow classes to the .table base class.{{/i}}
    
 
           
    {{_i}}.table-striped{{/i}}
    
-          
    {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}
    
+          
    {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE8).{{/i}}
    @@ -1678,7 +1678,7 @@ <img src="..." class="img-circle"> <img src="..." class="img-polaroid"> -

    {{_i}}Heads up!{{/i}} {{_i}}.img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.{{/i}}

    +

    {{_i}}Heads up!{{/i}} {{_i}}.img-rounded and .img-circle do not work in IE8 due to lack of border-radius support.{{/i}}

    diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 19f2e67e2..15f60f5c1 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1813,38 +1813,48 @@

    {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

    -

    {{_i}}Default thumbnails{{/i}}

    +

    {{_i}}Default thumbnails{{/i}}

    {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

    -
    -
    +
    - -
  • +
    • +
    - -
  • +
    • +
    - - -
    + + + {{! /.bs-docs-example }} +
    +<div class="row">
+  <div class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </div>
+  ...
+</div>
+
    -

    {{_i}}Highly customizable{{/i}}

    +

    {{_i}}Custom content thumbnails{{/i}}

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

    -
    -
    +
    @@ -1863,8 +1873,8 @@

    {{_i}}Action{{/i}} {{_i}}Action{{/i}}

    - -
  • +
    • +
    @@ -1873,75 +1883,22 @@

    {{_i}}Action{{/i}} {{_i}}Action{{/i}}

    - - -
    - -

    {{_i}}Why use thumbnails{{/i}}

    -

    {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

    - -

    {{_i}}Simple, flexible markup{{/i}}

    -

    {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

    - -

    {{_i}}Uses grid column sizes{{/i}}

    -

    {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

    - -

    {{_i}}Markup{{/i}}

    -

    {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

    -
    -<ul class="thumbnails">
-  <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/300x200" alt="">
-    </a>
-  </li>
-  ...
-</ul>
-
    -

    {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

    + + + {{! /.bs-docs-example }} 
    -<ul class="thumbnails">
-  <li class="span4">
+<div class="row">
+  <div class="span4">
     <div class="thumbnail">
       <img src="http://placehold.it/300x200" alt="">
       <h3>{{_i}}Thumbnail label{{/i}}</h3>
       <p>{{_i}}Thumbnail caption...{{/i}}</p>
     </div>
-  </li>
+  </div>
   ...
-</ul>
+</div>
    -

    {{_i}}More examples{{/i}}

    -

    {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

    - - @@ -2073,7 +2030,7 @@

    {{_i}}Striped{{/i}}

    -

    {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}

    +

    {{_i}}Uses a gradient to create a striped effect. Not available in IE8.{{/i}}

    @@ -2188,7 +2145,7 @@

    {{_i}}Browser support{{/i}}

    -

    {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}

    +

    {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.{{/i}}

    {{_i}}Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.{{/i}}

    diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 0eecd6247..7ea2bff2e 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -35,7 +35,7 @@

    {{_i}}Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.{{/i}}

    -
    +

    {{_i}}Download compiled{{/i}}

    {{_i}}Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.{{/i}}

    diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index ddd296299..bf20bd2c7 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -37,7 +37,7 @@

    {{_i}}Introducing Bootstrap.{{/i}}

    {{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

    -
    +

    {{_i}}By nerds, for nerds.{{/i}}

    @@ -46,7 +46,7 @@

    {{_i}}Made for everyone.{{/i}}

    -

    {{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}

    +

    {{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (including IE8+), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}

    @@ -59,7 +59,7 @@

    {{_i}}Built with Bootstrap.{{/i}}

    {{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

    -
    + 
     <div class="container-fluid">
-  <div class="row-fluid">
+  <div class="row">
     <div class="span2">
       <!--{{_i}}Sidebar content{{/i}}-->
     </div>
-- 
cgit v1.2.3