我刚从Twitter开始使用Bootstrap,我想知道什么是“最佳实践”用于定制。我想开发一个系统,它将利用css模板(Bootstrap或其他)的所有功能,完全(并且容易)可修改,可持续(即 - 当Twitter的下一个版本从Twitter发布时我不会我必须重新开始。
例如,我想在顶部导航中添加背景图像。看起来有三种方法可以解决这个问题:
虽然我使用的是Bootstrap,但这个问题可以推广到任何css模板。
提前感谢您的意见。
最好的办法是。
1.从github分叉twitter-bootstrap并在本地克隆。
他们正在迅速改变库/框架(它们在内部发生分歧。有些人更喜欢库,我会说它是一个框架,因为从你在页面上加载它时改变你的布局)。好吧...分叉/克隆将让您轻松获取即将推出的新版本。
2.不要修改bootstrap.css文件
当你需要升级bootstrap时,它会让你的生活变得复杂(你需要这样做)。
3.创建自己的css文件,并在需要原始引导程序时覆盖
如果他们设置一个顶部栏,比方说,color: black;
,但你想要白色,为这个顶部栏创建一个新的非常具体的选择器,并在特定的顶部栏上使用此规则。例如,对于一个表,它将是<table class="zebra-striped mycustomclass">
。如果你在bootstrap.css
之后声明你的css文件,这将覆盖你想要的任何内容。
我认为官方首选的方法是使用Less,并动态覆盖bootstrap.css(使用less.js),或重新编译bootstrap.css(使用Node或Less编译器)。
从Bootstrap docs,这里是如何动态覆盖bootstrap.css样式:
下载最新的Less.js并在
<head>
中包含它的路径(和Bootstrap)。<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>
要重新编译.less文件,只需保存它们并重新加载页面即可。 Less.js编译它们并将它们存储在本地存储中。
或者,如果您希望使用自定义样式(对于生产环境)静态编译新的bootstrap.css:
通过Node安装LESS命令行工具并运行以下命令:
$ lessc ./less/bootstrap.less > bootstrap.css
更新2019年 - Bootstrap 4
我正在重新审视4.x的这个Bootstrap定制问题,它现在使用SASS而不是LESS。一般来说,有2种方法可以自定义Bootstrap ...
1.简单的CSS覆盖
一种自定义方法是简单地使用CSS来覆盖Bootstrap CSS。为了可维护性,CSS自定义被放在一个单独的custom.css
文件中,因此bootstrap.css
保持不变。在custom.css
之后,bootstrap.css
的引用是为了覆盖工作......
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
只需在自定义CSS中添加所需的任何更改即可。例如...
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}
之前(bootstrap.css
)
之后(与custom.css
)
进行自定义时,您应该了解CSS Specificity。 custom.css
中的覆盖需要使用与bootstrap.css
一样具体的选择器。
请注意,除非您覆盖其中一个
!important
,否则无需在自定义CSS中使用Bootstrap Utility classes。 CSS specificity总是适用于一个CSS类来覆盖另一个。
2.使用SASS进行自定义
如果您熟悉SASS(并且您应该使用此方法),则可以使用自己的custom.scss
自定义Bootstrap。有一个section in the Bootstrap docs解释了这一点,但是文档没有解释如何利用custom.scss
中的现有变量。例如,让我们将body background-color更改为#eeeeee
,并将蓝色primary
上下文颜色更改/覆盖为Bootstrap's $purple
variable ...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* use a variable to override primary */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
这也适用于创建新的自定义类。例如,在这里我将purple
添加到主题颜色,为btn-purple
,text-purple
,bg-purple
,alert-purple
等创建所有CSS ...
/* add a new purple custom color */
$theme-colors: (
purple: $purple
);
https://www.codeply.com/go/7XonykXFvP
使用SASS,您必须在自定义后使用@import引导程序才能使它们正常工作!一旦将SASS编译为CSS(这必须使用SASS编译器node-sass,gulp-sass,npm webpack等完成),生成的CSS就是自定义的Bootstrap。如果您不熟悉SASS,可以使用我创建的theme builder之类的工具自定义Bootstrap。
注意:与3.x不同,Bootstrap 4.x不提供官方定制工具。但是,您可以下载grid only CSS或使用其他4.x custom build tool根据需要重新构建Bootstrap 4 CSS。
有关: How to extend/modify (customize) Bootstrap 4 with SASS How to change the bootstrap primary color? How to create new set of color styles in Bootstrap 4 with sass How to Customize Bootstrap
自从Pabluez在12月回复以来,现在有一种更好的自定义Bootstrap的方法。
使用:Bootswatch生成你的bootstrap.css
Bootswatch从最新版本(无论你在bootstrap目录中安装)构建普通的Twitter Bootstrap,还可以导入自定义。这样可以轻松使用最新版本的Bootstrap,同时保持自定义CSS,而无需更改HTML的任何内容。你可以简单地摇摆boostrap.css文件。
您可以使用自举模板
其中包括所有bootstrap .less文件。然后,您可以根据需要更改变量/更新较少的文件,它将自动编译css。部署时将较少的文件编译为css。
我认为最好的选择是编译自定义LESS文件,包括bootstrap.less,自定义variables.less文件和您自己的规则:
git clone https://github.com/twbs/bootstrap.git
@icon-font-path: "../bootstrap/fonts/";
npm install
grunt watch
现在您可以以任何方式修改变量,覆盖自定义style.less文件中的引导规则,如果有一天您想要更新引导程序,则可以替换整个引导程序文件夹!
编辑:我使用这种技术创建了一个Bootstrap样板:https://github.com/jide/bootstrap-boilerplate
我最近写了一篇关于我在post过去几年如何做的Udacity。这种方法意味着我们能够在没有合并冲突,抛出工作等的情况下随时更新Bootstrap。
帖子更深入地举例说明,但基本思路是:
这意味着使用LESS,并在将其发送到客户端之前将其编译为CSS(客户端LESS,如果挑剔,我通常会避免它)但是它对于可维护性/可升级性非常好,并且获得LESS编译非常简单。链接的github代码有一个使用grunt的例子,但有很多方法可以实现这一点 - 即使是GUI,如果这是你的事情。
使用此解决方案,您的示例问题如下所示:
当升级你的引导程序时,你只需要换掉原始引导程序副本,一切都会工作(如果引导程序发生了重大变化,你需要更新你的覆盖,但你必须这样做)
带有漫游的博客文章是here。
github上的代码示例是here。