9_bootstrap less 移動端

時間 2019-11-09

標籤 bootstrap 移動欄目 Bootstarp 简体版

原文原文鏈接

chrome,firefox提供了"Device Emulation"功能，可模擬常見的各類瀏覽設備javascript

android ADT或ios Xcode附帶的設備模擬器，或第三方在線測試工具www.browerstack.comcss

Responsive Web Design：響應式/自適應網頁設計html

流式網格佈局(Fluid：流式)；前端

可伸縮的圖片/文字html5

CSS3 Media Query技術，根據瀏覽設備的寬高調用不一樣的cssjava

①容許用戶縮放：head內聲明viewportnode

<head>jquery

</head>ios

viewport：視口,

屬性：

width/height=數值

device-width/height：視口寬度/高度

initial-scale：初始時的縮放倍率

minimum-scale：容許的最小縮放倍率

maximum-scale：容許的最大縮放倍率

user-scalable：是否容許用戶手動縮放，取值1/0/yes/no

②不使用絕對寬度：width：60%/auto;

③相對大小字體：em，rem：em 的實際大小是相對於其上下文的字體大小而言

<body>標籤設置文字大小爲100%，給其餘文字都使用相對單位em；現代瀏覽器的默認文字大小都是16 像素：

body{font:normal 100% Helvetica,Airal,sans-serif;} //body字體大小100%=1em=16px

x{font-size:1.5em;}

④流式佈局，浮動定位：佈局用的各個區塊的位置都是浮動的float:right/left;

⑤圖片自適應：給圖片設置閾值img{width:50%;max-width:100%;}

⑥CSS3 Media Query技術：根據瀏覽設備類型、特性不一樣加載不一樣css語句

mediaQuery：指css中能夠得到瀏覽設備特性，如分辨率、方向、色彩深度等

1)link導入css文件，會增長用於頁面渲染的HTTP 請求數量，從而致使頁面加載變慢

media="all/screen/handheld/print/tty/tv/projection/braille" 等

瀏覽網頁的設備類型：全部/彩色電腦屏幕/手持設備/文檔打印/電傳打字機/電視/幻燈/盲文

語法：width=xxx或(width:xxx)；多個and鏈接;

@media 設備1 only (選取條件) not (選取條件) and (設備選取條件) ,設備2/設備2() {sRules}

device-width/height：顯示屏幕/觸覺設備寬高

max/min-device-width/height

width/height：渲染窗口寬高

max/min-width/height=xxx：<=xxx或>=xxx生效

resolution：分辨率

orientation(portrait|lanscape)：設備手持方向橫/豎向

aspect-ratio/device-aspect-ratio：畫面/設備比例

color/color-index：對象顏色/顏色列表

2)css的@media規則：css片斷中有選擇的執行，建議

pc：@media screen and(min-width: 992px){}

pad：@media screen and (min-width: 768px) and (max-width: 991px) {}

phone：@media screen and (max-width: 767px) {}

真正的響應式佈局，能夠徹底避免使用boot

bootstrap:中文網：http://www.bootcss.com/

由動態css語言less寫成，

移動設備優先，

基於jQuery

不支持Windows下的Safari

解決瀏覽器兼容性：

html5shiv.min.js文件：解決IE8瀏覽器支持HTML5的新元素

respond.min.js文件：解決IE8瀏覽器支持css Media Query

基本模板：

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

win10 Edge：取代了IE

html5shiv.js：用於讓老IE識別HTML5新標籤的JS

respond.js：讓IE支持響應式網頁(CSS3 Media Query)的JS

<html lang="zh-cn"> lang屬性指定當前網頁所用的天然語言，如zh、zh-cn、zh-tw、zh-hk、zh-sg、en、en-us、en-uk、ja、de等，有兩個用途：(1)讓瀏覽器的翻譯功能明確當前頁面的天然語言 (2)告訴屏幕閱讀軟件使用何種發音

Cross User Agent Compatible，跨瀏覽器兼容性，指定使用哪一種版本的IE內核， edge表示使用可用的最新版本的內容。

IE6

IE7 7/6

IE8 8/7/6

----------------------------

IE9 9/8/7/6

IE10 10/9/8/7/6

IE11 11/10/9/8/7/6

