less的安裝需要node.js和npm支援，首先安裝他們。
brew install node //通過homebrew安裝
//檢視是否安裝成功
node -v
npm -v
npm install -g less //全域性安裝，這樣就可以在任意地方編譯css#編譯less
$ lessc styles.less
#編譯css到乙個檔案
$ lessc styles.less styles.css
柵格布局，根據螢幕解析度確定佔幾個格仔。
如果col佔12，col-lg佔3，col-md佔4，col-sm佔6。
class="container">
class="row">
class="content col-12 col-lg-3 col-md-4 col-sm-6">
內容div>div>
class="content col-12 col-lg-3 col-md-4 col-sm-6">
內容div>div>
class="content col-12 col-lg-3 col-md-4 col-sm-6">
內容div>div>
class="content col-12 col-lg-3 col-md-4 col-sm-6">
內容div>div>
class="content col-12 col-lg-3 col-md-4 col-sm-6">
內容div>div>
class="content col-12 col-lg-3 col-md-4 col-sm-6">
內容div>div>
class="content col-12 col-lg-3 col-md-4 col-sm-6">
內容div>div>
class="content col-12 col-lg-3 col-md-4 col-sm-6">
內容div>div>
div>
div>
1、使用css同名類覆蓋
- 在style檔案裡修改樣式
- 缺點：修改的樣式可能會很多，顏色之間沒有計算關係
2、修改原始碼重新構建
修改bootstrap原始碼再構建css
3、引用 scss 原始檔修改變數
$primary: green;
@import
'./bootstrap-custom/scss/bootstrap';
優點：css **結構合理現成的樣式，可以直接用
缺點：定製較為繁瑣體積大
2、bootstrap如何實現響應式布局
原理：通過media query設定不同解析度的class
使用：為不同解析度選擇不同的網格class
3、如何基於bootstrap定製自己的樣式
使用css同名類覆蓋
修改原始碼重新構建
引用scss原始檔修改變數
組織、優化、構建、維護- postcss本身只有解析能力
- 各種神奇的特性全靠外掛程式
- 目前至少有 200 多個外掛程式
相關外掛程式
- import 模組合併
- autoprefixier 自動加字首
- cssnano 壓縮**
- cssnext 使用css新特性
- precss 變數、mixin、迴圈等
核心思想
- js 是整個應用的核心入口
- 一切資源均由 js 管理依賴
- 一切資源均由 webpack 打包
相關外掛程式
- css-loader 將css變成js
- style-loader 將js樣式插入head
- extracttextplugin 將 css 從 js 中提取出來
- css modules 解決 css 命名衝突的問題
- less-loader sass-loader 各類預處理器
- postcss-loader postcss處理
1、如何解決css模組化問題
- less sass 等css預處理器
- postcss 外掛程式（postcss-import/precss等）
- webpack 處理css(css-loader + style-loader)
2、postcss 可以做什麼
- 取決於外掛程式可以做什麼
- autoprefixer cssnext precss 等相容性處理
- import 模組合併
- css 語法檢查相容性檢查
- 壓縮css檔案
3、css modules是做什麼的，如何使用解決類名衝突的問題
- 使用postcss或者webpack等構建工具進行編譯
- 在html模板中使用編譯過程產生的類名
4、為什麼使用 js 來引用、載入 css
- js作為入口，管理資源有天然優勢
- 將元件的結構、樣式、行為封裝到一起增強內聚
- 可以做更多處理（webpack)
詳解CSS應用（二）
1.布局 class left 左td class right 右td tr table 隱蔽的 布局 margin top 20px display table width 800px height 200px table row table cell class table class tabl...
詳解css 定位與定位應用
原文 定位的定義 在css中關於定位的內容是 position relative absolute static fixed static 沒有特別的設定，遵循基本的定位規定，不能通過z index進行層次分級。relative 不脫離文件流，參考自身靜態位置通過 top,bottom,left,r...
css動畫特效的應用詳解
動畫 定義動畫關鍵幀方案 keyframes 動畫名0 to 100 animation name 設定動畫關鍵幀 名稱 animation name move animation duration 2s 動畫完成後的停止位置 backwards forwards animation fill mo...