编译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,随后在页面缩小的调试过程中发现了页 ...
随机推荐
- goim源码分析与二次开发-comet分析二
这篇就是完全原版了,作为一个开始,先介绍comet入口文件main.go 第一步是初始化配置,还有白名单.还有性能监口,整体来说入口代码简洁可读性很强 然后开始初始化监控,还有bukcet这里buck ...
- Java中Generics的使用
1.Java的Generics与C++的Template由于Java的Generics设计在C++的Template之后,因此Java的Generics设计吸取Template的很多经验和教训.首先, ...
- 【英宝通Unity4.0公开课学习 】(一)资源管理
经过多次面试后发现自己对Unity3D的框架缺乏一个整体的认识. 而前面由于离职等原因总是忙于修修补补,疲于奔命,感觉相当疲惫. 还好,后来经过调整,开始淡定了起来.得特别感谢一本书哇:<高效人 ...
- 对象导航查询和OID查询(补)
----------------siwuxie095 对象导航查询 以客户和联系人为例(一对多) 1.应用场景 ...
- N皇后问题12 · N-Queens
[抄题]: n皇后问题是将n个皇后放置在n*n的棋盘上,皇后彼此之间不能相互攻击. 给定一个整数n,返回所有不同的n皇后问题的解决方案. 每个解决方案包含一个明确的n皇后放置布局,其中“Q”和“.”分 ...
- [leetcode]680. Valid Palindrome II有效回文II(可至多删一原字符)
Given a non-empty string s, you may delete at most one character. Judge whether you can make it a pa ...
- nginx安装及基础配置(含jdk安装及配置)
0.jdk安装配置 #下载相应的jdk软件包,然后解压安装,我这里包名称为:jdk-7u25-linux-x64.tar.gz tar -xzf jdk-7u25-linux-x64.tar.gz m ...
- Django之XSS攻击
一.什么是XSS攻击 xss攻击:----->web注入 xss跨站脚本攻击(Cross site script,简称xss)是一种“HTML注入”,由于攻击的脚本多数时候是跨域的,所以称 ...
- JDK和Eclipse的下载路径
JDK http://www.oracle.com/technetwork/java/javase/downloads/index.html Eclipse http://www.eclipse.or ...
- how to enable the Accessibility in the app
第一部分 先要装一个accchecker,全称是 UI Accessibility Checker .下载地址: http://acccheck.codeplex.com/ 装了之后 用这个工具可以 ...