Metro UI 라이브러리 : CSS가로드되지 않습니다.

metro UI css 라이브러리를 사용하려고하는데 내 navbar CSS가 작동하지 않는 이유를 알 수 없습니다.Metro UI 라이브러리 : CSS가로드되지 않습니다.

가 여기 내 html 파일의 코드입니다 : 내가 문제의 원인이되는 필요한 files.What를로드 한 있지만 UI가 탐색 바 제대로 표시되지 않는

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

navbar 코드를 here에서 복사했습니다.

출처

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

메트로 부트 스트랩 UI CSS와 문제는 일명 http://metroui.org.ua/은 이것이다 :

당신은 localhost로 테마를로드, 또는 MCV 프레임 워크에 메이비,하고 드롭 다운 나던 작품! 권리?

이 좋아 그래서 html 파일

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

문제가있는 곳은이 라인을 찾습니다.

JS 파일을 포함하는 전체 URL을 사용하는 것이 가장 좋습니다.이 파일을 열어 내용을 볼 수 있습니다. 나 자신이 내 파일에서이 줄을 제거 :

<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가로드되지 않습니다.

답변

관련 문제