前端學習(八)sass和bootstrap(筆記)


less

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

sass功能更多一點

1.定義一個變量

$b:blue;

div{width:100px;height:100px; background:$b;}

2.運算


div{width:100px*2;height:100px+100px; background:$b;border-left:(10px/2-4px) solid #000;}

3.嵌套
(和less一某一樣)


4.偽類
(和less一某一樣)

5.代碼的重用


6.定義一個選擇器
======================================================

---------------------
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是外網,網速慢
              2.網速慢

失敗解決方法:(為了解決下載慢)
使用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.不能按照設計圖百分百還原!(模樣單一)
    2.太大,框架多,代碼多,---資源多!

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

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

定制:就是直接從官網上找模板

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


======================================================    

css框架!

里面已經給你寫好css和js


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM