如果我使用bootstrap.js或所有14个单独的.js-文件都应该重要吗？尝试建立词缀行为

Question

When I download Bootstrap, it includes bootstrap.js and bootstrap.min.js -files. 当我下载Bootstrap时，它包含bootstrap.js和bootstrap.min.js -files。 I can use them and jQuery.js to make the navbar collapse for example just fine. 我可以使用它们和jQuery.js来使导航栏折叠，例如很好。

But when I look at the source from any site in bootstrap website, it always has these separate .js files: 但是，当我从引导网站中的任何站点查看源代码时，它始终具有以下独立的.js文件：

 <!-- 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. 我正在尝试使带有链接的浮动边栏，例如http://twitter.github.com/bootstrap/scaffolding.html在左侧。

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 如果我从http://twitter.github.com/bootstrap/scaffolding.html复制源代码，并复制所有这些单独的.js文件，则可以使用，但是如果我只是插入

<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. 当我研究bootstrap.js时，似乎具有单独的.js文件（“ bootstrap-transition.js”等）具有的所有内容，而我想bootstrap.js只是获得所有这些javascript功能的一种更简单的方法。

As I'm very new to html, I'm probably missing something very basic here... But: 因为我是html的新手，所以我可能在这里错过了一些非常基本的东西...但是：

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? 是否可以仅使用bootstrap.js使用affix.js和scrollSpy.js制作浮动导航，还是需要像bootstrap网站那样包含那些单独的文件？
Why does bootstrap website use those separate files and why they are not included if I download bootstrap? 为什么引导网站使用这些单独的文件？为什么下载引导时不包含这些文件？

Thank you very much! 非常感谢你！

Answer 1

The files reference below may be found here: 可以在下面找到以下文件参考：

Here's what I did to make it work: 这是我为使其工作而要做的事情：

Download the HTML5 Boilerplate Bootstrap version , which is a basic starting off point. 下载HTML5 Boilerplate Bootstrap版本，这是一个基本的起点。 Put those files in a directory on your server. 将这些文件放在服务器上的目录中。 Then, 然后，
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 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. 然后将它们复制到它们匹配的文件旁边的HTML5 Boilerplate目录中。

Then open index.html and modify: 然后打开index.html并修改：

<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 : 然后在.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-文件都应该重要吗？尝试建立词缀行为

问题描述

1 个解决方案

解决方案1
5 2012-09-25 07:04:33

如果我使用bootstrap.js或所有14个单独的.js-文件都应该重要吗？ 尝试建立词缀行为

问题描述

1 个解决方案

解决方案1 5 2012-09-25 07:04:33

如果我使用bootstrap.js或所有14个单独的.js-文件都应该重要吗？尝试建立词缀行为

解决方案1
5 2012-09-25 07:04:33