----------------------------

win10 Edge：取代了IE

html5shiv.js：由@afarkas @jdalton @jon_neal @rem編寫的一個用於讓老IE識別HTML5新標籤的JS

respond.js：由Scott Jehl編寫的一個用於讓老IE支持響應式網頁（CSS3 Media Query）的JS

css目錄：bootstrap.css該框架的樣式文件;bootstrap-theme.css主題文件

css Reset：x{padding:0;margin:0;}

box-sizing=content-box/border-box：設置元素盒模型

content-box：默認，寬度高度爲內容框，寬度高度以外繪製元素的內邊距、邊框

border-box：寬度高度設置邊框盒尺寸，內邊距、邊框在以內繪製

HTML5文件類型：bootstrap某些元素和屬性須要html5

<!DOCTYPE html>

移動設備優先：

全局樣式：

@font-family-base、@font-size-base、@line-height-base變量做爲排版的基本參數

@link-color爲全部連接設置顏色，並當連接處於:hover狀態才添加下劃線

佈局容器：

container定寬容器

container-fluid變寬容器

:before，:after防止子元素margin越界和浮動影響

按鈕：.btn+.btn-*

.btn-default默認樣式

.btn-danger/warning/success/info/primary顏色

.btn-lg/sm/xs尺寸

.btn-block塊，width100%

圖片：

<img src="" class="img-responsive" alt="Responsive image">：響應式圖片

圖片形狀：img-rounded、img-circle、img-thumbnail、img-responsive

文本：

對齊：text-left/center/right/justify/nowrap

大小寫：text-lowercase/uppercase/capitalize

顏色：text-default/primary/success/info/warning/danger：灰/藍/綠/淺藍/黃/紅

列表：

ul/ol類：list-unstyled、list-inline；

dl類：dl-horizontal

表格：

基本表格.table

條紋狀：.table-striped

帶邊框：.table-bordered

緊縮：.table-condensed

鼠標懸停：.table-hover

響應式表格，用於table的父元素：.table-responsive

狀態類

浮動：.pull-left/right、.center-block、.clearfix清除浮動

顯示：.show、.hidden、.invisible

背景：bg-default/primary/success/info/warning/danger

四種屏幕尺寸：lg，mg，sm，xs

大型PC屏幕(Large-lg)；w>1200px；

普通PC屏幕(Medium-md)：992px=<w<1200px

PAD屏幕(Small-sm)：168=<w<991px；

PHONE屏幕(ExtraSmall-xs)：w<767px

柵格佈局：渲染速度快，底層用div+css實現

隨着屏幕/視口尺寸的增長，系統會自動分爲最多12列

使用：

最外層必需是div.container固定寬度或container-fluid寬度100%；柵格佈局能夠嵌套

容器中放置div.row，div.row中放置div.col，內容放置於div.col中

只有column能夠做爲row的直接子元素

列分爲4組：col-lg-* col-md-* col-sm-* col-xs-* *爲1-12數字，表示其跨越的範圍

列向右偏移：調整某一列出現的位置，影響後續的列

col-offset-lg-1/2

列排序：跳轉某一列出現的位置，但不影響後續的列，用於臨時改變列位置

col-md-8 col-md-push-4 推，向右推進4列

col-md-4 col-md-pull-8 拉，向左推進8列

注意不一樣屏幕的列的適用範圍：對更大屏幕有效，對更小屏幕無效

xs：xs/sm/md/lg適用

sm：sm/md/lg

md：md/lg

lg：lg

能夠同時聲明不一樣屏幕列寬：<div class="col-xs-12 col-sm-6">

能夠指定在某屏幕下隱藏hidden-lg/...

能夠自定義修改各種樣式

表單：

單行輸入框/多行文本域：form-control

多選和單選框：內聯多選和單選框

下拉列表：form-control

提示文字：help-block

HTML5規範裏指定checkbox、radio要用label包起來

(1)默認表單

<form>

</div>

<label><input type="checkbox">七天以內自動登陸</label>

</div>

</form>

(2)行內表單

</div>

</form>

(3)水平表單

水平表單要求在一行中有多個元素，它是柵格系統整合表單元素——柵格系統的變種：

.container <=> .form-horizontal

.row <=> .form-group

