Jul 312012
Using css: Semantic Markup and Twitter Bootstrap on newest questions tagged css – Stack Overflow
I have following 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
tabs[http://twitter.github.com/bootstrap/components.html#navs]. The obvious way
to do this, to copy and paste all relevant 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;
}
Is there any better way to achieve this, without much copy and paste? Note: I
can not change the HTML file.
See Answers
source: http://stackoverflow.com/questions/11737076/semantic-markup-and-twitter-bootstrap
Using css: using-css
Recent Comments