css – 在引导3中使用mixins,以避免布局结构的不正确的标记

前端之家收集整理的这篇文章主要介绍了css – 在引导3中使用mixins,以避免布局结构的不正确的标记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我相对来说比较新的一个引导和更少,这是一个测试运行。目标是使用引导类,并将其转换成简单和语义类使用较少。我不断收到错误信息,说明.col-sm-12和.col-md-8是未定义的。

我该如何解决这个问题。

  1. /*less styles file*/
  2.  
  3. @import "bootstrap.min.css";
  4.  
  5. @boom: #ea7000;
  6.  
  7. @screen-sm: ~"(min-width:768px)";
  8. @screen-md: ~"(min-width:992px)";
  9. @screen-lg: ~"(min-width:1200px)";
  10.  
  11. .tim {
  12. height: 200px;
  13. @media screen,@screen-sm {
  14. background-color: black;
  15. .col-sm-12;
  16. }
  17. @media screen,@screen-md{
  18. background-color: @boom;
  19. .col-md-8;
  20. }
  21. }

解决方法

您应该导入bootstrap.lessfile。所以,下载完整的引导项目,并复制出更少的文件夹。它包含一切。然后把较少的文件夹放在你的项目中。另外,如果您想在工作时减少编译,请确保将less.js文件添加到项目中。有关更多信息,请参阅lesscss.org。还要确保你有一个像mamp或xamp这样的本地服务器,因为如果你只是从file:// ….提供静态的html,你看不到结果。

在您的自定义较少文件中,执行以下操作:

custom.less

  1. @import "../less/bootstrap.less";
  2.  
  3. section {
  4. .make-row();
  5. }
  6. .left-navigation {
  7. .make-sm-column(3);
  8. }
  9. .main-content {
  10. .make-sm-column(9);
  11. }

HTML

  1. <head>
  2. <link rel="stylesheet/less" href="css/custom.less">
  3. <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
  4. </head>
  5. <section>
  6. <div class="left-navigation">
  7. </div>
  8. <div class="main-content">
  9. </div>
  10. </section>

猜你在找的CSS相关文章