Using mixins in bootstrap 3 to avoid unsemantic ma

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

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

3条回答

Rolldiameter

2楼-- · 2020-02-17 10:00

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:// ....

enter image description here

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>

0人赞添加讨论(0) 举报

放荡不羁爱自由

3楼-- · 2020-02-17 10:10

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.

0人赞添加讨论(0) 举报

Lonely孤独者°

4楼-- · 2020-02-17 10:10

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>

0人赞添加讨论(0) 举报

Using mixins in bootstrap 3 to avoid unsemantic ma

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间