Bootstrap4 本地编译运行
Step1. 获取Bootstrap源代码
https://github.com/twbs/bootstrap
Step2. 进入目录并切换npm源
npm --registry https://registry.npm.taobao.org // 淘宝镜像
npm config get registry // 查看当前镜像
换源是为了避免天朝防火墙及网速等导致部分资源无法成功下载,例如hugo可能就一直卡住,最后出现问题:
npm ERR! bootstrap@4.3.1 docs-build: `hugo --cleanDestinationDir`
安装完成后,再安装Ruby[我安装的是Ruby+Devkit 2.6.5-1(*64)],安装Ruby的原因是运行scss需要Ruby环境~
Step3. 安装Ruby
下载地址:https://rubyinstaller.org/downloads/
右边英文我翻译下:
要下载哪个版本?
如果您不知道要安装哪个版本,并且开始使用Ruby,建议您使用Ruby + Devkit 2.6.X(x64)安装程序。它提供了最多数量的兼容gem,并与Ruby一起安装了MSYS2-Devkit,因此可以立即编译具有C扩展名的gem。仅当必须使用自定义32位本机DLL或COM对象时,才建议使用32位(x86)版本。

然后安装:

不要问我下面那个895M的要不要勾,也不要去百度勾不勾,勾就完事了,反正公司电脑内存大~,不选可能导致以后少这少那的
,又不能保证以后会不会出现缺少包等问题,出了问题又得去百度,百度又不一定能很快找到答案,就是勾 
安装Ruby后,会出现一个黑窗:
继续翻译下:
Which components shall be installed? If unsure press ENTER []
应安装哪些组件?如果不确定,请按ENTER[]
个人建议继续按回车,反正公司电脑内存大~,不选可能导致以后少这少那的 
然后可以摸会鱼,需要点时间
,安装完成后也会出现这行提示,回车就正式安装完成了,黑窗口自动关闭

Step4. 进入项目目录安装捆绑机
gem install bundler
bundle install
这个我也不知道为什么要安装,文档上这么写的: https://www.php.cn/manual/view/34065.html 

然后运行到一半就挂了
,此时原因是防火墙~,
出错:(找不到Gemfile文件)
Could not locate Gemfile
解决:(重新生成一个Gemfile文件)
bundle -h
bundle init
Step5. OK
此时可以运行package.json里的各种命令了
,先试下github bootstrap第二个命令【测试】,试下能不能正常运行:
npm run test

此时一片代码哗啦啦的往上飘 
运行结果:

Java is missing是不是似曾相识
,我继续翻译下:
正在跳过vnu jar测试;缺少Java。
在4.708秒内成功扫描了481个链接。
缺少Java环境,还是老老实实敲代码吧~
npm start // 这次摸着良心和你说绝对有用!

ok了,现在可以在编译运行敲代码了, //
看着我的表情~
先在\scss\_nav.scss试试:将paddind-left改成9990px,然后保存

接着下面又是一片代码飘过~,然后去dist/css/bootstrap.css里面看下有没有变化:(记得ctrl+f查找nav)

