原因在引导导航栏标题
span标签我从W3Schools的学习引导。请找到链接。 http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h原因在引导导航栏标题
在这个环节,在导航栏头,我可以看到的跨度标签作为
<span class="icon-bar"></span>
它是用来不止一次在导航栏标题。我从代码中删除了这些span标签。
<!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 this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
尽管如此代码响应并没有明显的变化是有..有什么用呢?
你也可以简单地解释为什么使用类“sr-only”?提前致谢。
"icon-bar"
用于创建在移动设备上所谓的“汉堡”(这样≡) - 它与短horizontral线,下拉,而不是广泛原始菜单
"sr-only"
创建按钮是指“仅屏幕阅读器”:
如果您没有为每个输入包含 标签,屏幕阅读器将会对您的表单造成麻烦。对于这些内联表单,您可以使用.sr-only类隐藏 标签。
“sr-only”类是在某些浏览器中使内容隐藏,除了“reader-devices”或“read-view”之外的标签。
谢谢你的回复......你能解释一下什么是“内容是隐藏的”? – AngularDoubts
尝试恢复了你的浏览器,并尽量减少浏览器窗口面积尽可能小。 nav-bar
将更改为响应式布局,如在此图像的右上角。
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
给出了这样的观点,以响应菜单。而sr-only
仅表示屏幕阅读器。如果您没有为每个输入添加标签,屏幕阅读器将会对您的表单造成麻烦。
嗨,感谢您的回复... – AngularDoubts
感谢您的答复... – AngularDoubts