twitter-bootstrap – Twitter Bootstrap自定义最佳实践

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Twitter Bootstrap自定义最佳实践前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Bootstrap 2.0.3使用LESS。我想要广泛地定制它,但我想避免对源代码进行更改,尽可能的对库的更改频繁。我是LESS的新手,所以我不知道它的编译是如何工作的。使用LESS或LESS基础框架的一些最佳实践是什么?

解决方法

我的解决方案是类似的jstam的,但我避免了更改源文件,如果可能的话。考虑到引导的更改将频繁,我想能够拉下最新的源,并通过保持我的修改在单独的文件中进行最小的更改。当然,它不是完全防弹。

>将bootstrap.less和variables.less复制到父目录。将bootstrap.less重命名为theme.less或任何你想要的。您的目录目录结构应如下所示:

/Website            
     theme.less
     variables.less
     /Bootstrap
     ...

>更新theme.less中的所有引用以指向bootstrap子目录。确保您的variables.less是从父而不是引导目录引用的,如:

...
// CSS Reset
@import "bootstrap/reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors,font-sizes,etc
@import "bootstrap/mixins.less";

// Grid system and page structure
@import "bootstrap/scaffolding.less";
@import "bootstrap/grid.less";
@import "bootstrap/layouts.less";

… …
>在theme.less文件中立即添加您的CSS覆盖,包括它们。

...
// Components: Nav
@import "bootstrap/navs.less";
@import "bootstrap/navbar.less";

// overrides
.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner {
    border-radius: 0 0 0 0;
    padding: 10px;
}

.nav-tabs,.nav-pills {
    text-transform: uppercase;
}

.navbar .nav > li > a {
    text-shadow: none;
}

...

>在HTML页面链接到theme.less而不是bootstrap.less。

每当新版本出来,您的更改应该是安全的。你还应该在你的自定义引导文件之间做一个差异每当一个新的版本出来。变量和导入可能会更改。

猜你在找的Bootstrap相关文章