我必须使用bootstrap创建一个标题/导航栏,但我对正确的顺序和方法有疑问。
我需要这样:
崩溃时:
我应该把所有东西放在NAV标签内吗? 我正在使用标题,我应该保留吗?
<header id="main-nav">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-responsive">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-xs" href="/"><img class="img-responsive" src="/images/logo.png"></a>
<a class="navbar-brand visible-xs" href="/"><img class="img-responsive" src="/images/logo-xs.png"></a>
</div>
<div class="collapse navbar-collapse" id="navbar-responsive">
<ul class="nav navbar-nav navbar-right">
<li><a href="/home">Home</a></li>
<li><a href="/empresa">Empresa</a></li>
<li><a href="/servicos">Serviços</a></li>
<li><a href="/sistemas">Sistemas</a></li>
<li><a href="/planos">Planos</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
</div>
</nav>
</header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
非常感谢任何帮助! =)
答案 0 :(得分:1)
您可以从the default navbar开始,使用Home
链接代替Brand
。将徽标和其他链接放在导航栏前面。
将hidden-xs
和visible-xs
类应用于图像本身。并将它们放在一个共同的链接中。
<header id="main-nav">
<div class="container">
<div class="row">
<div class="col-xs-12 text-right">
<a href="/call-now">call-now</a>
<a href="/support">support</a>
</div>
</div>
<div class="row">
<a class="header-logo" href="/">
<img class="img-responsive hidden-xs" src="//placehold.it/1600x120/936/c69/?text=logo.png">
<img class="img-responsive visible-xs" src="//placehold.it/800x90/693/9c6/?text=logo-xs.png">
</a>
</div>
</div>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-responsive" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/home">Home</a>
</div>
<div class="collapse navbar-collapse" id="navbar-responsive">
<ul class="nav navbar-nav navbar-right">
<li><a href="/empresa">Empresa</a></li>
<li><a href="/servicos">Serviços</a></li>
<li><a href="/sistemas">Sistemas</a></li>
<li><a href="/planos">Planos</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
</div>
</nav>
</header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
&#13;