css样式基础库,WeUI基础样式库
WeUI是一套基礎(chǔ)樣式庫，同微信原生視覺體驗(yàn)一致，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì)的。
我們來看看這個基礎(chǔ)庫樣式到底長什么樣。
這些密密麻麻的就是壓縮后的樣式庫。密密麻麻地看起來簡直要急死密集恐懼癥啊。不要急，您請往下看。
仔細(xì)看我們能看到，這個樣式庫為很多類寫了樣式。也就是說，我們只要在html頁面中使用這些樣式，就能構(gòu)建一個頁面了。【只要寫類名，省去了為很多標(biāo)簽定義樣式，是不是省事多了呢?】
對WeUI的介紹就到這了，下面都是滿滿的干貨啦。
開始寫頁面前的準(zhǔn)備
要想有這個樣式庫，當(dāng)然要先下載WeUI的樣式庫啦，我提供了兩個下載的地址。
接下來就為我們的頁面引入這個基礎(chǔ)樣式庫。
我把這個基礎(chǔ)樣式庫放在本地了，就這么引入。
為了更好的說明這個基礎(chǔ)樣式庫的使用，接下來我將介紹兩個例子。單頁應(yīng)用頁面和彈出框。
單頁應(yīng)用頁面
我們致敬vue，模仿這個頁面。
縱觀整個頁面，可以分為以下幾個模塊。
最頂上放置logo
中間有兩個cells 也就是單元格，來顯示數(shù)據(jù)
最底部有一個tabbar導(dǎo)航條
引入代碼：
current vue version 2.5.2
頂部的圖片插入比較簡單，直接引入圖片就行。我們說說中間cells中內(nèi)容的添加。
我們看一個單元格，很典型的左中右格式，分為三個結(jié)構(gòu)層次，
左邊是一張圖片，WeUI樣式庫為我們定義了類名，也就是單元格的頭部：weui-cell__hd
中間是一段文字，也就是這個單元格的身體：weui-cell__bd
最右邊是一個小箭頭，也就是單元格的尾部：weui-cell__ft
引入代碼：
Live Demo
這樣，我們就寫完了一個單元格。
第二個單元格有兩個小格怎么辦呢？
不要緊，weui-cell是單元格中的一個小格子，有多少個小格子就嵌套在一個weui-cells中就可以了，每一格weui-cell還是按照上面的左中右方式進(jìn)行命名：
接下來是最底部的tabbar。
最尾部的導(dǎo)航條類名為weui-tabbar，里面有三項(xiàng)內(nèi)容，也就是有三個weui-tabbar__item。
為每一個weui-tabbar__item添加內(nèi)容吧：
8
我放在GitHub上的項(xiàng)目地址：https://github.com/TeanLee/qs...
這就完成了第一個單頁頁面的編寫。
接下來我們說說一個彈出框。
頁面彈出框
放上我們要寫的頁面成品圖：
這就是我們平常很常見的彈出框了。這里是點(diǎn)擊了第一個按鈕就彈出這個彈框，點(diǎn)擊取消，彈框消失，當(dāng)然你也可以添加別的事件，點(diǎn)擊取消和保存都會讓彈框消失并且執(zhí)行相應(yīng)的步驟。
首先，我們?yōu)閐ialog彈出框制作一個“家”，也就是dialog放置的頁面：
weui-btn 是weui的基本組件是一個按鈕
Dialog
對話框
IOS Dialog樣式 default
IOS Dialog樣式 primary
IOS Dialog樣式 warn
接下來，我們的dialog就要登場了。直接把dialog的div放在放置按鈕div的后面。
彈窗標(biāo)題彈窗內(nèi)容，告知當(dāng)前狀態(tài)、信息和解決方法，描述文字盡量控制在三行內(nèi)
取消
保存
這里的遮罩層是為整個頁面蒙上一層灰色的背景，把用戶的吸引力引到彈框上。
彈框的內(nèi)容還是分為三個層次：
weui-dialog__hd：彈框的頭部寫標(biāo)題；
weui-dialog__bd：彈框的身體寫具體內(nèi)容；
weui-dialog__ft：彈框的尾部放置按鈕；
接下來，就是給第一個按鈕添加綁定事件了，點(diǎn)擊第一個按鈕就跳出來彈框。
document.getElementById('showIOSDialog1').click(function () {
$('#iosDialog1').show();
});
document.getElementById('dialogCancle').click(function () {
$('#iosDialog1').show();
});
我放在GitHub上的彈框具體代碼：https://github.com/TeanLee/qs...
當(dāng)然，weu基礎(chǔ)樣式庫還有很多很多組件可以使用，可以進(jìn)入https://weui.io/ 查看更多的基礎(chǔ)組件。
接下來讓我們一起學(xué)習(xí)更多吧！
總結(jié)
以上是生活随笔為你收集整理的css样式基础库,WeUI基础样式库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信weui框架页面html,样式库 W
- 下一篇： [react] 如何更新组件的状态？