logo标签列表

Twitter Bootstrap定制的最佳实践

twitter-bootstrapless
286

我正在使用LESS进行Bootstrap 2.0.3的开发。我想要大量自定义，但尽可能避免对源代码进行更改，因为库经常会有更改。由于我是LESS的新手，所以不太熟悉它的编译方式。在使用LESS或基于LESS的框架时，有哪些最佳实践？

来自未来的问候！基于SASS的3.x和4.x中Bootstrap定制的“最佳实践”已经改变：https://dev59.com/q2oy5IYBdhLWcg3wYc4l#50410667 - Carol Skelly
7个回答
181

我的解决方案和jstam的类似，但我尽可能避免修改源文件。鉴于对Bootstrap的更改会经常发生，我想通过将我的修改保留在单独的文件中，使得能够下载最新的源代码并进行最小化的更改。当然，这并不是完全可靠的。

  1. 将bootstrap.less和variables.less复制到父目录中。将bootstrap.less重命名为theme.less或任何你想要的名称。你的目录结构应该像这样:

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

  2. 将theme.less中的所有引用更新为指向bootstrap子目录。确保您的variables.less是从父级引用而不是像这样从bootstrap目录引用：

    3. ...
// 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 文件中，在其被包含的位置之后。

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

每当有新版本发布时，你的更改都应该是安全的。在每次发布新版本时，你还应该对自定义的Bootstrap文件进行差异比较。变量和导入可能会发生变化。

#3有特定的原因吗？如果您所有自定义CSS都出现在所有导入之后的底部，而不是在每个导入之后交错出现，会发生什么？ - AaronLS
2
@AaronLS：那也应该可以。我认为第三点是为了保持整洁有序。 - Jonatan Littke
@joelrodgers 为什么不应直接编辑 mixins.less 文件？ - Joe Isaacson
你认为在bootstrap.less中通过@import引入一个空的variables-custom.less文件怎么样？这样每个人都可以自定义默认的Bootstrap变量并安全地更新它。无论如何，我认为这个功能绝对必须包含在Bootstrap中。 - adriendenat
36

这也是我一直在努力解决的问题。一方面，我想要高度定制variables.less文件，使用自己的颜色和设置。另一方面，我希望尽可能少地更改Bootstrap文件，以便于升级过程。

我的解决方案（目前）是创建一个附加的LESS文件，并将其插入到导入变量和mixin之后的bootstrap.less文件中。大概像这样：

...

// 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
好的解决方案。这正是我所做的，只是有些改动。看看我的答案。它太长了，无法放在评论中。 - ATL_DEV
我也很喜欢你的解决方案，Joel。你的代码与框架的代码分离得很好。 - jstam
由于mixin引用变量，我是否需要在variables.less和mixins.less之间导入一个额外的custom-variables.less文件？这样我就可以修改像@baseFontSize这样的变量。我甚至不知道是否会因为再次声明同名变量而出现错误。 - AaronLS
我发现这是最有帮助的解决方案，因为对于新的 Bootstrap 副本，我们只需再次向 bootstrap.less 添加一行即可获取我们自定义的文件，而不必更改许多行，如果核心 less 文件名称发生更改等等...我使用了这个解决方案，使用 grunt 重新编译了我的压缩 JS，一切都很好！自定义工作正常，没有任何不友好的 !important 语句！ - twknab
25
从我的角度来看，我只有一个名为theme.less的文件，在其中引用了bootstrap.less，并在其下方覆盖了（即使在使用LESS时似乎不太好，但是，这样更容易维护）我想要更新的变量值。
这对于在variables.less中具有自定义变量值非常有效。
之后，我编译我的theme.less文件而不是bootstrap.less。
例如：theme.less：
@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;
1
这是一种方法，可以在保留自定义设置的同时随意更新引导代码的副本。有关文件夹结构的详细信息，请参见https://dev59.com/aWvXa4cB1Zd3GeqPOOuO。 - Jeromy French
我确保将这个代码放在我的自己的 less 代码之前，以确保 bootstrap 没有覆盖它。 - Aram Kocharyan
这对我非常有效。我只需将Koala指向theme.less，每次保存时它就会编译。 - ow3n
如果有人使用SASS版本，请注意**!default**。 - prasanthv
5
一个更好的（在我看来）方法是参考来自Bootswatch github 项目叫做swatchmaker。该项目专门为网站上构建和管理数十个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的命令。更多信息请参见项目页面上的README。
作为奖励，README还建议安装watchr gem，当.less文件发生变化时，它会自动构建项目。
4

如果（并且仅当）您有时间，可以像我一样做。我保留了自己修改过的框架版本，每次更新框架时都会阅读文档并检查源代码的修改。

这个解决方案在第一眼看上去可能不是最理想的，但我有我的理由这样做。我不只使用一个框架，而是使用多个框架、最佳实践、重置/归一化样式表等等，我总是确信任何更新都不会以我没有预料到的方式对现有项目造成影响。

我为以下原因制作和使用自己的客户端框架。

  1. 我删除了所有不需要的细节，使东西更加模块化和简洁
  2. 我把我的框架用于客户工作，并希望 a）知道我正在使用什么，同时 b）拥有我出售给客户的一切。我不仅仅复制和使用框架，而是尝试理解和重新创建它们
  3. 我将我的框架与 CMS 结合使用，不能简单地将框架放入项目中/从头开始
是的，我明白，但对我来说，事情变化得如此之快，以至于所有这些网络技术都变得有点难以跟上。 - ATL_DEV
1
如上所述：我的方法仅适用于那些关注多个框架当前发展的人。我这样做是因为我必须紧跟发展和不同的技术挑战解决方法。我认为这更适合框架开发人员，而不是只想“完成工作”的自由职业者。 - All Bits Equal
4

我得出了与Joel相同的解决方案：

自定义Less文件

就像上面所描述的那样：我为所有我正在定制的Less文件创建本地副本，例如："variables-custom.less"、"alerts-custom.less"、"buttons-custom.less"。这样我就可以使用一些标准并添加自己的内容。缺点是：当Bootstrap更新时，迁移非常困难。

但还有其他方法：

覆盖样式

在寻找工作流程时，我经常看到人们建议简单地覆盖样式。因此，您首先导入标准的Less文件，然后在底部添加自定义声明。优点在于：更新到新版本更容易。缺点是：编译后的CSS文件包含所有覆盖文件。某些CSS选择器被定义两次。因此，浏览器需要做一些工作才能确定实际应用哪个样式。这不是很干净。

我想知道为什么预处理器不能聪明地解决这种双重声明？是否有任何更好的工作流程我在这里错过了？

1
我理解你的观点，但你可以随时在线或本地运行CSS清理工具。以下是其中一些：https://dev59.com/43VC5IYBdhLWcg3w9GHM你可能不想在产品中运行less编译器。 - ATL_DEV
谢谢回复，我不知道有Dust-Me工具。很酷，我会深入研究的。实际上，我无论如何都会在本地使用Less编译器（CodeKit）。不想将CSS编译两次。 - Frank Lämmer
2
只需在底部的bootstrap.less中添加@import "../../styles.less";（或任何其他地方您的样式表），这将允许您在自己的styles.less中使用Bootstrap的混合器，例如.gradient或.border-radius。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接