bootstrap学习——自定义bootstrap

最新推荐文章于 2022-04-26 23:13:50 发布

俺足

最新推荐文章于 2022-04-26 23:13:50 发布

阅读量244

点赞数

分类专栏：前端文章标签： ui 前端 php ViewUI

本文链接：https://blog.csdn.net/shi_tianzhu/article/details/84536121

版权

前端专栏收录该内容

84 篇文章 0 订阅

订阅专栏

定制的bootstrap：【http://www.w3cplus.com/css/customizing-bootstrap.html】

留意以下这些文件：

bootstrap.less:

这个是核心文件。它用来引入其他文件，最终由你来编译它。

reset.less:

始终是最先引入的文件。

variables.less 和 mixins.less:

这两个文件总是同时出现，因为其他文件都依赖于它们。前一个文件包含了在生成器网站上使用的相同的变量。

utilities.less

这个文件总是最后引入，你可以把想要覆盖的类写到这里。

当安装结束后，你可以这样来编译bootstrap.less：

lessc bootstrap.less > bootstrap.css

如果想编译压缩版本，使用这个命令：

lessc --compress bootstrap.less > bootstrap.min.css

无论你使用哪种方式编译，编译的目标只能是bootstrap.less，而并非其他任何文件。

模块化你的修改

你可能注意到了上面方法的缺陷。那就是你修改的内容与原始文件纠缠在了一起。结果当Bootstrap不可避免的因为修复bug或增加新功能而进行升级时，你根本不可能将自定义的内容更新到新的版本上。

为了避免出现这个问题，你需要模块化你的修改。这是我为Bootswatch制作主题时的采取的方法。

首先，我下载了Bootstrap的源代码，把它的名字修改为bootstrap后原封不动的放好。我并没有对它包含的文件进行任何修改，而是新创建了一个单独的文件夹，取名为custom，含有如下三个文件：

custom-variables.less:

我从Bootstrap源码中复制了一份variables.less并在这份拷贝中修改变量。

custom-other.less:

这个文件中包含了那些无法定义成变量的自定义内容。

custom-bootstrap.less

这是新的「核心」文件。我们将把它编译成CSS。与原始的 LESS文件一样，它使用下面的命令来引入上面那两个自定义文件：

@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";

修改内容被分隔开后，你可以很轻松的升级到Bootstrap的新版本。只需要将旧bootstrap文件夹替换，再重新编译即可。

我为这种方法创建了一个叫做swatchmaker的样板文件。它还包含了其他内容，例如测试页面和更新Bootstrap到最新版的命令，当修改被保存时执行自动编译，还可以重置你自定义的内容。

兼容ie7和其以前的ie版本：

可以考虑把Blueprint和Bootstrap融合

要DIY用960grid或者Blueprint吧，
实在要用，可以考虑：
1.html5boillerplate -> http://html5boilerplate.com/
2.foundation -> http://foundation.zurb.com/
3.skelon -> http://getskeleton.com/

用compass不要用bootstrap, 用css3PIE让ie6-8支持部分css3

----------------------------------------------------------杂项

这个下拉菜单有较大局限性。不如自己写的。bootstrap本质上就是媒体查询定制不同样式，除此外没啥东东。

BootStrap入门教程 (一)

Bootstrap编译与扩展【linux】

最好的 Bootstrap UI 编辑器集合

30 个惊艳的 Bootstrap 扩展插件

http://www.oschina.net/news/43645/30-amazing-plugins-extend-twitter-bootstrap

bootstrap的学习心得

http://www.open-open.com/lib/view/open1366529702484.html

相关文档 　—　更多

俺足

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap学习——自定义bootstrap

定制的bootstrap：【http://www.w3cplus.com/css/customizing-bootstrap.html】留意以下这些文件：bootstrap.less:这个是核心文件。它用来引入其他文件，最终由你来编译它。reset.less:始终是最先引入的文件。variables.less 和 mixins.less:这两个文件总是同时出现，因为其他文件...
复制链接

扫一扫