在 bootstrap 3 中使用 mixins 来避免布局结构的无语义标记答案

【问题标题】：Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure在 bootstrap 3 中使用 mixins 来避免布局结构的无语义标记
【发布时间】：2013-09-22 04:35:36
【问题描述】：

我对 bootstrap 和 less 都比较陌生，这是一个测试运行。目标是采用引导类并使用更少的资源将它们变成简单的语义类。我不断收到错误消息，说 .col-sm-12 和 .col-md-8 未定义。

我该如何解决这个问题。

    /*less styles file*/

@import "bootstrap.min.css";

@boom: #ea7000;

@screen-sm: ~"(min-width:768px)";
@screen-md: ~"(min-width:992px)";
@screen-lg: ~"(min-width:1200px)";

.tim    {
    height: 200px;
        @media screen, @screen-sm   {
            background-color: black;
            .col-sm-12;
        }
        @media screen, @screen-md{
            background-color: @boom;
            .col-md-8;
        }
}

【问题讨论】：

我很确定我已经完成了，但主要目标是拥有一个简单的类来替代 Bootstrap 强制我使用的多个类。

标签： css twitter-bootstrap less twitter-bootstrap-3

【解决方案1】：

您应该导入bootstrap.less文件。因此，下载完整的引导项目，并复制出 less 文件夹。它包含一切。然后将 less 文件夹放入您的项目中。如果您想在工作时编译 less.js 文件，请确保将 less.js 文件添加到您的项目中。查看lesscss.org 了解更多信息。并且还要确保你有一个像 mamp 或 xamp 这样的本地服务器，因为如果你只是从 file:// 提供静态 html，你就看不到结果......

在您的自定义 less 文件中执行以下操作：

custom.less

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

 section {
    .make-row();
}
.left-navigation {
    .make-sm-column(3);
}
.main-content {
    .make-sm-column(9);
}

html

<head>
    <link rel="stylesheet/less" href="css/custom.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
</head>
<section>
<div class="left-navigation">
</div>
<div class="main-content">
</div>
</section>

【讨论】：

我一定会尝试的。这可能是我需要的解决方法。
我刚刚添加了一些编辑，请确保您在本地服务器上提供服务，否则将无法正常工作
感谢您提供的信息，我将下载整个项目。我从 HTML5 样板文件下载了该项目。我还需要从 getbootstrap 下载 less 文件吗？
如果包含less文件夹中的所有less文件则不需要下载工程，否则需要下载工程才能访问less文件夹中的less文件。

【解决方案2】：

如果您的目标是使用 Bootstrap 制作精美的语义 HTML，我建议您现在放弃或面对疯狂。我非常痛苦地发现，试图从 BS 2 中获取语义标记是不可能的。它需要复杂的嵌套而不是混合架构来实现你想要的，即使你使用 less 或 sass。此外，类和 ID 由其 JavaScript 组件引用，因此无法更改。您可以创建自己的样式，但这违背了使用像 BS 这样的框架的目的。我无法对第 3 版发表评论，并且很想听听其他人的体验。

【讨论】：

有趣的 cmets。我刚开始使用引导程序，我想到的第一件事是“这种非语义的 CSS 类命名不是通常被认为是 BAD 实践吗？”。我正在玩弄使用 LESS mixins 来制作从 bootstrap 继承的语义类的想法，但我反对它，理由是不使用 bootstrap 并从头开始编写所有 CSS 可能会花费更多时间。您的回答帮助验证了我的方法，非常感谢！
我发现 BS3 与获取语义标记一样痛苦。即使你完全依赖 mixins，你也经常需要添加额外的元素来遵循黄金路径“Container > Row > Col > Row > Col”嵌套结构，否则就会面临网格上实际上没有任何排列的问题。
抱歉，我知道这是一个旧线程，但是由于这是在 Google 上找到的，我绝对不同意“您可以创建自己的样式，但这违背了使用像 BS 这样的框架的目的” 。”除了 BS，我总是实现自己的风格，而 Twitter 积极鼓励您自定义他们的框架以满足您的需求。
框架的重点是让您拥有一组可重用的组件，这些组件可以随着时间的推移轻松维护。当您对其源代码进行修改时，您已将源代码从框架更新版本流中删除。您将不得不手动合并可能非常困难的更改。非平凡的网站需要更新 HTML 和 CSS。

【解决方案3】：

我发现只导入几个选择较少的文件很有用，以避免您在使用 Bootstrap 网格时遇到多类混淆，就像这样。

CSS

@import "less/variables.less";
@import "less/mixins/grid-framework.less";
@import "less/mixins/grid.less";

.firstItem {
    .make-xs-column-offset(3);
    .make-xs-column(1);
    .make-sm-column-offset(3);
    .make-sm-column(1);
    .make-md-column-offset(3);
    .make-md-column(1);
    .make-lg-column-offset(3);
    .make-lg-column(1);
}
.middleItem {
    .make-xs-column(1);
    .make-sm-column(1);
    .make-md-column(1);
    .make-lg-column(1);
}
.lastItem {
    .make-xs-column(5);
    .make-xs-column(5);
    .make-xs-column(5);
    .make-xs-column(5);
}

HTML

<div class="firstItem">
    first item stuff
</div>
<div class="middleItem">
    middle item stuff
</div>
<div class="middleItem">
    middle item stuff
</div>
<div class="middleItem">
    middle item stuff
</div>
<div class="lastItem">
    last item stuff
</div>

【讨论】：