Ket*_*tri 2 html javascript twitter-bootstrap
当我下载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很新,我可能会遗漏一些非常基本的东西...但是:
是否可以使用bootstrap.js使用affix.js和scrollSpy.js进行浮动导航,或者我们是否需要包含像bootstrap网站那样的单独文件？
为什么bootstrap网站使用这些单独的文件以及为什么我下载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>
| 归档时间： |
|
| 查看次数： |
12604 次 |
| 最近记录： |