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

HTML5+Bootstrap 学习笔记 1的更多相关文章

  1. HTML5+Bootstrap 学习笔记 4

    HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的 ...

  2. HTML5+Bootstrap 学习笔记 3

    HTML5 aria-* and role aria是指Accessible Rich Internet Application.role的作用是描述一个非标准的tag的实际作用,而aria-*的作用 ...

  3. HTML5+Bootstrap 学习笔记 2

    navbar升级 从Bootstrap 2到Bootstrap 3 1. .navbar-inner已从Bootstrap 3中去除. 2. <ul class="nav"& ...

  4. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  5. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  6. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  7. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  8. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  9. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

随机推荐

  1. iOS | NSProxy

    Objective-C作为一种动态消息型语言,其机制不同于Java ,C#等编译型语言. 它将数据类型的确定等工作推迟到了运行时期来执行,并且它调用方法的方式实质是像对象发送消息,根据selector ...

  2. Layered Architecture 分层架构

    分层的价值在于每一层都只代表程序中的某一特定方面.这种限制使每个方面的设计都更具有内聚性,更容易解释. 大多数成功的架构使用的都是包括下面这四个概念层的某个版本

  3. 『C++』Temp_2018_12_13 函数指针

    #include <iostream> #include <string> using namespace std; class Test{ private: string n ...

  4. Django中间件执行顺序

    中间件 Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Django ...

  5. MQTT的学习之Mosquitto安装&使用（1）

    Mosquitto是一个实现了MQTT3.1协议的代理服务器,由MQTT协议创始人之一的Andy Stanford-Clark开发,它为我们提供了非常棒的轻量级数据交换的解决方案.本文的主旨在于记录M ...

  6. tomcat搭建https服务(非自签发）

    平时做自己的web demo基本上都是用http协议进行访问. 但是正式情况基本上都是https进行访问,所以掌握https的配置是很关键的. 需要准备的材料: 一台可以可以外网访问的远程服务器 to ...

  7. PAT (Basic Level) Practice 1007 素数对猜想

    个人练习 让我们定义d​n​​为:d​n​​=p​n+1​​−p​n​​,其中p​i​​是第i个素数.显然有d​1​​=1,且对于n>1有d​n​​是偶数.“素数对猜想”认为“存在无穷多对相邻且 ...

  8. 001-快速排序（C++实现）

    快速排序的基本实现 快速排序算法是一种基于交换的高效的排序算法,它采用了分治法的思想: 1.从数列中取出一个数作为基准数(枢轴,pivot). 2.将数组进行划分(partition),将比基准数大的 ...

  9. ORB-SLAM（十）LoopClosing

    构造函数 LoopClosing(Map* pMap, KeyFrameDatabase* pDB, ORBVocabulary* pVoc,const bool bFixScale); 主要分两部分 ...

  10. WeTest功能优化第2期：云真机智能投屏，调试告别鼠标

    第2期功能优化目录 [云真机视频映射]云真机画面本地映射[兼容性测试报告]新增问题机型聚类功能[新增Android9.0]同步上线最新安卓系统 本期介绍的云测产品功能优化,既有重磅级技术突破,也有报告 ...