如果我使用bootstrap.js或所有14个独立的.js文件，它应该如何？试图建立词缀行为 [英] Should it matter if I use bootstrap.js or all the 14 separate .js -files? Trying to build affix behaviour

查看：78
本文介绍了如果我使用bootstrap.js或所有14个独立的.js文件，它应该如何？试图建立词缀行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我下载Bootstrap时，它包含bootstrap.js和bootstrap.min.js文件。
我可以使用它们和jQuery.js来使导航栏崩溃，例如很好。



但是，当我从bootstrap网站的任何站点查看源代码时，它始终有这些单独的.js文件：

 <！ -  Le javascript 
 =========================== =======================  - > 
 <！ - 放置在文档的末尾，以便页面加载更快 - > 
< script type =text / javascriptsrc =http://platform.twitter.com/widgets.js>< / script> 
< script src =assets / js / jquery.js>< / script> 
< script src =assets / js / google-code-prettify / prettify.js>< / script> 
< script src =assets / js / bootstrap-transition.js>< / script> 
< script src =assets / js / bootstrap-alert.js>< / script> 
< script src =assets / js / bootstrap-modal.js>< / script> 
< script src =assets / js / bootstrap-dropdown.js>< / script> 
< script src =assets / js / bootstrap-scrollspy.js>< / script> 
< script src =assets / js / bootstrap-tab.js>< / script> 
< script src =assets / js / bootstrap-tooltip.js>< / script> 
< script src =assets / js / bootstrap-popover.js>< / script> 
< script src =assets / js / bootstrap-button.js>< / script> 
< script src =assets / js / bootstrap-collapse.js>< / script> 
< script src =assets / js / bootstrap-carousel.js>< / script> 
< script src =assets / js / bootstrap-typeahead.js>< / script> 
< script src =assets / js / bootstrap-affix.js>< / script> 
< script src =assets / js / application.js>< / script>

我正在尝试使用链接的浮动边栏，如 http://twitter.github.com/bootstrap/scaffolding.html 位于左侧。

如果我从 http ：//twitter.github.com/bootstrap/scaffolding.html ，并复制所有这些单独的.js文件，它的工作原理，但如果我只是插入

 < script type =text / javascriptsrc =bootstrap / js / jquery-1.8.1.min.js>< / script> 
< script type =text / javascriptsrc =bootstrap / js / bootstrap.min.js>< / script>

它不起作用。



当我调查bootstrap.js时，它似乎将所有内容分开.js文件（bootstrap -transition.js等）和我thougt bootstrap.js只是一个更简单的方式来获得所有这些JavaScript功能。



因为我很新的HTML ，我可能在这里错过了一些非常基本的东西......
但是：


  1. 是否有可能使浮动导航与affix.js和scrollSpy.js只有bootstrap.js，或者我们需要包括像bootstrap网站这些单独的文件吗？

  2. 为什么bootstrap网站使用这些单独的文件，为什么他们不包括在内，如果我下载引导？


非常感谢！ / b>

解决方案

下面的文件可以在这里找到：



以下是我所做的工作：


  1. 下载 HTML5 Boilerplate Bootstrap版本，这是一个基本的起点。将这些文件放在服务器上的目录中。然后，

  2. 转到引导自定义，除非你完全知道你需要什么，检查一切。您可以随时重新访问此部分，并将您未使用的部分配对。
    3. 现在，解压缩下载的Bootstrap Customize ... $ b 

      bootstrap.js 
     bootstrap.css

    重新命名它们： 

      bootstrap.customize.js 
     bootstrap .customize.css

    然后将这些文件复制到匹配文件旁边的HTML5 Boilerplate目录中。 index.html 并修改：

    < link rel =stylesheethref =css / bootstrap.min.css>

    收件人：

     < link rel =stylesheethref =css / bootstrap.customize.css>

    （And ...） 

     <风格> 
     body {
     padding-top：60px; 
     padding-bottom：40px; 
    } 
     / *我这样做，所以你可以看到身体上的滚动间谍* / 
     li.active {
     background：#ddd; 
    } 
    < / style>

    然后在最下面修改：

     < script src =js / vendor / bootstrap.min.js>< / script>

    收件人：

     < script src =js / vendor / bootstrap.customize.js>< / script>

    然后： 

     < body data-spy =scrolldata-target =。lipsum-sidebar>

    然后在 .container 中：

     < div class =container> 
     
    < div class =row> 
    < div class =span3 lipsum-sidebar> 
    < ul class =nav nav-list bs-docs-sidenavdata-spy =affix> 
    < li> 
    < a href =＃lipsum1>< i class =icon-chevron-right>< / i> Lipsom 1< / a> 
    < / li> 
     .... 
    < li> 
    < a href =＃lipsum9>< i class =icon-chevron-right>< / i> Lipsom 9< / a> 
    < / li> 
    < / ul> 
    < / div> 
    < / div>

    然后是内容： 

     < div class =span9> 
     
    < section id =lipsum1> 
    < p> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Duis tempor dapibus justo id consequat。 Pellentesque sem massa，tempus quis consequat quis，sodales eu tellus。 Pellentesque id ullamcorper diam。 Quisque rhoncus，diam ut lobortis auctor，risus libero vestibulum erat，in iaculis purus lacus a sem。 Maecenas sodales nunc ac ipsum pulvinar坐amet ultrices risus consectetur。在ut mauris中提供简历。 Nullam pulvinar lobortis libero eget luctus。 Aliquam erat volutpat。在hac cubasse platea中最明显。 Maecenas quis eros nulla。 Vivamus nec metus eget metus aliquam cursus。 Praesent semper tempus neque id bibendum。 Curabitur blandit pulvinar leo in adipiscing。< / p> 
     ... 
    < p>暂停电位。 Morbi odio lorem，scelerisque eu eleifend eget，placerat eget metus。 Nulla non elit et sapien tincidunt feugiat。 Aliquam nec lacinia arcu。在nisi et nibh aliquet varius中完成。 Nunc viverra sapien vitae nisl auctor vitae viverra risus sagittis。 Aenean quis arcu ligula，ut gravida ante。 Nunc egestas mi eget mi suscipit commodo。 Cras id justo est。Nunc varius nunc imperdiet elit aliquam vitae cursus magna adipiscing。 Vivamus suscipit justo tortor，eu tempus quam。 Donec venenatis sollicitudin augue，sed pharetra erat vehicula vel。在consectetur sem完成。 Vivamus在loreus lorem。 Praesent vestibulum leo sed metus egestas fermentum。 Mauris tincidunt diam a turpis pellentesque aliquam。< / p> 
    < / section> 
     
    < / div> 
     
    < / div>


    When I download Bootstrap, it includes bootstrap.js and bootstrap.min.js -files. I can use them and jQuery.js to make the navbar collapse for example just fine.

    But when I look at the source from any site in bootstrap website, it always has these separate .js files:

     <!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
