CSS Bootstrap 3 中“导航栏品牌”类的意义是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20758523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is significance of 'navbar-brand' class in Bootstrap 3
提问by user2243747
I am new to Bootstrap 3.0. Can any one tell me what is significance of 'navbar-brand' class in below code?
我是 Bootstrap 3.0 的新手。谁能告诉我下面代码中“导航栏品牌”类的意义是什么？
<!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
另外，我想知道一些关于魔法文本“切换导航”的信息。当我调整浏览器大小时，我可以在屏幕右侧看到一个小矩形，但是“切换导航”文本在哪里？谢谢，Hemant Shelar
回答by Shiva
navbar-brandclass 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.
navbar-brand类应用于您在顶部导航栏中看到的典型品牌徽标。它可能只包含典型的图像徽标或文本。请参阅下图以更好地理解。
Now coming to the second question.
现在来到第二个问题。
The class applied to Toggle Navigationis sr-onlythat stands for screen reader only.
采用的类Toggle Navigation是sr-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 Usersand google web accessibility course
要了解有关屏幕阅读器网站可访问性的更多信息，我建议您阅读以下内容。 仅适用于屏幕阅读器用户的隐形内容和谷歌网络无障碍课程
