Metro UI 库：CSS 未加载答案

【问题标题】：Metro UI library : Css not loadingMetro UI 库：CSS 未加载
【发布时间】：2014-01-13 18:44:14
【问题描述】：

我正在尝试使用 metro UI css 库，但我不知道为什么我的导航栏 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>

尽管我已经加载了所需的文件，但导航栏的 UI 没有正确显示。是什么导致了问题？

我从here 复制了navbar 代码。

【问题讨论】：

标签： javascript jquery css jquery-plugins

【解决方案1】：

变化：

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

收件人：

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

如documentation中所述：

您可以使用内置子类 `.fixed-top、.fixed-bottom 创建固定（顶部或底部）导航栏。

【讨论】：

那没有任何区别:(相同的结果
你的身上还缺少.metro 类。

【解决方案2】：

Metro Bootstrap UI CSS aka 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() - 这仅适用于我的情况。将其替换为您的完整网址，然后下拉菜单应该可以正常工作。

【讨论】：