Twitter bootstrap 引导3导航栏
我正在尝试使用Bootstrap3创建一个导航栏。看起来新版本中有很多更改,并且缺少很多类 以前,我有类似于下面的东西,并试图将其转换为新版本的引导Twitter bootstrap 引导3导航栏,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我正在尝试使用Bootstrap3创建一个导航栏。看起来新版本中有很多更改,并且缺少很多类 以前,我有类似于下面的东西,并试图将其转换为新版本的引导 <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a href="" class="brand">Project Name</a>
<ul class="nav">
<li class="active"><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li class="divider-vertical"></li>
<li><a href="">Link 4</a></li>
<li class="divider-vertical"></li>
</ul>
<form action="" class="navbar-search pull-right">
<input type="text" placeholder="Search" class="search-query" />
</form>
<p class="navbar-text">This is a text.</p>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Show Content</a>
<div class="collapse nav-collapse">
<p class="navbar-text">This will be hidden.</p>
</div>
</div>
</div>
</div>
这是一个文本。
显示内容
我对搜索表单结构特别感兴趣,我曾在其中将classSearch query
class添加到输入类中
此外,我们还需要添加
导航栏内部
,因为官方网站中的示例没有使用它。查看此链接,了解迁移所需更改的详细概述
例如,navbar内部
类被删除。新文档的这一部分应该让您开始:
对于
搜索查询
请检查此帖子:(事实上,它包含了您的所有答案)。我直接使用导航栏,如下所示:
很清楚
- div现在是nav
- 您还必须检查内部的结构,可能需要删除容器类
- 您的表单操作应该在表单组中
切换导航
-
迁移中没有提到它,但是.navbar search
和.search query
也被删除了。。。
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<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" href="#"><span class="glyphicon glyphicon-cloud"></span> My Apps</a>
</div>
<!-- https://github.com/twbs/bootstrap/issues/10495 added 2px padding top to center icon -->
<div class="collapse navbar-collapse navbar-ex1-collapse" style="padding-top: 2px;">
<ul class="nav navbar-nav">
<li><a href="Link_1.jsp">Link 1</a></li>
<li><a href="Link_2.jsp">Link 2</a></li>
<li><a href="Link_3.jsp">Link 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="navbar-form navbar-left">
<div class="form-group">
<input id="searchInput" type="text" class="form-control" placeholder="Search">
</div>
<button id="searchButton" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</li>
</ul>
</div>
</nav>