Twitter bootstrap 引导面板-语义HTML，具有较少的

我现在开始探索Bootstrap与LESS的结合，以便在翁布拉科建立一个新站点并快速运行

由于我想避免HTML标记上那些糟糕的引导类名称，所以我尝试对它进行一点语义化（sp？）

所以我想要一个小组。首先，这里是我的标记，就像我希望它在最后一样：

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

我想这应该行得通，但似乎不行。也许我没有得到如何减少工程（总减少n00b） 以下是渲染输出：

有人能告诉我为什么左边的面板（那是LESSed的）看起来不像右边的吗

我可以不用这个，但我想知道为什么这个不行

---

帮助很好。

简单扩展类中HTML元素中列出的引导类在大多数情况下（非常简单的情况除外）不会创建相同的样式集。例如，请注意

.panel primary

和

.panel heading

实际上是如何定义的：

只需看看用更少的代码获得的CSS，例如：

.newsItem {
    .panel-primary;
}

结果：

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

// etc.

看到了吗？核心

.panel heading

属性仍在

.newsItem>规则集中，而您的
.newheader
将根本没有这些属性（顶级
.panel heading
类只有
填充
和
边框
样式）

您尝试的方法的主要问题是，大多数引导样式都是围绕嵌套元素和类构建的，因此将其转换为“一个元素=一个类”CSS有点复杂。HTML越复杂，代码就变得越复杂，因此在某些情况下，所有这些都太单调乏味了，根本无暇顾及（特别是考虑到并非每个引导类都可以用作mixin）
 嗯。我懂了。谢谢你的回答。我痴迷于“不要用类名把标记弄乱”的文章。使用引导似乎不是那么容易。我想我会忘记做语义HTML，而使用bootstrap的类名。这样我就不会头疼了。
.newsItem {
    .panel-primary;
}

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

// etc.