Bootstrap3 Image

Posted by On 8月 24, 2014 0 Comment

Dummy image with holder

holder is javascript library to create dummy image.
Download and save holder.js in your project.

How to use

Please read holder git hub page.

<img class="media-object" data-src="holder.js/100x100" alt="dummy">

100×100 image is generated

Example

You also need include holder.js

<div class="container">
   <div class="pull-left">
      <img class="media-object" data-src="holder.js/100x100" alt="dummy">
   </div>
   <div class="media-body">
      <h4>Title</h4>
         Memo
   </div>
</div>

<script src="holder.js"></script>

Media Object

Show caption and detail message
Example is above.

Media list

<div class="container">
   <ul class="media-list">
      <li class="media">
         <div class="pull-left">
            <img class="media-object" data-src="holder.js/100x100" alt="dummy">
         </div>
         <div class="media-body">
            <h4 class="media-heading">Title</h4>
            <p>Description</p>
            <button class="btn btn-default pull-right">Details</button>
         </div>
      </li>
      <li class="media">
         <div class="pull-left">
             <img class="media-object" data-src="holder.js/100x100" alt="dummy">
         </div>
         <div class="media-body">
             <h4 class="media-heading">Title2</h4>
             <p>Description2</p>
             <button class="btn btn-default pull-right">Details2</button>
         </div>
      </li>
</div>

medialist

Thumbnail

Use thumbnail and caption class in div

<div class="container">
   <div class="row">
      <div class="col-xs-4">
         <div class="thumbnail" style="height:350px">
            <img data-src="holder.js/100x100" alt="dummy">
            <div class="caption">
               <h4>Title</h4>
               <p>Description</p>
               <button class="btn btn-default">Detail</button>
            </div>
         </div>
      </div>
      <div class="col-xs-4">
         <div class="thumbnail" style="height:350px">
            <img data-src="holder.js/100x200" alt="dummy">
            <div class="caption">
               <h4>Title2</h4>
               <p>Description2</p>
               <button class="btn btn-default">Detail</button>
            </div>
         </div>
      </div>
   </div>
</div>

thumbnail

TOPICS