(17.04.06)sass、npm、bootstrap、框架和組件

sass 和less基本上70%差不多(書寫方式不一樣)

sass功能更多一點

  1. 定義一個變量
$b:blue;
div{width:100px;height:100px; background:$b;}
  1. 運算
div{width:100px*2;height:100px+100px; background:$b;border-left:(10px/2-4px) solid #000;}
  1. 嵌套
    (和less一某一樣)
  1. 偽類
    (和less一某一樣)

  2. 代碼的重用

  1. 定義一個選擇器

npm --包管理工具!

npm--全稱: Node Package Manager

nodeJS管理器

npm咋用?---從國外的服務器上下載你需要的文件(代碼的框架)

步驟:
    1.下載找一個包管理器:
        npm nodeJS

    2.指定下載到某一個文件夾:
        默認c/...

        切換盤:E: 回車
        進入文件:cd 文件名

        下載(在命令行):npm install bootstrap@1.7.3

        簡寫:npm i bootstrap@1.7.3    

    注意:有時候會下載失?。?        原因:1.npm是外網(wǎng),網(wǎng)速慢
              2.網(wǎng)速慢

失敗解決方法:(為了解決下載慢)
使用cnpm!

cnpm(阿里巴巴鏡像(http://npm.taobao.org/)---通過這里下載)
    
---從一個服務器(npm)鏡像到另一個服務器(cnpm)里面 
安裝一下:
    步驟:
        1.在命令行輸入:
            npm install -g cnpm --registry=https://registry.npm.taobao.org

        2.cnpm install bootstrap


Bower !---

bootstrap

缺點:
1.不能按照設計圖百分百還原?。訂我唬?br> 2.太大,框架多,代碼多,---資源多!

優(yōu)點:
1.大,全,功能不用自己寫!
2.可以快速寫一個頁面!

注意:
以下實例全部基于前面所講的基本模板并配合 Bootstrap 的眾多組件開發(fā)而成。我們鼓勵你根據(jù)自身項目的需要對 Bootstrap 進行定制和修改。

定制:就是直接從官網(wǎng)上找模板

修改:直接修改這寫模板(30%-背景色-字體顏色-寬高-距離)


css框架!

里面已經(jīng)給你寫好css和js

組件:
Glyphicons 字體圖標---http://www.iconfont.cn/阿里媽媽圖標

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容