95 lines
4.2 KiB
HTML
95 lines
4.2 KiB
HTML
<div class="bs-docs-section">
|
|
<h1 id="thumbnails" class="page-header">Thumbnails</h1>
|
|
|
|
<p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
|
|
<p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <a href="http://masonry.desandro.com">Masonry</a>, <a href="http://isotope.metafizzy.co">Isotope</a>, or <a href="http://salvattore.com">Salvattore</a>.</p>
|
|
|
|
<h2 id="thumbnails-default">Default example</h2>
|
|
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
|
|
<div class="bs-example" data-example-id="simple-thumbnails">
|
|
<div class="row">
|
|
<div class="col-xs-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
|
</a>
|
|
</div>
|
|
<div class="col-xs-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
|
</a>
|
|
</div>
|
|
<div class="col-xs-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
|
</a>
|
|
</div>
|
|
<div class="col-xs-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.bs-example -->
|
|
{% highlight html %}
|
|
<div class="row">
|
|
<div class="col-xs-6 col-md-3">
|
|
<a href="#" class="thumbnail">
|
|
<img src="..." alt="...">
|
|
</a>
|
|
</div>
|
|
...
|
|
</div>
|
|
{% endhighlight %}
|
|
|
|
<h2 id="thumbnails-custom-content">Custom content</h2>
|
|
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
|
|
<div class="bs-example" data-example-id="thumbnails-with-custom-content">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="thumbnail">
|
|
<img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
|
|
<div class="caption">
|
|
<h3>Thumbnail label</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" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="thumbnail">
|
|
<img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
|
|
<div class="caption">
|
|
<h3>Thumbnail label</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" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="thumbnail">
|
|
<img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
|
|
<div class="caption">
|
|
<h3>Thumbnail label</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" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.bs-example -->
|
|
{% highlight html %}
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="thumbnail">
|
|
<img src="..." alt="...">
|
|
<div class="caption">
|
|
<h3>Thumbnail label</h3>
|
|
<p>...</p>
|
|
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endhighlight %}
|
|
</div>
|