Bootstrap 是全球最受歡迎的前端組件庫(kù),用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。
Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 開(kāi)發(fā)的開(kāi)源工具集。利用我們提供的 Sass 變量和大量 mixin、響應(yīng)式柵格系統(tǒng)、可擴(kuò)展的預(yù)制組件、基于 jQuery 的強(qiáng)大的插件系統(tǒng),能夠快速為你的想法開(kāi)發(fā)出原型或者構(gòu)建整個(gè) app 。
誰(shuí)適合閱讀本教程?
只要您具備 HTML 和 CSS 的基礎(chǔ)知識(shí),您就可以閱讀本教程,進(jìn)而開(kāi)發(fā)出自己的網(wǎng)站。在您學(xué)習(xí)完本教程后,您即可達(dá)到使用 Bootstrap 開(kāi)發(fā) Web 項(xiàng)目的中等水平。
閱讀本教程前,您需要了解的知識(shí):
在您開(kāi)始閱讀本教程之前,您必須具備 HTML 、 CSS 和 JavaScript 的基礎(chǔ)知識(shí)。如果您還不了解這些概念,那么建議您先閱讀我們的這些教程:
HTML 教程
CSS 教程
JavaScript 教程
Bootstrap4 實(shí)例
Boostrap4 與 Bootstrap3
Boostrap4 是 Bootstrap 的最新版本,與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關(guān)的部分變成了相關(guān)的組件。同時(shí) Bootstrap.min.css 的體積減少了40%以上。
Boostrap4 放棄了對(duì) IE8 以及 iOS 6 的支持,現(xiàn)在僅僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。如果對(duì)于其中需要用到以前的瀏覽器,那么請(qǐng)使用 Bootstrap3。
我們可以通過(guò)以下兩種方式來(lái)安裝 Bootstrap4:
使用 Bootstrap 4 CDN。
從官網(wǎng) getbootstrap.com 下載 Bootstrap 4。
Bootstrap 4 CDN
國(guó)內(nèi)推薦使用 BootCDN 上的庫(kù):
Bootstrap4 CDN
<!-- 新 Bootstrap4 核心 CSS 文件 --><linkrel="stylesheet"><!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 --><scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!-- popper.min.js 用于彈窗、提示、下拉菜單 --><scriptsrc="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><scriptsrc="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
此外,你還可以使用以下的 CDN 服務(wù):
國(guó)內(nèi)推薦使用 : https://www.staticfile.org/
國(guó)際推薦使用:https://cdnjs.com/
下載 Bootstrap 4
你可以去官網(wǎng) https://getbootstrap.com/ 下載 Bootstrap4 資源庫(kù)。
注:此外你還可以通過(guò)包的管理工具 npm、 gem、 composer 等來(lái)安裝:
npm install bootstrap@4.0.0-beta.2gem 'bootstrap', '~> 4.0.0.beta2'composer require twbs/bootstrap:4.0.0-beta.2
創(chuàng)建第一個(gè) Bootstrap 4 頁(yè)面
1、添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件類型,所以需要添加 HTML5 doctype 聲明。
HTML5 doctype 在文檔頭部聲明,并設(shè)置對(duì)應(yīng)編碼:
<!DOCTYPEhtml><html><head><metacharset="utf-8"></head></html>
移動(dòng)設(shè)備優(yōu)先
為了讓 Bootstrap 開(kāi)發(fā)的網(wǎng)站對(duì)移動(dòng)設(shè)備友好,確保適當(dāng)?shù)睦L制和觸屏縮放,需要在網(wǎng)頁(yè)的 head 之中添加 viewport meta 標(biāo)簽,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width
表示寬度是設(shè)備屏幕的寬度。
initial-scale=1
表示初始的縮放比例。
shrink-to-fit=no 自動(dòng)適應(yīng)手機(jī)屏幕的寬度。
容器類
Bootstrap 4 需要一個(gè)容器元素來(lái)包裹網(wǎng)站的內(nèi)容。
我們可以使用以下兩個(gè)容器類:
.container 類用于固定寬度并支持響應(yīng)式布局的容器。
.container-fluid 類用于 100% 寬度,占據(jù)全部視口(viewport)的容器。
兩個(gè) Bootstrap 4 頁(yè)面
Bootstrap4 .container 實(shí)例
<divclass="container"><h1>我的第一個(gè) Bootstrap 頁(yè)面</h1><p>這是一些文本。</p></div>
嘗試一下 ?
讀:按鈕是界面中最基礎(chǔ)的元素之一,一個(gè)個(gè)按鈕承載著一個(gè)個(gè)操作指令,響應(yīng)用戶各類操作行為,傳達(dá)用戶的種種業(yè)務(wù)訴求。B端業(yè)務(wù)龐大而復(fù)雜,不同的場(chǎng)景使用的按鈕不同,同一流程不同狀態(tài)下的按鈕也不同,甚至同一模塊在不同顯示設(shè)備上按鈕也有所差異。下面是在實(shí)際工作中的關(guān)于按鈕的一些總結(jié)和思考,也希望能夠給讀者帶來(lái)一些新的思考。
依據(jù)按鈕呈現(xiàn)的視覺(jué)重量差異,我們可以通過(guò)改變樣式將按鈕分為主按鈕、次按鈕、虛線按鈕、文字按鈕、圖標(biāo)按鈕5類。
在日常場(chǎng)景中,主按鈕是頁(yè)面中按鈕區(qū)最為核心的操作按鈕,通過(guò)使用主題色填充容器吸引用戶視線聚焦,引導(dǎo)用戶去關(guān)注、操作主流程,強(qiáng)調(diào)性較高。
常見(jiàn)有純文字、圖標(biāo)+文字兩種類型,5種不同狀態(tài)
次按鈕是在日常場(chǎng)景中運(yùn)用最廣泛的的一種按鈕,由此也被稱為默認(rèn)按鈕,視覺(jué)呈現(xiàn)上相較于主按鈕較“弱”。通常有描邊和文字組成的字線型、背景填充(中性色或較淺的主題色)和文字組成的字面型兩種,用于按鈕區(qū)沒(méi)有主次之分的平級(jí)按鈕,強(qiáng)調(diào)性中等。
常見(jiàn)有純文字、圖標(biāo)+文字兩種類型,5種不同狀態(tài)
虛線按鈕在日常場(chǎng)景中屬于低頻操作按鈕,容器內(nèi)只有簡(jiǎn)單的虛線邊框,視覺(jué)上弱于次按鈕,常用于場(chǎng)景中的添加操作,強(qiáng)調(diào)性較低。
常見(jiàn)有純文字、圖標(biāo)+文字兩種類型,5種不同狀態(tài)
文字按鈕在日常場(chǎng)景中的使用頻次也較高,文字按鈕常見(jiàn)也分為兩種:一種是各種狀態(tài)下容器邊界都是隱藏的,一種是在hover、press、active狀態(tài)下容器有背景色填充(較淺中性色)的。不管哪一種形式視覺(jué)感受都較弱,通常用于不太明顯的操作,強(qiáng)調(diào)性較低。
常見(jiàn)有純文字、圖標(biāo)+文字兩種類型,5種不同狀態(tài)
文字按鈕和鏈接的在默認(rèn)外觀上基本一致,甚至在有的項(xiàng)目中各種交互狀態(tài)也一致,比較難區(qū)分文字按鈕和鏈接。
在我們的團(tuán)隊(duì)項(xiàng)目中,文字按鈕和鏈接也做了不同的定義,鏈接在hover、press、active狀態(tài)下都有顯示下劃線,來(lái)告知用戶這是一個(gè)外部的鏈接;文字按鈕則在hover、press、active狀態(tài)下容器都會(huì)填充背景色。
圖標(biāo)按鈕在日常場(chǎng)景中的使用頻次較高、也頗為高效,圖標(biāo)按鈕默認(rèn)狀態(tài)下容器在不可見(jiàn),視覺(jué)感受也較弱,由于沒(méi)有文字,一些語(yǔ)義性不強(qiáng)的圖標(biāo)容易導(dǎo)致用戶理解的偏差,一般用在圖標(biāo)hover狀態(tài)下會(huì)出現(xiàn)Tooltip提示來(lái)解決此問(wèn)題,圖標(biāo)按鈕的強(qiáng)調(diào)性也較低。
常見(jiàn)只有圖標(biāo),5種不同狀態(tài)
綜上所述就是在B端項(xiàng)目中十分常見(jiàn)的五種按鈕,不同團(tuán)隊(duì)、不同項(xiàng)目都會(huì)根據(jù)自身的實(shí)際項(xiàng)目去定義和使用不同按鈕。
在我們團(tuán)隊(duì)的實(shí)際項(xiàng)目中,依據(jù)按鈕視覺(jué)重量的不同,將按鈕分為一級(jí)按鈕(主按鈕)、二級(jí)按鈕(次按鈕、虛線按鈕)、三級(jí)按鈕(文字按鈕)、四級(jí)按鈕(圖標(biāo)按鈕),在強(qiáng)調(diào)屬性的重要程度上隨級(jí)別增加遞減。在實(shí)際的項(xiàng)目場(chǎng)景中,根據(jù)不同需求的強(qiáng)調(diào)程度去選擇相應(yīng)級(jí)別的按鈕,有了這個(gè)準(zhǔn)則作為指導(dǎo)參考,大大降低了團(tuán)隊(duì)在選擇按鈕時(shí)的時(shí)間成本。
通過(guò)對(duì)一個(gè)按鈕的拆解,可以將按鈕分為容器、背景、圖標(biāo)、文本、描邊、圓角等基本元素,每種元素的視覺(jué)呈現(xiàn)都會(huì)反過(guò)來(lái)影響按鈕的外觀。不同風(fēng)格、不同氣質(zhì)的產(chǎn)品,需要相應(yīng)的處理的影響按鈕視覺(jué)呈現(xiàn)的各個(gè)元素。
圓角按鈕所帶來(lái)的不僅僅是圓角大小的視覺(jué)表現(xiàn),更多是影響著用戶對(duì)整個(gè)產(chǎn)品整體認(rèn)知,以及用戶在使用產(chǎn)品過(guò)程中的具體感受。合理科學(xué)、適合產(chǎn)品氣質(zhì)特征、符合用戶預(yù)期和認(rèn)知的圓角元素,對(duì)整個(gè)產(chǎn)品使用體驗(yàn)的提升是有很大的幫助的。
這里的圓角不僅僅局限于按鈕,推而廣之適用產(chǎn)品中的每個(gè)元素,提前合理的規(guī)劃各種元素圓角,更會(huì)對(duì)整個(gè)產(chǎn)品的一致性大有裨益。
直角按鈕:棱角分明,四角垂直過(guò)渡,呈向外擴(kuò)張之勢(shì),給人以尖銳、強(qiáng)烈,不易接近之感。
圓角按鈕:與直角相比,四角過(guò)渡較舒緩,呈向內(nèi)聚攏之勢(shì),多給人以柔和、親近,平易好接觸之感。
多個(gè)直角按鈕近距離排列,由于直角的張力的存在,相鄰直角按鈕的間隔在視覺(jué)感受上被弱化,不像圓角按鈕那樣能更容易的區(qū)分、甄別每個(gè)按鈕。滿足產(chǎn)品需求的情況下,適當(dāng)?shù)膱A角按鈕較直角按鈕更合適。
當(dāng)然圓角也不是越大越好,相同尺寸的按鈕,圓角越大對(duì)在頁(yè)面中的視覺(jué)占比越小,操作的容易性越低。尤其在B端與下拉菜單進(jìn)行聯(lián)動(dòng)時(shí),也會(huì)受到大圓角(全圓角)的局限,使下拉菜單和按鈕的組合適配顯得比較突兀。
按鈕loading狀態(tài)算是一種較為特殊的狀態(tài),指的是戶操作按鈕后在得到反饋前的一種臨時(shí)按鈕狀態(tài),常與按鈕組合在一塊作為多態(tài)按鈕使用。
由于數(shù)據(jù)量大或者網(wǎng)速不穩(wěn)定頁(yè)面造成數(shù)據(jù)反饋會(huì)有一定的響應(yīng)加載時(shí)間,當(dāng)這個(gè)加載時(shí)間讓用戶有明顯的等待感知時(shí),就需要一種反饋來(lái)告知用戶當(dāng)前正在進(jìn)行的狀態(tài),防止用戶在不知情的情況下犯錯(cuò)誤操作,一般會(huì)使用loading動(dòng)畫來(lái)做這種反饋,不僅向用戶反映了系統(tǒng)的當(dāng)前狀態(tài),適當(dāng)?shù)膭?dòng)畫效果還能轉(zhuǎn)移用戶注意力,起到給用戶情緒降躁的效果。
按鈕的loading狀態(tài)則可以代替loading動(dòng)畫,既起到了原來(lái)loading動(dòng)畫的效果,又不會(huì)因頁(yè)面變動(dòng)過(guò)大給用戶帶來(lái)不適。在越發(fā)重視用戶體驗(yàn)的今天,按鈕的loading狀態(tài)也越來(lái)越多的運(yùn)用在產(chǎn)品的各種場(chǎng)景中。
通過(guò)以上對(duì)按鈕了解,應(yīng)該對(duì)按鈕有個(gè)大概的認(rèn)識(shí),接下來(lái)就去看看在實(shí)際工作中是怎么制作按鈕。
在實(shí)際項(xiàng)目中應(yīng)用中,我們發(fā)現(xiàn)按鈕中的文本字?jǐn)?shù)≤4能夠滿足大多數(shù)場(chǎng)景。為保證大多數(shù)按鈕的長(zhǎng)度一致,就需要在定制按鈕組件時(shí)給按鈕中的文字區(qū)域一個(gè)基準(zhǔn)寬度,當(dāng)文字的實(shí)際寬度大于基準(zhǔn)寬度時(shí),按鈕的寬度隨著文字的實(shí)際寬度增加而增加;當(dāng)文字的實(shí)際寬度不大于基準(zhǔn)寬度時(shí),按鈕的寬度就是文字的基準(zhǔn)寬度+左右padding值。
我們項(xiàng)目的網(wǎng)格基數(shù)是4px,基準(zhǔn)正常按鈕為96*32
實(shí)際項(xiàng)目需求中,不同場(chǎng)景用到的按鈕大小(按鈕的高度)也會(huì)有所不同。在我們的項(xiàng)目中我們將通用按鈕劃分為大(large)、正常(normal)、?。╯mall)、超小(extra small),按鈕高度分別對(duì)應(yīng)著36px、32px、24px、20px。
若品牌色定義了從淺到深不同層級(jí)的色階,可使用正常基準(zhǔn)色作為按鈕的normal顏色,相鄰的淺色階作為hover狀態(tài)下對(duì)應(yīng)的顏色,相鄰深色階作為press狀態(tài)下對(duì)應(yīng)的顏色。
我們項(xiàng)目中把“disabled”狀態(tài)的定義為了一個(gè)中性色,用“置灰”的形式來(lái)告訴用戶當(dāng)前狀態(tài)不可操作,而沒(méi)有選擇色階中的淺色。
如果沒(méi)有定義從淺到深的色階,在原來(lái)主題色的基礎(chǔ)上,則可以給hover狀態(tài)添加一個(gè)透明度為16%(#fff),給press狀態(tài)添加一個(gè)透明度16%(#000),給用戶以實(shí)時(shí)操作反饋。
按鈕區(qū)是指用于放置按鈕的區(qū)域,一個(gè)按鈕區(qū)內(nèi)可以有多個(gè)按鈕,按鈕區(qū)的位置應(yīng)該位于什么頁(yè)面的什么位置?參考眾多設(shè)計(jì)語(yǔ)言,我們認(rèn)為按鈕應(yīng)置于用戶的視覺(jué)瀏覽路徑中,便于被用戶發(fā)現(xiàn),并且應(yīng)盡量靠近其所控制的對(duì)象。
結(jié)合經(jīng)典的“F”、“Z”網(wǎng)頁(yè)瀏覽模式作為基礎(chǔ)指導(dǎo)。我們將一個(gè)相對(duì)復(fù)雜模塊分為header、body、footer三個(gè)區(qū)域:header區(qū)域的按鈕區(qū)放置影響模塊全局的操作;body區(qū)域的按鈕區(qū)放置影響跟隨內(nèi)容的操作;footer區(qū)域的按鈕區(qū)放置具有“完結(jié)流程”意義的操作。
一個(gè)模塊的按鈕區(qū)最好只有一個(gè)主按鈕,否則會(huì)對(duì)用戶造成疑惑,“到底哪一個(gè)是主要流程?”,對(duì)模塊主流程功能造成干擾。
一個(gè)模塊的按鈕區(qū)可以沒(méi)有主按鈕,在日常場(chǎng)景中,經(jīng)常會(huì)遇到一個(gè)模塊中幾個(gè)分支流程重要程度都是平級(jí)的,此時(shí)則不需要主按鈕。若非要安排一個(gè)主按鈕則會(huì)讓使用者產(chǎn)生困惑,造成流程層級(jí)混亂。
最常見(jiàn)且疑問(wèn)當(dāng)屬“取消按鈕在左邊還是右邊”,Micrisoft、Apple、Google三家操作系統(tǒng)巨頭給出的方案各不相同,可見(jiàn)不管哪種方案,只要能在系統(tǒng)中保證統(tǒng)一性,都是可以被用戶所接受的。
在我們團(tuán)隊(duì)的項(xiàng)目中定義了這樣一個(gè)“靠邊原則”,既按鈕區(qū)在左側(cè)時(shí),優(yōu)先級(jí)別高的按鈕落在左側(cè);按鈕區(qū)在右側(cè)時(shí),優(yōu)先級(jí)別高的按鈕落在右側(cè)。按鈕位于中間位置時(shí),引導(dǎo)操作的按鈕統(tǒng)一在右側(cè)。
按鈕區(qū)的按鈕較多且頁(yè)面空間有限時(shí),就需要“折疊”部分按鈕,來(lái)優(yōu)雅的展示按鈕區(qū)效果。當(dāng)模塊寬度變窄,空間不足于完全放得下全部按鈕式,此時(shí)統(tǒng)一采用靠右“折疊”,部分按鈕隱藏在“…”按鈕中,鼠標(biāo)交互時(shí)再展示出來(lái),用交互換得更大空間。
參考鏈接:
https://www.zcool.com.cn/article/ZMTEyNzczMg==.html
https://www.zcool.com.cn/article/ZMTA2NDY2OA==.html
https://www.zcool.com.cn/article/ZMTI2MzUwMA==.html
本文由@小梗果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
擊右上方紅色按鈕關(guān)注“web秀”,讓你真正秀起來(lái)
html
正在加載中<dot>...</dot>
css
dot{ display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before{ display: block; content: '...\\A..\\A.'; white-space: pre-wrap; animation: dot 2s infinite step-start both; } @keyframes dot{ 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } }
如果你看上圖代碼沒(méi)有看懂,請(qǐng)看下圖,我注釋掉一行代碼,你就明白了。原來(lái)是dot元素,沿著Y軸在循環(huán)位移,隱藏掉就讓你看到了加載的動(dòng)畫效果。
當(dāng)你需要這樣一個(gè)上傳文件,按鈕時(shí),你考慮的是找設(shè)計(jì)弄個(gè)圖片,還是自己寫一個(gè)???
其實(shí)CSS寫,也很簡(jiǎn)單的。
<a href="javascript:;" class="upload" title="繼續(xù)上傳">添加圖片</a> .upload{ position: relative; display: inline-block; width: 76px; height: 76px; color: #ccc; border: 2px dashed; /*邊框虛線*/ text-indent: -12em; /*使其文字看不到*/ transition: color .25s; /*hover事件:顏色漸變動(dòng)畫*/ overflow: hidden; margin: 50px 100px; } /*用before/after偽類做 + 號(hào)樣式*/ .upload:before, .upload:after{ content: ''; position: absolute; top: 50%; left: 50%; } .upload:hover{ color: #34538b; } .upload::before{ width: 20px; border-top: 4px solid; margin: -2px 0 0 -10px; } .upload::after{ height: 20px; border-left: 4px solid; margin: -10px 0 0 -2px; }
當(dāng)我們想給一個(gè)矩形或其他能用 border-radius 生成的形狀加投影時(shí),用 box-shadow 都可以解決,如下圖:
但是,當(dāng)元素添加了一些偽元素或半透明的裝飾之后,box-shadow就有些 力不從心了,因?yàn)?border-radius 會(huì)無(wú)恥地忽視透明部分。這類情況包括下列幾種情況:
1、半透明圖像、背景圖像、或者 border-image(比如老式的金質(zhì)像框);
2、元素設(shè)置了點(diǎn)狀、虛線或半透明的邊框,但沒(méi)有背景(或者當(dāng) background-clip 不是 border-box 時(shí));
3、對(duì)話氣泡,它的小尾巴通常是用偽元素生成的;
4、幾乎所有的折角效果
5、通過(guò) clip-path 生成的形狀。
下面來(lái)看看這個(gè)示例: html代碼
<div class="speech">不規(guī)則的投影</div>
css樣式
div { position: relative; display: inline-flex; flex-direction: column; justify-content: center; vertical-align: bottom; box-sizing: border-box; width: 8em; padding: .5em; height: 5em; margin: .6em; background: #0cc071; color: #fff; /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此時(shí)是偽類是沒(méi)有陰影的*/ -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); } .speech { border-radius: .3em; } .speech::before { content: ''; position: absolute; top: 1em; right: -.7em; width: 0; height: 0; border: 1em solid transparent; border-left-color: #0cc071; border-right-width: 0; }
從上圖可以看出box-shadow搞不定的,drop-shadow給搞定了。這是為什么了?
可以很明顯的看出區(qū)別,為什么會(huì)這樣呢?在這里我用的是div標(biāo)簽,大家都知道,div標(biāo)簽是個(gè)塊標(biāo)簽,說(shuō)白了是個(gè)盒模型,指的是一塊區(qū)域,box-shadow的屬性只能添加到盒模型外面,因此內(nèi)部的東西是不會(huì)添加上的,就變成上圖的樣子,中間還是白色部分。而drop-shadow就不一樣了,他是把所有的非透明區(qū)域都做了陰影效果,就相當(dāng)于一種真正的投影。
經(jīng)常在網(wǎng)頁(yè)中看到一些Dialog,例如有些網(wǎng)頁(yè)點(diǎn)擊登錄注冊(cè)時(shí)就會(huì)跳出一個(gè)彈框來(lái)顯示登錄注冊(cè)頁(yè)面,下面就使用 css 完成一個(gè)可以自適應(yīng),無(wú)論窗口的大小,始終能保持水平垂直居中的dialog。
<div class="c-pupup"> <div class="dialog"> <div class="content"> 我是內(nèi)容 </div> </div> </div>
css樣式
.c-pupup{ position: fixed; top:0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.5); text-align: center; white-space: nowrap; z-index: 99; } .c-pupup:after{ content: ''; display: inline-block; height: 100%; vertical-align: middle; } .dialog{ background-color: #fff; display: inline-block; vertical-align: middle; border-radius: 6px; text-align: left; white-space: normal; width: 400px; height: 250px; }
這些CSS都是非常實(shí)用的,有興趣的可以收藏起來(lái),沒(méi)準(zhǔn)以后能用上。然后drop-shadow就不用去糾結(jié)IE能不能用了,因?yàn)槲覀円呀?jīng)放棄它了。
喜歡小編或者覺(jué)得小編文章對(duì)你有幫助的,可以點(diǎn)擊一波關(guān)注哦!
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。