Bootstrap 3 Grid可以扩展吗？ [英] Can Bootstrap 3 Grid Be Extended?

问题描述

我正在做一个项目，我们离开Bootstrap较少的文件不受影响。我们也不想在HTML中使用Bootstrap类，因为我们将来可能不会使用它。我正在试验使用扩展功能来将我们的类名称与BS版本在样式表中分组。这个工作很好，除了网格列。因为列类名是用.make-grid混合构建的，所以我不能扩展它们。任何想法如何不使用BS类名称的网格和不膨胀CSS？

如果你不熟悉extend选项，你可以在这里查看文档：
http://www.lesscss.org/#-extend

  //不理想，因为它重复声明。 
 .mytable {
 .table; 
} 
 
 //很好，因为它将选择器分组，而不是重复声明。 
 .mytable {
&：extend（.table all）; 
} 
 
 //这不工作，但我希望它没有。 
 .search {
&：extend（.col-sm-6）; 
} 
 
 //这不是理想的，因为它重复声明。 
 .search {
 .make-sm-column（6）; 
} 
  

解决方案

.col-sm-6 是编译时的动态生成，因此无法扩展< a>。

  .search {
 .make-sm-column（6）; 
} 
  

产生：

  .search {
 position：relative; 
 min-height：1px; 
 padding-left：15px; 
 padding-right：15px; 
} 
 @media（min-width：768px）{
 .search {
 float：left; 
 width：50％; 
} 
} 
  

这是一个小的开销，

1. code> lessc bootstrap.less > bootstrap.css



2. lessc test.less test.css，with test.less：

     @import（less）bootstrap.css; 
    .search {
   &：extend（.col-sm-6）; 
   } 
     

bootstrap.css和test.css我发现像其他人一样：

 > .col-sm-6，
> .search {
 1010c1082,1093 
< .col-md-1，.col-md-2，.col-md-3，.col-md-4，.col-md-5，.col-md-6，.col-md- col-md-8，.col-md-9，.col-md-10，.col-md-11，.col-md-12 {
 --- 
  
 
 
 
重新编译似乎是另一回事：
 
 
 
 
 
 md- *换成新行
 
 
更改例如0.75到.75 
 
 
更改（enabled = false） 到（enabled = false） 
 
 
 
 
 
一见钟情。
 
I'm working on a project where we are leaving the Bootstrap less files untouched. We also do not want to use Bootstrap classes in the HTML, since we may not use it in the future. I'm experimenting with using the "extend" feature to group our class names with the BS version in the style sheet. This has worked well except with the grid columns. Since the column class names are built with the ".make-grid" mixin, I can't extend them. Any thoughts on how to not use BS classnames for the grid AND not bloat the CSS?

If you are unfamiliar with the extend option, you can view the documentation here:
http://www.lesscss.org/#-extend
//Not ideal because it duplicates declarations.
.mytable {
  .table;
}

//Good because it groups the selectors instead of duplicating declarations.
.mytable {
  &:extend(.table all);
}

//This does not work, but I wish it did.
.search {
  &:extend(.col-sm-6); 
}

//This is not ideal because it duplicates declarations.
.search {
  .make-sm-column(6);
}

解决方案
.col-sm-6 is dynamic generate on compilation time, so can not extended.
.search {
  .make-sm-column(6);
}
generates:
.search {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .search {
    float: left;
    width: 50%;
  }
}
Which is a little overhead, but small in relation to the other source.

In theory you can can compile twice:

lessc bootstrap.less > bootstrap.css 
lessc test.less > test.css, with test.less:
@import (less) "bootstrap.css";
.search {
  &:extend(.col-sm-6);
}

doing a diff over bootstrap.css and test.css i found as expected among others:
>   .col-sm-6,
>   .search {
1010c1082,1093
<   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
---
recompiling seems futher:


put .col-md-* etc. on a new line
change for example 0.75 to .75
change (enabled = false) into (enabled=false)


which all make no sense on the first sight

                        
这篇关于Bootstrap 3 Grid可以扩展吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！