Element-pc框架

柵格布局:

  • <768px -- xs
  • ≥768px -- sm
  • >=992px -- md
  • 1200px -- lg
  • 1920px -- xl

斷點隱藏:
引入以下文件,即可使用斷點隱藏

import 'element-ui/lib/theme-chalk/display.css';

包含的類名及其含義為:

  • hidden-xs-only - 當視口在 xs 尺寸時隱藏
  • hidden-sm-only - 當視口在 sm 尺寸時隱藏
  • hidden-sm-and-down - 當視口在 sm 及以下尺寸時隱藏
  • hidden-sm-and-up - 當視口在 sm 及以上尺寸時隱藏
  • hidden-md-only - 當視口在 md 尺寸時隱藏
  • hidden-md-and-down - 當視口在 md 及以下尺寸時隱藏
  • hidden-md-and-up - 當視口在 md 及以上尺寸時隱藏
  • hidden-lg-only - 當視口在 lg 尺寸時隱藏
  • hidden-lg-and-down - 當視口在 lg 及以下尺寸時隱藏
  • hidden-lg-and-up - 當視口在 lg 及以上尺寸時隱藏
  • hidden-xl-only - 當視口在 xl 尺寸時隱藏

row-屬性
gutter 分欄間隔 如: <el-row :gutter="10">

type 布局模式 <el-row type="flex">

justify flex 布局下的水平排列方式 start/end/center/space-around/space-between

align flex 布局下的垂直排列方式 top/middle/bottom 如: align="middle"

tag 自定義元素標簽 默認<div> 如:tag="p"

col - 屬性
span 柵格占據的列數 默認24 如: <el-col :span="12">

offset 柵格左側的間隔格數

push 柵格向右移動格數

pull 柵格向左移動格數

內置過渡動畫

fade 淡入淡出
提供 el-fade-in-linearel-fade-in 兩種效果

// fade 淡入淡出
<transition name="el-fade-in-linear"></transition>

zoom 縮放
提供 el-zoom-in-centerel-zoom-in-topel-zoom-in-bottom 三種效果

collapse 內容展開折疊
使用 el-collapse-transition 組件實現折疊展開效果

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

推薦閱讀更多精彩內容

  • 原文出處 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端進階之旅閱讀 7,118評論 0 42
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 開篇廢話是一種情懷 上一篇說到Less預處理語言,這節就著重講下Bootstrap框架,這款框架應該是現在前端人手...
    西巴擼閱讀 751評論 1 4
  • 2016年11月3日凌晨,在日本東京留學的青島女大學生江歌在公寓慘遭殺害,兇手手段殘忍,刀刀致命。江歌被發現時已倒...
    Yang沐汐閱讀 983評論 5 14
  • 介紹 elasticsearch是一個高效的、可擴展的全文搜索引擎 基本概念 Near Realtime(NRT)...
    imsilence閱讀 790評論 0 0