Bootstrap:使用LESS，有什么好方法? [英] Bootstrap: working with LESS, what's the good way?

问题描述

我有两个问题，希望您能帮助我阐明有关语义标记的问题，并减少对bootstrap 3 mixins的使用.

I have a couple of questions I hope you help me to clarify about working with semantic markup, using less with bootstrap 3 mixins.

首先，列设置:

在非语义html上，您将在div类<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>上声明cols作为示例.

On a non-semantic html you'd declare the cols on the div class <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div> as example.

如引导文档中所述，应使用.make-xx-column(@columnms)声明给定div的列数，但是，如果要复制非语义，则假定代码为:

As stated on bootstrap documentation you should declare the amount of columns for a given div with the .make-xx-column(@columnms), but, if you want to replicate the non-semantic it's supposed that code would be:

.make-lg-column(4); .make-md-column(6); .make-sm-column(12); .make-xs-column(12);

由此我发现，当您使用高分辨率(大于1200像素)并且定义了.make-lg-column(4);和.make-md-column(6);时，结果将显示6个中等列.在我的检查器上，它显示为@media (min-width: 992px)，并且将统治@media (min-width: 1200px)

With this I found that when you are on a big resolution (more than 1200px) and if I have defined .make-lg-column(4); and .make-md-column(6); the result will be the 6 medium columns will be showed. On my inspector it shows as @media (min-width: 992px) and will rule over the @media (min-width: 1200px)

那么，为div设置不同列值的正确方法是什么?似乎不等于您将其设置为非语义布局的方式.

What is then, the correct way to set the different column values for a div? It seems to not be equal to how you'd set them up on a non-semantic layout.

最后是关于填充的问题，

Finally a question about padding,

为什么在常规引导CSS上，该列在mixins上具有定义的填充(默认为15px)，默认填充为0px?这会在您每次声明列数(.make-lg-column(12，30px);)时强制设置填充?

Why when on the regular bootstrap css the column has a defined padding (15px as default) on the mixins the default padding is 0px? That forces to set the padding each time you declare a column amount (.make-lg-column(12, 30px);) ?

很感谢有人能帮助我以正确的方式进行操作，对不起，但这是我第一次使用LESS和带有引导程序的语义html代码.

I appreciate if someone can help me working with this the right way, I'm sorry but It's the first time I work with LESS and semantic html code with bootstrap.

推荐答案

我确定此问题具有

I'm sure that this question has an answer on SO already, but for the time being.

您应该首先为最小的网格(xs)调用mixin，或者最好从小到宽调用mixin. (以移动设备为先)

You should call the mixins for the smallest grid (xs) first, or better call the mixins from small to width. (kind of mobile first)

上述内容之所以有意义，是因为使用min-width定义了对网格的媒体查询，另请参见 http ://getbootstrap.com/css/#grid .

The above make sense because of the media queries for the grid are defined with min-width, see also http://getbootstrap.com/css/#grid.

如果您先设置最大的网格(最小宽度:1200px)，然后设置(最小宽度:992px)，则两者对于大于1199像素的屏幕尺寸都将为true，因此最新的优先于第一个.

If you set the largest grid first (min-width:1200px) follow by (min-width:992px) then both will evaluate true for screensize wider than 1199 pixels, and so the latest override the first.

您应该使用:

.make-xs-column(12); 
.make-sm-column(12); 
.make-md-column(6); 
.make-lg-column(4);

为什么在常规引导CSS上，列具有定义的填充 (默认15px)在mixins上，默认填充为0px?那 每次您声明列数量时强制设置填充 (.make-lg-column(12，30px);)?

Why when on the regular bootstrap css the column has a defined padding (15px as default) on the mixins the default padding is 0px? That forces to set the padding each time you declare a column amount (.make-lg-column(12, 30px);) ?

默认网格在列之间具有30像素的装订线(由@ grid-gutter-width设置).列每侧15像素，每列之间2 x 15像素.

The default grids have a gutter of 30 pixels (set by @grid-gutter-width) between the columns. 15 pixels on each side of the columns, makes 2 x 15 pixels between each column.

为什么在常规引导css上，列在> mixins上具有定义的填充(默认为15px)，默认填充为0px?每次您声明>列量(.make-lg-column(12，30px);)时，这都会强制设置填充?

Why when on the regular bootstrap css the column has a defined padding (15px as default) on >the mixins the default padding is 0px? That forces to set the padding each time you declare >a column amount (.make-lg-column(12, 30px);) ?

我发现:

@import "variables";
@import "mixins";
selector {
.make-lg-column(12, 30px);
}

编译为CSS代码，如下所示:

compiles into CSS code as follows:

selector {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  selector {
    float: left;
    width: 100%;
  }
}

这篇关于Bootstrap:使用LESS，有什么好方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！