stickUp

一个 jQuery 插件

这是一个简单的jQuery插件，它能让页面目标元素 “固定” 在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作，也能在单页面上面实现导航功能。滚动当前页面看看导航条的效果吧。

首先我们去下载我们需要的js和css文件 https://github.com/LiranCohen/stickUp

经研究必要的js和css为

bootstrap.min.css

stickup.css

jquery.js

bootstrap.min.js

stickUp.min.js

请注意笔者引入的顺序哦.千万别弄错了.

写这个关键部分是导航部分:

关键代码如下(官方的样式):

  1. <!--这里是导航-->
  2.     <div class="navbar-wrapper">
  3.         <div class="container">
  4.             <div class="navbarwrapper" >
  5.                 <div class="navbar navbar-inverse navbar-static-top">
  6.                     <div class="container">
  7.                         <div class="navbar-collapse collapse">
  8.                             <ul class="nav navbar-nav">
  9.                                 <li class="menuItem active">
  10.                                     <a href="#home">首页</a>
  11.                                 </li>
  12.                                 <li><li class="menuItem">
  13.                                     <a href="#yw">语文</a>
  14.                                 </li>
  15.                                 <li class="menuItem">
  16.                                     <a href="#sx">数学</a>
  17.                                 </li>
  18.                                 <li class="menuItem">
  19.                                     <a href="#wl">物理</a>
  20.                                 </li>
  21.                                 <li class="menuItem">
  22.                                     <a href="#hx">化学</a>
  23.                                 </li>
  24.                                 <li class="menuItem">
  25.                                     <a href="#sw">生物</a>
  26.                                 </li>
  27.                                 <li class="menuItem">
  28.                                     <a href="#zz">政治</a>
  29.                                 </li>
  30.                                 <li class="menuItem">
  31.                                     <a href="#dl">地理</a>
  32.                                 </li>
  33.                                 <li class="menuItem">
  34.                                     <a href="#yy">英语</a>
  35.                                 </li>
  36.                                 <li class="menuItem">
  37.                                     <a href="#more">更多</a>
  38.                                 </li>
  39.                             </ul>
  40.                         </div>
  41.                     </div>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.     </div>
  46.     <!--end导航-->

效果如图:

实际效果比这张效果图要好,已上传不知道怎么就变样了.

特别要注意的是锚链接的文本一定要和导航部分的一致.

下面是最关键的部分了,就是实现导航悬浮顶部:需添加下面代码:

  1. //记住是在引入js文件的后面写
  2. <script type="text/javascript">
  3.              jQuery(function($) {
  4.         $(document).ready( function() {
  5.           $('.navbar-wrapper').stickUp({
  6.                         parts: {
  7.                           0:'home',  //这部分就是你锚链接的id
  8.                           1:'yw',
  9.                           2: 'sx',
  10.                           3: 'wl',
  11.                           4: 'hx',
  12.                           5: 'sw',
  13.                           6: 'zz',
  14.                           7: 'dl',
  15.                           8: 'yy',
  16.                           9: 'more'
  17.  
  18.                         },
  19.                         itemClass: 'menuItem',
  20.                         itemHover: 'active',
  21.                         topMargin: 'auto'
  22.                       });
  23.         });
  24.       });
  25.     </script>

这样就大功告成了!效果如图:

至此我们导航随滚动监听并保持悬浮顶部算是实现了

