Question

我有以下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。显而易见的方式为此，复制并粘贴所有相关的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文件。

Answer 1

我最终通过重写或覆盖bootstrap / less / navs.less（请参阅：HTML and less files）使其可混合并Allow appropriate LESS classes to be mixed-in

$ cat vendor / 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;
    }

Answer 2

您的示例不起作用，抱歉

但我对这个问题非常感兴趣。我想做好准备

在我看来，没有必要讨论如何提供这条道路

首先，我们在页面中混合内容和样式然后他们制作了CSS以便将两者分开现在我们再次混合样式（将标签放在一个对象IS mix'em的类中）和内容一起

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

语义标记和Twitter Bootstrap

2 个答案: