em b strong <p clas...2.7K20
DOCTYPE html> Bootstrap 实例 - 如何使用字形图标（Glyphicons） bootstrap/3.3.7/css/bootstrap.min.css...> User image.png menu 字体图标...="text-shadow: black 5px 3px 3px;"> User 字体图标参考...：https://www.runoob.com/bootstrap/bootstrap-glyphicons.html
本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。..., 'js'));配置 Bootstrap为了使用 Bootstrap，我们需要将其引入到 index.html 中。...在 index.html 文件中加入以下代码：bootstrap@4.5.3/dist.../css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAx8ppTCeTTAs0pnLlR4t8Q/Nmd5-Mg" crossorigin...以上便是如何使用 Gulp 实现纯 HTML、CSS、Bootstrap 的打包。希望对您有所帮助！我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！
image.png small 副标题 strong 加黑 em 斜体 p class='text-left' 左对齐 text-center 中对齐 text-right 右对齐 字体颜色减轻...DOCTYPE html> Bootstrap 实例 - 强调 bootstrap/3.3.7/css/bootstrap.min.css"> bootstrap.../3.3.7/js/bootstrap.min.js"> 本行内容是在标签内 本行内容是在标签内</
package.json { "devDependencies": { "gulp": "^3.9.1", "gulp-browserify": "^0.5.1", "gulp-jade...": "^1.1.0" } } gulpfile.js var gulp = require('gulp'), jade = require('gulp-jade'), browserify...= require('gulp-browserify') gulp.task('jade', function () { return gulp.src('src/template/**/*....jade') .pipe(jade()) .pipe(gulp.dest('builds/development')) }) gulp.task('js', function...() { return gulp.src('src/js/main.js') .pipe(browserify({debug: true})) .pipe(gulp.dest
获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本，并理解了它的目录结构。...glyphicons-halflings-regular.woff 相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css...-- 包含了所有编译插件 --> bootstrap/3.3.7/js/bootstrap.min.js"...> ---- 定制字体图标 我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。...通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。
一、Glyphicons 字体图标 1、所有可用的图标 见https://v3.bootcss.com/components/#glyphicons 2、如何使用 出于性能的考虑，所有图标都需要一个基类和对应每个图标的类...-- 引入bootstrap --> bootstrap.min.css" /> bootstrap --> bootstrap.min.css" /> bootstrap --> bootstrap.min.css" /> bootstrap --> bootstrap.min.css" /> <!
前言：Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单 ，深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快， 组件无数可复用的组件...,包括字体图标，在网页制作中我们经常用到小图标(icon),在Bootstrap中提供了很多这种小图标,在这篇内容中,我们把这套框架上的免费字体图标做了个小整合(当然,以后还会不断的更新) Font Awesome...http://glyphicons.com/ http://v3.bootcss.com/components/ 描述：Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bootstrap...www.elegantthemes.com/ https://www.elegantthemes.com/blog/resources/elegant-icon-font 由360款优雅的矢量图标字体组成
简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp，使用npm首先得配置node环境 Install npm install gulp-cli -...g 全局安装gulp gulp --help 返回帮助信息 package.json npm init 初始化npm npm install gulp gulp-util...--save-dev //从本地把整个gulp文件夹拉过来 task 创建gulpfile.js文件 var gulp=require('gulp'); gulp.task('hello',.../xiangmu/dist')); }); 复制img文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src.../xiangmu/dist')); }); 排除其它的文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src
前言 如何在字体前面加图标？可以使用Bootstrap 框架的 glyphicon 类，可以基于项目的 Bootstrap 来免费使用Glyphicons Halflings 提供的图标库。...查看可以使用的图标列表https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm 字体图标(Glyphicons) 添加图标使用示例...glyphicon-remove"> 删除 效果 点这里定制图标大小和背景色https://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
首先，gulp的源码里没有任何一部分是定义pipe的。 gulp的pipe方法是来自nodejs stream API的。 gulp本身是由一系列vinyl模块组织起来的。...pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gulp.src(["fileA","fileB","fileC"]) src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流...方法只负责返回这个管道结构（Stream对象） 楼主想要窥探管道里的内容，就要创建一个Stream对象，在Stream对象接收结果的方法里把流里的内容log出来即可 Stream与File 注意的是gulp...里的流的file必须是vinyl对象 var File = require("gulp-utils").File //或者 var File = require("vinyl") var myf =
gulp $ npm install gulp -g 进入到需要 gulp 管理的项目路径，如 /gulp 再安装一遍 $ npm install gulp --save-dev 安装 gulp 插件...names. daterange-picker.js 用途：基于 bootstrapt 的日期范围选择器 modernizr.custom.js 用途：提供过渡动画支持 jQuery 组件 jquery.bootstrap.wizard.js...用途：基于 jQuery 的 Bootstrap 向导式插件 jquery.dataTables.js 用途：表格处理插件，包括排序分页，宽度自动处理 用法：引入后，以下结构绘制表格 例： daterange-picker.js...用途：基于 bootstrapt 的日期范围选择器 modernizr.custom.js 用途：提供过渡动画支持 jQuery 组件 jquery.bootstrap.wizard.js 用途：...基于 jQuery 的 Bootstrap 向导式插件 jquery.dataTables.js 用途：表格处理插件，包括排序分页，宽度自动处理 用法：引入后，以下结构绘制表格 例： /*
1.基本使用 npm i gulp-cli -g npm i gulp -D cnpm i gulp gulp-uglify gulp-concat 2.创建文件gulpfile.js键入如下 const...gulp = require('gulp'); const uglify = require('gulp-uglify'); const concat = require('gulp-concat').../bunld/js/bundle.min.js 运行命令 gulp 返回如下 $ gulp [08:51:09] Using gulpfile ~\Desktop\nodejs\gulp\gulpfile.js...@babel/core @babel/preset-env -D const gulp = require('gulp'); const uglify = require('gulp-uglify')...-D const gulp = require('gulp'); const concat = require('gulp-concat'); const cssmin = require('gulp-cssmin
运行gulpfile文件时报错 报错内容： TypeError: gulp.on(...).on(...).on(...).on(...)\.start is not a function 问题分析：...一般这种情况是因为gulp版本引起的。...gulp本地版本和全局版本 解决方法： gulp4.0.0更新变动较大，可以考虑把本地版本和全局版本都切回3.9.1版本。...也有其他解决方法，详见参考文章2. npm install --save-dev gulp@3.9.1 npm install -g gulp@3.9.1 参考文章： gulp和gulp-cli的区别...Gulp error: gulp.hasTask is not a function Mismatch in gulp local and CLI versions 2. gulp-uglify压缩js
Gulp是一个模块化打包工具。 Gulp本身只有几个入口，支持他拥有强大功能的是各种各样的插件。...Gulp的使用看起来非常简单，只需要一个一个任务链式执行就可以了，它还可以与Webpack结合起来使用 比如将Webpack作为一个插件来处理ES6转换为ES5的操作。...下面记录一下Gulp的API以及一些用到的插件。...请查看上述的 gulp.src 来了解更多信息。...---- gulp.watch(glob[, opts], tasks) 监视文件，并且可以在文件发生改动时候做一些事情。
（9）Gulp插件 gulp-htmlmin ：html文件压缩 gulp-csso ：压缩css gulp-babel ：JavaScript语法转化 gulp-less: less语法转化 gulp-uglify...：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步 6、package.json （1）node_modules文件夹的问题 文件夹以及文件过多过碎...install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中 { "devDependencies": { "gulp
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程：文件流--文件流--文件流......因为grunt操作会创建临时文件，会有频繁的IO操作，而gulp使用的是流操作...因此gulp在效率上确实远胜grunt，并且学习成本不高，在这非常感谢刘剑辛的分享！...// 本地使用gulp npm install --save gulp-imagemin // 压缩图片 npm install --save gulp-minify-css //压缩css npm...install --save gulp-ruby-sass //sass npm install --save gulp-jshint //js代码检测 npm install --save gulp-uglify...q=gulp
网站发布到IIS后，发现网站使用的Bootstrap框架所引用的woff字体无法正常显 示。...于是跟踪http请求，发现woff字体请求出现GET .woff 404 (Not Found)的 问题，但是项目中woff字体的文件并未丢失。...后经排查，原来是服务器上IIS没 有添加woff字体的MIME类型，导致发送HTTP请求时，IIS无法处理和识别此类 型的文件。
/gulpjs/gulp/blob/master/docs/API.md Gulp中文API：http://www.gulpjs.com.cn/docs/api/ Gulp的安装与使用 Gulp的简单应用...全局安装Gulp npm install --global gulp 2....npm install --save-dev gulp 7.创建一个Gulp的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 Gulp主文件用于注册任务 //载入gulp...的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); //文件拷贝任务 gulp.task('copy...文件夹下的index.html中 使用Gulp自动将Less编译成CSS 下面的操作都是在项目中安装了Gulp的情况下进行的，没有安装Gulp可以看前面的Gulp的安装与使用中的内容 1.安装gulp-less
1.引言 紧接上篇：ASP.NET Core Web App应用第三方Bootstrap模板。这一节我们来讲讲如何优化ASP.NET Core Web发布包繁重的问题。...const gulp = require('gulp');//1. 引用gulp var path = require('path');//2....js、css文件 const copyFiles = [ "Ionicons/css/ionicons.css", "jquery/dist/jquery.min.js", "bootstrap.../dist/js/bootstrap.min.js" ]; //在复制之前先清空生成目录 gulp.task('clean:all', function (cb) { del([paths.dest...有一点需要解释下，为什么需要完整拷贝bootstrap和font-awesome呢？因为引用的font-awesome.min.css会引用包文件的一些字体文件等，为了省事，就把包全部拷贝了一遍。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
