在 bootstrap 3 中使用 mixins 来避免布局结构的无语义标记 [英] Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure
问题描述
我对 bootstrap 和 less 都比较陌生，这是一次测试运行.目标是使用引导程序类并将它们转换为使用较少的简单和语义类.我不断收到错误消息，说 .col-sm-12 和 .col-md-8 未定义.
我该如何解决这个问题.
/*less 样式文件*/@import "bootstrap.min.css";@繁荣:#ea7000；@screen-sm: ~"(min-width:768px)";@screen-md: ~"(min-width:992px)";@screen-lg: ~"(min-width:1200px)";.tim {高度:200px；@media 屏幕，@screen-sm {背景颜色:黑色；.col-sm-12;}@media 屏幕，@screen-md{背景色:@boom;.col-md-8;}}您应该导入 bootstrap.less 文件.因此，下载完整的引导程序项目，并复制出 less 文件夹.它包含了一切.然后将 less 文件夹放在您的项目中.如果您想在工作时编译 less，还要确保将 less.js 文件添加到您的项目中.查看lesscss.org 了解更多信息.还要确保你有一个像 mamp 或 xamp 这样的本地服务器，因为如果你只是从 file://提供静态 html，你就看不到结果.
在您的自定义 less 文件中执行以下操作:
custom.less
@import "../less/bootstrap.less";部分 {.make-row();}.left-navigation {.make-sm-column(3);}.main-content {.make-sm-column(9);}html
<link rel="stylesheet/less" href="css/custom.less"><script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script><部分><div class="left-navigation"><div class="main-content">
</节>
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;
}
}
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>
这篇关于在 bootstrap 3 中使用 mixins 来避免布局结构的无语义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
