bootstrap 解析柵格系統原始碼 v 4 x

2021-10-05 23:20:58 字數 1836 閱讀 6417

序言

新增柵格

需要提一下的就是在4中新增了一塊螢幕範圍約束柵格。超小螢幕 < 576px ，表示就是 col-*

相同功能不同原理

排列方式

3中利用浮動使子項排列在一行。4中

.row
通過給行設定display: flex;就可以直接排列到一行。

列

.col-1
通過這乙個例子可以看出，不同於3中利用百分比寬度，使用伸縮基準值定義寬度。

列排序

在flex中有乙個order屬性用於給列排序，bootstrap4.x中自然是會用order。

.order-0
在bootstrap4.x中，官方會把排序改為使用order，這是合理的，也是必然的。因為如果繼續使用3.x中的用百分比來定義位置。會引發一些錯誤。可以看下乙個列增加來結合看。

新增功能

列增加

4.x中已經不僅限於一行最多十二列。增加了許多其他型別的列。

均分列

.col
直接使用col類可以達到一行中所有列寬度一樣。可以看到利用了flex-grow來擴充套件剩餘部分。

自定義列

.col-auto
自定義列中寬度設定為了auto，那麼列寬將完全由內容撐開。

對齊4.x中可以設定 .row(行) 在 .container(容器)中的對齊方式，也可以設定 .col-*(列) 在 .row(行)中的對齊方式。

行對齊

行對齊垂直對齊

行對齊垂直對齊有三種對齊方式，頂部對齊，中間對齊，底部對齊

實現之前得設定父容器高度，預設高度是內容填充的，不設定高度無法看到效果。

/* 頂部對齊 */


.align-items-start 


/* 底部對齊 */


.align-items-end 


/* 中間對齊 */


.align-items-center
整體利用flex的align-items屬性進行對齊。

行對齊水平對齊

水平對齊具有flex的justify-content所有對齊方式

/* 對齊到起始位置 */


.justify-content-start 


/* 對齊到結束位置 */


.justify-content-end 


/* 中部對齊 */


.justify-content-center 


/* 均勻分布 第乙個緊貼最左邊 最後乙個緊貼最右邊 */


.justify-content-between 


/* 均勻分布 每個列都擁有相同的左外邊距與右外邊距 */


.justify-content-around
列對齊

列對齊根據flex的align-self 在縱軸上設定對齊

/* 縱軸頂部 */


.align-self-start 


/* 縱軸底部 */


.align-self-end 


/* 縱軸中部 */


.align-self-center

Bootstrap 柵格系統

目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...

Bootstrap柵格系統

bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。頁面中的一行，比例可以自己定義，但必須保證是12列，如果缺少...

bootstrap 柵格系統

cdn 網路 託管 優點 減少伺服器請求 柵格系統的容器 固定寬居中 container 0 768移動端 768 992pad端 992 1200pc端 1200 pc端寬屏 xs sm md lg 100 750 970 1170 全屏 百分百 container fluid 注意 子元素若要實...