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

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

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>

Answer 2

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