2016-09-26 23:31:23 jiangzhenlove 阅读数 2965
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

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 命令。



2019-05-01 09:59:20 ixygj197875 阅读数 119
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

编译版本的安装非常简单,只需根据自身情况,将下载的bootstrap-3.3.7.zip解压到相应的工作目录,然后在网页中引入相应的 css 文件和 js 文件即可。

假设将 Bootstrap 解压到 bootstrap3/ 目录,并在根目录下,使用以下这份超级简单的 HTML 模版新建一个index.html,这就是一个最简单的 Bootstrap 页面了:


 
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  <title>Bootstrap 101 Template</title>
  8.  <link href="css/bootstrap.min.css" rel="stylesheet">
  9.  </head>
  10.  <body>
  11.  <h1>Hello, world!</h1>
  12.  <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
  13.  <script src="js/bootstrap.min.js"></script>
  14.  </body>
  15. </html>

需要注意的是,bootstrap 的所有插件都依赖于 jQuery,在引入 bootstrap.min.js 文件之前,要先引入 jQuery 库文件。

关于作者

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

2019-01-21 21:02:39 ixygj197875 阅读数 64
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

 

编译版的所有文件,都按逻辑进行分类,放到了不同的目录中,这些文件可以快速应用于任何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 上开源。

2018-03-03 22:16:24 ixygj197875 阅读数 395
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

编译版的Bootstrap提供了两种格式的的CSS和JS文件,一种是未经压缩的文件(bootstrap.*),一种是压缩后的文件(bootstrap.min.*)。同时,还提供了使用 ImageOptim 工具压缩后的图片文件。

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

  bootstrap/
  ├── css/
     ├── bootstrap.css
     ├── bootstrap.min.css
  ├── js/
     ├── bootstrap.js
     ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

编译版的Bootstrap共包含3个目录:

1、css目录:包含4个文件,分别是bootstrap.css 和 bootstrap-responsive.css,以及它们对应的压缩文件bootstrap.min.css、bootstrap-responsive.min.css。

  • bootstrap.css:是完整的、未经压缩的Bootstrap样式文件,可以在项目中直接使用。
  • bootstrap.min.css:是经过压缩后的Bootstrap样式文件,内容跟bootstrap.css完全相同,只是删除了空格、注释等不需要的内容,所以文件大小会比bootstrap.css小。在部署网站的时候,可以直接引用bootstrap.min.css,而不引用bootstrap.css。
  • bootstrap-responsive.css:在对Bootstrap框架应用了响应式布局之后所需要的CSS样式文件,如果网站项目不需要进行响应式设计,就不需要引用这个CSS。
  • bootstrap-responsive.min.css:是bootstrap-responsive.css的压缩版。

2、js目录:包含2个文件,即bootstrap.js和它对应的压缩文件bootstrap.min.js。

  • bootstrap.js:集成了Bootstrap所有JavaScript指令的集合,也是Bootstrap的灵魂,用户看到Bootstrap中所有的JavaScript效果,都是由这个文件控制的。这个文件也是一个未经压缩的版本,可以在项目中直接使用。
  • bootstrap.min.js:是bootstrap.js的压缩版,内容和bootstrap.js一样,但文件会小很多。在部署网站的时候,可以直接引用bootstrap.min.js,而不引用bootstrap.js。

3、img目录:包括 glyphicons-halflings.png 和 glyphicons-halflings-white.png 两张图片,它们是通过CSS Sprites技术,把所有的图标整合到一个图片文件中的图标文件。两张图片的效果完全相同,不同的是,前者是白底黑色图标,后者是黑底白色图标。

关于作者

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

2019-01-20 01:02:43 colcool 阅读数 232
  • 使用 Bootstrap 4 提升网页实战教程

    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,面对各种版型的网站,都能轻松应对。Bootstrap入门到进阶必备教程。

    10620 人正在学习 去看看 苏朝辉

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

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学习网站

 

编译Bootstrap3

阅读数 49

bootStrap4 重大改变

阅读数 732

没有更多推荐了,返回首页