以下附上我的test源代码供大家参考:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.            <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="description" content="">
  7.     <meta name="author" content="">
  8.  
  9.         <title>导航固定顶部</title>
  10.  
  11.         <link rel="stylesheet" href="css/bootstrap.min.css" />
  12.             <link rel="stylesheet" href="stickup.css" />
  13.     </head>
  14.     <body>
  15.          <div class="carousel">
  16.     <!--这里是导航-->
  17.     <div class="navbar-wrapper">
  18.         <div class="container">
  19.             <div class="navbarwrapper" >
  20.                 <div class="navbar navbar-inverse navbar-static-top">
  21.                     <div class="container">
  22.                         <div class="navbar-collapse collapse">
  23.                             <ul class="nav navbar-nav">
  24.                                 <li class="menuItem active">
  25.                                     <a href="#home">首页</a>
  26.                                 </li>
  27.                                 <li><li class="menuItem">
  28.                                     <a href="#yw">语文</a>
  29.                                 </li>
  30.                                 <li class="menuItem">
  31.                                     <a href="#sx">数学</a>
  32.                                 </li>
  33.                                 <li class="menuItem">
  34.                                     <a href="#wl">物理</a>
  35.                                 </li>
  36.                                 <li class="menuItem">
  37.                                     <a href="#hx">化学</a>
  38.                                 </li>
  39.                                 <li class="menuItem">
  40.                                     <a href="#sw">生物</a>
  41.                                 </li>
  42.                                 <li class="menuItem">
  43.                                     <a href="#zz">政治</a>
  44.                                 </li>
  45.                                 <li class="menuItem">
  46.                                     <a href="#dl">地理</a>
  47.                                 </li>
  48.                                 <li class="menuItem">
  49.                                     <a href="#yy">英语</a>
  50.                                 </li>
  51.                                 <li class="menuItem">
  52.                                     <a href="#more">更多</a>
  53.                                 </li>
  54.                             </ul>
  55.                         </div>
  56.                     </div>
  57.                 </div>
  58.             </div>
  59.         </div>
  60.     </div>
  61.     <!--end导航-->
  62.     <div id="contents" style="margin-left: 130px;margin-right: 130px;">
  63.         <div id="home" class="row featurette container marketing">
  64.              <div class="row">
  65.             <h1 style="margin-top: 100px;">我是home</h1>
  66.             <p>
  67.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  68.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  69.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  70.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  71.             </p>
  72.         </div>
  73.              </div>
  74.         <div id="yw" class="row featurette">
  75.             <h1 style="margin-top: 100px;">我是语文</h1>
  76.             <p>
  77.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  78.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  79.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  80.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  81.             </p>
  82.         </div>
  83.         <div id="sx" class="row featurette">
  84.             <h1 style="margin-top: 100px;">我是数学</h1>
  85.             <p>
  86.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  87.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  88.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  89.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  90.             </p>
  91.         </div>
  92.         <div id="wl" class="row featurette">
  93.             <h1 style="margin-top: 100px;">我是物理</h1>
  94.             <p>
  95.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  96.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  97.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  98.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  99.             </p>
  100.         </div>
  101.         <div id="hx" class="row featurette">
  102.             <h1 style="margin-top: 100px;">我是化学</h1>
  103.             <p>
  104.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  105.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  106.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  107.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  108.             </p>
  109.         </div>
  110.         <div id="sw" class="row featurette">
  111.             <h1 style="margin-top: 100px;">我是生物</h1>
  112.             <p>
  113.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  114.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  115.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  116.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  117.             </p>
  118.         </div>
  119.         <div id="zz" class="row featurette">
  120.             <h1 style="margin-top: 100px;">我是政治</h1>
  121.             <p>
  122.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  123.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  124.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  125.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  126.             </p>
  127.         </div>
  128.         <div id="dl" class="row featurette">
  129.             <h1 style="margin-top: 100px;">我是dl</h1>
  130.             <p>
  131.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  132.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  133.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  134.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  135.             </p>
  136.         </div>
  137.         <div id="yy" class="row featurette">
  138.             <h1 style="margin-top: 100px;">我是英语</h1>
  139.             <p>
  140.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  141.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  142.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  143.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  144.             </p>
  145.         </div>
  146.         <div id="more" class="row featurette">
  147.             <h1 style="margin-top: 100px;">我是更多</h1>
  148.             <p>
  149.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  150.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  151.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  152.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  153.             </p>
  154.             <p>
  155.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  156.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  157.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  158.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  159.             </p>
  160.             <p>
  161.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  162.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  163.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  164.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  165.             </p>
  166.             <p>
  167.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  168.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  169.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  170.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  171.             </p>
  172.             <p>
  173.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  174.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  175.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  176.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  177.             </p>
  178.             <p>
  179.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  180.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  181.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  182.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  183.             </p>
  184.             <p>
  185.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  186.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  187.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  188.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  189.             </p>
  190.             <p>
  191.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  192.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  193.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  194.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  195.             </p>
  196.             <p>
  197.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  198.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  199.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  200.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  201.             </p>
  202.             <p>
  203.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  204.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  205.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  206.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  207.             </p>
  208.             <p>
  209.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  210.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  211.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  212.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  213.             </p>
  214.             <p>
  215.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  216.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  217.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  218.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  219.             </p>
  220.             <p>
  221.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  222.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  223.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  224.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  225.             </p>
  226.             <p>
  227.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  228.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  229.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  230.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  231.             </p>
  232.             <p>
  233.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  234.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  235.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  236.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  237.             </p>
  238.             <p>
  239.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  240.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  241.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  242.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  243.             </p>
  244.             <p>
  245.                 XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
  246.                 符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
  247.                 业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
  248.                 设施互联互通。双方还要扩大人文合作，促进青年交流。
  249.             </p>
  250.         </div>
  251.     </div>
  252.     </div>
  253.  
  254.     <script type="text/javascript" src="js/jquery.js" ></script>
  255.     <script type="text/javascript" src="js/bootstrap.min.js" ></script>
  256.     <script type="text/javascript" src="js/stickUp.min.js" ></script>
  257.     <script type="text/javascript">
  258.              jQuery(function($) {
  259.         $(document).ready( function() {
  260.           $('.navbar-wrapper').stickUp({
  261.                         parts: {
  262.                           0:'home',
  263.                           1:'yw',
  264.                           2: 'sx',
  265.                           3: 'wl',
  266.                           4: 'hx',
  267.                           5: 'sw',
  268.                           6: 'zz',
  269.                           7: 'dl',
  270.                           8: 'yy',
  271.                           9: 'more'
  272.  
  273.                         },
  274.                         itemClass: 'menuItem',
  275.                         itemHover: 'active',
  276.                         topMargin: 'auto'
  277.                       });
  278.         });
  279.       });
  280.     </script>
  281.     </body>
  282. </html>

