Twitter Bootstrap定制最佳实践[关闭]

墨蓝 2022-11-27 15:52 37阅读 0赞

本文翻译自：[Twitter Bootstrap Customization Best Practices \[closed\]][Twitter Bootstrap Customization Best Practices _closed]

*I'm working with Bootstrap 2.0.3 using LESS.* **我正在使用LESS使用Bootstrap 2.0.3。** *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.* **我是LESS的新手，所以我不知道它的编译是如何完全有效的。** *What are some best practices for working with LESS or LESS based frameworks?* **使用基于LESS或LESS的框架有哪些最佳实践？**

--------------------

### \#1楼 ###

参考：[https://stackoom.com/question/HQRD/Twitter-Bootstrap定制最佳实践-关闭][https_stackoom.com_question_HQRD_Twitter-Bootstrap_-]

--------------------

### \#2楼 ###

*This is something I've struggled with as well.* **这也是我一直在努力的事情。** *On the one hand I want to highly customize the variables.less file with my own colors and settings.* **一方面，我想用我自己的颜色和设置高度自定义variables.less文件。** *On the other hand, I want to change the Bootstrap files a little as possible to ease the upgrade process.* **另一方面，我想尽可能地更改Bootstrap文件以简化升级过程。**

*My solution (for now) is to create an addon LESS file and insert it into the `bootstrap.less` file after the variables and mixins have been imported.* **我的解决方案（目前）是创建一个addon LESS文件，并在导入变量和mixin后将其插入到`bootstrap.less`文件中。** *So something like this:* **所以像这样：**

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

*This way if I want to reset Bootstrap colors, fonts or add additional mixins I can.* **这样，如果我想重置Bootstrap颜色，字体或添加额外的mixin我可以。** *My code is separate yet will be compiled within the rest of the Bootstrap imports.* **我的代码是独立的，但将在其余的Bootstrap导入中编译。** *It's not perfect, but it's a stopgap that's worked well for me.* **它并不完美，但它是一个对我有用的权宜之计。**

--------------------

### \#3楼 ###

*My solution is similar jstam's, but I avoid making changes to the source files when possible.* **我的解决方案类似于jstam，但我尽可能避免对源文件进行更改。** *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.* **鉴于对bootstrap的更改将经常发生，我希望能够通过将我的修改保存在单独的文件中来下载最新的源并进行最小的更改。** *Of course, it's not completely bullet proof.* **当然，它并不完全是防弹。**

1.  *Copy the bootstrap.less and variables.less to the parent directory.* **将bootstrap.less和variables.less复制到父目录。** *Rename bootstrap.less to theme.less or whatever you want.* **将bootstrap.less重命名为theme.less或任何你想要的。** *Your directory directory structure should look like this:* **您的目录目录结构应如下所示：**
    
        /Website theme.less variables.less /Bootstrap ...
2.  *Update all the references in theme.less to point to bootstrap sub-directory.* **更新theme.less中的所有引用以指向引导子目录。** *Ensure that your variables.less is referenced from the parent and not the bootstrap directory like so:* **确保您的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.  *Add your CSS overrides in the theme.less file immediately after where they are included.* **在包含它们之后立即在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; } ...
4.  *Link to theme.less instead of bootstrap.less in your HTML pages.* **链接到theme.less而不是HTML页面中的bootstrap.less。**

*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.* **变量和进口可能会发生变化。**

--------------------

### \#4楼 ###

*If (AND ONLY IF) you have the time you can do it as I do.* **如果（并且只有IF）您有时间可以像我一样做。** *I keep my own modified version of the framework(s) and with every update of the framework I read the docs and check the source for modifications.* **我保留了我自己的框架修改版本，随着框架的每次更新，我都会阅读文档并检查源代码进行修改。**

*This solution might sound less ideal on the first look but I have my reasons to do so.* **这个解决方案在初看起来可能听起来不太理想，但我有理由这样做。** *I don't work with one but an amalgam of many frameworks, best practices, resets/normalization style sheets etc. and I am always sure that no update will ever change existing projects in any way I didn't see coming.* **我不使用其中一个，而是使用许多框架，最佳实践，重置/规范化样式表等等。我总是确信没有任何更新会以任何我看不到的方式改变现有项目。**

