引导面板-带有LESS的语义HTML [英] Bootstrap panel - Semantic HTML with LESS

问题描述

我目前正开始与LESS结合探索Bootstrap，以在Umbraco中快速启动并运行一个新站点.

I'm currently starting to explore Bootstrap in combination with LESS to get a new site up and running quickly in Umbraco.

由于我想避免在HTML标记中出现那些可怕的引导类名称，因此我尝试对其进行语义化(sp?).

As I want to avoid those terrible bootstrap class names on my HTML markup, I'm trying to semanticize (sp?) it a little bit.

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

So I want to have a panel. First, here is my markup like I want it to be on the end:

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

这是带有引导程序类名称的有效标记:

And here is a working markup with bootstrap class names:

<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文件，其中包含较少的引导文件:

Here is my LESS file which gets mixed with the bootstrap less files:

@import "boostrap.less"

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

我认为这应该可行，但似乎不可行.也许我不了解LESS的工作原理(总LESS n00b) 这是渲染的输出:

I figured this should work, but it seems it doesn't. Maybe I'm not getting how LESS works (total LESS n00b) Here is the rendered output:

谁能告诉我为什么左边的面板(少了)看起来不像右边的面板?

Can anyone tell me why the left panel (that's the LESSed one) doesn't look like the right one?

我可以不用这个，但是我想了解为什么它不起作用.

I can go without this, but I'd like to understand why this isn't working.

帮助会很好.

推荐答案

在您的类中，HTML元素中列出的Bootstrap类的简单扩展在大多数情况下不会创建相同的样式集(非常简单的样式除外).例如，请注意.panel-primary和.panel-heading的实际定义方式:

Simple expansion of Bootstrap classes listed in HTML element within your class won't create equal style set in most cases (except very simple ones). For example notice how .panel-primary and .panel-heading are actually defined:

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

只需看看使用Less代码获得的CSS，例如:

Just take a look at the CSS you get with your Less code, for example:

.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根本没有它们(顶级类仅具有padding和border样式).

See? The core .panel-heading properties are still within .newsItem > .panel-heading ruleset and your .newsHeader won't have them at all (the top level .panel-heading class has only padding and border styles).

您尝试的方法的主要问题是大多数Bootstrap样式都是围绕嵌套元素和类构建的，因此将其转换为一个元素=一个类" CSS有点复杂.而且HTML越复杂，代码就会变得越棘手，因此在某些时候，所有这些都太繁琐而根本不会打扰(特别是考虑到并不是每个Bootstrap类都可以用作mixin).

The main problem of the approach you try is that the most of Bootstrap styles are built around nesting elements and classes so turning it into a "one element = one class" CSS is somewhat complicated task. And the more complex your HTML is the more tricky your code becomes, so at certain point all that will be too tedious to bother at all (especially considering that not every Bootstrap class can be used as mixin).

这篇关于引导面板-带有LESS的语义HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！