4

如标题中所问，我如何将 Twitter Bootstrap 从 git 或另一个版本控制（如果存在另一个版本控制）以缩小版本（js 和 css）更新到最新版本，同时在其上应用一些自定义样式，例如：

  • 边界半径
  • 按钮颜色
  • 字体系列/字体大小
  • ETC...

并且不使用 LESS ？

任何人都有一些线索如何以正确的方式最小化实现这一目标的过程？

我在网上搜索了很多，以找出答案，但没有结果。

4

3 回答 3

5

不要修改引导文件。只需创建第二个文件，为您要修改的内容添加更具体的规则。

例如：

 #my-app-id .alert {
   background-color: blue;
 }

只要您有一个非常具体的覆盖，它将在引导程序的规则之后应用，而将其他规则保留在原位。然后，您可以随时升级 boostrap。

另外：阅读less非常简单。它的工作方式与您想象的嵌套 CSS 一样。您可以简单地阅读Bootstrap 源代码来找出其中的部分。

或者你可以把它吸起来，少用一点。这样真的很简单。结帐引导程序的主分支。更改此文件：

https://github.com/twitter/bootstrap/blob/master/less/variables.less

使用众多方法中的一种将 less 编译并缩小为 css。

瞧。完全的。

于 2013-05-13T15:53:42.047 回答
3

简单：不要触摸原始来源。

只需在自定义文件中覆盖您需要的 CSS 规则。

于 2013-05-13T15:55:37.023 回答
1

如关于新 3.x分支的新文档中所述，您可以通过创建新的 CSS 文件来实现：

回顾一下，这是基本的工作流程：

  • 对于您要自定义的每个元素，请在已编译的 Bootstrap CSS 中找到其代码。按原样复制并粘贴组件的选择器。
  • 使用刚刚从 Bootstrap 源复制的选择器将所有自定义 CSS 添加到单独的样式表中。无需在此处添加其他类或使用 !important。
  • 冲洗并重复，直到您对自定义感到满意为止。

最好的方法是创建一个新的类名并将两者一起使用。例如：

<button type="button" class="**btn btn-ttc**">Save changes</button>

它使用来自引导程序的原始“ btn ”类并添加个性化的“ btn-ttc ”。因此，您可以添加一个新的 CSS 文件，将其包含在您的项目中，然后创建该类：

/* Custom button
-------------------------------------------------- */

/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007da7;
}
于 2013-09-20T12:38:23.133 回答