Gumby 框架安装答案

【问题标题】：Gumby Framework InstallationGumby 框架安装
【发布时间】：2013-06-19 18:29:56
【问题描述】：

我刚开始学习响应式 CSS 框架，所以我想自己比较 Foundation 4、Gumby 和 Bootstrap。

我可以运行 Foundation 4 和 Bootstrap，但 Gumby 不起作用。

我包含了框架的文件并且网络没有停止加载。我尝试删除一些行，问题是包括 gumby.css

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/gumby.css">
        <title>
            Title
        </title>
    </head>
    <body>
        asd
    </body>
</html>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/libs/gumby.min.js">
</script><script type="text/javascript" src="js/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/libs/modernizr-2.6.2.min.js"></script>

问题可能是我包含了错误的文件，可以吗？

【问题讨论】：

标签： html css frameworks installation responsive-design

【解决方案1】：

尝试将modernizr移动到文档的头部，以及主文件和gumby.js文件上方的jquery

我不太确定您所说的“网络不会停止加载”是什么意思，但我认为这与 JS 被阻止有关。

您可能还希望有以下内容。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

【解决方案2】：

下载并解压文件后，查看主文件夹中的 demo.html 文件，其中包含包含的 css 和主要 js 库的完整示例，一些验证IE问题，还注释了可以添加的js模块。

【讨论】：

【解决方案3】：

我很清楚你的问题是什么。您需要在实时 Web 服务器上运行它，或者在 index.html 和 css/gumby.css 中将 // hrefs 设置为 http://，否则 jquery/自定义字体 http 请求将永远超时，并且回退到本地版本。

编辑：我看到你已经从 Gumby 的默认模板文件中删除了很多代码行。我会使用它们，否则你会在浏览器中遇到大量的不一致。这是我使用的代码：

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="humans.txt">

    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

    <link rel="stylesheet" href="css/gumby.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="js/libs/modernizr-2.6.2.min.js"></script>
</head>

<body>



    <script>
    var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
    if(!oldieCheck) {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
    } else {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
    }
    </script>
    <script>
    if(!window.jQuery) {
    if(!oldieCheck) {
      document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
    } else {
      document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>');
    }
    }
    </script>

    <script src="js/libs/gumby.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
    </script>

    <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
    <![endif]-->

  </body>
</html>

【讨论】：