html - 如何更深入地自定义 twitter/bootstrap？

Question

我最近才发现 twitter/bootstrap，感觉它是一个方便而简单的解决方案，适合像我这样在设计方面表现不佳并一直在处理原始 html/css 代码的人。尤其是对于个别项目，bootstrap 省去了很多枯燥的工作。（固定条、对齐中心、填充、边距等）但是，我注意到引导程序仅支持非常有限的自定义，如颜色、大小、字体等。有谁知道如何逐步自定义引导程序以更好地用于特定用途。在我的场景中，我面临以下问题：

1. 如何去除所有按钮的浮雕/投影效果。这种模式似乎在网络上被过度使用，我更喜欢没有这些效果的纯色（带有一些白光）。

2. 似乎引导程序没有提供悬停弹出菜单的解决方案，我的旧脚本受引导程序影响，不再工作。我错了吗？有谁知道这种解决方案。我的意思是解决方案，就像本页顶部的 StackExchange 弹出菜单一样。

3. 有没有办法添加一些自定义的新类？像添加一个按钮类型，这种东西？

4. 此外，我很高兴听到有关如何利用引导程序优势的任何好的建议。

这些问题也出现了，因为我发现原始的 css 和 js 代码非常讨厌，不确定在不清楚方向的情况下开始重写代码是否是个好主意。

Answer 1

基本上有两种方法可以做到这一点。

1. 从 Github 下载 .less 文件，根据您的意愿对其进行编辑，然后编译您自己的 Bootsrap 版本。毕竟是开源的。这些文件的结构和文档都很好。尽管如果您不熟悉 less，这似乎具有挑战性，但实际上并不难，并且使用像 less 这样的预编译器代替标准 css 有很多好处。这是我选择的方法！在此处了解更多信息：http: //lesscss.org/

2. 创建您自己的样式表，并在引导 css之后将其导入。这种方式可以用您自己的样式覆盖 bootsrap 样式，并添加全新的样式。

单独回答您的问题：

1. 如果您遵循技术 1，您可以执行以下操作：
   • 编辑您的buttons.less版本https://github.com/twitter/bootstrap/blob/master/less/buttons.less
   • 在第 146 行及以下，用类似的 .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);东西替换background-color: @btnPrimaryBackground
   • 重新编译 bootstrap.less，等等！
2. 弹出框怎么样：http: //twitter.github.io/bootstrap/javascript.html#popovers您可以将自己的菜单放入其中。
3. 当然，正如我在回答的第一部分中描述的那样。最好是为此使用选项 1，但两种方式都应该是可能的。
4. 同样，答案的第 1 部分，选项 1 ......（我在这里发现了一个模式）

希望这对您有所帮助。享受 bootstrap，别忘了检查响应能力，因为这是我认为 bootstrap 擅长的地方！