BootStrap2学习日记20---定制缩略图

先看看效果：

代码:

<ul class="thumbnails">
    <li class="span3">
        <div class="thumbnail pull-right">
            <img src="20224543-5aa37207bf894b479319fea51f210ae3.jpg" alt="小熊猫"/>
            <div class="caption">
                <h5>小熊猫</h5>
                <p><small>
                小熊猫（学名：Ailurus fulgens）又名红熊猫、红猫熊、小猫熊、九节狼等，是一种濒危的哺乳类动物分布在中国南方到喜马拉雅山麓等国。</small>
                </p>
                <p><a href="#" class="btn btn-small btn-success pull-right">more
                </a></p>
            </div>
        </div>
    </li>
    
    <li class="span3">
        <div class="thumbnail pull-right">
            <img src="20224544-ab82486ef2444ca3b143e7059e60fad6.jpg" alt="考拉" />
            <div class="caption">
                <h5>考拉</h5>
                <p><small>树袋熊，又称考拉，是澳大利亚的国宝，也是澳大利亚奇特的珍贵原始树栖动物。英文名Koala bear来源于古代土著文字，意思是“no drink”。</small></p>
                <p><a class="btn btn-small btn-success pull-right">more</a></p>
            </div>
        </div>
    </li>
</ul>

 

这里使用一个引用class=“thumbnails”的<ul>标签，标签里面的<li>表示一个缩略图 用"span+数字"类来控制他们的大小

<li>里面的<div class=“thumbnail”>为主体内容标签，其所包含的<img>显示一张图片，<div class="caption">包含描述内容。 

 

 

转载于:https://www.cnblogs.com/keiling/p/3639523.html