前端学习(八)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/阿里妈妈图标