HTML5+Bootstrap 学习笔记 3

HTML5 aria-* and role

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

1 <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> 元素。这会让文本看起来更大一号。

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

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

 1 <ul class="nav navbar-nav">
 2     <li class="active"><a href="#">iOS</a></li>
 3     <li><a href="#">SVN</a></li>
 4     <li class="dropdown">
 5         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 6         Java 
 7         <b class="caret"></b>
 8         </a>
 9         <ul class="dropdown-menu">
10             <li><a href="#">jmeter</a></li>
11             <li><a href="#">EJB</a></li>
12             <li><a href="#">Jasper Report</a></li>
13             <li class="divider"></li>
14             <li><a href="#">分离的链接</a></li>
15             <li class="divider"></li>
16             <li><a href="#">另一个分离的链接</a></li>
17         </ul>
18     </li>
19 </ul>

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

 1 <ul class="nav navbar-nav navbar-right">
 2     <li class="dropdown">
 3         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 4         Java <b class="caret"></b>
 5         </a>
 6         <ul class="dropdown-menu">
 7             <li><a href="#">jmeter</a></li>
 8             <li><a href="#">EJB</a></li>
 9             <li><a href="#">Jasper Report</a></li>
10             <li class="divider"></li>
11             <li><a href="#">分离的链接</a></li>
12             <li class="divider"></li>
13             <li><a href="#">另一个分离的链接</a></li>
14         </ul>
15     </li>
16 </ul>

参考资料

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

posted on 2015-05-02 22:18  iSun  阅读(3244)  评论(0编辑  收藏  举报