Twitter Bootstrap定制最佳实践 [英] Twitter Bootstrap Customization Best Practices

问题描述

我正在使用LESS使用Bootstrap 2.0.3.我想对其进行广泛的自定义，但是我希望避免在任何可能的情况下都对源进行更改，因为对库的更改非常频繁.我是LESS的新手，所以我不知道它的编译完全如何.使用LESS或基于LESS的框架有哪些最佳实践?

I'm working with Bootstrap 2.0.3 using LESS. I want to customize it extensively, but I want to avoid making changes to the source whenever possible as changes to the libraries are frequent. I am new to LESS so I don't know how its compilation entirely works. What are some best practices for working with LESS or LESS based frameworks?

推荐答案

我的解决方案与jstam类似，但是我尽可能避免对源文件进行更改.鉴于对引导程序的更改将很频繁，因此我希望能够通过将我的修改保存在单独的文件中来获取最新的源代码并进行最小的更改.当然，这还不完全是防弹的.

My solution is similar jstam's, but I avoid making changes to the source files when possible. Given that the changes to bootstrap will be frequent, I want to be able to pull down the latest source and make minimal changes by keeping my modifications in separate files. Of course, it's not completely bullet proof.

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

1. Copy the bootstrap.less and variables.less to the parent directory. Rename bootstrap.less to theme.less or whatever you want. Your directory directory structure should look like this:

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

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

Update all the references in theme.less to point to bootstrap sub-directory. Ensure that your variables.less is referenced from the parent and not the bootstrap directory like so:

...
// 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";

...

在包含CSS覆盖的位置之后立即将它们覆盖在theme.less文件中.

Add your CSS overrides in the theme.less file immediately after where they are included.

...
// 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.

Link to theme.less instead of bootstrap.less in your HTML pages.

每当有新版本发布时，您的更改都应该是安全的.每当有新版本发布时，您还应该在自定义引导文件之间进行区分.变量和导入可能会更改.

Whenever a new version comes out, your changes should be safe. You should also do a diff between your custom bootstrap files whenever a new version comes out. Variables and imports may change.

这篇关于Twitter Bootstrap定制最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！