POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/thumbnails.html

   1 <div class="bs-docs-section">
   2   <h1 id="thumbnails" class="page-header">Thumbnails</h1>
   3
   4   <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>
   5   <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>
   6
   7   <h2 id="thumbnails-default">Default example</h2>
   8   <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
   9   <div class="bs-example" data-example-id="simple-thumbnails">
  10     <div class="row">
  11       <div class="col-xs-6 col-md-3">
  12         <a href="#" class="thumbnail">
  13           <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
  14         </a>
  15       </div>
  16       <div class="col-xs-6 col-md-3">
  17         <a href="#" class="thumbnail">
  18           <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
  19         </a>
  20       </div>
  21       <div class="col-xs-6 col-md-3">
  22         <a href="#" class="thumbnail">
  23           <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
  24         </a>
  25       </div>
  26       <div class="col-xs-6 col-md-3">
  27         <a href="#" class="thumbnail">
  28           <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
  29         </a>
  30       </div>
  31     </div>
  32   </div><!-- /.bs-example -->
  33 {% highlight html %}
  34 <div class="row">
  35   <div class="col-xs-6 col-md-3">
  36     <a href="#" class="thumbnail">
  37       <img src="..." alt="...">
  38     </a>
  39   </div>
  40   ...
  41 </div>
  42 {% endhighlight %}
  43
  44   <h2 id="thumbnails-custom-content">Custom content</h2>
  45   <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>
  46   <div class="bs-example" data-example-id="thumbnails-with-custom-content">
  47     <div class="row">
  48       <div class="col-sm-6 col-md-4">
  49         <div class="thumbnail">
  50           <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
  51           <div class="caption">
  52             <h3>Thumbnail label</h3>
  53             <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>
  54             <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  55           </div>
  56         </div>
  57       </div>
  58       <div class="col-sm-6 col-md-4">
  59         <div class="thumbnail">
  60           <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
  61           <div class="caption">
  62             <h3>Thumbnail label</h3>
  63             <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>
  64             <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  65           </div>
  66         </div>
  67       </div>
  68       <div class="col-sm-6 col-md-4">
  69         <div class="thumbnail">
  70           <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
  71           <div class="caption">
  72             <h3>Thumbnail label</h3>
  73             <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>
  74             <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  75           </div>
  76         </div>
  77       </div>
  78     </div>
  79   </div><!-- /.bs-example -->
  80 {% highlight html %}
  81 <div class="row">
  82   <div class="col-sm-6 col-md-4">
  83     <div class="thumbnail">
  84       <img src="..." alt="...">
  85       <div class="caption">
  86         <h3>Thumbnail label</h3>
  87         <p>...</p>
  88         <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  89       </div>
  90     </div>
  91   </div>
  92 </div>
  93 {% endhighlight %}
  94 </div>