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

后端未结

关注

 1  933

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

相关标签:

1条回答

孤独总比滥情好

2021-01-03 14:05

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:

Download the HTML5 Boilerplate Bootstrap version, which is a basic starting off point. 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.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: #ffffd;
}
</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>

0 讨论(0)