自定义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类到单独的类，然后只使用没有被我的自定义类步进的部分，再次，这需要更多的工作，我认为应该是必要的，虽然它是灵活的，它不会允许
- 使用.LESS中的变量来实现自定义。 Offhand这似乎是一个好的方法，但没有使用。我有关于编译css的客户端和代码的可持续性。
虽然我使用Bootstrap，这个问题可以推广到任何CSS模板。
Though I am using Bootstrap, this question can be generalized to any css template.
感谢您提供输入。
推荐答案
最好的办法是。
1。
他们正在改变真的很快的库/框架（他们在内部分歧，有些喜欢图书馆，我说它是一个框架，因为从你的页面加载它的时候改变你的布局）。好的...分叉/克隆将让你轻松获取新的即将到来的版本。
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文件并在需要原始引导程序时覆盖
如果他们设置了一个顶栏，例如黑色; 但是你是白色的，为此顶部栏创建一个新的非常具体的选择器，并在特定顶部栏上使用此规则。例如，对于表，它将是< table class =zebra-striped mycustomclass> 。如果你在 bootstrap.css 后声明你的css文件，这将覆盖你想要的任何内容。
if they set a topbar with, let's say, 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.
这篇关于自定义Bootstrap CSS模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
