diff --git a/bootstrap.css b/bootstrap.css index 6411413ff7..f57423b0c7 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Mon Dec 12 09:51:27 PST 2011 + * Date: Mon Dec 19 22:58:34 PST 2011 */ html, body { margin: 0; @@ -600,9 +600,11 @@ select, input[type=file] { line-height: 27px; } +select { + background-color: #ffffff; +} select[multiple] { height: inherit; - background-color: #ffffff; } input[type=image] { -webkit-box-shadow: none; @@ -2492,27 +2494,28 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } -.media-grid { +.thumbnails { margin-left: -20px; margin-bottom: 0; + list-style: none; zoom: 1; } -.media-grid:before, .media-grid:after { +.thumbnails:before, .thumbnails:after { display: table; *display: inline; content: ""; zoom: 1; } -.media-grid:after { +.thumbnails:after { clear: both; } -.media-grid li { - display: inline; -} -.media-grid a { +.thumbnails > li { float: left; - padding: 4px; margin: 0 0 20px 20px; +} +.thumbnail { + display: block; + line-height: 1; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; @@ -2521,15 +2524,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } -.media-grid a img { - display: block; -} -.media-grid a:hover { +a.thumbnail:hover { border-color: #0069d6; -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } +.thumbnail > img { + display: block; + margin: 4px; +} +.thumbnail .caption { + padding: 9px; +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index b9e7dd1ee5..4bb1adc5c0 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -100,7 +100,8 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto; input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;} -select[multiple]{height:inherit;background-color:#ffffff;} +select{background-color:#ffffff;} +select[multiple]{height:inherit;} input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} textarea{height:auto;} input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} @@ -325,10 +326,12 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;*display:inline;content:"";zoom:1;} -.media-grid:after{clear:both;} -.media-grid li{display:inline;} -.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} -.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} +.thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} +.thumbnails:after{clear:both;} +.thumbnails>li{float:left;margin:0 0 20px 20px;} +.thumbnail{display:block;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);} +a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} +.thumbnail>img{display:block;margin:4px;} +.thumbnail .caption{padding:9px;} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 586b5334b1..3cf2208e96 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -25,7 +25,7 @@ body > .navbar-fixed .brand { float: right; font-weight: bold; color: #000; - text-shadow: 0 1px 0 rgba(255,255,255,.1); + text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125); } body > .navbar-fixed .brand:hover { text-decoration: none; @@ -449,7 +449,7 @@ h2 + table { /* Provide enough space on right-hand side for benefits list */ .jumbotron h1, .jumbotron p { - margin-right: 20%; + margin-right: 40%; } } diff --git a/docs/components.html b/docs/components.html index b4a88dd078..56e71b0f7f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -58,94 +58,145 @@ ================================================== -->
-

Media Displaying images and videos

+

Thumbnails Grids of images, videos, text, and more

- +
-
-

Media grid

-

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

+
+

Default thumbnails

+

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

+
-
-

Example thumbnails

-

Thumbnails in the .media-grid can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the .span2, .span4, and .span6 column sizes.

-

Large

-
    -
  • - - - +
    +

    Highly customizable

    +

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

    +
      +
    • +
      + +
      +
      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.

      +

      Action Action

      +
      +
      • -
    • - - - +
    • +
      + +
      +
      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.

      +

      Action Action

      +
      +
    -

    Medium

    - -

    Small

    - -

    Coding them

    -

    Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.

    +
    +
+ +
+
+

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.

+
+
+ +
+
+

The 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="media-grid">
-  <li>
-    <a href="#">
-      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+<ul class="thumbnails">
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
     </a>
   </li>
-  <li>
-    <a href="#">
-      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
-    </a>
+  ...
+</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="span3">
+    <div class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
+      <h5>Thumbnail label</h5>
+      <p>Thumbnail caption right here...</p>
+    </div>
   </li>
+  ...
 </ul>
-
+
+

More examples

+

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

+ +
+
+
diff --git a/docs/javascript.html b/docs/javascript.html index 6c0e12c192..56e60e98c7 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -819,7 +819,7 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { 
<button class="btn" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
-</scrip>
+</script>

Demo

diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 8b7e620fb9..7431ae58b3 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -64,34 +64,34 @@

Default 940px grid

-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
-
4
-
4
-
4
+
4
+
4
+
4
-
4
-
8
+
4
+
8
-
6
-
6
+
6
+
6
-
12
+
12
@@ -383,6 +383,17 @@ }); + + diff --git a/docs/upgrading.html b/docs/upgrading.html new file mode 100644 index 0000000000..cd0ca8e22d --- /dev/null +++ b/docs/upgrading.html @@ -0,0 +1,152 @@ + + + + + Bootstrap, from Twitter: Upgrading from v1.4 to v2.0 + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Bootstrap + +
+
+
+ +
+ + +
+

Upgrading to Bootstrap 2

+

Learn about significant changes and additions since v1.4 with this handy guide.

+
+ + +

Rough outline

+ + + + + + + + + + +
+ + + + + + + + + + + + + + + + + diff --git a/lib/forms.less b/lib/forms.less index 8d4369b186..a73e6f545f 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -93,10 +93,14 @@ input[type=file] { line-height: @baseLineHeight * 1.5; } +// Chrome on Linux needs background color +select { + background-color: @white; +} + // Make multiple select elements height not fixed select[multiple] { height: inherit; - background-color: @white; // Fixes Chromium bug? } // Remove shadow from image inputs diff --git a/lib/media-grids.less b/lib/media-grids.less index 7ceade651b..12626df3f1 100644 --- a/lib/media-grids.less +++ b/lib/media-grids.less @@ -1,26 +1,33 @@ -// MEDIA GRIDS -// ----------- +// THUMBNAILS +// ---------- -.media-grid { +.thumbnails { margin-left: -20px; margin-bottom: 0; + list-style: none; .clearfix(); - li { - display: inline; - } - a { - float: left; - padding: 4px; - margin: 0 0 20px 20px; - border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 1px rgba(0,0,0,.075)); - img { - display: block; - } - &:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); - } - } +} +.thumbnails > li { + float: left; + margin: 0 0 20px 20px; +} +.thumbnail { + display: block; + line-height: 1; + border: 1px solid #ddd; + .border-radius(4px); + .box-shadow(0 1px 1px rgba(0,0,0,.075)); +} +// Add a hover state for linked versions only +a.thumbnail:hover { + border-color: @linkColor; + .box-shadow(0 1px 4px rgba(0,105,214,.25)); +} +// Images and captions +.thumbnail > img { + display: block; + margin: 4px; +} +.thumbnail .caption { + padding: 9px; }