国产精品天干天干,亚洲毛片在线,日韩gay小鲜肉啪啪18禁,女同Gay自慰喷水

歡迎光臨散文網(wǎng) 會員登陸 & 注冊

基于Bootstrap的web移動端商戶管理APP界面

2023-07-31 12:09 作者:蒟蒻_巨弱  | 我要投稿

?????開發(fā)語言

HTML/CSS/JS

??項目介紹

Web商戶管理后臺是一個使用bootstrap框架構(gòu)建的一個移動端響應(yīng)式頁面。

??效果預(yù)覽

在線預(yù)覽
https://1024code.com/ide/IFBhe0Z

圖片預(yù)覽

??項目依賴

  • jQuery v3.2.1

  • Bootstrap v4.3.1

  • Bootstrap-icons-1.10.3

??項目要點

bootstrap-icons 加載緩慢問題

下載了zip壓縮包文件后,打開發(fā)現(xiàn)里面只有圖標(biāo)(svg)和王爺開放字體格式(woff),缺少了css文件。
然后就去引用了官方的CDN CSS,在使用CDN的過程中發(fā)現(xiàn)圖標(biāo)顯示的很慢,看了一下CDN的CSS文件內(nèi)容


才發(fā)現(xiàn)CDN的 CSS中引用的woff文件也是CDN里的,造成加載速度緩慢。于是就將CDN中的CSS保存到本地,再將SRC地址全部替換成本地資源(在官方下載的zip包),這才解決了圖標(biāo)加載緩慢的問題

交易信息卡片


在制作交易信息卡片的時候,并沒有發(fā)現(xiàn)bootstrap中有和設(shè)計稿一模一樣的卡片,但是發(fā)現(xiàn)了一個十分相似的卡片

只需要將組件中的h5標(biāo)簽和p標(biāo)簽的順序調(diào)換一下,然后再調(diào)整一下css樣式,就能得到和設(shè)計稿中一模一樣的效果的卡片

營銷管理卡片


營銷管理卡片分為 可視化信息 和 標(biāo)簽 兩個部分

可視化信息

中間的可視化信息由一個有色圓形的數(shù)字和標(biāo)題組成,這一部分主要使用的是使用Bootstrap的柵格系統(tǒng)實現(xiàn)布局

首先,先創(chuàng)建一個父容器div,然后再把父容器平均分成三個div來放可視化信息。
Bootstrap柵格系統(tǒng)柵格系統(tǒng)把屏幕平均分成12分,三個div來平分的話,每一個div就是占4份所以最終給到div的class為col-xs4。
這三個div要在父容器中以橫向和sapce-around的方式進(jìn)行排列,所以就給父容器div添加屬性row和justify-content-around

標(biāo)簽

實現(xiàn)斜角標(biāo)簽一共分為三個部分 :創(chuàng)建、定位 、旋轉(zhuǎn)隱藏
創(chuàng)建:在父元素div中增加一個div并填寫需要的文字
定位:給父元素div設(shè)置相對定位,然后斜角標(biāo)簽middle-target設(shè)置絕對定位,這樣斜角標(biāo)簽就能在父元素中移動,再通過設(shè)置top和right將標(biāo)簽移動到何時的位置(這個位置要超出父盒子一點)
旋轉(zhuǎn)隱藏:在移動完標(biāo)簽后,它還是一個長方形div,此時我們只需要給它設(shè)置transform: rotate(45deg);它就會順時針旋轉(zhuǎn)45度,然后給父盒子設(shè)置 overflow: hidden; 這時候 標(biāo)簽div超出父盒子的部分就會被隱藏掉,從而使標(biāo)簽看起來像是被切掉了一部分的不規(guī)整形狀。

門店管理卡片


這一頁主要是由每一個門店卡片構(gòu)成的列表
門店卡片主要由三個部分組成:圖片、描述文字、箭頭圖標(biāo)

這里的使用的是grid布局方式

通過grid布局將這個卡片分為三列,然后每一列再通過設(shè)置fr去調(diào)節(jié)列寬,最終劃分出每一列的位置

地圖

使用的為高德地圖js api

HTML中需要創(chuàng)建一個id=“map” 的div來放置地圖,并且添加上高德api的script標(biāo)簽

然后再另外一個js文件當(dāng)中填寫地圖的配置信息

  • 中心點可以通過坐標(biāo)拾取器獲得?https://lbs.amap.com/tools/picker

  • securityJsCode 通過高德開放平臺獲得?https://console.amap.com/dev/key/app

  • 其他設(shè)置請看高德地圖api文檔?https://lbs.amap.com/api/jsapi-v2/guide/abc/quickstart



基于Bootstrap的web移動端商戶管理APP界面的評論 (共 條)

分享到微博請遵守國家法律
乌拉特前旗| 惠水县| 班玛县| 武清区| 琼结县| 临漳县| 邵阳县| 措勤县| 龙胜| 普格县| 西宁市| 井研县| 陇川县| 平山县| 米林县| 八宿县| 应用必备| 什邡市| 灵山县| 韶山市| 桑植县| 宁乡县| 潍坊市| 五峰| 夏邑县| 福清市| 兰考县| 普陀区| 阿拉尔市| 芜湖市| 郴州市| 兴山县| 大安市| 邵东县| 进贤县| 平乐县| 姜堰市| 红安县| 孟州市| 无极县| 昌图县|