.col-*-* <=> .col-*-*

</div>

</div>

</div>

</form>

字體圖標：Glyphicons Halflings(收費)；FontAwesome

項目中引入圖表字體對應文件js、css、fonts(和css、js同級目錄)

@font-face{

font-family:xxx;

src:url("../fonts/文件");}

或

不要和其餘組件混合使用；只對內容爲空的元素起做用，定義class

在任何可使用文字的地方均可使用，css控制樣式；字體圖標會繼承樣式

按鈕組：

基本按鈕組：

...同上

</div>

按鈕工具欄：

...同上

</div>

尺寸：.btn-group-lg|sm|xs

兩端對齊：btn-group-justified

垂直排列：btn-group-vertical不能和btn-droup組合

按鈕式下拉菜單：<div class="btn-group">/*下拉菜單內容<button><ul>*/</div>

面板：上中下結構

</div>

.....

</div>

媒體對象：左中右結構

<div class="media-body"><h4 class="media-heading">Media heading</h4></div>

</div>

列表組：

...

</ul>

定製內容：給列表組加入徽章組件，它會被自動放在右邊

路徑/麪包屑導航：

<li class="active">xxx</li> //當前頁

</ol>

徽章：

標籤：

label-default/primary/success/info/warning/danger：灰/藍/綠/淺藍/黃/紅

水井/Well：class="well well-lg/sm" 嵌入inset的簡單效果

巨幕：延伸整個瀏覽器視口來展現網站上的關鍵內容

進度條：

<div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%

</div>

顏色：progress-bar-success/info/warning/danger

條紋：progress-bar-striped

動畫：條紋+active

縮略圖：

</a>

</div>

...

</div>

頁頭：

</div>

分頁條：

<li>

</li>

...

<li>

</li>

</ul>

尺寸：.pagination-lg/sm

分頁器：

<li><a href="#">Previous</a></li>

</ul>

下拉菜單：data-*

<ul class="dropdown-menu">//隱藏菜單

<li class="dropdown-header">...<li>標題

<li class="divider"><li>分割線

<li class="disbled">....<li>禁用

</ul>

</div>

js-api：$("button").dropdown('toggle') data和js-api選一

events:$("button").on(事件,f(){})

事件：

show.bs.dropdown

shown.bs.dropdown

hdie.bs.dropdown

hideen.bs.dropdown

警告框：

<div class="alert alert-success/info/warning/danger alert-dismissable">//淡入淡出：.fade.in

<a href="#" class="alert-link">...</a>//警告框中的連接

//可關閉的警告框，不使用該標籤則div.alert-dismissable不用寫

</div>

摺疊框：

data-toggle="collapse"

data-target="#collapseExample"

<div>

<button data-toggle="collapse in" data-target="#div2" type="button">展開collapse in</button>

....

</div>

工具提示tooltip.js

$(function () {$('[data-toggle="tooltip"]').tooltip()}) //data和函數都必須調用

彈出框：

<p data-toggle="popover" data-placement="bottom" data-content="內容">點擊彈出框</p>

title="標題"

$(function(){$('[data-toggle="popover"] ').popover();}) //data和函數都必須調用

模態框：子窗體不關閉，父窗體不能得到用戶的操做焦點

<button type="button" class="btn" data-toggle="modal" data-target="#id"></button>//或a標籤的href="#id"

<div class="modal fade" id="id"> //半透明的背景層,fade淡入淡出

<div class="modal-dialog"> //定位/寬度

<div class="modal-content"> //背景/邊框/陰影

<div class="modal-header">//頭部

</div>

</div>

標籤頁/導航：nav+

...

</ul>

膠囊式標籤頁：nav nav-pills

垂直標籤頁：nav nav-pills nav-stacked

兩端對齊：nav nav-tabs nav-justified

js-api:$("#mytab a:last").tab("show")

$('#myTab a').click(function (e) {

e.preventDefault()

$(this).tab('show')

})

導航條：navbar

//默認/反色：navbar-default/inverse；相對定位：默認；固定：navbar-fixed-top|bottom；

<img src="">//商標

</a>

<a class="navbar-toggle" data-toggle="collapse" href="#id">//按鈕

<span class="icon-bar"></span>//icon-bar行內塊，顯示，sr-only隱藏/絕對定位

