zoukankan      html  css  js  c++  java
  • 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">包含描述内容。 

  • 相关阅读:
    rxjs入门7之其它操作符复习
    rxjs入门6之合并数据流
    rxjs入门5之创建数据流
    rxjs入门4之rxjs模式设计
    boost_1.63.0编译VS2013
    c++基础类型之signed、unsigned的一个细节
    【排序】归并排序算法
    【排序】快速排序算法
    【排序】冒泡排序算法
    【排序】堆排序算法
  • 原文地址:https://www.cnblogs.com/keiling/p/3639523.html
Copyright © 2011-2022 走看看