如何将 Bootstrap 添加到 Fullpage.js

Question

我正在尝试将 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 一起使用，如果您知道该怎么做，请告诉我，我真的很感激。 ThX

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

如何将 Bootstrap 添加到 Fullpage.js

How to add Bootstrap to Fullpage.js

css

jquery

responsive-design

twitter-bootstrap

fullpage.js