Michael

写写代码,说说人生

您好,我是Michael,欢迎来到我的个人家园。
代码搬运工,目前就职于XX证券,努力修行中。


H5 / Java / Objc / Swift / Vue / RN

为什么BootStrap要默认12列

今天被问了一个问题:有没有想过为什么Bootstrap要默认是12列? 呃,好吧,用了Bootstrap一段时间,的确没想过为什么要默认是12列,隐隐约约觉得是因为布局比较方便,常见的分2块,3块,4块,都可以方便分完。

既然有假设,那还是要求证一下。

谷歌上一阵搜索。

Contrary to the question’s parenthetical, Bootstrap was always at 940px wide, and not 960px, even with the original 16 columns. With the switch to 12 columns in Bootstrap 2, we wanted to simplify the overall grid (16 columns is right on the edge of enough granularity) and make it easier to get three columns.

大致意思就是原来是16列的,后来改成了12列,是为了更容易可以排出三列。 好,那么问题来了,为什么之前是设计16列呢? 继续谷歌。

16-columns has long been the go-to grid for designers and developers, but we’ve noticed a shift to 12- and 24-columns to offer a more flexible layout. And they’re right for doing so—gridded layouts work best with an odd number of columns (you often see three columns, but four or six are not that popular).

这个是Bootstrap的github bug列表中2011年的一段讨论,题目是问为什么用16列代替了24列。原来16列之前还有24列。大概是说,16列是开发和设计人员的首选,但是12列或者是24列可以更灵活。其中说到就是奇数列的布局更常见,比如经常可以看到三列形式的布局。

这里的话,为什么说16列是开发和设计人员的首选,我并不清楚。但是后面说到三列布局更常见,的确是这样,比如CSDN的首页就是个三列形式的布局。用16列想分3:1或者3:2都不是很方便。

如果你有别的理解,欢迎留言讨论。

参考

Why did Twitter Bootstrap change their grid system from 16 columns to 12 (960px to 940px) Why does Twitter Bootstrap 3 use a 12-column grid system by default? Why a 16 column grid instead of a 24 column grid?

最近的文章

CSS中的剪裁和遮罩

剪裁和遮罩都是用来隐藏元素的一些部分、显示其他部分的。当然了,这两者还是有区别的。区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异。但不幸的是总是有相当多的过时信息在那儿,所以一起来看看能否解决这个问题。剪裁和遮罩之间的区别遮罩使用的是图像,剪裁使用的是路径。想象一张从左到右、从黑到白渐变的正方形图像,它可以是一个遮罩。对于应用了这个渐变遮罩图像的元素,它在遮罩图像的黑色部分是透明(透视)的,而在遮罩图像的白色的部分是不透明(正常)的...…

Web前端-CSS继续阅读
更早的文章

用一行 CSS 居中并裁剪图片

设置图片的裁剪尺寸非常简单,你只需在 CSS 里使用这行代码:img { object-fit: cover;}就是这样。不需要语义、包装div或者其他没意义的代码。这种技术能很好地把大小不合适的头像图片裁剪为正方形或者圆形的图片。以下面那只熊的宽图片来举例。一旦把 object-fit:cover 技术应用在这种图片上,并且设置好宽和高,图片自己就会进行裁剪和居中。object-fit:cover 的裁剪方式和 background-size:cover 的完全相同,不过它是用来...…

Web前端-CSS继续阅读