0

私は次のHTMLを持っています:

<!doctype html>
<html>
<head>
  <link rel="stylesheet/less" href="assets/stylesheets/style.less" />
  <script src="assets/stylesheets/vendor/less/less-1.3.0.min.js"></script>
</head>
<body>
  <nav>
    <ul class="tabs">
        <li class="selected">
          <a href="#">Foo</a>
        </li>
        <li><a href="#">Bar</a></li>
        <li><a href="#">Baz</a></li>
    </ul>
  <nav>
</body>
</html>

リストをTwitter Bootstrap Basic Tabとしてスタイルするには、 style.less をどのように記述すればよいですか。これを行う明白な方法は、関連するすべての css をコピーして貼り付けることです。

$cat style.less

@import "vendor/bootstrap/less/bootstrap.less";

.tabs {
  // .nav
  margin-left: 0;
  margin-bottom: @baseLineHeight;
  list-style: none;

  // common style for tabs and pills
  .clearfix();

  // Give the tabs something to sit on
  border-bottom: 1px solid #ddd;
}

.tabs > li {
  float: left;
}

// Make links block level
.tabs > li > a {
  display: block;
}

.tabs > li > a:hover {
  text-decoration: none;
  background-color: @grayLighter;
}

// common style for nav-tabs
.tabs > li > a {
  padding-right: 12px;
  padding-left: 12px;
  margin-right: 2px;
  line-height: 14px; // keeps the overall height an even number
}

// Make the list-items overlay the bottom border
.tabs > li {
  margin-bottom: -1px;
}

// Actual tabs (as links)
.tabs > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: @baseLineHeight;
  border: 1px solid transparent;
  .border-radius(4px 4px 0 0);
  &:hover {
    border-color: @grayLighter @grayLighter #ddd;
  }
}

// Active state, and it's :hover to override normal :hover
.tabs > .selected > a,
.tabs > .selected > a:hover {
  color: @gray;
  background-color: @white;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}

コピーと貼り付けをあまり行わずに、これを達成するためのより良い方法はありますか? 注: HTML ファイルを変更することはできません。

4

2 に答える 2

0

最終的には、bootstrap/less/navs.less (参照: HTML and less files ) を書き換えるかオーバーライドして、混合可能にし、適切な LESS クラスを混合できるようにします。

$cat ベンダー/ブートストラップ/less/navs.less

// NAVIGATIONS
// -----------

// BASE CLASS
// ----------

.nav {
  margin-left: 0;
  margin-bottom: @baseLineHeight;
  list-style: none;
  > li {
    > a {
      display: block; // Make links block level
    }
    > a:hover {
      text-decoration: none;
      background-color: @grayLighter;
    }
  }
}
.nav-tabs {
  .clearfix();
  border-bottom: 1px solid #ddd; // Give the tabs something to sit on
  > li {
    float: left;
    margin-bottom: -1px; // Make the list-items overlay the bottom border
    > a {
      padding-right: 12px;
      padding-left: 12px;
      margin-right: 2px;
      line-height: 14px; // keeps the overall height an even number

      padding-top: 8px;
      padding-bottom: 8px;
      line-height: @baseLineHeight;
      border: 1px solid transparent;
      .border-radius(4px 4px 0 0);
      &:hover {
        border-color: @grayLighter @grayLighter #ddd;
      }
    }
  }
}

.nav-tabs {
  // Active state, and it's :hover to override normal :hover
  > .active {
    > a, a:hover {
      color: @gray;
      background-color: @white;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
      cursor: default;
    }
  }
}

$ cat style.less

 @import "vendor/bootstrap/less/bootstrap.less";

    .foo {
      .nav;
      .nav-tabs;
    }

    .foo > .bar {
      .nav-tabs > .active;
    }
于 2012-08-01T13:37:48.057 に答える
-1

あなたの例はうまくいきません、ごめんなさい

しかし、私はこのテーマに非常に興味があります。コラボしたい

私の意見では、そのパスを与えることについての議論のポイントはありません

最初に、ページ内でコンテンツとスタイルを混合します。次に、両方を分離するために css を作成しました。次に、スタイル (オブジェクトのクラスにタグを配置するため) とコンテンツを一緒に混合します。

だから、もう一度分けましょう！

于 2012-10-10T18:41:04.267 に答える