语义标记和Twitter Bootstrap
[英]Semantic Markup and Twitter Bootstrap
问题描述
I have following HTML: 
我有以下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>
How should I write my style.less to style the list as Twitter Bootstrap Basic Tab . 我应该如何编写style.less以将列表样式设置为Twitter Bootstrap基本选项卡 。 The obvious way to do this, to copy and paste all relevant css: 复制和粘贴所有相关的CSS的明显方法是：
$cat style.less $ 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;
}
Is there any better way to achieve this, without much copy and paste? 在没有大量复制和粘贴的情况下，有没有更好的方法来实现这一目标？ Note: I can not change the HTML file. 注意：我无法更改HTML文件。
2 个解决方案
解决方案1
0 2012-08-01 13:37:48
I end up by rewriting or overriding bootstrap/less/navs.less (see: HTML and less files ) to make it mixable and Allow appropriate LESS classes to be mixed-in 最后，我重写或覆盖了bootstrap / less / navs.less（请参阅： HTML和less文件 ）以使其可混合并允许混合适当的LESS类
$cat vendor/bootstrap/less/navs.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 $ cat style.less
@import "vendor/bootstrap/less/bootstrap.less";
.foo {
.nav;
.nav-tabs;
}
.foo > .bar {
.nav-tabs > .active;
}
解决方案2
-1 2012-10-10 18:41:04
Your example doesn't work, sorry 您的示例无效，对不起
But I'm highly interested in this subject. 但是我对此主题非常感兴趣。 I wanna colaborate 我想合作
In my opinion there is no point of discussion about giving that path 我认为，讨论该路径毫无意义
First we mix content and style in a page Then they made css in order to separate both Now we mix again style (to put a tag in the class of an object IS mix'em) and content together 首先，我们将内容和样式混合在页面中，然后他们制作了css以便将两者分开。现在，我们再次混合样式（将标记放置在对象IS mix'em的类中）和内容一起
So, lets separate'em again bro! 所以，让我们再分开吧！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.