BootStrap2学习日记22---点击展开
先看效果:
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---点击展开的更多相关文章
- BootStrap2学习日记3--响应式布局实用类
BootStrap2中常用的响应式布局类如: visible-phone 仅在 手机平台显示 visible-tablet 仅在 平板电脑显示 visible-desktop 仅 ...
- BootStrap2学习日记2--将固定布局换成响应式布局
概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...
- BootStrap2学习日记23---图片轮播
<div id="carousel1" class="carousel slide"> <div class="carousel-i ...
- BootStrap2学习日记21---消息提示
<p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...
- BootStrap2学习日记20---定制缩略图
先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...
- BootStrap2学习日记19---缩略图
缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...
- BootStrap2学习日记18---提示消息
代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...
- BootStrap2学习日记17---导航路径和分页
导航路径 代码: <ul class="breadcrumb"> <li><a href="#">Home</a> ...
- BootStrap2学习日记16---选项卡内容
代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...
随机推荐
- SQL Server 系统视图
SQL Server系统视图非常的多,因此不可能一个一个地写,我最近一直在想,对于数据库的系统视图应该如何学,但是看了一下目录之后,我呆了,我觉得每个写一次,可能都要花费1个星期的时间,如果对每一个返 ...
- JVM内存的那些事
前言 对于C语言开发的程序员来说,在内存管理方面,必须负责每一个对象的生命周期,从有到无. 对于Java程序员你来说,在虚拟机内存管理的帮助下,不需要为每个new对象都匹配free操作,内存泄露和内存 ...
- 深刻理解Python中的元类metaclass(转)
本文由 伯乐在线 - bigship 翻译 英文出处:stackoverflow 译文:http://blog.jobbole.com/21351/ 译注:这是一篇在Stack overflow上很热 ...
- jquery call方法和apply方法接触
call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来 ...
- hdu 2899 Strange fuction
http://acm.hdu.edu.cn/showproblem.php?pid=2899 Strange fuction Time Limit: 2000/1000 MS (Java/Others ...
- 子iframe刷新父ifrmae的方法
//子iframe刷新父ifrmae的方法parent.location.href="";parent.location.reload();
- 读写锁:ReadWriteLock
http://my.oschina.net/20076678/blog/173165 一.在JDK文档中关于读写锁的相关说明 ReadWriteLock 维护了一对相关的 锁 ,一个用于只读操作, ...
- C++的辅助工具介绍 [转]
C++的辅助工具介绍 1 文档类 (1) Doxygen 参考站点:http://www.doxygen.org Doxygen是一种适合C风格语言(如C++.C.IDL.Java甚至包括C#和 ...
- css中的img和input标签
一般情况下,行内元素设置宽高是无效的,常见的有a标签.img和input也属于行内元素,但他们却可以设置宽高!!!! 查阅了一些资料才明白,原来css的元素还有另外一种分类方法,可替换元素,不可替换元 ...
- javaScript-原型、继承-02
原型链 首先回顾下实列.构造函数.原型对象之间的关系: 实列都包含指向原型对象的一个指针(_proto_): 构造函数都有prototype(原型属性)指向原型对象的指针: 原型是一个对象也存在一个内 ...