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