簡體   English   中英

如果我使用bootstrap.js或所有14個單獨的.js-文件都應該重要嗎? 嘗試建立詞綴行為

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

當我下載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的新手,所以我可能在這里錯過了一些非常基本的東西...但是:

  1. 是否可以僅使用bootstrap.js使用affix.js和scrollSpy.js制作浮動導航,還是需要像bootstrap網站那樣包含那些單獨的文件?

  2. 為什么引導網站使用這些單獨的文件?為什么下載引導時不包含這些文件?

非常感謝你!

可以在下面找到以下文件參考:

這是我為使其工作而要做的事情:

  1. 下載HTML5 Boilerplate Bootstrap版本 ,這是一個基本的起點。 將這些文件放在服務器上的目錄中。 然后,
  2. 進入自引導自定義 ,除非你知道你需要什么,檢查了這一切。 您隨時可以重新訪問此部分,並將不使用的部分配對。

現在,解壓縮下載的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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM