6-4 带表单的导航条
本节编程练习不计算学习进度，请电脑登录imooc.com操作

带表单的导航条

有的导航条中会带有搜索表单，比如新浪微博的导航条：

在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单，示例代码编辑器（29-34行）。

实现导航条表单的样式代码源码请查看bootstrap.css文件第3839行～第3904行，我们也对60多行样式代码节选了出来放到右侧bootstrap.css文件中，有兴趣的同学请查看。

在上面的示例中，大家看到了“navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。

/*源码请查看bootstrap.css文件第3831行～第3838行*/

@media (min-width: 768px) {
 .navbar-left {
 float: left !important;
}
.navbar-right {
 float: right !important;
 }
}

注意：这里有一个条件，只有当浏览器视窗宽度大于768px生效。

任务

我来试试：完成下面任务

编写代码实现“带有搜索表单导航条”，效果图如下：

备注:这一小节没有正确性验证，请查看结果窗口,从而判断输入代码是否正确。

index.htmlbootstrap.css 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>带表单的导航条</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10. <!--代码-->
  11. <div class="navbar navbar-default" role="navigation">
  12.   　<div class="navbar-header">
  13.   　    <a href="##" class="navbar-brand">慕课网</a>
  14.   　</div>
  15.     <ul class="nav navbar-nav">
  16.        <li class="active"><a href="##">网站首页</a></li>
  17.        <li class="dropdown">
  18.           <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  19.           <ul class="dropdown-menu">
  20.         	<li><a href="##">CSS3</a></li>
  21.         	<li><a href="##">JavaScript</a></li>
  22.         	<li class="disabled"><a href="##">PHP</a></li>
  23.           </ul>
  24.       </li>
  25.       <li><a href="##">名师介绍</a></li>
  26.       <li><a href="##">成功案例</a></li>
  27.       <li><a href="##">关于我们</a></li>
  28. 	 </ul>
  29.      <form action="##" class="navbar-form navbar-left" rol="search">
  30.    	    <div class="form-group">
  31.    		   <input type="text" class="form-control" placeholder="请输入关键词" />
  32.    	    </div>
  33.         <button type="submit" class="btn btn-default">搜索</button>
  34.      </form>
  35. </div>
  36. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  37. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  38.  
  39. </body>
  40. </html>
  1. .navbar-form {
  2.   padding: 10px 15px;
  3.   margin-top: 8px;
  4.   margin-right: -15px;
  5.   margin-bottom: 8px;
  6.   margin-left: -15px;
  7.   border-top: 1px solid transparent;
  8.   border-bottom: 1px solid transparent;
  9.   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
  10.           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
  11. }
  12. @media (min-width: 768px) {
  13.   .navbar-form .form-group {
  14.     display: inline-block;
  15.     margin-bottom: 0;
  16.     vertical-align: middle;
  17.   }
  18.   .navbar-form .form-control {
  19.     display: inline-block;
  20.     width: auto;
  21.     vertical-align: middle;
  22.   }
  23.   .navbar-form .input-group > .form-control {
  24.     width: 100%;
  25.   }
  26.   .navbar-form .control-label {
  27.     margin-bottom: 0;
  28.     vertical-align: middle;
  29.   }
  30.   .navbar-form .radio,
  31.   .navbar-form .checkbox {
  32.     display: inline-block;
  33.     padding-left: 0;
  34.     margin-top: 0;
  35.     margin-bottom: 0;
  36.     vertical-align: middle;
  37.   }
  38.   .navbar-form .radio input[type="radio"],
  39.   .navbar-form .checkbox input[type="checkbox"] {
  40.     float: none;
  41.     margin-left: 0;
  42.   }
  43.   .navbar-form .has-feedback .form-control-feedback {
  44.     top: 0;
  45.   }
  46. }
  47. @media (max-width: 767px) {
  48.   .navbar-form .form-group {
  49.     margin-bottom: 5px;
  50.   }
  51. }
  52. @media (min-width: 768px) {
  53.   .navbar-form {
  54.     width: auto;
  55.     padding-top: 0;
  56.     padding-bottom: 0;
  57.     margin-right: 0;
  58.     margin-left: 0;
  59.     border: 0;
  60.     -webkit-box-shadow: none;
  61.             box-shadow: none;
  62.   }
  63.   .navbar-form.navbar-right:last-child {
  64.     margin-right: -15px;
  65.   }
  66. }
下一节