Bootstrap面板 - 带LESS的语义HTML

Question

我目前正在开始探索与LESS结合使用Bootstrap以在Umbraco中快速启动并运行新网站。

因为我想在我的HTML标记中避免那些可怕的引导类名，所以我试图对它进行一点语义化（sp？）。

所以我想要一个面板。首先，这里是我的标记像我想这是在结束：

<div class="newsItem"> 
    <div class="newsHeader"> 
     Panel Title 
    </div> 
    <div class="newsBody"> 
     Panel content 
    </div> 
    <div class="newsFooter">Panel footer</div> 
</div> 

，这里是一个工作的标记与引导类名称：

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     Panel Title 
    </div> 
    <div class="panel-body"> 
     Panel content 
    </div> 
    <div class="panel-footer small">Panel footer</div> 
</div> 

这里是我的LESS文件，而它与混合自举少文件：

@import "boostrap.less" 

.newsItem{ 
    .panel; 
    .panel-primary; 
} 
.newsHeader{ 
    .panel-heading; 
} 
.newsBody{ 
    .panel-body; 
} 
.newsFooter{ 
    .panel-footer; 
    .small 
} 

我觉得这应该工作，但它似乎没有。也许我没有得到如何LESS工程（总LESS的n00b） 下面是渲染输出：

谁能告诉我，为什么在左侧面板（这是一个LESSed）看起来不象是正确的？

我可以没有这个，但我想明白为什么这不起作用。

帮助会很好。

Answer 1

在类中的HTML元素中列出的Bootstrap类的简单扩展将不会在大多数情况下创建相同的样式集（除非是非常简单的样式集）。例如注意如何.panel-primary和.panel-heading实际上定义：

https://github.com/twbs/bootstrap/blob/v3.1.1/less/panels.less#L227-L229 https://github.com/twbs/bootstrap/blob/v3.1.1/less/mixins.less#L405-L422 https://github.com/twbs/bootstrap/blob/v3.1.1/less/panels.less#L22

只要看看在你与你的更少的代码获得CSS，例如：

.newsItem { 
    .panel-primary; 
} 

结果：

.newsItem { 
    border-color: #428bca; 
} 
.newsItem > .panel-heading { 
    color: #ffffff; 
    background-color: #428bca; 
    border-color: #428bca; 
} 

// etc. 

看到了吗？核心.panel-heading属性仍然在.newsItem > .panel-heading规则集内，而您的.newsHeader根本就没有它们（顶级.panel-heading类只有padding和border样式）。

您尝试的方法的主要问题是大多数Bootstrap样式是围绕嵌套元素和类构建的，因此将其转变为“一个元素=一个类”CSS是一项复杂的任务。而且越复杂，你的代码变得越复杂，所以在某些时候，所有这些都太麻烦了（特别是考虑到并不是每个Bootstrap类都可以用作混合）。 OK。