• 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">包含描述内容。 

  • 相关阅读:
    Django之ORM基础
    Django基本命令
    Django知识总汇
    Linux Shell 自动化之让文本飞
    伪类link,hover,active,visited,focus的区别
    小记 Linux 之 Vim
    恢复 MSSQL bak 文件扩展名数据(上)
    小记一次shellscript的麻烦
    Java 之多态
    Java 之封装
  • 原文地址:https://www.cnblogs.com/keiling/p/3639523.html
走看看 - 开发者的网上家园