我相对来说比较新的一个引导和更少,这是一个测试运行。目标是使用引导类,并将其转换成简单和语义类使用较少。我不断收到错误信息,说明.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;
- }
- }
解决方法
您应该导入bootstrap.lessfile。所以,下载完整的引导项目,并复制出更少的文件夹。它包含一切。然后把较少的文件夹放在你的项目中。另外,如果您想在工作时减少编译,请确保将less.js文件添加到项目中。有关更多信息,请参阅lesscss.org。还要确保你有一个像mamp或xamp这样的本地服务器,因为如果你只是从file:// ….提供静态的html,你看不到结果。
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>