Metro UI庫：Css無法加載

我想使用metro UI css庫，但我無法弄清楚爲什麼我的navbar css不工作。Metro UI庫：Css無法加載

這裏是我的html文件代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
<title>TelePrint Blog</title> 
    <link rel="stylesheet" href="http://localhost/teleprintblog/assets/css/metro-bootstrap.css"> 
    <script src="http://localhost/teleprintblog/assets/js/jquery.js"></script> 
    <script src="http://localhost/teleprintblog/assets/js/metro.min.js"></script> 
</head> 
<body> 
<nav class="navigation-bar dark fixed"> 
<nav class="navigation-bar-content"> 
    <div class="element"> 
     <a class="dropdown-toggle" href="#">METRO UI CSS</a> 
     <ul class="dropdown-menu" data-role="dropdown"> 
      <li><a href="#">Main</a></li> 
      <li><a href="#">File Open</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Print...</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Exit</a></li> 
     </ul> 
    </div> 

    <span class="element-divider"></span> 
    <a class="element brand" href="#"><span class="icon-spin"></span></a> 
    <a class="element brand" href="#"><span class="icon-printer"></span></a> 
    <span class="element-divider"></span> 

    <div class="element input-element"> 
     <form> 
      <div class="input-control text"> 
       <input type="text" placeholder="Search..."> 
       <button class="btn-search"></button> 
      </div> 
     </form> 
    </div> 

    <div class="element place-right"> 
     <a class="dropdown-toggle" href="#"> 
      <span class="icon-cog"></span> 
     </a> 
     <ul class="dropdown-menu place-right" data-role="dropdown"> 
      <li><a href="#">Products</a></li> 
      <li><a href="#">Download</a></li> 
      <li><a href="#">Support</a></li> 
      <li><a href="#">Buy Now</a></li> 
     </ul> 
    </div> 
    <span class="element-divider place-right"></span> 
    <a class="element place-right" href="#"><span class="icon-locked-2"></span></a> 
    <span class="element-divider place-right"></span> 
    <button class="element image-button image-left place-right"> 
     Sergey Pimenov 
     <img src="images/211858_100001930891748_287895609_q.jpg"/> 
    </button> 
</nav> 
</nav> 
    <header class="headerr row"> 

     <div class="col-md-6" style="border:3px solid #F00;"> 

      <img src="http://localhost/teleprintblog/assets/img/logo.png" 
       class="img-responsive" alt="logo"/> 
     </div> 

     <div class="col-md-6" style="border:3px solid #F00;"> 

     </div> 

    </header> 


    <section class="row"> 
     <div class="col-md-1 col-xs-offset-1" 
      style="border:3px solid #00F;z-index:3;position:relative;"> 
      asdasda 
     </div> 
    </section> 

    </body> 
</html>

雖然我已經加載所需的files.What是引起該問題的用戶界面沒有顯示正確的導航欄？

我從here複製了navbar的代碼。

來源

2014-01-13 Mj1992

變化：

<nav class="navigation-bar dark fixed">

要：

<nav class="navigation-bar dark fixed-top"> <!-- Or fixed-bottom -->

正如documentation說：

您可以創建固定的（頂部或底部）導航欄，內置在子類'.fixed-top，。 固定底部。

來源

2014-01-13 19:07:13 412

沒有什麼區別:(同樣的結果 – Mj1992

你是否檢查過控制檯/網絡標籤？ – 412

網絡標籤爲什麼？所有文件加載正確 – Mj1992

與Metro UI引導CSS問題又名http://metroui.org.ua/是這樣的：

您加載主題爲localhost，或馬貝到MCV的框架，並在下拉不工作！對？

好了，所以尋找這一行HTML文件

<script src="js/load-metro.js"></script>

這就是問題的所在。

您可以打開此文件並查看內容 - 最好使用完整的url來包含JS文件。我自己刪除這條線從我的文件：

<script src="js/load-metro.js"></script>

和我一起的內容替換它：

<script type="text/javascript"> 
$(function(){ 
    if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1)) { 
     $("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro/metro-loader.js').appendTo($('head')); 
    } else { 
     $("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro.min.js').appendTo($('head')); 
    } 
}) 
</script>

現在你會發現我用base_url() - 這是隻有我的情況。取而代之的是完整的URL和walla，下拉應該可以工作。

來源

2014-10-03 13:21:25

Metro UI庫：Css無法加載

回答

相關問題