bootstrap之编译css和javascript-0基础安装grunt教程

     2022-03-14     355

关键词:

昨天晚上看到 bootstrap 全局CSS样式中 使用Less 章节中提到的通过grunt重新编译CSS和Javascript文件,对于我这样从未接触过windows cmd node控制台 npm的人,学习起来就有很大的难度了。

那么我们照着教程一步一步来:

第一步:安装node.js

网址:https://nodejs.org/en/download/

下载版本:node-v6.10.2-x64.msi

 

如果遇见2502 2503错误,可以查看这个地址,实测有效,权限不够导致的问题:

http://blog.csdn.net/shuideyidi/article/details/46891559#comments#0-tsina-1-94252-397232819ff9a47a7b7e80a40613cfe1

 

第二步:在全局环境中安装 grunt-cli :npm install -g grunt-cli 。

  快捷键 win + R运行框中输入cmd,打开系统命令执行程序,输入以下,请注意不要输入最前面的grunt-cli :

  技术分享

  安装成功:

  技术分享

 

  第三步:进入 /bootstrap/ 根目录,然后执行 npm install 命令。npm 将读取 package.json 文件并自动安装此文件中列出的所有被依赖的扩展包。

  这里遇到的问题就是怎么进入根目录,作为一脸懵逼的新人,百度了许久。其中只有2个dos命令需要用到 1:cd.. 2:cd ** 

  cd.. : 返回上级文件夹,例如:

  技术分享

  cd ** :进入某个文件夹,例如:

  技术分享

  知道了这个以后就知道了如何进入bootstrap根目录。

 

  进入了bootsrap根目录之后需要执行npm install

 

  执行完毕后就依然打开cmd 输入grunt dist就OK啦~

  

  

前端之bootstrap(代码片段)

Bootstrap简介  Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的MarkOtto和JacobThornton一起开发的,Bootstra框架是基于HTML、CSS、JavaScript开发的,它因简洁、直观、功能强大被开发者广发使用。  Boot... 查看详情

javaweb之bootstrap(代码片段)

...数据库连接池JavaWeb之HTML&CSSJavaWeb之JavaScript文章目录1.Bootstrap概念2.快速入门3.响应式布局4.CSS样式和JS插件4.1.全局CSS样式4.2.组件4.3.插件5.案例1.Bootstrap概念概念:一个前端开发的框架ÿ 查看详情

htmlcss和js框架之bootstrap(代码片段)

一.Bootstrap简介:Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目。详细参考内容:Bootstrap_v3二.Bootstrap安装:下载地址:https://v3.bootcss.com/(使用v3版,不要使用最新版) 使用方法一:下载... 查看详情

Laravel Mix 中的 Bootstrap-Vue CSS 编译

】LaravelMix中的Bootstrap-VueCSS编译【英文标题】:Bootstrap-VueCSScompilationinLaravelMix【发布时间】:2018-08-1323:01:36【问题描述】:我正在使用Laravel5.6、LaravelMix2.0和Bootstrap-Vue2.0.0-rc.1。试图找到一种方法来配置LaravelMix以将Bootstrap-Vue的CSS... 查看详情

css进阶之模拟bootstrap网格布局

目前暂时实现效果,容后面整理心得,先贴上源代码。<!DOCTYPEhtml><html><head><title>demobootstrap</title><linkrel="stylesheet"type="text/css"href="dist/css/bootstrap.css"><!--<scripttyp 查看详情

python学习_day62_前端基础之bootstrap全局css样式

一、布局容器  Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。分别为:<divclass="container">//.container... 查看详情

bootstrap全局css样式之排版

Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章《html的文本元素总结》,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总。.small——当前元素字体大小的85%,经常使用作副标题时,也可... 查看详情

css之bootstrap(快速布局)(代码片段)

简介什么是Bootstrap?Bootstrap官网框架:库liblibraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单,更快捷;注意是Bootstrap不是BootS... 查看详情

bootstrap之css全局样式中的表单

不使用BootStrap之CSS全局样式中的表单,自己也不定义CSS样式<form><div><label>Emailaddress</label><inputtype="email"placeholder="Email"></div><div><label>Password</label> 查看详情

bootstrap之css全局样式中的图片

使用BootStrap中的CSS全局样式,我们就可以不用自己定义CSS样式了。响应式图片<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewp 查看详情

前端之bootstrap框架(代码片段)

一Bootstrap简介在搭建前端页面时我们可以借用一些好的模板,为了让这些模板更好的让开发者使用,我们借助Bootstrap来实现一些常用的模板例如在看到上面这么好的模板,同学们是不是就想立刻收藏了呢?二css全局样式布局容器... 查看详情

bootstrap之css全局样式中的表格

不使用BootStrap之CSS全局样式中的表格,自己也不定义CSS样式<table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr>&l 查看详情

bootstrap之css样式(代码片段)

一、表格  bootstrap3.0规定,为任意<table>标签添加.table类样式,才可以为其赋予优化效果。bootstrap为表格添加了除默认风格外的个性风格。  1.斑马线风格  为表格添加如下样式,为表格添加table-striped样式类,即可实... 查看详情

前端基础之bootstrap介绍

http://v3.bootcss.com/Bootstrap优点:  下载: Bootstrap引入<metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="dist/css/bootstrap.min.css"rel="stylesheet">&l 查看详情

关于h5框架之bootstrap的小知识

浏览器支持旧的浏览器可能无法很好的支持Bootstrap支持InternetExplorer8及更高版本的IE浏览器CSS源码研究我们不是在head里面引入了下面这些文件么<!--新Bootstrap核心CSS文件--><linkrel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.0/css... 查看详情

ten——tornado操作之使用bootstrap前端框架美化项目(bootstrap的使用及font-awesome插件的使用—图标集和工具包)+静态文件的处理

使用Bootstrap前端框架1.引言:(1)Bootstrap是什么?基于HTML,CSS,JS的简洁灵活的流行前端框架及交互组件集Bootstrap·全球最流行的HTML、CSS和JS工具库为快速WEB开发提供了一套前端工具包,包括布局、网格、表格、按钮、表单、导... 查看详情

如何用bootstrap实现步骤箭头按钮样式

参考技术Abootstrap的CSS是用LESS编译的,面对一个编译过后的框架型项目,不建议:增加权重更高的CSS规则,覆盖原有的(包括使用!important来强制复写)增加class/id,改变你的DOM属性,然后自己写CSS规则这样会大大增加你自己的CSS... 查看详情

bootstrap框架

...给大家分享技术、知识和生活*各种干货,记得关注哦!*/Bootstrap框架一、下载安装当您下载了Bootstrap的已编译的版本,解压缩ZIP文件,您将看到下面的文件/目录结构:如上图所示,可以看到已编译的CSS和JS(bootstr 查看详情