筆記壓縮力學(xué)day

1、Bootstrap 階段項(xiàng)目：day01:am：響應(yīng)式布局 pm：細(xì)節(jié)內(nèi)容day02:am：Less 語(yǔ)言pm：定制el 項(xiàng)目中的 Bootstrap如何實(shí)現(xiàn) Bootstrap 樣式定制編寫自定義的 css，覆蓋 bootstrap.css 中提供的樣式：產(chǎn)生大量的冗余/無(wú)用代碼直接修改 bootstrap.css 文件：任務(wù)量太大！CSS 通病修改 Bootstrap 開(kāi)發(fā)者編寫的 Bootstrap 源代碼bootstrap.less：滅有！2.動(dòng)態(tài)樣式語(yǔ)言CSS：靜態(tài)樣式語(yǔ)言，作為一門語(yǔ)言并不稱職！缺少一般語(yǔ)言必需的基本要素：變量、運(yùn)算、循環(huán)/選擇、函數(shù)等，導(dǎo)致了CSS 代碼的修改和非

2、常麻煩。動(dòng)態(tài)樣式語(yǔ)言：在 CSS 的基礎(chǔ)之上，添加了動(dòng)態(tài)語(yǔ)言所必需的元素，如變量、運(yùn)算、循環(huán)/選擇、函數(shù)等，方便樣式文件的修改和。注意：瀏覽器默認(rèn)只能處理靜態(tài)樣式語(yǔ)言，所有的動(dòng)態(tài)樣式語(yǔ)言必需設(shè)法轉(zhuǎn)換為 CSS 才能被瀏覽器所理解！這個(gè)轉(zhuǎn)換操作稱為“編譯”。常見(jiàn)的動(dòng)態(tài)樣式語(yǔ)言：(1)Sass/SCSS (2)Stylus (3)LessLess 的使用是一種 動(dòng)態(tài) 樣式 語(yǔ)言.LESS 為 CSS 賦予了動(dòng)態(tài)語(yǔ)言的特性，如 變量， 繼承， 運(yùn)算， 函數(shù)。 LESS 既可以在 客戶端 上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可以借助 Node.js 或者Rhino 在服務(wù)端

3、運(yùn)行。運(yùn)行方式 1：在客戶端運(yùn)行Less 轉(zhuǎn)換程序了解在 HTML 中引入xx.less，同時(shí)再引入一個(gè) less.js就是一個(gè)可以運(yùn)行在客戶端瀏覽器中的 less 編譯程序效率太低，不使用。(2)運(yùn)行方式 2：在服務(wù)器端運(yùn)行Less 轉(zhuǎn)換程序步驟：1)2)并安裝一款服務(wù)器端的 JS 解釋器NodeJS 或者Rhinoless 文件的轉(zhuǎn)換程序（piler）一個(gè) JS在服務(wù)器端JS 解釋器中運(yùn)行 lessc 轉(zhuǎn)換器，把自己編寫的.less 文件轉(zhuǎn)換為.css 文件方式 1：可以在命令行中使用轉(zhuǎn)換程序 node.exe lessc my.less my.css方式 2：可以在WebStorm 中使

4、用轉(zhuǎn)換程序4)繼續(xù)編寫 HTML 文件，編譯得到的.css 文件即可。Less 語(yǔ)法學(xué)習(xí)Less 完全支持CSS 的所有語(yǔ)法Less 支持單行和多行注釋，但只有多行注釋會(huì)被轉(zhuǎn)換到 css 文件中Less 支持變量(Variable)語(yǔ)法：變量名: 值;使用：.class 樣式： 變量名; Less 支持樣式混合(Mixin)在一個(gè)樣式中混入另一個(gè)樣式語(yǔ)法： .class1 . .class2.class1;.帶參混合語(yǔ)法： .class1(參數(shù) 1, 參數(shù) 2, .) . .class2.class1(值 1， 值 2, .);.嵌套規(guī)則語(yǔ)法：.class1 .class2 . 轉(zhuǎn)換的結(jié)果：

5、.class1 . .class1 .class2 . Less 可以對(duì)變量、常量進(jìn)行算術(shù)運(yùn)算語(yǔ)法： 變量/值 +-*/ 變量/值Less 為樣式提供了幾十個(gè)應(yīng)用函數(shù)lighten(顏色，亮度值)：將指定的顏色變亮指定的百分比 darken(顏色，亮度值)：將指定的顏色變暗指定的百分比 floor(數(shù)字)：對(duì)數(shù)值進(jìn)行下取整IKOR 數(shù)字 ：對(duì)數(shù)值進(jìn)行上取整 頁(yè)面導(dǎo)入盡量避免使用)99 文件中的&OSVUXZ 指令會(huì)增加 .:6 請(qǐng)求次數(shù)；為了可以將一個(gè)樣式文件拆分為多個(gè)小的樣式文件，由多人同時(shí)編寫，可以使用 2+99 中的&OSVUXZRKYY 中導(dǎo)入其他 RKYY 文件，轉(zhuǎn)換時(shí)會(huì)拼接為一個(gè)大

6、的完整的 )99 樣式文件，故其他的 2KYY 文件。語(yǔ)法： &OSVUXZ RKYY ! &OSVUXZ _ !在 2KYY 中&OSVUXZ#示例：大型項(xiàng)目中的 RKYY 文件結(jié)構(gòu)#GXOGHRKY RKYYSOOT RKYY XKYKZ RKYY TGHGX RKYY LUUZKX RKYY PJ RKYY #$放置所有的變量放置所有的混合放置 .:32 元素重置樣式導(dǎo)航條相關(guān)樣式頁(yè)腳相關(guān)樣式PY 總樣式文件 一大堆&OSVUXZ# 通過(guò)修改(UUZYZXGV 的 2KYY 源文件實(shí)現(xiàn)樣式定制定制的目標(biāo)： 刪除不需要的樣式，如輪播、模態(tài)框 在HUUZYZXGV RKYY 文件中，注釋掉不需要的&OSVUXZ 即可。 定制需要的組件的默認(rèn)樣式，如修改導(dǎo)航條的默認(rèn)背景色修改GXOGHRKY RKYY 文件中的變量即可。 在 (UUZYZXGV 提供的默認(rèn)樣式