编译Bootstrap,定制自己的模板
完全不懂LESS,也懒的去学习它,凭多年的经验,感觉也不用专门花时间去学习了。反正它应该是很成熟的,能执行即可。
我用的是WIN7,为了定制颜色等各种特性,需要重新编译Bootstrap。
在网上到处中,也没有一个完整的说明,试验了几次,到处问问题,最后终于搞定了,记录如下:
1、下载安装nodejs。
在其官方网站上,下载LTS版本,双击安全即可。
我安装到了D:\front\soft目录下。(很讨厌默认的那个所谓的Programe Files目录)
CMD下执行:node -v,显示v.4.2.2。安好了
2、安装Git。
同样,官网下载了,双击安装。中间一个环节,记得要选择其能在CMD下执行(就是第2个选项)。
3、安装grunt。
在CMD中(nodejs安装目录下)执行:
安装grunt:npm install grunt --save
安装其cli: npm install -g grunt-cli (-g是为了便于全局操作,在安装grunt时也可以用这个参数,我没用貌似也能全局操作,不知道为啥。)
4、下载bs。
随便找个目录,执行:npm install bootstrap,这就在当前目录下下载了最新版本的BS,处于node_modules下面
5、安装BS用的组件。
进入刚刚下载的目录:node_modules\bootstrap
执行:npm install
这个环节要等很长时间,npm会依次下载需要的组件,N多。
6、编译BS。
在node_modules\bootstrap目录下,执行:
grunt dist
即编译BS了。
编译Bootstrap,定制自己的模板的更多相关文章
- Bootstrap定制(一)less入门及编译
第一篇博,希望支持. 近期在开发一个项目,项目前端定位于bootstrap,遂花了少许时间研究了bootstrap,将其整理整理,与众人共享. bootstrap官方的定制,功能还算完善,但是基于we ...
- BOOTSTRAP定制
1.补充:栅格系统中调整列的位置/顺序 (1)方法1:偏移量(col-*-offset-*) (2)方法2:对列进行push/pull操作 col-lg-pull-1 ~ ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- SharePoint 2013 定制搜索显示模板(二)
前言 之前一篇博客,简单的介绍了如何定制搜索显示模板,这一次,我们介绍一下如何定制搜索显示时,弹出来的那个页面,相信这个大家也都会遇到的. 1.第一部分就是搜索显示模板的部分,第二部分就是搜索项目详情 ...
- SharePoint 2013 定制搜索显示模板
前言 之前我们已经介绍了一些关于搜索的相关配置,当然,用户关于搜索的要求可能是各种各样.有时候,用户会说,你们的显示结果太Low了,确实是:不过,在SharePoint中,我们可以很容易的定制搜索结果 ...
- Bootstrap 引用的标准模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Bootstrap定制开发
Bootstrap作为目前很受欢迎的前端框架,越来越多的网站开始使用基于Bootstrap框架进行开发. 1.定制开发方法 (1)Bootstrap定制开发可以使用LESS和Grunt实现定制化 (2 ...
- Mac系统使用VS Code编译Bootstrap 4
环境: macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 Bootstrap3为我们提供了在线编译工具,可 ...
- 记一个bootstrap定制container导致页面X轴出现横向滚动条的坑
壹 ❀ 引 在bootstrap定制时,因为UI给的图纸的页面主体部分宽度为1200px,所以我将container容器宽度从默认的1170px改成了1200px,随后在页面缩小的调试过程中发现了页 ...
随机推荐
- OC 三方框架 - SDWebImage
内部实现原理: 1. 下载图片 缓存, 并且需要下载进度 2. 下载图片 : 3.不需要缓存处理的下载 4. 使用GIF 图片使用:图片名字不要加上 .gif 因为内部已经做过处理了 GIF 内部实现 ...
- [leetcode]158. Read N Characters Given Read4 II - Call multiple times 用Read4读取N个字符2 - 调用多次
The API: int read4(char *buf) reads 4 characters at a time from a file. The return value is the actu ...
- 源码安装php时出现configure: error: xml2-config not found. Please check your libxml2 installation
1.检查是否安装了libxml 包 > rpm -qa|grep libxml2 2.如果没有则安装 > yum install libxml2 > yum install libx ...
- 安全运维 -- Linux服务器使用公私钥密匙证书登录
环境:Ubuntu 16 前言 黑客遍地都是,ssh/pop3/ftp等爆破工具的流行让站长的日常运维工作量大大加重.Metasplot,Bruter等工具更是针对以上协议有专门 的破解方法,有字典破 ...
- sqlserver 日期格式化
Sql Server 中一个非常强大的日期格式化函数Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect CONVE ...
- PM2使用及介绍
pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的.它非常适合IaaS结构,但不要把它用于 ...
- JDK 泛型之 Type
JDK 泛型之 Type 一.Type 接口 JDK 1.5 引入 Type,主要是为了泛型,没有泛型的之前,只有所谓的原始类型.此时,所有的原始类型都通过字节码文件类 Class 类进行抽象.Cla ...
- JVM 系列(一)类加载
JVM 系列(一)类加载 类加载机制是指把 class 文件加载到内存,并对数据进行校验.解析和初始化,最终形成 JVM 可以直接使用的 Java 类型的过程. ClassLoader 加载一个 cl ...
- process_进程池_2
import multiprocessingimport os, time, random def Lee(): print("\nRun task Lee-%s" %(os.ge ...
- 20155317 王新玮 2016-2017-2 《Java程序设计》第9周学习总结
20155317 王新玮 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以 ...