</a>

</div>

</ul>

<form class="navbar-form navbar-left">//導航條表單

<div class="form-group has-feedback">//has-feedback：相對定位

<label class="sr-only" for="kw">請輸入搜索關鍵字</label>

<span class="glyphicon glyphicon-search form-control-feedback"></span>//絕對定位

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<button type="button" class="btn btn-default navbar-btn">導航條按鈕</button>

<p class="navbar-text">導航條文本</p>

<a href="#" class="navbar-link">非導航連接</a>

</div>

</nav>

輪播：

<div class="carousel slide" id="DIV">// data-ride="carousel" data-interval="3000"

</ol>

</div>

</div>

....

</div>

<a class="carousel-control left" href="#DIV" data-slide="prev"> //carousel-control絕對定位

<span class="glyphicon glyphicon-chevron-left"></span> //字體圖標

</a>

</a>

</div>

$('.carousel').carousel({//默認

interval: 5000，

pause："hover"，

wrap：true，

keyboard：true

})

$('#myCarousel').on('slide.bs.carousel', function () {//左右標籤事件

// do something…

})

導航滾動事件：

<div>

<ul class="nav nav-tabs">//導航

</ul>

</div>

</div>

</body>

body {

position: relative;

}

$('body').scrollspy({ target: '.navbar-example' })

bootlint：官方提供的檢測工具，在使用了Bootstrap頁面上，用於自動檢測某些常見的HTML和class錯誤，

/*Bootlint用於檢測文檔中的HTML和Class錯誤*/

(function () {

var s = document.createElement("script");

s.onload = function () {

bootlint.showLintReportForCurrentDocument([]);

};

s.src = "js/bootlint.js";

document.body.appendChild(s)

})();

</script>

插件函數調用：

定義：jQuery.fn.max=function(){}

調用：$("li").max()

bootstrap插件函數調用：

js方式調用：$("a").dropdown()

data-*屬性方式調用：<a data-toggle="dropdown"></a>

底層實現：$('[data-toogle="dropdown"]').click(

function(){$(this).dropdown();

})

無障礙Accessible閱讀：WAI-ARIA標準

role="" HTML5標籤，指定當前元素的實際網頁角色；

aria-*=""

Modernizr是一個用於檢測瀏覽器功能的開源JavaScript，功能檢測

解決老版本的html和css兼容：<script src="js/modernizr.js"></script>

給IE六、七、8 追加min/max媒體查詢功能：

<!--[if lte IE 8]>

<![endif]-->

常見的動態層疊樣式語言：Scss/SCSS；Stylus；Less

Less：可在客戶端瀏覽器上運行，也可在服務端上運行(Node.js、Rhino)

客戶端使用：

服務器端使用：

安裝nodejs解釋器

下載less編譯程序

在命令運行less轉換程序；或者把less轉換程序配置爲WebStorm中的"文件監視器"

cmd：node e:/npm/node_modules/less/bin/lessc e:/1.less e:/1.css

解釋器目標js文件源文件目標文件

node e:/npm/lessc.cmd e:/1.less e:/1.css

webstorm中配置fileWatcher,讓它全部的less文件的修改，當即調用上訴命令行程序進行編譯

Tools——file watchers——+less program:...\npm\lessc.cmd 則編寫less時自動編譯

註釋：//不會轉換到生成的css文件中 /**/會被轉換到生成的css文件

運算，任何數字、顏色、字符串等均可以進行運算：#888/4

變量：@nice-blue: #5B83AD;

@light-blue: @nice-blue + #111; //變量值：全部樣式的值

混合/屬性集合：

①.bordered{...} 技巧：.bordered(){}//less樣式，和css樣式區分

②.bordered(@x:0,@y:0,@blur:1px,@color:#000){

border:@arguments;

border-radius:@blur+1px;}

.box{.bordered(2px,5px);}

