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 本地编译运行的更多相关文章

  1. Saiku本地编译运行后Debug调试(十二)

    Saiku源码拉下来在本地编译通过,然后想进行单元测试 发现不知道怎么写测试类了... 幸好有同事大佬的帮助,教了一招哈哈哈哈... 1.将本地编译通过的Saiku打包好(mvn clean inst ...

  2. 【git】Github上面的开源代码怎么在本地编译运行

    最近才发现Github是一个好东西,可以从上面学到很多东西,不说了,赶快写完去学习去... 1.首先你可以看看这个开源项目的README.md,一般一般这里都会有项目的使用方式以及一些注意的点 2.你 ...

  3. EditPlus远程编辑、语法高亮、编译运行源代码设置

    最近写代码的过程中,除了写Java时用的Eclipse.在Linux下编辑的Vi之外,有时也会用EditPlus打开一些文件,如配置文件.日志文件.脚本等.个人觉得EditPlus在很多场景下比较好用 ...

  4. Form_Form Builder本地部署运行的实现(案例)

    2014-08-09 Created By BaoXinjian

  5. 使用Eclipse编译运行MapReduce程序 Hadoop2.6.0_Ubuntu/CentOS

    使用Eclipse编译运行MapReduce程序 Hadoop2.6.0_Ubuntu/CentOS  2014-10-10 (updated: 2016-05-22) 64246 153 本教程介绍 ...

  6. 《Flink 源码解析》—— 源码编译运行

    更新一篇知识星球里面的源码分析文章,去年写的,周末自己录了个视频,大家看下效果好吗?如果好的话,后面补录发在知识星球里面的其他源码解析文章. 前言 之前自己本地 clone 了 Flink 的源码,编 ...

  7. JAVA 基础开发环境 vscode 搭建 Windows下VSCode编译运行简单java

    JAVA 基础开发环境 vscode 搭建 来源 https://www.cnblogs.com/freewsf/p/7744728.html 对于使用 Visual Studio Code 的 Ja ...

  8. 1   开发一个注重性能的JDBC应用程序不是一件容易的事. 当你的代码运行很慢的时候JDBC驱动程序并不会抛出异常告诉你。   本系列的性能提示将为改善JDBC应用程序的性能介绍一些基本的指导原则,这其中的原则已经被许多现有的JDBC应用程序编译运行并验证过。 这些指导原则包括:    正确的使用数据库MetaData方法    只获取需要的数据    选用最佳性能的功能    管理连

    1 开发一个注重性能的JDBC应用程序不是一件容易的事. 当你的代码运行很慢的时候JDBC驱动程序并不会抛出异常告诉你. 本系列的性能提示将为改善JDBC应用程序的性能介绍一些基本的指导原则,这其中的 ...

  9. Flink 源码解析 —— 源码编译运行

    更新一篇知识星球里面的源码分析文章,去年写的,周末自己录了个视频,大家看下效果好吗?如果好的话,后面补录发在知识星球里面的其他源码解析文章. 前言 之前自己本地 clone 了 Flink 的源码,编 ...

随机推荐

  1. 数学工具(三)scipy中的优化方法

    给定一个多维函数,如何求解全局最优? 文章包括: 1.全局最优的求解:暴力方法 2.全局最优的求解:fmin函数 3.凸优化 函数的曲面图 import numpy as np import matp ...

  2. 最新设计打样制作完成的FPGA视频开发板VIP—V101

    设计目的:1.摄像头驱动(30w-500w mipi接口)2.VGA显示器驱动3.USB2.0视频采集4.tft液晶接口(ttl.lvds驱动)5.视频.图像处理(算法验证)6.各种视频接口处理(av ...

  3. 从RTL视图到Verilog语言-转可乐豆原创

    从RTL视图到Verilog语言 曾经听过某位大牛都说:“当你的学习FPGA到一个境界的时候,你看到的硬件描述语言,将不再是单纯的语言,而是由一个个逻辑门组成的电路图,一旦达到这个境界,方能把代码写到 ...

  4. 小白学 Python 爬虫(20):Xpath 进阶

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  5. Swing JTable使用

    package cn.ychx; import java.awt.Dimension; import java.awt.Toolkit; import java.sql.Connection; imp ...

  6. 201871010119-帖佼佼《面向对象程序设计(java)》第八周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  7. 提示用户输入一个1-40之间的数字,使用if语句根据输入数字的大小进行判断,如果输入的数字在

    提示用户输入一个1-40之间的数字,使用if语句根据输入数字的大小进行判断,如果输入的数字在 num_user=input('输入一个1-40之间的整数:') num_int=int(num_user ...

  8. Socket与系统调用深度分析

    学习一下对Socket与系统调用的分析分析 一.介绍 我们都知道高级语言的网络编程最终的实现都是调用了系统的Socket API编程接口,在操作系统提供的socket系统接口之上可以建立不同端口之间的 ...

  9. 《Java基础知识》Java异常处理详解

    1. Java 中的异常 前言:Java 中的异常处理是处理程序运行错误时的强大机制之一,它可以保证应用程序的正常流程. 首先我们将了解java异常.异常的类型以及受查和非受查异常之间的区别. 1.1 ...

  10. 《Java基础知识》Java 反射详解

    定义 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功能称为java语言的反射 ...