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

Question

当我下载Bootstrap时，它包含bootstrap.js和bootstrap.min.js -files。 我可以使用它们和jQuery.js来使导航栏折叠，例如很好。

但是，当我从引导网站中的任何站点查看源代码时，它始终具有以下独立的.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>

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

如果我从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>

没用 浮动侧边栏位于顶部，向下滚动时不会跟随。

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

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

是否可以仅使用bootstrap.js使用affix.js和scrollSpy.js制作浮动导航，还是需要像bootstrap网站那样包含那些单独的文件？
为什么引导网站使用这些单独的文件？为什么下载引导时不包含这些文件？

非常感谢你！

Answer 1

可以在下面找到以下文件参考：

这是我为使其工作而要做的事情：

下载HTML5 Boilerplate Bootstrap版本，这是一个基本的起点。 将这些文件放在服务器上的目录中。 然后，
进入自引导自定义，除非你知道你需要什么，检查了这一切。 您随时可以重新访问此部分，并将不使用的部分配对。

现在，解压缩下载的Bootstrap Customize ...

bootstrap.js
bootstrap.css

并重命名它们：

bootstrap.customize.js
bootstrap.customize.css

然后将它们复制到它们匹配的文件旁边的HTML5 Boilerplate目录中。

然后打开index.html并修改：

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

至：

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

（和...）

<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>

然后在最底部修改：

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

至：

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

然后：

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

然后在.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>

然后的内容：

   <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