語義標記和Twitter的引導

我有以下HTML：語義標記和Twitter的引導

<!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：

$貓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文件。

來源

2012-07-31 CRH

less允許您通過重複使用先前定義的類來複制和粘貼_。你嘗試過嗎？ – Sherbrow 2012-07-31 13:19:32

你可以使用padding：8px 0;和填充：0 12px; – Evgeny 2012-08-01 07:02:10

謝謝，我終於找到了一個解決方案。請參閱下面的答案。 – CRH 2012-08-01 13:38:58

我最終被改寫或重寫引導/更少/ navs.less（參見：HTML and less files），使其可混合和Allow appropriate LESS classes to be mixed-in

$貓供應商/引導/更少/ 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; 
    } 
    } 
}

$貓style.less

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

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

    .foo > .bar { 
     .nav-tabs > .active; 
    }

來源

2012-08-01 13:37:48 CRH

-1

您的例子不工作，對不起

但我對這個主題很感興趣。我想colaborate

在我看來，沒有關於給這條道路

首先，我們在頁面然後，他們以兩個分開製作的CSS混合內容和風格點的討論現在我們混合再次風格（把一個標籤放在一個對象的IS類mix'em）和內容在一起

因此，讓我們再分開！

來源

2012-10-10 18:41:04 Garito

歡迎來到Stack Overflow！請僅使用_answers_的答案，謝謝！ – 2012-10-11 03:48:23

語義標記和Twitter的引導

回答

相關問題