i learning bootstrap w3schools. please find link. http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h
in link, in nav bar header notice span tag
<span class="icon-bar"></span> it used more once in nav bar header. removed span tags code.
<!doctype html> <html lang="en"> <head> <title>bootstrap case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> </button> <a class="navbar-brand" href="#">websitename</a> </div> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">page 1-1</a></li> <li><a href="#">page 1-2</a></li> <li><a href="#">page 1-3</a></li> </ul> </li> <li><a href="#">page 2</a></li> <li><a href="#">page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> sign up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> login</a></li> </ul> </div> </div> </nav> <div class="container"> <h3>collapsible navbar</h3> <p>in example, navigation bar hidden on small screens , replaced button in top right corner (try re-size window). <p>only when button clicked, navigation bar displayed.</p> </div> </body> </html>still code responsive , no visible changes there.. there use of it?
please explain why class "sr-only" used? in advance.
"icon-bar" used creating called "burger" (like ≡) on mobile devices - creates button short horizontral lines dropdown instead of wide original menu
"sr-only" means "screen-reader only":
screen readers have trouble forms if don't include label every input. these inline forms, can hide labels using .sr-only class.