③.bordered(@x) when (@x<3px){

border:@w solid #aaa;}

.bordered(@x)when(@x>=3px){...}

.box(.bordered(2px);)

嵌套：

body{

color:#aaa;

.nav{font-size:12px;}

>.logo{ //>子代選擇器

width:300px;

&:hover{text-decoration:none;}//body>.logo:hover

}

函數：

image-width/height("URL")：img{width:image-width(url);}

rgba(red,green,blue,alpha);

hsl(hue,saturation,lightness);

darken(color,num); 顏色變深20%後的值 darken(color.20%)

lighten(color,num); 顏色變淺/亮

ceil(num) 向上取整ceil(970px/3);

floor(num)

max(n1,n2...)

文件導入：

@import "xx.less/xx";

@import "xx.css";不推薦；css也能夠導入，也不推薦

WebApp：網頁應用,網頁版微信,網頁版輕應用，本質java web

jQM：jQuery Mobile Sencha Touch

NativeApp：原生應用，藉助SDK(Software Development Kit)提供的原生組件進行編程生成的安裝包(應用)

apk ipa：android iOS

Hybrid App：混合應用，介於WebApp和NativeApp直接的app,兼具原生開發良好的用戶交互體驗的優點、WebApp跨平臺開發的優點

phoneGap(基於HTML、CSS、JS的快速開發平臺)+jQM

安卓開發環境：

下載並安裝jdk

配置java環境變量

下載adt(Android Developer Tools)

eclipse：

新建WebApp：new——android application project——package name:com.tarena.demo01

建立模擬器（虛擬機）android virtual device manager：

New——名字avd name:text；安卓版本device:4.0 wvga；SD容量sd card:size:512(M)

Details：查看信息

Start：啓動

默認打開頁面:res/layout/activity_main.xml

AndroidManifest.xml包名，版本代碼，版本名稱

permissions使用:add-name-uses permissions用戶權限-name-android permission internet

http://www.androd...工具

優秀的開源項目：

errors：

解決方案：在packageExplorer中，查找X符合定位工廠，找到具體是哪一個文件出了錯，

打開文件，定位具體哪一行出了錯誤

字體：window-preferences-general-appearance-colors....-java-java editor-edit-courier new

src——com.xxx.xxx——xxxx.java配置，使WebView加載html頁面：

package com.example.demo03;

import android.os.Bundle;

import android.app.Activity;

import android.util.Log;

import android.view.Menu;

import android.webkit.WebChromeClient;

import android.webkit.WebView;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//建立WebView組件

//alt+/自動補全會自動import依賴

WebView wv=new WebView(getApplicationContext());

//加載頁面

wv.loadUrl("file:///android_asset/index.html");

//設置wv,讓它執行js

wv.getSettings().setJavaScriptEnabled(true);

wv.setWebChromeClient(new WebChromeClient(){

@Override

@Deprecated

public void onConsoleMessage(String message,int lineNumber,

String sourceID){

super.onConsoleMessage(message, lineNumber, sourceID);

Log.e("test","日誌爲"+message+"行號爲"+lineNumber);

}

});

//將webNiew組件顯示在內容視圖中

setContentView(wv);

// setContentView(R.layout.activity_main);

}

// @Override

// public boolean onCreateOptionsMenu(Menu menu) {

// // Inflate the menu; this adds items to the action bar if it is present.

// getMenuInflater().inflate(R.menu.main, menu);

// return true;

// }

}

AndroidManifest.xml配置：

配置主題：取消標題欄android:theme="@android:style/Theme.NoTitleBar" >

原始主題（默認）：android:theme="@android:style/Theme.NoTitleBar" >

Permissions配置CAMERA和INTERNET

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.CAMERA"/>

android功能目錄：

src 存儲的java（邏輯）

gen 自動生成的(R.java)

assets 將不但願被流處理的文件放到，將前端代碼放到此文件夾

bin 存放的生成的應用安裝包

libs 將封裝好的jar包放到此目錄

res 資源文件(圖標/圖片/佈局文件/菜單/變量)

AndroidManifest.xml版本號的配置、權限的配置、activity

jQM：

引入文件

data-role=」page」 jqm的頁面

data-role=」header」基礎page的頁頭

data-role=」footer」基礎page的頁尾

class=」ui-content」

<a href="#page2">跳轉到page2</a>

<a href="222.html" data-transition="reverse">點擊跳轉到222.html</a>

<button onclick="$.mobile.changePage('222.html')">點擊跳轉到222.html</button>

data-role=」page」 id=」page2」 id可用a href=」#page1」跳轉