Bootstrap导航悬浮顶部,stickUp的更多相关文章

  1. bootstrap悬浮顶部或者底部

    这是bootstrap提供的样式,只需要引入bootstrap.css即可. 需要使用的class样式: navbar navbar-inverse navbar-inner navbar-fixed ...

  2. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  3. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  4. Bootstrap导航

    前面的话 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,便于用户查找网站所提供的各项功能服务.本文将详细介绍Bootstrap导航 基础样式 Bootstrap框架中制作导 ...

  5. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  6. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  7. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  8. Bootstrap 导航 标题栏

    Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. SpringAccess数据库(oracle)构造

    陈科朝:http://blog.csdn.net/u013474104/article/details/44279309 ================ 1.spring 对数据库訪问的支持 当我们 ...

  2. SpringMVC现实

    夹 一个.前言 两.spring mvc 核心类和接口 三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说 ...

  3. DataTable转化为List

    public List<T> ConvertToList<T>(DataTable dt) where T : new()        {            // 定义集 ...

  4. hdu 质方数

    Problem Description   小明天生对数字比较敏感,3岁的时候就能背诵圆周率一百位. 现在,小明慢慢长大了,但依然很喜欢数字,最近,他迷上了质数和平方数,并且自己把质数的平方命名为“质 ...

  5. POJ1201-Intervals(差动限制)

    Intervals Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 20786   Accepted: 7866 Descri ...

  6. 开源 java CMS - FreeCMS2.3员

    原文地址:http://javaz.cn/site/javaz/site_study/info/2015/28375.html​ 项目地址:http://www.freeteam.cn/ 会员注冊 打 ...

  7. 在Magento产品页面的使用jqZoom

    Magento在产品页面提供了一个简单的图片放大功能,不是非常好,假设考虑使用放大镜来使用户查看产品的大图.能够考虑使用基于jQuery的插件,jqZoom便是一款优秀的放大镜插件.以下将介绍如何把j ...

  8. WebBrowser控件使用技巧分享

    原文:WebBrowser控件使用技巧分享 在发布“淘宝登货员”时发现不少朋友对WebBrowser控件比较感兴趣,故在此分享一下使用心得. 首先分享一个WebBrowser的扩展类(此类所需的dll ...

  9. 跟着大神重写的KNN 文档归类小工具

    ·背景 在知道KNN之前,楼主有时候会粗糙地做一些分类模型的计算.在拜读了Orisun大神[http://www.cnblogs.com/zhangchaoyang/articles/2162393. ...

  10. HDU 4228 Flooring Tiles 反素数

    推出了结论,万万没想到最后用搜索.. 还想dp来着.. #include <cstdio> #include <cstring> #include <iostream&g ...