2

当我下载 Bootstrap 时，它包括 bootstrap.js 和 bootstrap.min.js -files。例如，我可以使用它们和 jQuery.js 来使导航栏崩溃。

但是，当我查看 bootstrap 网站中任何站点的源代码时，它总是有这些单独的 .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 很陌生，我可能在这里遗漏了一些非常基本的东西......但是：

  1. 是否可以使用 affix.js 和 scrollSpy.js 仅使用 bootstrap.js 来制作浮动导航，或者我们是否需要像 bootstrap 网站那样包含这些单独的文件？

  2. 为什么 bootstrap 网站使用这些单独的文件，为什么我下载 bootstrap 时不包含它们？

非常感谢！

4

1 回答 1

5

可以在此处找到以下文件参考：

这是我为使其工作所做的工作：

  1. 下载HTML5 Boilerplate Bootstrap 版本，这是一个基本的起点。将这些文件放在服务器上的目录中。然后，
  2. 转到Bootstrap Customize，除非您确切知道自己需要什么，否则请检查所有内容。您可以随时重新访问这部分并配对您不使用的部分。

现在，解压下载的 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>
于 2012-09-25T07:04:33.177 回答