class=」ui-content」

<a href="" data-rel="back">返回上一頁</a>

多頁面跳轉

href="#id"

href="**.html"

js：$.mobile.change(‘xxx.html’)

轉場transitions/跳轉動畫

data-transition="reverse"

js：$.mobile.changePage(‘**.html’,{‘transition’:’slide’})

返回上一頁

data-rel=」back」

頁面主題data-theme="a"

stackoverflow.com

如何申請雲服務器，得到免費的域名:

新浪雲帳號登錄，新建Web應用，申請免費二級域名

登錄Web應用，上傳本身網站代碼，

使用PC/手機遠程訪問雲服務器應用

微信開發：https://open.weixin.qq.com

用途：移動應用調用微信開發接口，網站調用，公衆帳號(服務號/訂閱號/企業號);

9大接口：語音識別接口，客服接口，OAuth2.0網頁受權接口，生成帶參數的二維碼接口，獲取用戶地理位置接口，獲取關注者列表接口，用戶分組接口，上傳下載多媒體文件接口

商業化微信開發要求必須使用一級域名，測試時可用SAE提供免費二級域名

二級域名：

郵箱——微博帳號

——申請主機空間SAE：Sina App Engine支持MySQL、PHP的Web應用(http://sae.sina.com.cn)

——應用->代碼管理Git/SVN工具上傳代碼(需安裝客戶端SVN)

——WebStorm檢出服務器上項目文件

——設置域名解析服務器,SQL鏈接第一個參數改成網絡sql地址

——訪問二級域名

一級域名（商業化）：

註冊公衆平臺帳號https://mp.weixin.qq.com

——設置公衆號，JS接口安全域名(域名必須是一級域名且經過ICP備案)

——申請開發者後，得到AppID(應用ID)和AppSercret(應用祕鑰，惟一)

微信網頁開發工具包JS-SDK(拍照，選圖，語音，位置，分享，掃一掃，卡券，支付等功能)

使用：綁定域名——引入JS文件——經過config接口注入權限驗證配置——ready接口處理成功驗證——error接口處理失敗驗證

地理位置接口：

使用微信內置地圖：

wx.openLocation({

latitude:0, //緯度，浮點數，90~-90

longitude:0, //經度，浮點數，180~-180

name:'', //位置名

address:'', //地址詳情說明

scale:1, //地圖縮放級別，整形值，1~28,，默認最大

infoUrl:'' //在查看位置界面底部顯示的超連接，可點擊跳轉

});

獲取地理位置接口：

wx.getLocation({

type:'wgs84',

success:function(res){

var lat=res.latitude; //緯度，90~-90

var lon=res.logitude; //經度，180~-180

var speed=res.speed; //速度，以m/s計

var accuracy=res.accuracy; //位置精度

}

});

圖像接口：

拍照/手機相冊中選圖接口：

wx.chooseImage({

count:1,

sizeType:['original','compressed'], //原圖/壓縮圖

sourceType:['album','camera'], //相冊/相機

success:function(res){

var localIds=res.localIds;

}

});

上傳圖片接口：

wx.uploadImage({

lovalId:'', //須要上傳的圖片的本地ID

isShowProgressTips:1, //默認爲1，顯示進度提示

success:function(res){

var serverId=res.serverId; //返回圖片的服務器端ID

}

});

小技巧：

box-sizing:border-box/content-box;高度和寬度，在高度寬度內繪製內邊距，邊框/默認，在高度寬度以外繪製元素的內邊距、邊框

js控制Transition動畫：

css3 transition，css3 Keyframes，js/jQuery1/2定時器動畫，requestAnimationFrame技術jQuery3

transition: box-shadow 250ms linear;

@import{}

@font-face { /*CSS指令：建立一個新的字體*/

font-family: 'FontAwesome';

src: url('fonts/fontawesome-webfont.ttf'),url('fonts/fontawesome-webfont.eot'),url('fonts/fontawesome-webfont.ttf');

}

使用服務器端字體：FontAwesome

#box {

font-family: "FontAwesome";

color: red;

font-size: 10em;

}

box.innerHTML = '\uf002 \uf122';

#control-container span {

font-family: "FontAwesome";

}

#control-container span:before {

content: '\f002';

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。