框架使用
在使用elemfentUI 的時(shí)候要配合Vue或者React腳本來(lái)使用，不然無(wú)法預(yù)覽效果，我這里使用的vue 框架，所以
在html要實(shí)例化Vue,并且綁定到 租間房父布局，例如：
<html >
<head>
<link rel="stylesheet" >
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-button>
登錄
</el-button>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
})
</script>
</html>
CSS居中
div 居中
設(shè)置div的寬高垢村，然后設(shè)置
margin：0 auto ,可以讓子元素居中
塊級(jí)元素水平居中
設(shè)置 父布局
text-align:center來(lái)設(shè)置水平居中
flex布局居中
設(shè)置父布局為flex，布局并且設(shè)置
display:flex;
align-items:center;
layout 布局
el-row 標(biāo)簽和el-col來(lái)配合顯示行列布局：
<el-row>
<el-clo>
<div span="12" style="background-color:red">
<div span="12" style="background-color:green">
</div>
</el-clo>
</el-row>
詳細(xì)屬性
【Row 屬性】
gutter可以可以設(shè)置間距type設(shè)置布局嚎卫，例如type="flex",設(shè)置成flex布局后肝断，使用justify= start |end|center| space-between | space-around來(lái)設(shè)置對(duì)齊
-align 布局在flex布局下，參數(shù)有top | middle |bottom |
【Col 屬性】
span根據(jù)占比來(lái)控制寬度offset分欄偏移push向右移動(dòng)格數(shù)pull向左移動(dòng)格數(shù)
Container布局容器
為了方便開(kāi)發(fā)驰凛，設(shè)計(jì)出了布局容器el-container胸懈，作為父布局，只能包含四種子子布局：
el-header標(biāo)題欄el-aside側(cè)邊欄el-main內(nèi)容欄el-footer底部欄
【注】：el-container中恰响，包含el-aside和el-main的時(shí)候趣钱，布局時(shí)從左到右，包含el-header和el-footer的時(shí)候胚宦，就會(huì)布局從上到下,el-aside中布局也是從上到下.
<body>
<div id="app">
<el-container>
<el-header style="background-color: black;" >
</el-header>
</el-container>
<el-container>
<el-aside style=" background-color: red; height: 500px; width: 200px;">
</el-aside>
<el-main style=" background-color: green; height: 500px; width: 200px;" >
</el-main>
</el-container>
<el-container>
<el-footer style="background-color: hotpink;">
</el-footer>
</el-container>
</div>
</body>
<script>
new Vue().$mount('#app')
</script>
</html>
Button按鈕
el-button 來(lái)顯示 按鈕
其中屬性包括：
-
type可以設(shè)置成primary主要按鈕success成功按鈕...
round圓角按鈕circle圓形按鈕plain樸素按鈕 （默認(rèn)按鈕）disable是否不可點(diǎn)擊loading是否加載-
icon圖標(biāo)名
文字鏈接
el-link 來(lái)顯示文字鏈接首有。主要使用的屬性有：
type類似于按鈕icon顯示圖標(biāo)。類似于按鈕disabled是否可點(diǎn)擊underline是否顯示下劃線,例如顯示下劃線枢劝。:inderline=true
el-radio單選 & el-radio-button 單選按鈕
disabled是否可點(diǎn)擊border事都顯示邊框size大小
