Html5+bootstrap Study Notes 3

HTML5 aria-* and role

Aria refers to the accessible Rich Internet application. Role is to describe the actual function of a nonstandard tag, and the role of aria-* is to describe the specific information of the tag in the visual context. Like what

1 <  role= "checkbox"  aria-checked= "Checked"></Div  >

What is aria:

Wai-aria refers to accessibility Web applications. The main target is visual impairment, deafness, disabled people with mobility disabilities. In particular, like the blind, the eyes do not see, and its Web pages need assistive devices, such as screen readers, screen readers can read aloud or output braille.

Aria is a technical specification that allows screen readers to accurately identify the content, changes, and status of a Web page, so that users of the blind can also read without obstacles!

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 heading class to the <div> element, which contains the <a> element with class Navbar-brand. Navbar-header. This will make the text look larger.

1 <  class= "Navbar-header">2     <class  = "Navbar-brand"  href= "#">w3cschool</A  >3</div>

2, in order to add links to the navigation bar, simply add an unordered list with the class. Nav,. Navbar-nav.

1 <ulclass= "Nav navbar-nav">2     <Liclass= "Active"><ahref="#">Ios</a></Li>3     <Li><ahref="#">Svn</a></Li>4     <Liclass= "Dropdown">5         <ahref="#"class= "Dropdown-toggle"Data-toggle= "Dropdown">6 Java7         <bclass= "Caret"></b>8         </a>9         <ulclass= "Dropdown-menu">Ten             <Li><ahref="#">Jmeter</a></Li> One             <Li><ahref="#">Ejb</a></Li> A             <Li><ahref="#">Jasper Report</a></Li> -             <Liclass= "Divider"></Li> -             <Li><ahref="#">Detached links</a></Li> the             <binclass= "Divider"></Li> -             <Li><ahref="#">Another detached link</a></Li> -         </ul> -     </Li> + </ul>

3. Use the utility class. Navbar-left or. navbar-right to align left or right the navigation links, forms, buttons, or text components in the navigation bar. These two classes will add CSS floats in the specified direction.

1 <ulclass= "Nav navbar-nav navbar-right">2     <Liclass= "Dropdown">3         <ahref="#"class= "Dropdown-toggle"Data-toggle= "Dropdown">4Java<bclass= "Caret"></b>5         </a>6         <ulclass= "Dropdown-menu">7             <Li><ahref="#">Jmeter</a></Li>8             <Li><ahref="#">Ejb</a></Li>9             <Li><ahref="#">Jasper Report</a></Li>Ten             <Liclass= "Divider"></Li> One             <Li><ahref="#">Detached links</a></Li> A             <Liclass= "Divider"></Li> -             <Li><ahref="#">Another detached link</a></Li> -         </ul> the     </Li> - </ul>

References :

Bootstrap Navigation bar http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html

Html5+bootstrap Study Notes 3