如何将Bootstrap添加到Fullpage.js [英] How to add Bootstrap to Fullpage.js
问题描述
我正在尝试将Bootstrap添加到Fullpage.js中，这样，我的网站就会显得响应灵敏.基本上，我为Fullpage.js设计了一个简单的布局，如下所示:
I'm trying to add Bootstrap to Fullpage.js so in this way my site would be looked responsive. Basically I have got a simple layout for Fullpage.js which goes like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2','#4BBFC3','#7BAABE','whitesmoke'],
css3: true
});
});
</script>
<style type="text/css">
.section{
font-size:6em;
text-align:center;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
<div class="section">Sction 2</div>
<div class="section">Sction 3</div>
</div>
</body>
</html>
然后我尝试添加Bootstrap Jquery文件和CSS文件并将其命名为...
Then I tried adding Bootstrap Jquery files and CSS files and called them...
正文部分的末尾:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
在顶部:
<link href="css/bootstrap.css" rel="stylesheet"/>
但是，每当我这样做时，整个Fullpage.js都将崩溃，并且无法与Bootstrap一起使用！因此，我不知道如何在Fullpage.js中使用Bootstrap，如果您知道该怎么做，请告诉我，我真的很感谢. ThX
But whenever I do this the whole Fullpage.js would be crashed and no longer it works withing Bootstrap! So I don't know how to use Bootstrap with Fullpage.js, if you know how to do that please let me know ,I really appreciate that. ThX
推荐答案
尝试以下代码，它应该可以工作，只是确保立即使用jquery插件并正确地组织它.
Try the following code, it should work, just to make sure you use jquery plugin at once and organize it properly.
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2','#4BBFC3','#7BAABE','whitesmoke'],
css3: true
});
});
</script>
<style type="text/css">
.section {
font-size: 6em;
text-align: center;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
<div class="section">Sction 2</div>
<div class="section">Sction 3</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这篇关于如何将Bootstrap添加到Fullpage.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
