正如标题中所要求的那样,我怎么能在最小版本(js和css)中使用git或其他版本控制(如果存在另一个版本控制)将Twitter Bootstrap更新到最新版本,同时在其上应用一些自定义样式如:
没有使用LESS?
任何有线索的人如何以正确的方式最大限度地减少过程?
我在网上搜索了很多,找出了答案,但没有结果。
答案 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;
}