twitter-bootstrap – 如何开始使用LESS自定义Bootstrap 3?

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 如何开始使用LESS自定义Bootstrap 3?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚刚从 https://github.com/twbs/bootstrap下载了Bootstrap 3.我正在看这个教程: http://www.youtube.com/watch?v=I6EPArp4csA.我如何开始修改LESS文件

我做的是复制这些目录:LESS,dist / css dist / fonts dist / js并创建我的新项目.当前项目文件夹如下所示:

css
less
js
index.html

HTML文件位于顶部:

<link rel="stylesheet/less" type="text/css" href="less/my_site.less"/> //only contains @import "bootstrap.less";
<script src="js/less.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

现在,当我尝试修改变量中的一个变量,并用SimpLESS编译它时会出现一个Syntax错误:carousel.less.是什么赋予了?当我发表评论“carousel.less”时,另外一个问题就是弹出下拉菜单.那么也许这与mixins有关系?任何人有一个想法,我如何开始与此继续前进?

解决方法

编辑:2015年1月14日

使用gulp

>确保从nodejs.org安装节点

1.1:拥有/usr/local,所以你可以在没有sudo的情况下运行npm命令:

sudo chown -R`whoami` /usr/local
全局安装gulp:npm install gulp -g
>在桌面上制作一个文件夹并转到:cd〜/ Desktop&& mkdir boot-gulp&& cd $_.
>启动项目清单:npm init并接受默认值.
>安装gulp和gulp-less:npm安装gulp gulp-less.
>创建一个名为gulpfile.js的文件,然后在该文件中粘贴以下内容

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");

gulp.task("less",function() {
   gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
});

>全局安装bower:npm install bower -g
>使用bower安装bootstrap:bower install bootstrap
> make less / main.less文件并加载bootstrap.less:

以下/ main.less

@import "bower_components/bootstrap/less/bootstrap.less";
// overrides here
@primary: #000; 
// ...

>运行gulp少,你应该看到css文件夹中的输出.

添加手表

>添加gulp-watch插件:npm install gulp-watch
>更新gulpfile.js来观看更少的文件自动编译到css:

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");
var watch = require("gulp-watch"); //+

gulp.task("less",function() {
  watch("less/**/*.less",function(){ //+
    gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
  }); //+
});

现在运行gulp少.现在正在看少文件夹中的所有文件.进行更改并将文件保存在less文件夹中,您应该在css文件夹中自动看到输出.

编辑:2014年1月1日

试试Koala它实时编译您的LESS文件.它是免费的跨平台.您可能还想查看有关compiling Bootstrap with Koala.的常见问题

原始答案

我转载您的问题与您提到的应用程序.我尝试了另一个应用程序,如crunch app,它工作正常.所以用crunch,只需将bootstrap.less文件拖放到该应用程序,然后单击应用程序右上角的crunch文件按钮.那么它会问你在哪里保存.我个人使用命令行工具assets-packager(npm install -g assets-packager).我希望有所帮助.

原文链接:https://www.f2er.com/bootstrap/234009.html

猜你在找的Bootstrap相关文章