如何将 Bootstrap 添加到 Fullpage.js答案

【问题标题】：How to add Bootstrap to Fullpage.js如何将 Bootstrap 添加到 Fullpage.js
【发布时间】：2016-12-16 19:48:27
【问题描述】：

我正在尝试将 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 文件并调用它们...

正文部分的结尾：

<!-- 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 一起工作！所以我不知道如何将 Bootstrap 与 Fullpage.js 一起使用，如果你知道该怎么做，请告诉我，我真的很感激。呵呵

【问题讨论】：

你使用 jquery 两次，一次使用就可以了

标签： jquery css twitter-bootstrap responsive-design fullpage.js

【解决方案1】：

尝试以下代码，它应该可以工作，只是为了确保您一次使用 jquery 插件并正确组织它。

<!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>

【讨论】：

我已经尝试过你的方法，但我仍然无法得到想要的结果，你能看看我的question吗？