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

...

在 theme.less 文件中包含 CSS 覆盖后立即添加它们.

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屋！