Twitter Bootstrap定制最佳实践


285

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


未来的问候!在基于SASS的3.x和4.x中,引导程序自定义“最佳做法”已更改:stackoverflow.com/a/50410667/171456
Zim 18'7

Answers:


180

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

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

    /Website            
         theme.less
         variables.less
         /Bootstrap
         ...
  2. 更新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";

    ...

  3. 将CSS覆盖添加到theme.less文件中之后。

    ...
    // 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;
    }
    
    ...
  4. 在您的HTML页面中链接到theme.less而不是bootstrap.less。

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


#3是否有特定原因?如果所有自定义css在所有导入之后都显示在底部,而不是在每次导入后都混合在一起,会发生什么情况?
AaronLS 2012年

2
@AaronLS:那也应该起作用。我认为第3条是为了使其井井有条。
Jonatan Littke

@joelrodgers为什么不直接编辑mixins.less?
2013年

您如何考虑在bootstrap.less内包含一个空的variable-custom.less文件(通过@import)?这样,每个人都可以自定义默认的Bootstrap变量并安全地对其进行更新。无论如何,我认为此功能必须绝对包含在Bootstrap中。
2013年

36

这也是我一直在努力的事情。一方面,我想使用自己的颜色和设置高度自定义variables.less文件。另一方面,我想尽可能地更改Bootstrap文件以简化升级过程。

我的解决方案(现在)是创建一个附加的LESS文件,bootstrap.less并在导入变量和mixins之后将其插入文件。所以像这样:

...

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

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

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

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

...

这样,如果我想重设Bootstrap颜色,字体或添加其他Mixin,我可以。我的代码是单独的,但将在其余的Bootstrap导入中进行编译。这并不完美,但这对我来说是权宜之计。


1
好的解决方案。这正是我所做的一些更改。看我的回答。评论太久了。
乔尔·罗杰斯

我也喜欢您的解决方案,乔尔。将您的代码与框架代码很好地分离。
jstam

由于mixins引用变量,我是否需要在variables.less和mixins.less导入之间附加一个custom-variables.less?这样我就可以修改@baseFontSize之类的变量。我什至不知道该不知道是否会再次声明相同名称的变量。
AaronLS

我发现这是最有用的解决方案,因为对于新的bootstrap副本,我们只需要再次向其添加一行,即可bootstrap.less获取我们的自定义文件VS,如果核心较少的文件名发生更改,则可能会更改很多行,等等。此解决方案,使用grunt重新编译了缩小的JS,一切都很好!定制工作无需任何不友好的!important声明!
twknab

25

从我的角度来看,我只是有一个theme.less带有导入名称的文件boostrap.less,并且在我下面覆盖(即使使用LESS似乎不好,但很容易维护)我不想更新的变量值。

这对于在 variables.less

之后,我编译我的theme.less文件而不是关闭bootstrap.less

范例theme.less

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;  

1
这样的方法是:1)拥有一份可以随时更新的引导程序代码副本,而2)能够施加您自己的自定义设置。有关文件夹结构的详细信息,请参见stackoverflow.com/questions/13809895/…
Jeromy French

我确保将其放在我自己的较少代码之前,以确保引导程序不会覆盖它。
Aram Kocharyan

这对我来说很棒。我只是将Koala指向theme.less,每次保存时它都会编译。
ow3n 2014年

如果有人使用SASS版本,请
当心

5

更好的(IMHO)方法是从名为swatchmakerBootswatch github项目中借鉴。该项目是专门为构建和管理网站上的数十个Bootstrap主题而量身定制的。

Makefile项目建立swatchmaker.less(你可以将其重命名为类似customizations.less)。该文件包含大量导入:

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

您可以将swatch文件夹和bootswatch.less文件重命名为合适的名称。

这很有意义,因为您可以升级Bootstrap而不影响自己的文件。实际上,Makefile还包含用于获取最新版本的Bootstrap的命令。有关更多信息,请参见项目页面上的自述文件。

另外,自述文件还建议您安装watchrgem,当.less文件更改时,gem会自动生成项目。


4

如果(并且仅在有条件的情况下)您有时间可以像我一样做。我保留了自己的框架的修改版本,并且在框架的每次更新时都阅读了文档并检查了修改源。

乍看起来,此解决方案听起来不太理想,但我有这样做的理由。我不使用一个,而是使用许多框架,最佳实践,重置/规范化样式表等的组合,并且我始终确保不会有任何更新会以我未曾想到的任何方式更改现有项目。

由于以下原因,我正在使用自己的自定义框架。

  1. 我消除了所有不必要的东西,使东西保持模块化和小巧
  2. 我将我的框架用于客户工作,并希望a)知道我在做什么,而b)拥有我出售给客户的所有东西。我不只是复制和使用框架,而是尝试理解并重新创建它们
  3. 我将我的框架与CMS结合使用,不能简单地将框架丢到项目中/从头开始

是的,我了解,但是对我而言,事情变化如此之快,以至于所有这些网络技术都变得有些难以追踪。
乔尔·罗杰斯

1
如前所述:我的方法仅适用于那些关注当前多个框架开发的人。之所以这样做,是因为我必须紧跟发展和应对技术挑战的不同方法。我认为,这比仅希望“完成工作”的自由职业者更适合于框架开发人员。
2012年

4

我得到了与乔尔相同的解决方案:

自定义更少文件

就像上面描述的那样:我为我正在定制的所有Less文件创建本地副本:例如:“ variables-custom.less”,“ alerts-custom.less”,“ buttons-custom.less”。因此,我可以使用一些标准并有自己的补充。缺点是:当要更新Bootstrap时,确实很难迁移。

但是还有其他事情:

替代样式

当四处寻找工作流程时,我经常看到人们建议简单地覆盖样式。因此,您首先要导入标准的Less文件,然后在底部添加自定义声明。这里的好处是:更新到新版本更容易。缺点是:编译后的CSS文件包含所有替代。一些CSS选择器定义了两次。因此,浏览器需要做一些工作以找出实际适用的内容。那不是很干净。

我想知道为什么预处理器不够聪明,无法解决这种双重声明?我在这里缺少更好的工作流程吗?


1
我知道您的意思是,但是您始终可以在线或本地运行CSS清理实用程序。这里是它们的列表: stackoverflow.com/questions/135657/… 您可能总不想在产品中运行更少的编译器。
乔尔·罗杰斯

谢谢,不知道有尘我工具。很酷,我会深入研究。实际上,无论如何我还是在本地使用较少的编译器(CodeKit)。不想编译css两次。
FrankLämmer2012年

2

只需将@import "../../styles.less";(或样式表所在的位置)添加到底部的bootstrap.less中即可。这使您可以在自己的styles.less之内.gradient或之.border-radius内使用Bootstrap mixin 。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.