Question

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

Answer 1

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

enter image description here

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

<强> 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>

Answer 2

如果您的目标是使用Bootstrap制作漂亮的语义HTML，我建议您现在放弃或面临精神错乱。我非常痛苦地发现尝试从BS 2中获取语义标记是不可能的。它需要复杂的嵌套而不是混合架构才能实现您想要的效果，即使您使用的更少或更少。此外，类和ID由其JavaScript组件引用，因此无法更改。您可以创建自己的样式，但它违背了使用像BS这样的框架的目的。我无法评论第3版，并希望听到其他人的经历。

Answer 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>

在bootstrap 3中使用mixins以避免布局结构的非语义标记

3 个答案: