先看效果:

Code：

     <div class="accordion" id="accordion2">

            <div class="accordion-group">

              <div class="accordion-heading">

                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">

                  Click me to exapand. Click me again to collapse. Part I.

                </a>

              </div>

              <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">

                <div class="accordion-inner">

                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                </div>

              </div>

            </div>

    </div>

BootStrap2学习日记22---点击展开的更多相关文章

  1. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...

  2. BootStrap2学习日记2--将固定布局换成响应式布局

    概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...

  3. BootStrap2学习日记23---图片轮播

    <div id="carousel1" class="carousel slide"> <div class="carousel-i ...

  4. BootStrap2学习日记21---消息提示

    <p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...

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

    先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...

  6. BootStrap2学习日记19---缩略图

    缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...

  7. BootStrap2学习日记18---提示消息

    代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...

  8. BootStrap2学习日记17---导航路径和分页

    导航路径 代码: <ul class="breadcrumb"> <li><a href="#">Home</a> ...

  9. BootStrap2学习日记16---选项卡内容

    代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...

随机推荐

  1. js获取时间搓

    var oData=new Date().getTime(2016-01-16); console.log(oData);

  2. 恢复HDFS误删数据

    [恢复HDFS误删数据] HDFS会为每一个用户创建一个回收站目录:/user/用户名/.Trash/,每一个被用户通过Shell删除的文件/目录,在系统回收站中都一个周期,也就是当系统回收站中的文件 ...

  3. class str

    class str(object): """ str(object='') -> str str(bytes_or_buffer[, encoding[, erro ...

  4. JDBC 是什么

    JDBC is a Java database connectivity technology (Java Standard Edition platform) from Oracle Corpora ...

  5. getName()、getCanonicalName()、getSimpleName()异同

    package classes; class Box { class Inner { } } public class TestGetName { public static void main(St ...

  6. C++ 中 int，char*，string，CString之间相互转换-整理

    <多字符集下> #include <string> //使用C++标准库的string类时, 定义时 std::string str; using namespace std; ...

  7. java/android线程池详解

    一,简述线程池: 线程池是如何工作的:一系列任务出现后,根据自己的线程池安排任务进行. 如图: 线程池的好处: 重用线程池中的线程,避免因为线程的创建和销毁所带来的性能开销. 能有效控制线程池的最大并 ...

  8. 130712周赛（CF）

    这次练习从第一题开始注定水了,1A的题目wa了3次,第三题走进了错误的思想,wa到死....其他三个题目看都没看...........赛后慢慢搞. A. Free Cash 巨水的一题,直接找出每个时 ...

  9. pic/at89c2051 programmer

    http://dangerousprototypes.com/forum/viewtopic.php?t=170 It looks like the PICKIT2 uses a small boos ...

  10. Netsh配置端口

    开启防火墙端口 netsh firewall set portopening all 3389 RDP_Rule enable (TCP/UDP) #配置RPC高位端口段Netsh int ipv4 ...