HTML5+Bootstrap 学习笔记 1

发布时间：2025-07-15 07:56

5. 学习笔记：使用MindNode或Evernote做笔记 #生活技巧# #工作学习技巧#

生活随笔收集整理的这篇文章主要介绍了 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

转载于:https://www.cnblogs.com/isun/p/4442579.html