twitter-bootstrap 在 bootstrap 3 中使用 mixins 来避免布局结构的无语义标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18854927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure
提问by Keith Bryant
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.
我对 bootstrap 和 less 都比较陌生，这是一个测试运行。目标是使用引导程序类并将它们转换为使用较少的简单和语义类。我不断收到错误消息，说 .col-sm-12 和 .col-md-8 未定义。
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;
}
}
回答by AJ Meyghani
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:// ....
您应该导入bootstrap.less文件。因此，下载完整的引导程序项目，并复制出 less 文件夹。它包含了一切。然后将 less 文件夹放在您的项目中。如果您想在工作时编译 less，还要确保将 less.js 文件添加到您的项目中。查看lesscss.org 了解更多信息。还要确保你有一个像 mamp 或 xamp 这样的本地服务器，因为如果你只是从 file:// 提供静态 html，你就看不到结果……
In your custom less file do something like this:
在您的自定义 less 文件中，执行以下操作：
custom.less
无定制
@import "../less/bootstrap.less";
section {
.make-row();
}
.left-navigation {
.make-sm-column(3);
}
.main-content {
.make-sm-column(9);
}
html
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>
回答by ATL_DEV
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.
如果您的目标是使用 Bootstrap 制作漂亮的语义 HTML，我建议您现在放弃或面临精神错乱。我非常痛苦地发现，试图从 BS 2 中获取语义标记是不可能的。它需要复杂的嵌套而不是混合架构来实现您想要的，即使您使用 less 或 sass。此外，类和 id 由其 JavaScript 组件引用，因此无法更改。您可以创建自己的样式，但它违背了使用像 BS 这样的框架的目的。我无法对第 3 版发表评论，很想听听其他人对它的体验。
回答by Ralph Lavelle
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.
我发现只需导入一些较少选择的文件就可以避免使用 Bootstrap 网格时出现的多类混淆，就像这样。
CSS
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
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>
