5

HTML にクラスを含める Bootstrap の例を、LESS ミックスインを使用するように変換しようとしています。これまでのところ成功していますが、メニューに問題が発生しています。現在、メインの .less ファイルで次を使用しています (bootstrap.less を含めました)。

#container #menu {
    .navbar;
    .navbar-inverse;
    .navbar-fixed-top;

    div {
        .navbar-inner;
        ul { .nav; }
    }
}

および対応する HTML:

<div id="container">
    <nav id="menu">
        <div><ul role="menu">
            <!--- ... -->
        </ul>
        </div>
    </nav>
</div>

navbar-inverseとnavbar-fixed-topが適用されていますが、とnavbarが機能しnavていません。

4

1 に答える 1

8

Mixin を誤解しているようです

あなたの主な問題は、あなたの自称目標にあると思います。

したがって、セレクターに mixin として含まれるようにすることで、HTML に.navbarand.navクラス (など) を追加しないようにしようとしています。これはおそらくandidに対してはうまく機能しているように見えます(実際には、これらの適用にはわずかな矛盾があるのではないかと思います。後で詳しく説明します)。.navbar-inverse.navbar-fixed-top

あなたの問題は、ブートストラップの navbar.less ファイルで使用される他のすべての相互に関連するセレクターの組み合わせです。ミックスインとして単純に追加する.navbarと.nav、これらのクラスのスタイリングは、ミックス先のアイテムにのみ適用されます。それがしないのは、ナビゲーションが正しく機能するために必要な関係を認識することではありません。たとえば、ブートストラップのコードの次のサンプルを見てください。

.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}

.navbar .nav > li {
float: left;
}

// Links
.navbar .nav > li > a {
float: none;
// Vertically center the text given @navbarHeight
padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
color: @navbarLinkColor;
text-decoration: none;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}

ナビゲーション機能を機能させるのは、これらの組み合わせたセレクターです。しかし、コードでは.navbar .nav、HTML に関係はありません#container #menu ul。関係があるだけです。そのため、結合されたセレクター コードはどれも取得されていません。

ミックスインによってそのクラスが要素に適用されるわけではなく、そのクラスのプロパティがセレクターに含まれるだけであることを思い出してください。

ブートストラップ ファイル内の結合されたセレクターの組み合わせのすべてのインスタンスをセレクターに変換する必要があります。これは、HTML の本来あるべき場所にクラスを単純に追加するよりもはるかに面倒です。

何が機能しているように見えるかについてのメモに戻ります。.navbar-fixed-top .navbar-innerHTML にクラス関係がないため、これらの関係もコードで検出されていないと思われます。

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
  border-width: 0 0 1px;
}
.navbar-fixed-bottom .navbar-inner {
  border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
  padding-left: 0;
  padding-right: 0;
  .border-radius(0);
}
于 2013-04-11T12:49:55.603 に答える