javascript - Should it matter if I use bootstrap.js or all the 14 separate .js -files? Trying to build affix behaviour - Stack O

admin管理员组

文章数量:1315033

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=".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 .html has on the left.

If I copy the source code from .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!

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./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./bootstrap/scaffolding.html has on the left.

If I copy the source code from http://twitter.github./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!

• javascript
• html
• twitter-bootstrap

Share Improve this question Follow asked Sep 25, 2012 at 5:45 JonathanJonathan 70733 gold badges1313 silver badges2424 bronze badges 4

• No. You need the Bootstrap Boilerplate, and then use Bootstrap Customize to build your file includes, which then you need to add what you need that's not already included. Don't just copy it straight from the Bootstrap docs. That long list of .js files are the Javascript plugin files, which it sounds like you only need a couple. – Jared Farrish Commented Sep 25, 2012 at 5:48
• I didn't pletely understand... twitter.github./bootstrap/javascript.html says: "If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of the plugins listed on this page." What I don't get is why doesnt my page work when I use bootstrap.js, but works when I use those separate .js files? Or am I supposed to always use thos separate .js files? Then what's the purpose of the bootstrap.js if it doesent make all those features work..? Still thanks for your reply! – Jonathan Commented Sep 25, 2012 at 5:58
• It should, if you do it right. See: jfcoder./boiler/test/affix.html I downloaded the HTML5 Boilerplate Bootstrap version, installed that, then went to Bootstrap Customize and just selected everything (hit Toggle All twice). Then download, extract that download's bootstrap.js and bootstrap.css files, rename them bootstrap.customize.js/.css, then copy them into the CSS/JS directories. – Jared Farrish Commented Sep 25, 2012 at 6:50
• Then, in the index.html file, do <body data-spy="scroll" data-target=".lipsum-sidebar">, then in the nav make sure you have <div class="span3 lipsum-sidebar"> and <ul class="nav nav-list" data-spy="affix">. – Jared Farrish Commented Sep 25, 2012 at 6:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The files reference below may be found here:

• Bootstrap Affix demo - HTML
• Bootstrap Affix demo - bootstrap.customize.css
• Bootstrap Affix demo - bootstrap.customize.js

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

本文标签：