你的位置:首页 > 网页设计

[网页设计]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 ValueThe 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