自定义 Bootstrap CSS 模板 [英] Customizing Bootstrap CSS template
问题描述
我刚刚从 Twitter 开始使用 Bootstrap，想知道定制的最佳实践"是什么.我想开发一个系统，该系统将利用 css 模板(Bootstrap 或其他)的所有功能，完全(且容易)可修改，具有可持续性(即，当下一个版本的 Bootstrap 从 Twitter 发布时，我不知道)不必重新开始.
I am just getting started with Bootstrap from Twitter and am wondering what the ‘best practices’ is for customization. I want to develop a system that will take advantage of all the power of a css template (Bootstrap or other), be completely (and easily) modifiable, be sustainable (ie – when the next version of Bootstrap is released from Twitter I don’t have to start over.
例如，我想在顶部导航中添加背景图片.看起来有 3 种方法可以解决这个问题:
For example, I want to add background images to the top navigation. It looks like there are 3 ways to go about this:
- 修改 bootstrap.css 中的 .topbar 类.我不是特别喜欢这个，因为我会有很多 .topbar 项目，我不一定想以同样的方式修改它们.
- 使用我的背景图像创建新类并应用两种样式(新的和引导到我的元素).这可能会产生样式冲突，可以通过将 .topbar 类剥离为单独的类，然后仅使用我的自定义类未踩到的部分来避免这种冲突.同样，这需要做比我认为必要的更多的工作，虽然它很灵活，但当 Twitter 发布下一个版本时，它不会让我轻松更新 bootstrap.css.
- 使用 .LESS 中的变量来实现自定义.这似乎是一个很好的方法，但没有使用过.我担心在客户端编译 css 和代码可持续性.
虽然我使用的是 Bootstrap，但这个问题可以推广到任何 css 模板.
Though I am using Bootstrap, this question can be generalized to any css template.
预先感谢您的意见.
推荐答案
最好的办法是.
1.从 github fork twitter-bootstrap 并在本地克隆.
他们正在快速地改变库/框架(他们在内部发生分歧.有些人更喜欢库，我会说它是一个框架，因为从你在页面上加载它的时候开始改变你的布局).好吧……分叉/克隆将让您轻松获取即将推出的新版本.
they are changing really quickly the library/framework (they diverge internally. Some prefer library, i'd say that it's a framework, because change your layout from the time you load it on your page). Well... forking/cloning will let you fetch the new upcoming versions easily.
2.不要修改bootstrap.css文件
当您需要升级引导程序(并且您需要这样做)时，它会使您的生活变得复杂.
It's gonna complicate your life when you need to upgrade bootstrap (and you will need to do it).
3.创建自己的 css 文件并在需要原始引导程序时覆盖
如果他们设置了一个顶栏，比方说， if they set a topbar with, let's say, 这篇关于自定义 Bootstrap CSS 模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！color: black; 但你希望它是白色的，为这个顶栏创建一个新的非常具体的选择器，并在特定的顶栏上使用这个规则.例如，对于一个表，它将是 .如果您在
bootstrap.css 之后声明您的 css 文件，这将覆盖您想要的任何内容.
color: black; but you wan it white, create a new very specific selector for this topbar and use this rule on the specific topbar. For a table for example, it would be <table class="zebra-striped mycustomclass">. If you declare your css file after bootstrap.css, this will overwrite whatever you want to.
登录
关闭
