Menu
I am new to Bootstrap 3.0. Can any one tell me what is significance of 'navbar-brand' class in below code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Vacation Rentals</a>
</div>
</div>
</nav>
<div id="body" class="container">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/Scripts/bootstrap.js")
@RenderSection("scripts", required: false)
</body>
</html>
Also, I would like to know something about magical text 'Toggle Navigation'. When I am re-sizing my browser I can see a small rectangle on right hand side of the screen, but where is the text 'Toggle Navigation'? Thanks, Hemant Shelar
664
Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.
Basic Navbar With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).
navbar class is used to create a navigation bar. The navbar can extend or collapse, depending on the device size ie, the navbar is used to create the responsive design by using . navbar-expand-xl|lg|md|sm class. So, It provides flexibility to the web page.
A navigation bar helps readers in selecting topics, links or sub-topics of their interest. Using a navigation bar, users need not enter the URL of the specific webpage, as this is automatically taken care of by the navigation bar, with the navigation sections having embedded the necessary links of the webpage.
navbar-brand class is applied to typical branding logo you see in the top navigation bar.It may just contain a typical image logo or text. Refer to the image below to better understand.
Now coming to the second question.
The class applied to Toggle Navigation is sr-only that stands for screen reader only.
According to bootstrap documentation, the class is used to hide information used for screen readers.
To know more about accessibility of site for screen readers I would recommend going through the following . Invisible Content Just for Screen Reader Users and google web accessibility course
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