完成,搞定~
(这表情绝对绝对没恶意,,)
.
Bootstrap4 本地编译运行的更多相关文章
- Saiku本地编译运行后Debug调试(十二)
Saiku源码拉下来在本地编译通过,然后想进行单元测试 发现不知道怎么写测试类了... 幸好有同事大佬的帮助,教了一招哈哈哈哈... 1.将本地编译通过的Saiku打包好(mvn clean inst ...
- 【git】Github上面的开源代码怎么在本地编译运行
最近才发现Github是一个好东西,可以从上面学到很多东西,不说了,赶快写完去学习去... 1.首先你可以看看这个开源项目的README.md,一般一般这里都会有项目的使用方式以及一些注意的点 2.你 ...
- EditPlus远程编辑、语法高亮、编译运行源代码设置
最近写代码的过程中,除了写Java时用的Eclipse.在Linux下编辑的Vi之外,有时也会用EditPlus打开一些文件,如配置文件.日志文件.脚本等.个人觉得EditPlus在很多场景下比较好用 ...
- Form_Form Builder本地部署运行的实现(案例)
2014-08-09 Created By BaoXinjian
- 使用Eclipse编译运行MapReduce程序 Hadoop2.6.0_Ubuntu/CentOS
使用Eclipse编译运行MapReduce程序 Hadoop2.6.0_Ubuntu/CentOS 2014-10-10 (updated: 2016-05-22) 64246 153 本教程介绍 ...
- 《Flink 源码解析》—— 源码编译运行
更新一篇知识星球里面的源码分析文章,去年写的,周末自己录了个视频,大家看下效果好吗?如果好的话,后面补录发在知识星球里面的其他源码解析文章. 前言 之前自己本地 clone 了 Flink 的源码,编 ...
- JAVA 基础开发环境 vscode 搭建 Windows下VSCode编译运行简单java
JAVA 基础开发环境 vscode 搭建 来源 https://www.cnblogs.com/freewsf/p/7744728.html 对于使用 Visual Studio Code 的 Ja ...
- 1 开发一个注重性能的JDBC应用程序不是一件容易的事. 当你的代码运行很慢的时候JDBC驱动程序并不会抛出异常告诉你。 本系列的性能提示将为改善JDBC应用程序的性能介绍一些基本的指导原则,这其中的原则已经被许多现有的JDBC应用程序编译运行并验证过。 这些指导原则包括: 正确的使用数据库MetaData方法 只获取需要的数据 选用最佳性能的功能 管理连
1 开发一个注重性能的JDBC应用程序不是一件容易的事. 当你的代码运行很慢的时候JDBC驱动程序并不会抛出异常告诉你. 本系列的性能提示将为改善JDBC应用程序的性能介绍一些基本的指导原则,这其中的 ...
- Flink 源码解析 —— 源码编译运行
更新一篇知识星球里面的源码分析文章,去年写的,周末自己录了个视频,大家看下效果好吗?如果好的话,后面补录发在知识星球里面的其他源码解析文章. 前言 之前自己本地 clone 了 Flink 的源码,编 ...
随机推荐
- 使用Python为中秋节绘制一块美味的月饼
每逢佳节- 对于在外的游子,每逢佳节倍思亲.而对于996ICU的苦逼程序猿们,最期待的莫过于各种节假日能把自己丢在床上好好休息一下了.这几天各公司都陆续开始发中秋礼品了.朋友圈各种秀高颜值的月饼,所以 ...
- MySQL必知必会(数据分组,Group by和Having子句, Select子句的顺序)
SELECT vend_id, COUNT(*) AS num_prods FROM products #GROUP BY子句可以包含任意数目的列,多行NULL值将分为一组 GROUP BY vend ...
- 使用Docker测试静态网站
参考书籍 :第一本docker书[澳]James Turnbull 1.Sample网站的初始Dockerfile 文件目录如下: Dockerfile文件代码: 安装nginx 在容器中创建一个目 ...
- Java并发编程系列-(3) 原子操作与CAS
3. 原子操作与CAS 3.1 原子操作 所谓原子操作是指不会被线程调度机制打断的操作:这种操作一旦开始,就一直运行到结束,中间不会有任何context switch,也就是切换到另一个线程. 为了实 ...
- Selenium 4.0 Alpha更新实践
上期讲到了Selenium 4.0 Alpha更新日志,这次来实践一下更新内容. DevTools操作更加方便. Chrome录制更加方便.(未实践) 窗口管理不在依赖一个driver. 相对定位器功 ...
- 【IntelliJ Idea】常用快捷键
[IntelliJ Idea]常用快捷键 转载:https://www.cnblogs.com/yangchongxing/p/10654018.html ============= 调试 ===== ...
- NIO-SocketChannel源码分析
目录 NIO-SocketChannel源码分析 目录 前言 ServerSocketChannelImpl 创建ServerSocketChannel 绑定和监听 接收 SocketChannelI ...
- 从5个方面让你真正了解Java内存模型
前言 首先我们在了解java内存模型之前先看一下计算机内存模型,理解了计算机内存模型的话后面在看JMM就会简单的多. 计算机内存 计算机是由CPU.主存.磁盘等组成的(简单引出问题熬)我们都知道计算机 ...
- HTTP响应的结构是怎么样的?
HTTP响应由三个部分组成:状态码(Status Code):描述了响应的状态.可以用来检查是否成功的完成了请求.请求失败的情况下,状态码可用来找出失败的原因.如果Servlet没有返回状态码,默认会 ...
- 我的 FPGA 学习历程(15)—— Verilog 的 always 语句综合
在本篇里,我们讨论 Verilog 语言的综合问题,Verilog HDL (Hardware Description Language) 中文名为硬件描述语言,而不是硬件设计语言.这个名称提醒我们是 ...