前端学习(八)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/阿里妈妈图标
前端学习(八)sass和bootstrap(笔记)的更多相关文章
- 前端学习(七)less(笔记)
less---处理器:koala_2.0.4_portable 属于css预处理语言,可以让你的css语言更有逻辑性! 编译css的! 准备工作: 1.项目: js ...
- 前端学习(二)css样式笔记(笔记)
background-image:url(img/xiaofeiji.jpg)背景图:url(图片路径):(背景图默认平铺) background-repeat:repeat-x/repeat-y/n ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图
技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
随机推荐
- http请求访问响应慢问题解决的基本思路
第一步,检查网络 ping命令检查网络域名解析是否正常,ping服务器的延迟是否过大,如果过大可以检查Ip是否冲突,或者交换机网线是否正常插好,通过nmon还可以查看网络流量,一般用的千兆交换机理论速 ...
- 简单递归____Fibonacci数列
#include <stdio.h> int fun(int x) { ||x==) ; else return fun(x-1)+fun(x-2); } int main() { int ...
- 笔记72 高级SSM整合
遇到的问题: 1.进行spring mvc测试的时候报错 测试代码: package com.li.test; import com.github.pagehelper.PageInfo; impor ...
- java延迟队列
大多数用到定时执行的功能都是用任务调度来做的,单身当碰到类似订餐业务/购物等这种业务就不好处理了,比如购物的订单功能,在你的订单管理中有N个订单,当订单超过十分钟未支付的时候自动释放购物车中的商品,订 ...
- 小白jquery横向菜单弹出菜单制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 转载 Struts2的配置 struts.xml Action详解
在学习struts的时候,我们一定要掌握struts2的工作原理.只有当我们明确了在struts2框架的内部架构的实现过程,在配置整个struts 的框架时,可以很好的进行逻辑上的配置.接下来我就先简 ...
- 斯特林数&斯特林反演
第一类斯特林数 定义 第一类Stirling数\(s(n,m)\),也可记为\(\begin{bmatrix}n\\m\end{bmatrix}\). 第一类Stirling分为无符号第一类Stirl ...
- 【leetcode】901. Online Stock Span
题目如下: 解题思路:和[leetcode]84. Largest Rectangle in Histogram的核心是一样的,都是要找出当前元素之前第一个大于自己的元素. 代码如下: class S ...
- RBAC权限设计(一)
序言 RBAC表结构 用户表 角色表 权限表 用户角色(关系)表 角色权限(关系)表 sql脚本 /* Navicat MySQL Data Transfer Source Server : 127. ...
- Alpha冲刺阶段博客目录
Alpha冲刺阶段博客目录 Scrum Meeting 时间 链接 内容 第六周 https://www.cnblogs.com/error0/p/11815255.html 需求分析 第七周 htt ...