6-1 导航条基础
本节编程练习不计算学习进度，请电脑登录imooc.com操作

导航条基础

导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。

导航条和导航一样，在Bootstrap框架中是一个独立组件，所以你也可以根据自己的需求使用不同的版本：

任务


本小节没有代码任务，单击“提交”按钮进行下一个小节学习。

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.      <ul class="nav navbar-nav">
  13.      	<li class="active"><a href="##">网站首页</a></li>
  14.         <li><a href="##">系列教程</a></li>
  15.         <li><a href="##">名师介绍</a></li>
  16.         <li><a href="##">成功案例</a></li>
  17.         <li><a href="##">关于我们</a></li>
  18. 	 </ul>
  19. </div>
  20. <div class="navbar navbar-default" role="navigation">
  21.   　<div class="navbar-header">
  22.   　    <a href="##" class="navbar-brand">慕课网</a>
  23.   　</div>
  24.      <ul class="nav navbar-nav">
  25. 	 	<li class="active"><a href="##">网站首页</a></li>
  26.       <li class="dropdown">
  27.         <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  28.         <ul class="dropdown-menu">
  29.         	<li><a href="##">CSS3</a></li>
  30.         	<li><a href="##">JavaScript</a></li>
  31.         	<li class="disabled"><a href="##">PHP</a></li>
  32.         </ul>
  33.      </li>
  34.       <li><a href="##">名师介绍</a></li>
  35.       <li><a href="##">成功案例</a></li>
  36.       <li><a href="##">关于我们</a></li>
  37. 	 </ul>
  38.   <form action="##" class="navbar-form navbar-left" rol="search">
  39.    	<div class="form-group">
  40.    		<input type="text" class="form-control" placeholder="请输入关键词" />
  41.    	</div>
  42.      <button type="submit" class="btn btn-default">搜索</button>
  43.    </form>
  44. </div>
  45. <!--代码-->
  46. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  47. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  48.  
  49. </body>
  50. </html>
  1. .navbar {
  2.   position: relative;
  3.   min-height: 50px;
  4.   margin-bottom: 20px;
  5.   border: 1px solid transparent;
  6. }
  7. @media (min-width: 768px) {
  8.   .navbar {
  9.     border-radius: 4px;
  10.   }
  11. }
  12. @media (min-width: 768px) {
  13.   .navbar-header {
  14.     float: left;
  15.   }
  16. }
  17. .navbar-collapse {
  18.   max-height: 340px;
  19.   padding-right: 15px;
  20.   padding-left: 15px;
  21.   overflow-x: visible;
  22.   -webkit-overflow-scrolling: touch;
  23.   border-top: 1px solid transparent;
  24.   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  25. }
  26. .navbar-collapse.in {
  27.   overflow-y: auto;
  28. }
  29. @media (min-width: 768px) {
  30.   .navbar-collapse {
  31.     width: auto;
  32.     border-top: 0;
  33.     box-shadow: none;
  34.   }
  35.   .navbar-collapse.collapse {
  36.     display: block !important;
  37.     height: auto !important;
  38.     padding-bottom: 0;
  39.     overflow: visible !important;
  40.   }
  41.   .navbar-collapse.in {
  42.     overflow-y: visible;
  43.   }
  44.   .navbar-fixed-top .navbar-collapse,
  45.   .navbar-static-top .navbar-collapse,
  46.   .navbar-fixed-bottom .navbar-collapse {
  47.     padding-right: 0;
  48.     padding-left: 0;
  49.   }
  50. }
  51. .container > .navbar-header,
  52. .container-fluid > .navbar-header,
  53. .container > .navbar-collapse,
  54. .container-fluid > .navbar-collapse {
  55.   margin-right: -15px;
  56.   margin-left: -15px;
  57. }
  58. @media (min-width: 768px) {
  59.   .container > .navbar-header,
  60.   .container-fluid > .navbar-header,
  61.   .container > .navbar-collapse,
  62.   .container-fluid > .navbar-collapse {
  63.     margin-right: 0;
  64.     margin-left: 0;
  65.   }
  66. }
  67. .navbar-static-top {
  68.   z-index: 1000;
  69.   border-width: 0 0 1px;
  70. }
  71. @media (min-width: 768px) {
  72.   .navbar-static-top {
  73.     border-radius: 0;
  74.   }
  75. }
  76. .navbar-fixed-top,
  77. .navbar-fixed-bottom {
  78.   position: fixed;
  79.   right: 0;
  80.   left: 0;
  81.   z-index: 1030;
  82. }
  83. @media (min-width: 768px) {
  84.   .navbar-fixed-top,
  85.   .navbar-fixed-bottom {
  86.     border-radius: 0;
  87.   }
  88. }
  89. .navbar-fixed-top {
  90.   top: 0;
  91.   border-width: 0 0 1px;
  92. }
  93. .navbar-fixed-bottom {
  94.   bottom: 0;
  95.   margin-bottom: 0;
  96.   border-width: 1px 0 0;
  97. }
  98. .navbar-brand {
  99.   float: left;
  100.   height: 50px;
  101.   padding: 15px 15px;
  102.   font-size: 18px;
  103.   line-height: 20px;
  104. }
  105. .navbar-brand:hover,
  106. .navbar-brand:focus {
  107.   text-decoration: none;
  108. }
  109. @media (min-width: 768px) {
  110.   .navbar > .container .navbar-brand,
  111.   .navbar > .container-fluid .navbar-brand {
  112.     margin-left: -15px;
  113.   }
  114. }
  115. .navbar-toggle {
  116.   position: relative;
  117.   float: right;
  118.   padding: 9px 10px;
  119.   margin-top: 8px;
  120.   margin-right: 15px;
  121.   margin-bottom: 8px;
  122.   background-color: transparent;
  123.   background-image: none;
  124.   border: 1px solid transparent;
  125.   border-radius: 4px;
  126. }
  127. .navbar-toggle:focus {
  128.   outline: none;
  129. }
  130. .navbar-toggle .icon-bar {
  131.   display: block;
  132.   width: 22px;
  133.   height: 2px;
  134.   border-radius: 1px;
  135. }
  136. .navbar-toggle .icon-bar + .icon-bar {
  137.   margin-top: 4px;
  138. }
  139. @media (min-width: 768px) {
  140.   .navbar-toggle {
  141.     display: none;
  142.   }
  143. }
  144. .navbar-nav {
  145.   margin: 7.5px -15px;
  146. }
  147. .navbar-nav > li > a {
  148.   padding-top: 10px;
  149.   padding-bottom: 10px;
  150.   line-height: 20px;
  151. }
  152. @media (max-width: 767px) {
  153.   .navbar-nav .open .dropdown-menu {
  154.     position: static;
  155.     float: none;
  156.     width: auto;
  157.     margin-top: 0;
  158.     background-color: transparent;
  159.     border: 0;
  160.     box-shadow: none;
  161.   }
  162.   .navbar-nav .open .dropdown-menu > li > a,
  163.   .navbar-nav .open .dropdown-menu .dropdown-header {
  164.     padding: 5px 15px 5px 25px;
  165.   }
  166.   .navbar-nav .open .dropdown-menu > li > a {
  167.     line-height: 20px;
  168.   }
  169.   .navbar-nav .open .dropdown-menu > li > a:hover,
  170.   .navbar-nav .open .dropdown-menu > li > a:focus {
  171.     background-image: none;
  172.   }
  173. }
  174. @media (min-width: 768px) {
  175.   .navbar-nav {
  176.     float: left;
  177.     margin: 0;
  178.   }
  179.   .navbar-nav > li {
  180.     float: left;
  181.   }
  182.   .navbar-nav > li > a {
  183.     padding-top: 15px;
  184.     padding-bottom: 15px;
  185.   }
  186.   .navbar-nav.navbar-right:last-child {
  187.     margin-right: -15px;
  188.   }
  189. }
  190. @media (min-width: 768px) {
  191.   .navbar-left {
  192.     float: left !important;
  193.   }
  194.   .navbar-right {
  195.     float: right !important;
  196.   }
  197. }
  198. .navbar-form {
  199.   padding: 10px 15px;
  200.   margin-top: 8px;
  201.   margin-right: -15px;
  202.   margin-bottom: 8px;
  203.   margin-left: -15px;
  204.   border-top: 1px solid transparent;
  205.   border-bottom: 1px solid transparent;
  206.   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
  207.           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
  208. }
  209. @media (min-width: 768px) {
  210.   .navbar-form .form-group {
  211.     display: inline-block;
  212.     margin-bottom: 0;
  213.     vertical-align: middle;
  214.   }
  215.   .navbar-form .form-control {
  216.     display: inline-block;
  217.     width: auto;
  218.     vertical-align: middle;
  219.   }
  220.   .navbar-form .input-group > .form-control {
  221.     width: 100%;
  222.   }
  223.   .navbar-form .control-label {
  224.     margin-bottom: 0;
  225.     vertical-align: middle;
  226.   }
  227.   .navbar-form .radio,
  228.   .navbar-form .checkbox {
  229.     display: inline-block;
  230.     padding-left: 0;
  231.     margin-top: 0;
  232.     margin-bottom: 0;
  233.     vertical-align: middle;
  234.   }
  235.   .navbar-form .radio input[type="radio"],
  236.   .navbar-form .checkbox input[type="checkbox"] {
  237.     float: none;
  238.     margin-left: 0;
  239.   }
  240.   .navbar-form .has-feedback .form-control-feedback {
  241.     top: 0;
  242.   }
  243. }
  244. @media (max-width: 767px) {
  245.   .navbar-form .form-group {
  246.     margin-bottom: 5px;
  247.   }
  248. }
  249. @media (min-width: 768px) {
  250.   .navbar-form {
  251.     width: auto;
  252.     padding-top: 0;
  253.     padding-bottom: 0;
  254.     margin-right: 0;
  255.     margin-left: 0;
  256.     border: 0;
  257.     -webkit-box-shadow: none;
  258.             box-shadow: none;
  259.   }
  260.   .navbar-form.navbar-right:last-child {
  261.     margin-right: -15px;
  262.   }
  263. }
  264. .navbar-nav > li > .dropdown-menu {
  265.   margin-top: 0;
  266.   border-top-left-radius: 0;
  267.   border-top-right-radius: 0;
  268. }
  269. .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  270.   border-bottom-right-radius: 0;
  271.   border-bottom-left-radius: 0;
  272. }
  273. .navbar-btn {
  274.   margin-top: 8px;
  275.   margin-bottom: 8px;
  276. }
  277. .navbar-btn.btn-sm {
  278.   margin-top: 10px;
  279.   margin-bottom: 10px;
  280. }
  281. .navbar-btn.btn-xs {
  282.   margin-top: 14px;
  283.   margin-bottom: 14px;
  284. }
  285. .navbar-text {
  286.   margin-top: 15px;
  287.   margin-bottom: 15px;
  288. }
  289. @media (min-width: 768px) {
  290.   .navbar-text {
  291.     float: left;
  292.     margin-right: 15px;
  293.     margin-left: 15px;
  294.   }
  295.   .navbar-text.navbar-right:last-child {
  296.     margin-right: 0;
  297.   }
  298. }
  299. .navbar-default {
  300.   background-color: #f8f8f8;
  301.   border-color: #e7e7e7;
  302. }
  303. .navbar-default .navbar-brand {
  304.   color: #777;
  305. }
  306. .navbar-default .navbar-brand:hover,
  307. .navbar-default .navbar-brand:focus {
  308.   color: #5e5e5e;
  309.   background-color: transparent;
  310. }
  311. .navbar-default .navbar-text {
  312.   color: #777;
  313. }
  314. .navbar-default .navbar-nav > li > a {
  315.   color: #777;
  316. }
  317. .navbar-default .navbar-nav > li > a:hover,
  318. .navbar-default .navbar-nav > li > a:focus {
  319.   color: #333;
  320.   background-color: transparent;
  321. }
  322. .navbar-default .navbar-nav > .active > a,
  323. .navbar-default .navbar-nav > .active > a:hover,
  324. .navbar-default .navbar-nav > .active > a:focus {
  325.   color: #555;
  326.   background-color: #e7e7e7;
  327. }
  328. .navbar-default .navbar-nav > .disabled > a,
  329. .navbar-default .navbar-nav > .disabled > a:hover,
  330. .navbar-default .navbar-nav > .disabled > a:focus {
  331.   color: #ccc;
  332.   background-color: transparent;
  333. }
  334. .navbar-default .navbar-toggle {
  335.   border-color: #ddd;
  336. }
  337. .navbar-default .navbar-toggle:hover,
  338. .navbar-default .navbar-toggle:focus {
  339.   background-color: #ddd;
  340. }
  341. .navbar-default .navbar-toggle .icon-bar {
  342.   background-color: #888;
  343. }
  344. .navbar-default .navbar-collapse,
  345. .navbar-default .navbar-form {
  346.   border-color: #e7e7e7;
  347. }
  348. .navbar-default .navbar-nav > .open > a,
  349. .navbar-default .navbar-nav > .open > a:hover,
  350. .navbar-default .navbar-nav > .open > a:focus {
  351.   color: #555;
  352.   background-color: #e7e7e7;
  353. }
  354. @media (max-width: 767px) {
  355.   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
  356.     color: #777;
  357.   }
  358.   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  359.   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  360.     color: #333;
  361.     background-color: transparent;
  362.   }
  363.   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  364.   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  365.   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  366.     color: #555;
  367.     background-color: #e7e7e7;
  368.   }
  369.   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  370.   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  371.   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  372.     color: #ccc;
  373.     background-color: transparent;
  374.   }
  375. }
  376. .navbar-default .navbar-link {
  377.   color: #777;
  378. }
  379. .navbar-default .navbar-link:hover {
  380.   color: #333;
  381. }
  382. .navbar-inverse {
  383.   background-color: #222;
  384.   border-color: #080808;
  385. }
  386. .navbar-inverse .navbar-brand {
  387.   color: #999;
  388. }
  389. .navbar-inverse .navbar-brand:hover,
  390. .navbar-inverse .navbar-brand:focus {
  391.   color: #fff;
  392.   background-color: transparent;
  393. }
  394. .navbar-inverse .navbar-text {
  395.   color: #999;
  396. }
  397. .navbar-inverse .navbar-nav > li > a {
  398.   color: #999;
  399. }
  400. .navbar-inverse .navbar-nav > li > a:hover,
  401. .navbar-inverse .navbar-nav > li > a:focus {
  402.   color: #fff;
  403.   background-color: transparent;
  404. }
  405. .navbar-inverse .navbar-nav > .active > a,
  406. .navbar-inverse .navbar-nav > .active > a:hover,
  407. .navbar-inverse .navbar-nav > .active > a:focus {
  408.   color: #fff;
  409.   background-color: #080808;
  410. }
  411. .navbar-inverse .navbar-nav > .disabled > a,
  412. .navbar-inverse .navbar-nav > .disabled > a:hover,
  413. .navbar-inverse .navbar-nav > .disabled > a:focus {
  414.   color: #444;
  415.   background-color: transparent;
  416. }
  417. .navbar-inverse .navbar-toggle {
  418.   border-color: #333;
  419. }
  420. .navbar-inverse .navbar-toggle:hover,
  421. .navbar-inverse .navbar-toggle:focus {
  422.   background-color: #333;
  423. }
  424. .navbar-inverse .navbar-toggle .icon-bar {
  425.   background-color: #fff;
  426. }
  427. .navbar-inverse .navbar-collapse,
  428. .navbar-inverse .navbar-form {
  429.   border-color: #101010;
  430. }
  431. .navbar-inverse .navbar-nav > .open > a,
  432. .navbar-inverse .navbar-nav > .open > a:hover,
  433. .navbar-inverse .navbar-nav > .open > a:focus {
  434.   color: #fff;
  435.   background-color: #080808;
  436. }
  437. @media (max-width: 767px) {
  438.   .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
  439.     border-color: #080808;
  440.   }
  441.   .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
  442.     background-color: #080808;
  443.   }
  444.   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
  445.     color: #999;
  446.   }
  447.   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  448.   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
  449.     color: #fff;
  450.     background-color: transparent;
  451.   }
  452.   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  453.   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  454.   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
  455.     color: #fff;
  456.     background-color: #080808;
  457.   }
  458.   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  459.   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  460.   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  461.     color: #444;
  462.     background-color: transparent;
  463.   }
  464. }
  465. .navbar-inverse .navbar-link {
  466.   color: #999;
  467. }
  468. .navbar-inverse .navbar-link:hover {
  469.   color: #fff;
  470. }
下一节