我正在尝试将Bootstrap添加到Fullpage.js中，以使我的网站看起来具有响应性。基本上，我已经为Fullpage.js设计了一个简单的布局，如下所示：
<!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文件，并调用它们...
在body部分的末尾：
<!-- 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。如果您知道如何做到这一点，请告诉我，我非常感慕! 谢谢。