19

我对 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;
        }
}
4

3 回答 3

35

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

在此处输入图像描述

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

无定制

@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>
于 2013-09-17T16:25:53.037 回答
9

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

于 2013-10-17T23:31:43.463 回答
0

我发现只导入一些选择较少的文件来避免使用 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>
于 2014-11-18T04:55:51.963 回答