mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-04 16:24:22 +01:00
3406a5c97a
Our use of Holder.js in the docs is a mere implementation detail. Don't want to confuse people into thinking Holder.js is somehow required by the Thumbnail component. [skip sauce]
94 lines
3.9 KiB
HTML
94 lines
3.9 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>
|
|
|
|
<h3 id="thumbnails-default">Default example</h3>
|
|
<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 %}
|
|
|
|
<h3 id="thumbnails-custom-content">Custom content</h3>
|
|
<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>
|