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