应用自定义css时保持Twitter Bootstrap更新的最佳方法

时间:2013-05-13 15:51:57

标签: twitter-bootstrap

正如标题中所要求的那样,我怎么能在最小版本(js和css)中使用git或其他版本控制(如果存在另一个版本控制)将Twitter Bootstrap更新到最新版本,同时在其上应用一些自定义样式如:

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

没有使用LESS?

任何有线索的人如何以正确的方式最大限度地减少过程?

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

3 个答案:

答案 0 :(得分:5)

请勿修改引导程序文件。只需创建第二个文件,为要修改的内容添加更多特定规则。

例如:

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

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

另外:阅读less 非常简单。它以您想象的嵌套CSS的方式工作。您只需阅读Bootstrap source即可找出各个部分。


或者你可以吸吮它并少用。这种方式非常简单。 Checkout bootstrap的主分支。更改此文件:

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

使用许多方法中的一种来编译和缩小较少的css。

VOILÀ。完整。

答案 1 :(得分:3)

简单:请勿触摸原始信号源。

只需覆盖自定义文件中所需的CSS规则。

答案 2 :(得分:1)

如新的documentation about the new 3.x分支所述,您可以通过创建新的CSS文件来实现:

  

总结一下,这是基本的工作流程:

     
      
  • 对于要自定义的每个元素,请在已编译的代码中查找其代码   Bootstrap CSS。 按原样复制并粘贴选择
  •   
  • 使用选择器在单独的样式表中添加所有自定义CSS   刚从Bootstrap源复制而来。无需使用   额外的课程或使用!important在这里。
  •   
  • 冲洗并重复,直到您对自定义感到满意为止。
  •   

最好的方法是创建一个新的类名,然后一起使用。 例如:

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

它使用bootstrap中的原始“ 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;
}