*I'm working on and with my own custom framework for the following reasons.* **由于以下原因，我正在使用自己的自定义框架。**

1.  *I strip out every little bit I don't need to keep stuff modular and small* **我删除了每一点我不需要保持模块化和小的东西**
2.  *I use my framework for client jobs and want to a) know what exactly I'm working with while b) owning everything I sell to the client.* **我使用我的框架进行客户工作，并希望a）知道我正在使用什么，同时b）拥有我卖给客户的所有东西。** *I don't simply copy and use frameworks but try to understand and recreate them* **我不是简单地复制和使用框架，而是尝试理解并重新创建它们**
3.  *I use my framework in combination with a CMS and can't simply drop and forget a framework into a project / start from scratch* **我将我的框架与CMS结合使用，不能简单地将框架放入项目/从头开始**

--------------------

### \#5楼 ###

*I came to the same solution as Joel:* **我找到了和乔尔一样的解决方案：**

***Custom Less Files*** **自定义较少文件**

*Just like described above: I create local copies for all Less files i am customizing: Such as: "variables-custom.less", "alerts-custom.less", "buttons-custom.less".* **就像上面描述的那样：我为我自定义的所有Less文件创建本地副本：例如：“variables-custom.less”，“alerts-custom.less”，“buttons-custom.less”。** *So i can use some standards and have my own additions.* **所以我可以使用一些标准，并有我自己的补充。** *The downside is: When Bootstrap will be update it's really hard to migrate.* **缺点是：当Bootstrap更新时，它很难迁移。**

*But there is something else:* **但还有别的东西：**

***Override Styles*** **覆盖样式**

*When looking around for work-flows i often see people suggesting to simply override styles.* **在寻找工作流程时，我经常会看到人们建议简单地覆盖样式。** *So you import the standard Less files first and then add your custom declarations at the bottom.* **因此，首先导入标准的Less文件，然后在底部添加自定义声明。** *The upside here is: It's easier to update to a newer version.* **这里的好处是：更新到更新版本更容易。** *The downside is: The compiled CSS file includes all the overrides.* **缺点是：编译的CSS文件包含所有覆盖。** *Some CSS selectors are defined twice.* **一些CSS选择器定义了两次。** *So the browser needs to do some lifting to find out what to apply actually.* **因此浏览器需要进行一些提升以找出实际应用的内容。** *That's not really clean.* **那不是很干净。**

*I am wondering why preprocessors are not clever enough to solve such double declarations?* **我想知道为什么预处理器不够聪明来解决这样的双重声明？** *Is there any better work-flow i am missing here?* **我在这里缺少更好的工作流程吗？**

--------------------

### \#6楼 ###

*From my side, I just have a file named `theme.less` with an import of `boostrap.less` in it, and just below I override (even if it seems to be bad using LESS, but well, it's easier to maintain) the variable value I wan't to update.* **从我的身边，我只是有一个文件名为`theme.less`与进口`boostrap.less`在里面，仅低于我重写（即使它似乎少用是坏的，但很好，它更容易维护）变量值我不想更新。**

*This works well for having custom values for variables in `variables.less`* **这适用于在`variables.less`为变量设置自定义值**

*After that I compile my `theme.less` file instead off `bootstrap.less`* **之后我编译我的`theme.less`文件而不是`bootstrap.less`**

***Example `theme.less` :*** **示例`theme.less` ：**

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

[Twitter Bootstrap Customization Best Practices _closed]: https://oldbug.net/q/HQRD/Twitter-Bootstrap-Customization-Best-Practices-closed
[https_stackoom.com_question_HQRD_Twitter-Bootstrap_-]: https://stackoom.com/question/HQRD/Twitter-Bootstrap%E5%AE%9A%E5%88%B6%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5-%E5%85%B3%E9%97%AD