HTML5+Bootstrap 学习笔记 1
HTML <header> 标签
<header> 标签定义文档的页眉(介绍信息),是 HTML 5 中的新标签。
参考资料: HTML <header> 标签 http://www.w3school.com.cn/tags/tag_header.asp
HTML5 Custom Data Attributes (data-*)
Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts:
Attribute Name: The data attribute name must be at least one character long and must be prefixed with 'data-'. It should not contain any uppercase letters.
Attribute Value: The attribute value can be any string.
<ul id="vegetable-seeds">
<li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
<li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
<li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>
参考资料: HTML5 Custom Data Attributes (data-*) http://html5doctor.com/html5-custom-data-attributes/
Bootstrap实现折叠效果
一般每个折叠组件都会有一个触发元素,如:按钮、超链接等,通过点击触发元素来控制折叠元素的展开和隐藏。这样,只要在触发元素上添加 data-toggle="collapse" 和 data-target 标记就能自动变成可折叠的。 data-target 属性接受一个css选择器,指向折叠元素。另外,在折叠元素上需要添加 .collapse 类样式。如果要默认某折叠元素是打开的,可在折叠元素上添加 .in 。
<body>
<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
简单折叠效果</button>
<div id="demo" class="collapse in">前一段时间一个段子说,某国的网民在因国土问题与中国网民争吵时说,我要打到北京,中国的网民非常淡然地回应,就你那经济水平,交得起过路费吗 ?这两天新的段子说,李白要是活在今天的话,估计一大半以上他的诗根本写不出来,因为名山大川的门票他根本买不起。</div>
</body>
$('#myCollapsible').collapse('toggle') //在折叠和打开间互相切换
$('#myCollapsible').collapse('show') //打开
$('#myCollapsible').collapse('hide') //折叠
参考资料:
The data-toggle attributes in Twitter Bootstrap http://stackoverflow.com/questions/15113537/the-data-toggle-attributes-in-twitter-bootstrap
Bootstrap JS插件使用实例(6)-折叠(手风琴效果) http://doliangzhe3.iteye.com/blog/1871709?utm_source=tuicool
HTML5+Bootstrap 学习笔记 1的更多相关文章
- HTML5+Bootstrap 学习笔记 4
HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的 ...
- HTML5+Bootstrap 学习笔记 3
HTML5 aria-* and role aria是指Accessible Rich Internet Application.role的作用是描述一个非标准的tag的实际作用,而aria-*的作用 ...
- HTML5+Bootstrap 学习笔记 2
navbar升级 从Bootstrap 2到Bootstrap 3 1. .navbar-inner已从Bootstrap 3中去除. 2. <ul class="nav"& ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
随机推荐
- iOS:UICollectionView流式布局及其在该布局上的扩展的线式布局
UICollectionViewFlowLayout是苹果公司做好的一种单元格布局方式,它约束item的排列规则是:从左到右依次排列,如果右边不够放下,就换一行重复上面的方式排放,,,,, 常用的 ...
- 个人开发者即时到账收款方案 BufPay.com
BufPay 个人即时到账支付平台 前言 作为独立开发者,一般只有一个人独立奋战,做出了产品需要收款是非常麻烦的,接入支付宝微信支付都需要公司公户,而注册公司.开公户等一系列操作非常麻烦,成本也很高一 ...
- 简单的HTTP协议
HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同,用于客户端和服务器之间的通信. 请求访问文本或图像等资源的一端称为客户端,提供资源响应的一端称为服务器端. 在两台计算机之间使用 HTTP ...
- 【memcached启动报错】
#前台启动不了 #指定-u root #后台启动 #扩展选项: #利用telnet连接memcached 的端口登录memcached服务 #error表示有语法错误 #store表示正确
- 一、PHP基础-安装PHP集成环境
目录 PHP运行集成环境下载 phpStudy集成环境安装 XAMPP集成环境安装 WampServer环境安装 作者:吴耀田 个人博客:http://www.cnblogs.com/isaacwy ...
- STM32(13)——SPI
简介: SPI,Serial Peripheral interface串行外围设备接口. 接口应用在:EEPROM, FLASH,实时时钟,AD 转换器,还有数字信号处理器和数字信号解码器之间. 特点 ...
- python学习笔记:第20天 多继承、MRO C3算法
目录 一.多继承 二.旧式类的MRO 三.新式类的MRO 四.super 一.多继承 之前已经学习过了继承,当出现了x是⼀种y的的时候,就可以使⽤继承关系,即"is-a" 关系.在 ...
- python之变量的命名规则
变量的命名规则: 1.变量名由数字.字母和下划线组成名 2.变量名不能以数字开头 3.禁止使用python中的关键字 4.不能使用中文和拼音 5.变量名要区分大小写 6.变量名要有意义 7.推荐写法: ...
- error: command 'aarch64-linux-gnu-gcc' failed with exit status 1
使用jetson tx2安装tensorpack时报错: error: command 'aarch64-linux-gnu-gcc' failed with exit status 1 改正: 如果 ...
- Hangfire初探
Hangfire 是什么? Hangfire 是一个定时任务的管理后台,它拥有定时任务功能和及其相关的管理后台界面.Hangfire 原生使用 .NET 开发的,同时支持 .NET 和 .NET Co ...