先看效果:

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. 为什么数据科学家们选择了Python语言?

    本文由 伯乐在线 - HanSir 翻译,toolate 校稿 英文出处:Quora [伯乐在线导读]:这个问题来自 Quora,题主还补充说,“似乎很多搞数据的程序员都挺擅长 Python 的,这是 ...

  2. 如何通过写一个chrome扩展启动本地程序

    @(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...

  3. Spring中的BeanUtils与apache commons中的BeanUtils用法[1]

    1. 前言 在开发过程中,经常遇到把要给一个bean的属性赋给另外一个bean.最笨的方法是每个属性都单独写一个,聪明的方法是应用反射写一个工具方法.考虑到这个需求基本每个程序员都会遇到,那么一定已经 ...

  4. Java环境搭建及语言基础

    JRE和JDK JRE:Java Runtime Environment,java运行环境. JDK:Java Development Kit,java开发工具包. 使用JDK开发java程序,交给J ...

  5. Linux查看系统信息命令总结

    系统 # uname -a               # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue   # 查看操作系统版本 # cat /proc/cpuinf ...

  6. 进入GRUB改root用户密码

    开机读取倒计时时按任意键----e---->选择第二行 kernel ---->按e, 再按空格 >输入1----回车--->选择kernel输入b----> passw ...

  7. Oracle日志文件管理与查看

    Oracle日志文件管理与查看 from:http://hi.baidu.com/shuker/item/25ee611ee960c7426826bb1f 1.查询系统使用的是哪一组日志文件: sel ...

  8. java获取数据库的所有列名和对应的数据库类型

    /**     * 连接数据库     * @param driver 数据库的驱动类     * @param url 数据库的地址     * @param userName 数据库的用户名   ...

  9. C:函数

    函数 函数:都是实现一定的功能.具有特定功能的代码段.凡是由系统提供的函数就是库函数,自己写的函数就是自定义函数. 如何定义一个函数  :  函数类型修饰符  函数名 (函数参数)  {  函数语句 ...

  10. zookeeper的安装和启动

    最近的手上一个项目要用到dubbo,顺便研究下zookeeper 1.下载 下载地址:http://www.apache.org/dyn/closer.cgi/zookeeper/,下载解压到D:\t ...