我刚刚开始学习自适应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>


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

最佳答案

我确切地知道您的问题是什么。您需要在实时网络服务器上运行此文件,或者在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>

关于html5 - Gumby框架安装,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17255331/

10-10 07:40