Bootstrap Thumbnails
This chapter discusses about Bootstrap thumbnails. A lot of sites need a way to lay outimages,videos,text, etc in a grid, and Bootstrap has an easy way to do this with thumbnails. To create thumbnails using Bootstrap:
Add an <a> tag with the class of.thumbnail around an image.
This adds four pixels of padding and a gray border.
On hover, an animated glow outlines the image.
The following example demonstrates a default thumbnail:
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<imgsrc="/bootstrap/images/kittens.jpg"
alt="Generic placeholder thumbnail">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<imgsrc="/bootstrap/images/kittens.jpg"
alt="Generic placeholder thumbnail">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<imgsrc="/bootstrap/images/kittens.jpg"
alt="Generic placeholder thumbnail">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<imgsrc="/bootstrap/images/kittens.jpg"
alt="Generic placeholder thumbnail">
</a>
</div>
</div>
Adding Custom Content
Now that we have a basic thumbnail, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Follow the steps below:
Change the <a> tag that has a class of.thumbnail to a <div>.
Inside of that <div>, you can add anything you need. As this is a <div>, we can use the default span-based naming convention for sizing.
If you want to group multiple images, place them in an unordered list, and each list item will be floated to the left.
The following example demonstrates this:
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<imgsrc="/bootstrap/images/kittens.jpg"
alt="Generic placeholder thumbnail">
</div>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href="#" class="btnbtn-primary" role="button">
Button
</a>
<a href="#" class="btnbtn-default" role="button">
Button
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<imgsrc="/bootstrap/images/kittens.jpg"
alt="Generic placeholder thumbnail">
</div>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href="#" class="btnbtn-primary" role="button">
Button
</a>
<a href="#" class="btnbtn-default" role="button">
Button
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<imgsrc="/bootstrap/images/kittens.jpg"
alt="Generic placeholder thumbnail">
</div>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href="#" class="btnbtn-primary" role="button">
Button
</a>
<a href="#" class="btnbtn-default" role="button">
Button
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<imgsrc="/bootstrap/images/kittens.jpg"
alt="Generic placeholder thumbnail">
</div>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href="#" class="btnbtn-primary" role="button">
Button
</a>
<a href="#" class="btnbtn-default" role="button">
Button
</a>
</p>
</div>
</div>
</div>
ليست هناك تعليقات:
إرسال تعليق