zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Chrome开发者工具中Elements(元素)断点的用途
    最简单的SAP云平台开发教程
    Java实现 LeetCode 495 提莫攻击
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 492 构造矩形
  • 原文地址:https://www.cnblogs.com/isun/p/4472159.html
Copyright © 2011-2022 走看看