mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

thumbnails cleanup: no more UL or LI elements needed, instead just use standard grid markup

Browse Source
This commit is contained in:
Mark Otto
2012-09-25 22:40:48 -07:00
parent 08eea302ef
commit f12946be5a
15 changed files with 138 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/templates/pages/components.mustache
Vendored
+61 -104
View File
@@ -1813,135 +1813,92 @@
<h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1>
</div>
<h2>{{_i}}Default thumbnails{{/i}}</h2>
<h3>{{_i}}Default thumbnails{{/i}}</h3>
<p>{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}</p>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3">
<div class="bs-docs-example">
<div class="row">
<div class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
</div>
<div class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
</div>
<div class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
</div>
<div class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
</div>
<h2>{{_i}}Highly customizable{{/i}}</h2>
<p>{{_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}}</p>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>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.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>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.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>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.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</li>
</ul>
</div>
<h3>{{_i}}Why use thumbnails{{/i}}</h3>
<p>{{_i}}Thumbnails (previously <code>.media-grid</code> 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}}</p>
<h3>{{_i}}Simple, flexible markup{{/i}}</h3>
<p>{{_i}}Thumbnail markup is simple&mdash;a <code>ul</code> with any number of <code>li</code> 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}}</p>
<h3>{{_i}}Uses grid column sizes{{/i}}</h3>
<p>{{_i}}Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.{{/i}}</p>
<h2>{{_i}}Markup{{/i}}</h2>
<p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
</div>
</div>
</div>{{! /.bs-docs-example }}
<pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt;
&lt;li class="span4"&gt;
&lt;div class="row"&gt;
&lt;div class="span3"&gt;
&lt;a href="#" class="thumbnail"&gt;
&lt;img src="http://placehold.it/300x200" alt=""&gt;
&lt;img src="http://placehold.it/260x180" alt=""&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/div&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>{{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:{{/i}}</p>
<h3>{{_i}}Custom content thumbnails{{/i}}</h3>
<p>{{_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}}</p>
<div class="bs-docs-example">
<div class="row">
<div class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>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.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</div>
<div class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>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.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</div>
<div class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>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.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</div>
</div>
</div>{{! /.bs-docs-example }}
<pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt;
&lt;li class="span4"&gt;
&lt;div class="row"&gt;
&lt;div class="span4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="http://placehold.it/300x200" alt=""&gt;
&lt;h3&gt;{{_i}}Thumbnail label{{/i}}&lt;/h3&gt;
&lt;p&gt;{{_i}}Thumbnail caption...{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/div&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<h2>{{_i}}More examples{{/i}}</h2>
<p>{{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}</p>
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x270" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
</ul>
</section>
@@ -2073,7 +2030,7 @@
</pre>
<h3>{{_i}}Striped{{/i}}</h3>
<p>{{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}</p>
<p>{{_i}}Uses a gradient to create a striped effect. Not available in IE8.{{/i}}</p>
<div class="bs-docs-example">
<div class="progress progress-striped">
<div class="bar" style="width: 20%;"></div>
@@ -2188,7 +2145,7 @@
<h2>{{_i}}Browser support{{/i}}</h2>
<p>{{_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}}</p>
<p>{{_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}}</p>
<p>{{_i}}Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.{{/i}}</p>
</section>