<script src="assets/js/application.js"></script>

    I'm trying to make the floating sidebar with links, like http://twitter.github.com/bootstrap/scaffolding.html has on the left.

    If I copy the source code from http://twitter.github.com/bootstrap/scaffolding.html, and copy all those separate .js files, it works but if I just insert

    <script type="text/javascript" src="bootstrap/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    It doesn't work. The floating sidebar stays on top and wont follow when scrolling down.

    When I investigate bootstrap.js, it seems to have all the content those separate .js files ("bootstrap-transition.js" etc) has and I thougt bootstrap.js was just a more simple way to get all those javascript features.

    As I'm very new to html, I'm probably missing something very basic here... But:

    1. Is it possible to make the floating nav with affix.js and scrollSpy.js with just bootstrap.js, or do we need to include those separate files like bootstrap website does?

    2. Why does bootstrap website use those separate files and why they are not included if I download bootstrap?

    Thank you very much!

    解决方案

    The files reference below may be found here:

    Here's what I did to make it work:

    1. Download the HTML5 Boilerplate Bootstrap version, which is a basic starting off point. Put those files in a directory on your server. Then,
    2. Go to Bootstrap Customize and unless you know exactly what you need, check it all. You can always revisit this part and pair down what you don't use.

    Now, extract the downloaded Bootstrap Customize...

    bootstrap.js
bootstrap.css

    And rename them:

    bootstrap.customize.js
bootstrap.customize.css

    Then copy those into the HTML5 Boilerplate directories next to the files they match.

    Then open index.html and modify:

    <link rel="stylesheet" href="css/bootstrap.min.css">

    To:

    <link rel="stylesheet" href="css/bootstrap.customize.css">

    (And...)

    <style>
body {
    padding-top: 60px;
    padding-bottom: 40px;
}
/* I do this so you can see the scroll spy on body */
li.active {
    background: #ddd;
}
</style>

    And at the very bottom, modify:

    <script src="js/vendor/bootstrap.min.js"></script>

    To:

    <script src="js/vendor/bootstrap.customize.js"></script>

    Then:

    <body data-spy="scroll" data-target=".lipsum-sidebar">

    Then within .container:

    <div class="container">

  <div class="row">
   <div class="span3 lipsum-sidebar">
    <ul class="nav nav-list bs-docs-sidenav" data-spy="affix">
     <li>
      <a href="#lipsum1"><i class="icon-chevron-right"></i> Lipsom 1</a>
     </li>
     ....
     <li>
      <a href="#lipsum9"><i class="icon-chevron-right"></i> Lipsom 9</a>
     </li>
    </ul>
   </div>
  </div>

    Then the content:

       <div class="span9">

    <section id="lipsum1">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor dapibus justo id consequat. Pellentesque sem massa, tempus quis consequat quis, sodales eu tellus. Pellentesque id ullamcorper diam. Quisque rhoncus, diam ut lobortis auctor, risus libero vestibulum erat, in iaculis purus lacus a sem. Maecenas sodales nunc ac ipsum pulvinar sit amet ultrices risus consectetur. Proin vitae lorem nec quam semper pharetra in ut mauris. Nullam pulvinar lobortis libero eget luctus. Aliquam erat volutpat. In hac habitasse platea dictumst. Maecenas quis eros nulla. Vivamus nec metus eget metus aliquam cursus. Praesent semper tempus neque id bibendum. Curabitur blandit pulvinar leo in adipiscing.</p>
     ...
     <p>Suspendisse potenti. Morbi odio lorem, scelerisque eu eleifend eget, placerat eget metus. Nulla non elit et sapien tincidunt feugiat. Aliquam nec lacinia arcu. Donec in nisi et nibh aliquet varius. Nunc viverra sapien vitae nisl auctor vitae viverra risus sagittis. Aenean quis arcu ligula, ut gravida ante. Nunc egestas mi eget mi suscipit commodo. Cras id justo est. Nunc varius nunc imperdiet elit aliquam vitae cursus magna adipiscing. Vivamus suscipit justo tortor, eu tempus quam. Donec venenatis sollicitudin augue, sed pharetra erat vehicula vel. Donec in consectetur sem. Vivamus at lectus lorem. Praesent vestibulum leo sed metus egestas fermentum. Mauris tincidunt diam a turpis pellentesque aliquam.</p>
    </section>

   </div>

  </div>

    这篇关于如果我使用bootstrap.js或所有14个独立的.js文件，它应该如何？试图建立词缀行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