HTML5+Bootstrap 学习笔记 1
2015-04-21 23:02
253 查看
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.
参考资料: HTML5 Custom Data Attributes (data-*) http://html5doctor.com/html5-custom-data-attributes/
Bootstrap实现折叠效果
一般每个折叠组件都会有一个触发元素,如:按钮、超链接等,通过点击触发元素来控制折叠元素的展开和隐藏。这样,只要在触发元素上添加 data-toggle="collapse" 和 data-target 标记就能自动变成可折叠的。 data-target 属性接受一个css选择器,指向折叠元素。另外,在折叠元素上需要添加 .collapse 类样式。如果要默认某折叠元素是打开的,可在折叠元素上添加 .in 。
参考资料:
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
<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 学习笔记 2
- HTML5+Bootstrap 学习笔记 4
- JavaWeb自学之html学习笔记 Day-1
- HTML/CSS学习笔记
- 学习笔记6-bootstrap 表格、表单、按钮以及图片
- HTML&CSS基础学习笔记1.12-无序列表
- HTML5/CSS3学习笔记
- html+css学习笔记 4[定位]
- HTML学习笔记
- HTML基础学习笔记
- 从网页搭建学习php开发——html入门学习笔记(一)
- HTML学习笔记(三)链接
- HTML学习笔记(五)_HTML5表单相关元素和属性
- 在慕课学习HTML与CSS基础课程的一些笔记
- 搬运自己的html学习笔记1-常用信息展示
- 前端HTML、CSS学习完整笔记(上篇)
- Bootstrap学习笔记
- Flask学习笔记-使用bootstrap-datepicker实现页面日期选择
- HTML学习笔记8 css初见-文本属性
- jQuery学习笔记—— .html(),.text()和.val()的使用