2013-06-22 112 views
1

我刚刚开始学习一个响应式CSS框架,所以我想比较自己的Foundation 4,Gumby和Bootstrap。Gumby框架安装

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

我包含框架的文件,并且web不停止加载。我试着删除了一些行,问题包括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> 

这个问题可能是,我已经包括了错误的文件,行吗?

回答

0

尝试移动Modernizr的到文档的头部和主体和gumby.js文件

我真的不知道你所说的“网络不停止加载”的意思上面jQuery的,但我认为这与JS被阻止有关。

你可能也想要拥有以下内容。

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

当您下载并解压缩文件,看看到demo.html文件中的主文件夹,有你有包括CSS和JS主要图书馆的一个完整的例子,对于IE一些验证问题,并评论可以添加的js模块。

1

我确切地知道你的问题是什么。您需要在实时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>