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.
1 <ul id="vegetable-seeds"> 2 <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li> 3 <li data-spacing="30cm" data-sowing-time="February to March">Celery</li> 4 <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li> 5 </ul>
参考资料： HTML5 Custom Data Attributes (data-*) http://html5doctor.com/html5-custom-data-attributes/
Bootstrap实现折叠效果
一般每个折叠组件都会有一个触发元素，如：按钮、超链接等，通过点击触发元素来控制折叠元素的展开和隐藏。这样，只要在触发元素上添加 data-toggle="collapse" 和 data-target 标记就能自动变成可折叠的。 data-target 属性接受一个css选择器，指向折叠元素。另外，在折叠元素上需要添加 .collapse 类样式。如果要默认某折叠元素是打开的，可在折叠元素上添加 .in 。
1 <body> 2 <button class="btn btn-danger" data-toggle="collapse" data-target="#demo"> 3 简单折叠效果</button> 4 <div id="demo" class="collapse in">前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗 ？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。</div> 5 </body>
1 $(‘#myCollapsible‘).collapse(‘toggle‘) //在折叠和打开间互相切换
1 $(‘#myCollapsible‘).collapse(‘show‘) //打开
1 $(‘#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
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
