bootstrap4 编译 - CSDN
精华内容
参与话题
  • bootstrap 是使用webpack构建的。 webpack它是一个前端构建工具,能打包代码、压缩代码、源码合并等。用我的土话说:webpack他的一个主要功能能把js、css源代码打包成适合在项目里使用的 .min.js文件,特点是体积小...

    作者非专业人员,本文章仅适用于新手,仅供参考。如果我的文章有问题,请帮我留言,我好及时改正。

    bootstrap 是使用webpack构建的。

    webpack它是一个前端构建工具,能打包代码、压缩代码、源码合并等。用我的土话说:webpack他的一个主要功能能把js、css源代码打包成适合在项目里使用的 .min.js文件,特点是体积小,易于加载。项目里引用的bootstrap.min.js就是这么来的。

    webpack 是NODEJS的组件。

    bootsrap的文档系统是基于jekyll构建的,jekyll又是基于Ruby的组件。

    因此想在windows上体验全部功能,以上环境是必须搭建的。

    需要搭建NODEJS后添加webpack组件;搭建Ruby后添加jekyll组件;

    如果不想在本地看文档,那么可以不搭建Ruby环境与jekyll组件。

     

    1、下载bootstrap 4.2.1源码

    访问 https://github.com/twbs/bootstrap/ 

    Tags 选择 V4.2.1  然后 Clone or download  下载zip,或者使用git下载。

    最后得到: bootstrap-4.2.1.zip

    2、下载NODEJS

    由于说要使用绿色环境,那么,就下载windows zip版本的。

    访问 英文官网 https://nodejs.org/en/download/

    直连地址:https://nodejs.org/dist/v10.15.0/node-v10.15.0-win-x64.zip

    或者使用其他下载地址:

    最后得到:node-v10.15.0-win-x64.zip

    3、下载Runy 

    我们的目的是使用jekyll,安装官网https://jekyllrb.com/docs/installation/windows/的说明 进行操作。

    下载此带devkit版本的

    https://rubyinstaller.org/downloads/

    直连地址:

    https://github.com/oneclick/rubyinstaller2/releases/download/rubyinstaller-2.5.3-1/rubyinstaller-devkit-2.5.3-1-x64.exe

    如果是rubyinstaller-devkit-2.6.0-1-x64.exe 这个版本,好像是不行。

    下载带Devkit版本的,就不用再次加载Devkit环境

    最后得到:rubyinstaller-devkit-2.5.3-1-x64.exe

     4、目录规划

    出于谨慎的原则,项目中用到的,我都会留一份原始文件。由于此环境专为构建Bootstrap搭建,因此不利用现有的Nodejs等其他环境,而是重新部署一套专门用于构建它的环境。以求环境稳定。修改过程中,最简单的方法就是打个压缩包,就可以备份了。当然,你也可以把修改后的代码提交svn git等。

    首先创建根目录,以及把下载的2个文件解压缩。

    D:\UIDE\BootstrapDev\ 是根本次的根

    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64 NODEJS所在环境

    D:\UIDE\BootstrapDev\Ruby25-x64  Ruby所在目录

    D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1  在工作区内,4.2.1版本的项目所在。和他并列的可以存在其他版本。

    5、NODEJS的部署安装

    简单测试:

    解压缩后,NODEJS即可开始工作,CMD进入到NODEJS所在目录查看是否可用。

    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>node -v
    v10.15.0
    
    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm -v
    6.4.1

    可以看到 node -v 和 npm -v 都有对应版本输出。

    创建两个目录:

    node-global :npm全局安装位置; node-cache:npm 缓存路径

    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-cache  缓存路径

    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-global  全局组件安装目录

     设置NODEJS:

    各命令还是需要在NODEJS的跟目录下运行。

    设置node-global :npm全局安装位置 

    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm config set prefix  "D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-global"

    设置node-cache:npm 缓存路径

    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm config set  cache "D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-cache"

    设置国内访问的npm镜像(可加快下载速度),使用cnpm代替。其他方式参考:他的博客,有三种方式使用国内镜像

    本案例使用cnpm主要是不与原NPM冲突。输入下面命令后,由于是-g安装会在node-global文件夹下下载并部署cnpm。

    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm install -g cnpm --registry=https://registry.npm.taobao.org

    cmd窗口不要关闭,接下来安装:webpack

    6、WEBPACK的部署安装

    使用npm官方镜像安装:

    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm i -g webpack

    或者使用cnpm的国内镜像安装:

    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>SET PATH=D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-global
    
    D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>cnpm i -g webpack

    因为cnpm刚才全局安装到node-global 因此需要把它加入到path里面,才能执行cnpm命令。

    7、Ruby 安装与配置

    安装:

    为了避免冲突 没有让他设置环境变量↑

     

    设置国内资源:

    如果 官网资源不能加载,请使用国内资源,需要在Ruby下的bin目录下执行。或把它加到环境变量。并检测:

    D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
    输出结果:
    https://gems.ruby-china.com/ added to sources
    https://rubygems.org/ removed from sources
    
    D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem sources -l
    输出结果:
    *** CURRENT SOURCES ***
    https://gems.ruby-china.com/

    更新gem 否则下面有时会报错。 

    D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem update --system

     

    8、在Ruby里安装jekyll

    https://jekyllrb.com/docs/installation/windows/ 中的命令执行 gem install jekyll bundler  表示 安装jekyll、bundler 这两个组件。

    D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem install jekyll bundler 
    
    相当于 他们的组合:
    
    D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem install jekyll
    D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem install bundler 

    升级: 如果版本是最新,则不用再更新。

    D:\UIDE\BootstrapDev\Ruby25-x64\bin>gem update bundler
    输出:
    Updating installed gems
    Nothing to update
    
    D:\UIDE\BootstrapDev\Ruby25-x64\bin>bundler -v
    输出:
    Bundler version 2.0.1

    完成下载后,在 D:\UIDE\BootstrapDev\Ruby25-x64\bin下面出现 jekyll

    使用命令查看。

    D:\UIDE\BootstrapDev\Ruby25-x64\bin>jekyll -v
    输出:
    jekyll 3.8.5

    9、绿色环境其实就是手动设置环境变量

    cmd中手动配置环境变量,以下操作需要先把环境变量设置到cmd,cmd关闭后失效。

    D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>set path=D:\UIDE\BootstrapDev\node-v10.15.0-win-x64;D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-global;D:\UIDE\BootstrapDev\Ruby25-x64\bin
    
    D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>set GEM_HOME=D:\UIDE\BootstrapDev\Ruby25-x64

     

    10、初始化Bootstrap4项目

    cmd 进入Bootstrap项目文件夹下

    cd D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1

    执行各命令。

    首先加载npm依赖:

    D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>npm install   会把Bootstrap依赖下载到项目文件夹

    加载依赖Ruby相关依赖,一定要在bootstrap跟目录下执行。

    D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>bundle install

    查看Bootstrap项目给我们提供了什么命令

    D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>npm run

    开始Bootstrap吧:

    D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>npm run start

    观察控制台,会输出很长,观察输出中,有一下信息,然后使用浏览器访问地址,就可以看到文档信息啦。

     Auto-regeneration: enabled for 'site'
        Server address: http://localhost:9001/

    修改源码后重新编译,dist目录下,就是生产的文件。

    D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>npm run dist

    问题

     

     

     

    bootstrap4学习网站

     

    展开全文
  • 如何编译bootstrap-4.0.0源码

    千次阅读 2016-06-24 12:43:45
    bootstrap-4.0.0-alpha.2源码。已经在64位WIN7上npm install成功。可以使用grunt执行打包脚本。源码包下载:http://download.csdn.net/detail/super2007/9558340

    因为bootstrap 4.0.0将放弃less转用sass来处理css,所以开发环境需要装SASS插件(必须先安装Ruby)。

    •  安装Ruby,略。
    •  安装SASS
    gem install sass
    •  安装Node.js,略。
    •  安装grunt
    npm install -g grunt
    •  安装node-sass,大多数环境正常。安装不成功的话可以看后面的手动编译css部分。
    npm install -g node-sass
    •  grunt打包,加强制参数
    grunt --force
    • 在dist目录下编译出下列文件
    |-- dist
       |-- css
          |-- bootstrap.css
          |-- bootstrap.css.map
          |-- bootstrap.min.css
          |-- bootstrap.min.css.map
       |-- js 
          |-- bootstrap.js
          |-- bootstrap.min.js
          |-- npm.js
          |-- umd
             |-- alert.js
             |-- button.js
             |-- carousel.js
             |-- collapse.js
             |-- dropdown.js
             |-- modal.js
             |-- popover.js
             |-- scrollspy.js
             |-- tab.js
             |-- tooltip.js
             |-- util.js
    • scsslint检查时可能会报错,可以将bundleExcc关掉,不用本地的
    //You can choose to have your gems installed via bundler and if so, set this option to true to use the local gems.
        scsslint: {
          options: {
            bundleExec: false,
            config: 'scss/.scss-lint.yml',
            reporterOutput: null
          },
          src: ['scss/*.scss', '!scss/_normalize.scss']
        }
    • 手动编译css,进入scss目录会看到大量的scss文件。主要关注下面几个
    |-- scss
       |-- ...
       |-- bootstrap.scss
       |-- bootstrap-flex.scss
       |-- bootstrap-grid.scss
       |-- bootstrap-reboot.scss
       |-- ...

    可以用sass命令直接生成相应的css文件和map文件

    sass bootstrap.scss bootstrap.css
    sass bootstrap-flex.scss bootstrap-flex.css
    sass bootstrap-grid.scss bootstrap-grid.css
    sass bootstrap-reboot.scss bootstrap-reboot.css

    展开全文
  • windows下 bootstrap重新编译定制

    千次阅读 2017-07-19 10:01:26
    有时候想用bootstrap但是有的东西觉得又不适合,所以想重新编译...4修改bootstrap less,进入bootstrap目录编译 安装好node.js 后安装grunt npm install -g grunt-cli 安装less 进入目录重新编译一下试试

    1安装node.js
    设置好环境变量
    2安装grunt-cli
    3
    打开phpstorm,新建一个bootstrap项目,将会下载到bootstrapde源码或者去官网下载
    4:进入 /bootstrap/ 根目录,然后执行 npm install 命令。npm 将读取 package.json 文件并自动安装此文件中列出的所有被依赖的扩展包。
    可用的 Grunt 命令
    grunt dist (仅编译 CSS JavaScript 文件)
    重新生成 /dist/ 目录,并将编译压缩后的 CSS JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户,大部分情况下你只需要执行这一个命令。
    grunt watch (监测文件的改变,并运行指定的 Grunt 任务)
    监测 Less 源码文件的改变,并自动重新将其编译为 CSS 文件。
    grunt test (运行测试用例)
     PhantomJS 环境中运行 JSHint  QUnit 自动化测试用例。
    grunt docs (Build & test the docs assets)
    Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via jekyll serve.
    grunt (重新构建所有内容并运行测试用例)
    编译并压缩 CSS JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等,都需要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。
    除错
    如果你在安装依赖包或者运行 Grunt 命令时遇到了问题,请首先删除 npm 自动生成的 /node_modules/ 目录,然后,再次运行 npm install 命令。



    展开全文
  • 编译版的所有文件,都按逻辑进行分类,放到了不同的目录中,这些文件可以快速应用于任何web项目。解压下载的压缩包,你可以看到以下目录结构和内容:   bootstrap/ ├── css/ │ ├── bootstrap.css ...

     

    编译版的所有文件,都按逻辑进行分类,放到了不同的目录中,这些文件可以快速应用于任何web项目。解压下载的压缩包,你可以看到以下目录结构和内容:

    
     
    1. bootstrap/
    2. ├── css/
    3. │   ├── bootstrap.css
    4. │   ├── bootstrap.css.map
    5. │   ├── bootstrap.min.css
    6. │   ├── bootstrap.min.css.map
    7. │   ├── bootstrap-theme.css
    8. │   ├── bootstrap-theme.css.map
    9. │   ├── bootstrap-theme.min.css
    10. │   └── bootstrap-theme.min.css.map
    11. ├── js/
    12. │   ├── bootstrap.js
    13. │   └── bootstrap.min.js
    14. └── fonts/
    15.     ├── glyphicons-halflings-regular.eot
    16.     ├── glyphicons-halflings-regular.svg
    17.     ├── glyphicons-halflings-regular.ttf
    18.     ├── glyphicons-halflings-regular.woff
    19.     └── glyphicons-halflings-regular.woff2

    以上展示的就是 Bootstrap 的基本文件结构,共包含3个目录:css/、js/、fonts/,分别包含预编译好的CSS、JS和字体文件。预编译文件可以在任何 web 项目中直接使用。

    编译版的Bootstrap提供了两种格式的的CSS和JS文件,一种是未经压缩的文件(bootstrap.*),一种是压缩后的文件(bootstrap.min.*)。同时,还提供了 CSS 源码映射表 (bootstrap.*.map) ,可以在某些浏览器的开发工具中使用。

    从上述文件结构可以看出,Bootstrap3和Bootstrap2版本有一个很大的区别,就是Bootstrap2版本用于展示 icon 小图标的 .png 图片不见了,取而代之是 fonts目录的 4 种类型的Glyphicons图标字体文件,在 Bootstrap 主题中,使用到了这些图标。该字体来自glyphicons.com 网站,并得到免费授权。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 安装Bootstrap3编译版本

    2019-05-01 10:00:55
    编译版本的安装非常简单,只需根据自身情况,将下载的bootstrap-3.3.7.zip解压到相应的工作目录,然后在网页中引入相应的 css 文件和 js 文件即可。 假设将 Bootstrap 解压到 bootstrap3/ 目录,并在根目录下,使用...
  • 编译版文件结构编译版的Bootstrap提供了两种格式的的CSS和JS文件,一种是未经压缩的文件(bootstrap.*),一种是压缩后的文件(bootstrap.min.*)。同时,还提供了使用 ImageOptim 工具压缩后的图片文件。编译版的...
  • 编译Bootstrap3

    2019-05-01 10:02:00
    Bootstrap 使用Grunt作为编译系统,并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。 安装 Grunt 安装 Grunt 前,你需要首先下载并安装 node.js(npm 已经包含...
  • bootstrap的css和js文件

    2020-07-29 14:20:13
    bootstrap的css和js文件、bootstrap的css和js文件、bootstrap的css和js文件
  • Bootstrap 4重大更新,亮点解读

    万次阅读 2018-01-19 17:11:12
    8月19日对Bootstrap来说是个特别的日子——不仅是项目四周年纪念日,也是经过了一年密集开发之后发布Bootstrap 4内测版的日子。Bootstrap 4是一次重大更新,几乎涉及每行代码。新增功能Bootstrap 4中有太多重大的...
  • 用于生产环境的 Bootstrap 编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。
  • bootStrap4 重大改变

    2018-11-02 11:43:10
    得益于Libsass,Bootstrap编译速度比以前更快。 改进网格系统:不再限定于12格了,新增一个网格层适配移动设备,并整顿语义混合。 支持选择弹性盒模型(flexbox):整体使用flex布局,这是项划时代的功能——...
  • bootstrap版本的使用与变化

    千次阅读 2019-06-29 09:26:58
    Bootstrap有两个版本可供下载,编译BootstrapBootstrap源文件。 Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码...
  • 环境: macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 ... Bootstrap3为我们提供了在线编译工具,可以方便的调整变量,然后在线编译得到我...
  • bootstrap4 新特性

    千次阅读 2018-02-07 17:25:55
    得益于Libsass,Bootstrap编译速度比以前更快; 改进网格系统:新增一个网格层适配移动设备,并整顿语义混合。 支持选择弹性盒模型(flexbox):这是项划时代的功能——只要修改一个Boolean变量,就可以利用flex
  • hello world bootstrap 编译

    2016-07-29 18:02:03
    1、下载bootstrap 源文件 http://d.bootcss.com/bootstrap-3.3.5.zip 解压 zip文件 2、安装node.js npm 等 3、全局安装grunt ...4、cd bootstrap-3.35 npm install 5、运行grunt grunt dist grunt watch
  • bootstrap 默认编译选项

    2013-04-15 11:48:13
    ./bootstrap.sh --with-libraries=python,signals,thread  或./bootstrap.sh ./bjam
  • 下载Bootstrap3源码版本

    2019-01-21 21:01:06
    从该链接下载的是一个名称为bootstrap-3.3.7.zip的压缩包,其中包含用于编译CSS的Less源文件、以及各个插件的JavaScript源文件,以及一份文档。 如果要使用未编译的源代码,还需要编译 Less 文件来生成可重用的 CSS...
  • Bootstrap4使用教程

    千次阅读 2018-11-15 16:48:50
    本篇文章写给那些第一次接触Bootstrap框架的学习者,这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。 Bootstrap下载 可以自行百度Bootstrap下载,也可以直接通过此...
  • 英文参考资料网址:http://www.at91.com/linux4sam/bin/view/Linux4SAM/AT91Bootstrap 预先安装arm-none-linux-gnueabi交叉编译工具链。可参考配置方法: ...arm-none-linux-gnue
1 2 3 4 5 ... 20
收藏数 61,369
精华内容 24,547
热门标签
关键字:

bootstrap4 编译