HTML5 + Bootstrap study Note 3, html5bootstrap

HTML5 + Bootstrap study Note 3, html5bootstrap

HTML5 aria-* and role

Aria is an Accessible Rich Internet Application. Role is used to describe the actual function of a non-standard tag, and aria-* is used to describe the specific information of this tag in a visualized situation. For example

1 <div role="checkbox" aria-checked="checked"></div>

 

What Is ARIA?:

WAI-ARIA refers to accessibility web applications. It mainly targets people with disabilities with visual defects, loss of hearing, and inaccessibility. Especially for blind people who cannot see their eyes, they need to use auxiliary devices, such as screen readers, to browse webpages. screen readers can read aloud or output Braille.

ARIA enables screen readers to accurately identify the content, changes, and status on the webpage, so that blind users can read the content without permission!

 

References:

WAI-ARIA accessibility web application properties full display 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. Add a title class. navbar-header to the <div> element, which contains the <a> element with class navbar-brand. This will make the text look bigger.

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

2. To add links to the navigation bar, simply add an unordered list with class. nav and. 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 = "#"> separated Links </a> </li> 15 <li class = "divider"> </li> 16 <li> <a href = "#"> another separated link </a> </li> 17 </ul> 18 </li> 19 </ul>

3. Use the Utility class. navbar-left or. navbar-right to align the components of navigation links, forms, buttons, or text in the navigation bar to the left or right. Both classes will add CSS float in the specified direction.

1 <ul class = "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> 
References:
Bootstrap navigation bar http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html