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