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/阿里妈妈图标

前端学习(八)sass和bootstrap(笔记)的更多相关文章

  1. 前端学习(七)less(笔记)

    less---处理器:koala_2.0.4_portable 属于css预处理语言,可以让你的css语言更有逻辑性! 编译css的! 准备工作:    1.项目:        js         ...

  2. 前端学习(二)css样式笔记(笔记)

    background-image:url(img/xiaofeiji.jpg)背景图:url(图片路径):(背景图默认平铺) background-repeat:repeat-x/repeat-y/n ...

  3. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  4. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  5. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  6. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

  7. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  8. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  9. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

随机推荐

  1. sql查询静态数据

    select * from ( ,,,'高中')) AS Education ( EducationId,EducationName )

  2. js 在array的遍历操作中修改arry中元素数量 出现的一些奇特的操作

    在js中array是属于复杂类型,在arr1=arr2得赋值操作中,arr1得到的值并不是arr2的value,而是一个指向引用.那么修改arr1的同时arr2读取的值也会同步变化,那么问题来了,上代 ...

  3. KVM主机迁移

    目录 新主机kvm初始环境的部署 I.检查主机cpu是否支持虚拟化 II.宿主机软件安装 III.检查kvm模块是否加载 IV.网桥的搭建 V.查看宿主机网络 迁移kvm主机数据 I.查看宿主机上现有 ...

  4. CascadeCNN人脸检测结构

    模型的结构大致由图可以完整展现,三个分类是否人脸的12.24.48net,再加上三个用于修正预测框的分类网络: 这三个分类是否人脸的网络,结构逐渐变复杂, 由上图可以看出,前2阶的网络都非常简单,只有 ...

  5. Java:新建数组

    Array Initialization int[] a; = int a[]; int[] a = new int[100]; a[]的值会被初始化为0 `int[] smallPrimes = { ...

  6. 测试demo controllerweb.xml

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  7. python字符转化

    int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x) 将x转换到一个浮点数 complex(real [,imag ]) 创建一 ...

  8. vue 前后端数据交互问题解决

    先在vue项目中配置好路由组件路由 然后写相应组件 2 后端 写接口赔路由 第三  解决跨域问题 处理数据交互 这样前端就拿到了数据

  9. 【纪中集训】2019.08.01【NOIP提高组】模拟 A 组TJ

    T1 Description 给定一个\(N*N(N≤8)\)的矩阵,每一格有一个0~5的颜色.每次可将左上角的格子所在连通块变为一种颜色,求最少操作数. Solution IDA*=启发式迭代加深 ...

  10. python--生成器、三元表达式、列表解析、生成器表达式

    补充: 在文件开头声明一个空字典,然后在每个函数前加上装饰器,完成自动添加到字典的操作 func_dic={} def make_dic(key): def deco(func): func_dic[ ...