三大前端框架布局element-ui(1.布局)

最早的時候用過bootstrap,接著就是layui,再接著接觸了Vue,然后就認識了element-ui,今天,想寫一個系列的文章記錄下我上一階段學習element-ui的過程,首先先從布局開始。

首先,其實我接觸的前端框架的布局方式,都特別的像,基本上你如果運用一個很熟練了,其他的一點就通。

(1)el-row和el-col配合使用

這個el-row定義的就是一行,然后這行被分為24列,這24列被el-col分配,配置里面的:span屬性就可以分配這一行空間了。


el-row el-col

? ? ? ? ? ? 1.1:列與列之間的間距可以在el-row中綁定:gutter來設定,:gutter綁定的是px


:gutter

? ? ? ? ? ? 1.2:列的偏移量:el-col中綁定::offset=""來設置,綁定的是欄數


:????offset

? ? ? ? ? ? 1.3 :對齊方式(left,center,right)

? ? ? ? ? ? ? ? 設置el-row中的屬性type,justify設置不同的對齊方式(start(左), center(中), end(右), space-between(列之間中間平均分配), space-around(整行平均列之間全部平均分配) )

type,justify


space-between,space-around

補充:xs、sm、md、lg?和?xl,至此的不同屏幕大小下的響應式布局。


好了,以上了解的就是關于布局的全部內容了,下面在來補充一點用來構建后天管理系統的布局搭建

(1)會使用el-container,el-main,el-aside,el-header,el-footer來快速布局

el-main,el-aside(有width屬性),el-header(height屬性),el-footer(height屬性)必須要在el-container里面


概要
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容