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. SQL中的CONVERT();cast()函数

    SQLSERVER中CONVERT函数格式: CAST (expression AS data_type) 参数说明: expression:任何有效的SQLServer表达式. AS:用于分隔两个参 ...

  2. python if-elif-else 结构判断输入值处于何种年龄段

    输入变量 age 的值,再编写一个 if-elif-else 结构,根据 age的值判断处于人生的哪个阶段.如果一个人的年龄小于 2岁,就打印一条消息,指出他是婴儿.如果一个人的年龄为 2(含)-4岁 ...

  3. Java中的代码块:局部代码块、构造代码块和静态代码块

    代码块 java代码中用{ }括起来的代码段叫做代码块 1.局部代码块 在局部位置,用于限定变量的生命周期 例如,下面代码中的a仅在代码块中起作用,因此会编译报错 class Demo{ public ...

  4. IAR新建MSP430工程

    一.在IAR官网下载IAR for MSP430 软件 https://www.iar.com/iar-embedded-workbench/#!?architecture= 选择MSP430,然后 ...

  5. MATLAB中常用函数及语法

    zeros() 1 zeros(n):n*n 全零矩阵 2 zeros(m,n):m*n全零矩阵 3 zeros(d1,d2,d3……dn):生成 d1*d2*d3*……*dn 全零矩阵或数组. 4 ...

  6. C语言基础篇(零)gcc编译和预处理

    导航: 1. gcc编译 2. 预处理 ----->x<------------->x<--------------->x<--------------->x ...

  7. PTA基础编程题目集6-7 统计某类完全平方数 (函数题)

    本题要求实现一个函数,判断任一给定整数N是否满足条件:它是完全平方数,又至少有两位数字相同,如144.676等. 函数接口定义: int IsTheNumber ( const int N ); 其中 ...

  8. 20155306 实验三 敏捷开发与XP实践

    20155306 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器 ...

  9. echarts 去掉上面的小图标

    在option里找到toolbox,删除对应的代码即可: toolbox: { y : -30, show : true, feature : { mark : '辅助线开关', markUndo : ...

  10. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...