HTML5 aria-* and role

aria是指Accessible Rich Internet Application。role的作用是描述一个非标准的tag的实际作用,而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如

 <div role="checkbox" aria-checked="checked"></div>

什么是ARIA

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。

而ARIA就是可以让屏幕阅读器准确识别网页中的内容,变化,状态的技术规范,可以让盲人这类用户也能无障碍阅读!

参考资料

WAI-ARIA无障碍网页应用属性完全展示 http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/


 Bootstrap navbar-brand navbar-nav navbar-right

1,向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

 <div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>

2,为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

 <ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>

3,使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。

 <ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>

参考资料

Bootstrap 导航栏 http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html

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

  1. HTML5+Bootstrap 学习笔记 4

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

  2. HTML5+Bootstrap 学习笔记 1

    HTML <header> 标签 <header> 标签定义文档的页眉(介绍信息),是 HTML 5 中的新标签. 参考资料: HTML <header> 标签 h ...

  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. Annotation原理

    为什么使用注解: 1.通过注解,可保存源数据在Java源代码中:并且注解不同于注释,注解享有编译期的类型检查保护. 2.可在描述符性质的类或接口中抽取重复性的工作,通过注解来简化与自动化这些工作. 注 ...

  2. RandomAccessFile类——高效快捷地读写文件

    RandomAceessFile类 RandomAccessFile类是一个专门读写文件的类,封装了基本的IO流,在读写文件内容方面比常规IO流更方便.更灵活.但也仅限于读写文件,无法像IO流一样,可 ...

  3. python 实现查找某个字符在字符串中出现次数,并以字典形式输出

    把字符串'aenabsascd'中的字符出现的次数统计出来,并以字典形式输出 方法一: def count_str(str): dic={} for i in str: dic[i]=str.coun ...

  4. jQuery实现列表的增加和删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【八】将日志写入log(glog)

    [任务8]将日志写入log(glog) glog简介 glog是google开源的一个日志系统,相比较log4系列的日志系统,它更加轻巧灵活,而且功能也比较完善 glog配置使用资料 下载glog 命 ...

  6. day11迭代器 and 闭包

    函数名的使⽤以及第一类对象 函数名是一个变量, 但它是一个特殊的变量, 与括号配合可以执行函数的变量. 函数名就是变量名, 函数名存储的是函数的内存地址 函数名可以赋值给其他变量 函数名可以当做容器类 ...

  7. docker使用(一)

    docker相对于虚拟技术: 更高效的利用系统资源 更快的启动速度 一致的运行环境 持续交付和部署 更加轻松的迁移 更加轻松的维护和扩展 什么是docker镜像,容器: 可以说他就是一个模型,用面向对 ...

  8. 20145234黄斐《java程序设计》第三周

    教材学习内容总结 类与对象 定义:对象,与过程相对. Java中变量有2种类型,一个是基本类型,另一个则是类类型.基本类型在之前学过,本次学习类类型.使用Java撰写程序几乎都是在使用对象,要产生对象 ...

  9. RHCSA-day4

    硬盘分区 1.硬盘的物理组成 硬盘实际上是由很多的盘片.磁臂.磁头与主轴马达所组成的. 那么实际的数据当然是写在具有磁性物质的盘片上了.数据的读写主要是通过在磁臂上的磁头来完成的.实际运转时,主轴马达 ...

  10. git clone的时候报error: RPC failed; result=18错误

    因业务需求,需要把内网gitlab仓库的地址对外网访问,在gitlab前端配置了一个nginx代理服务器,来实现需求,可以在git clone的时候报error: RPC failed错误 [root ...