可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm relatively new to both bootstrap and less and this is a test run. The goal is to take the bootstrap classes and turn them into simple and semantic classes using less. I keep getting error messages saying that .col-sm-12 and .col-md-8 are undefined.

How do I do resolve this issue.

    /*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;
        }
}

回答1:

You should import the bootstrap.lessfile. So, download the full bootstrap project, and copy out the less folder. It contains everything. And then put the less folder in your project. Also make sure to add the less.js file to your project if you want to get your less compiled while your working. Look at lesscss.org for more information. And also make sure that you have a local server like mamp or xamp, because you can't see the results if you are just serving static html from file:// ....

In your custom less file do something like this:

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>

回答2:

If your goal is to make beautiful semantic HTML using Bootstrap, I would suggest you give up now or face insanity. I discovered quite painfully that trying to get semantic markup out of BS 2 is impossible. It requires complex nesting rather than a mix-in architecture to achieve what you want, even if you use less or sass. Also, the classes and ids are referenced by its JavaScript components so it can't be changed. You can create your own styles, but it defeats the purpose of using a framework like BS. I can't comment on version 3 and would love to hear other people's experiences with it.

回答3:

I've found it useful to just import a few select less files to avoid the multiple class confusion you get with Bootstrap grids, like this.

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>