首頁  >  文章  >  web前端  >  bootstrap 為什麼只能預設12列

bootstrap 為什麼只能預設12列

藏色散人
藏色散人原創
2020-12-04 09:35:492342瀏覽

bootstrap只能預設12列是因為12是數字「1、2、3、4、6」的最小公倍數,所以12列柵格系統相對較靈活,並且支援將一行分成1列、 2列、3列、4列、6列。

bootstrap 為什麼只能預設12列

本教學操作環境:Windows7系統、bootstrap3版,Dell G3電腦。

為什麼Bootstrap要預設12列?

今天被問了一個問題:」有沒有想過為什麼Bootstrap要預設是12列?「

呃,好吧,用了Bootstrap一段時間,的確沒想過為什麼要預設是12列,隱約覺得是因為佈局比較方便,常見的分2塊,3塊,4塊,都可以方便分完。

既然有假設,那還是要求證一下。

Google上一陣搜尋。

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列呢?

繼續Google。

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都不是很方便。

而12是1,2,3,4,6的最小公倍數,所以12列柵格系統相對較靈活,支援將一行分成1列,2列,3列,4列,6列。若是想要支援5列,那1,2,3,4,5的最小公倍數是60,而60這個數對於柵格系統來說顯然太大了。

推薦:《bootstrap影片教學

以上是bootstrap 為什麼只能預設12列的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn