<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：简单的可折叠</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<button type="button" class="btn btn-default"data-toggle="collapse"data-target="#demo">
简单的折叠
</button>
<div id="demo" class="panel panel-default panel-collapse collapse in">
<div class="panel-heading">
<h4 class="panel-title">日本超音速导弹</h4>
</div>
<div class="panel-body">
中国还定型了一种三军通用的新一代反舰导弹，采用533毫米标准口径的鹰击-18双速多用途反舰导弹。该弹以俄罗斯俱乐部3M54E导弹为基础研制，可以在水面舰艇垂直发射，潜艇鱼雷管发射，岸基导弹发射车发射等多种发射模式，导弹射程300多公里，巡航速度为高亚音速，末端启动火箭发动机，将导弹加速超过3马赫。此外中国还从俄罗斯进口了用于现代级驱逐舰上的“日炙”3M80超音速反舰导弹，以及用于苏-30MKK战斗机的Kh-31P超音速反舰/反辐射导弹。

</div>
</div>
</div>
</body>
</html>

Bootstrap历练实例：简单的可折叠的更多相关文章

  1. Bootstrap 历练实例 - 折叠（Collapse）插件方法

    方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...

  2. Bootstrap历练实例：默认的媒体对象

    Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...

  3. Bootstrap历练实例：面板的标题

    面板标题 我们可以通过以下两种方式来添加面板标题: 使用 .panel-heading class 可以很简单地向面板添加标题容器.to easily add a heading container ...

  4. Bootstrap历练实例：默认的Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  5. Bootstrap历练实例：验证状态

    验证状态 Bootstrap 包含了错误.警告和成功消息的验证样式.只需要对父元素简单地添加适当的 class(.has-warning. .has-error 或 .has-success)即可使用 ...

  6. Bootstrap历练实例：表单控件状态(禁用)

    禁用的输入框 input 如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式. < ...

  7. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

随机推荐

  1. Python中list作为默认参数的陷阱

    在Python中,作为默认参数的一定要是不可变对象,如果是可变对象,就会出现问题,稍不注意,就会调入陷阱,尤其是初学者,比如我(┬＿┬). 我们来看一个例子. def add(L=[]): L.app ...

  2. Collection、泛型

    Collection.泛型 Collection.泛型 Collection.泛型 Collection.泛型 Collection.泛型 Collection.泛型 Collection.泛型

  3. SP1716 GSS3

    题意翻译 \(n\) 个数,\(q\) 次操作 操作\(0\) \(x\) \(y\)把\(A_x\) 修改为\(y\) 操作\(1\) \(l\) \(r\)询问区间\([l, r]\)的最大子段和 ...

  4. groovy使用小记

    下载groovy的sdk, 解压后设置GROOVY_HOME和PATH变量 http://groovy-lang.org/download.html 使用IDEA创建java项目勾选Groovy组件 ...

  5. Unity Time.timeScale

    原创网址: http://www.xuanyusong.com/archives/2956 项目里面一直在用Time.timeScale来做游戏的 1倍 2倍整体加速,今天我仔细看了一下Time.ti ...

  6. Lecture--9 Sorting

    1/排序算法:冒泡排序bubble sort,插入排序 insertion sort,选择排序 selection sort,快速排序 quick sort,归并排序 merge sort;堆排序 h ...

  7. Storm概念学习系列之storm的功能和三大应用

    不多说,直接上干货! storm的功能 Storm 有许多应用领域:实时分析.在线机器学习.持续计算.分布式 RPC(远过程调用协议,一种通过网络从远程计算机程序上请求服务). ETL(Extract ...

  8. 《nginx 一》dns解析 nginx安装

    DNS域名解析 整个过程大体描述如下,其中前两个步骤是在本机完成的,后8个步骤涉及到真正的域名解析服务器:1.浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就结束. ...

  9. PHP面向对象编程一

    php面向对象编程(一)   类与对象关系: 类就像一个人类的群体 我们从类中实例化一个对象 就像是制定一个人. 面向对象程序的单位就是对象,但对象又是通过类的实例化出来的,所以我们首先要做的就是如何 ...

  10. asp.net5开发中DNX SDK版本的影响

    某次asp.net5开发中遇到了一个很奇怪的问题,引用部分的nuget包没有显示任何错误,如下图: 但是编译时出现了几百个错误: 错误基本都是形如“CS0246 The type or namespa ...