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>

我应该如何编写 style.less 以将列表样式设置为Twitter Bootstrap Basic Tab。这样做的明显方法是复制和粘贴所有相关的 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 供应商/bootstrap/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 以将两者分开现在我们再次混合样式（将标签放在对象的类中是 mix'em）和内容在一起

所以，让我们再次分开兄弟！

于 2012-10-10T18:41:04.267 回答