自定义Bootstrap CSS模板

109

我刚刚开始使用Twitter的Bootstrap，并且想知道自定义的“最佳实践”是什么。我想开发一种系统，该系统将利用css模板（Bootstrap或其他）的所有功能，完全（轻松）地进行修改，具有可持续性（即–从Twitter发布下一版Bootstrap时，我不会）不必重新开始。

例如，我想将背景图像添加到顶部导航中。看来有3种方法可以解决此问题：

  1. 修改bootstrap.css中的.topbar类。我不是特别喜欢这个，因为我会有很多.topbar项，并且我不一定要用相同的方式进行修改。
  2. 用我的背景图像创建新类，然后将两种样式（新样式和自举样式应用于我的元素）。这可能会导致样式冲突，可以通过将.topbar类剥离到单独的类中，然后仅使用自定义类没有踩到的片段来避免。再次，这需要比我认为必要的工作更多的工作，并且尽管它很灵活，但它不允许我在Twitter发布下一部分时轻松更新bootstrap.css。
  3. 使用.LESS中的变量来实现自定义。副手这似乎是一个不错的方法，但是没有使用过。除非我担心在客户端上编译css和代码的可持续性。

尽管我使用的是Bootstrap，但是这个问题可以推广到任何CSS模板。

预先感谢您的输入。

css  twitter-bootstrap  bootswatch 
— 安妮
source
@Pabluez，您好，您回答了，请参阅下文。很抱歉延迟回复-我一直很忙。
— 安妮（Anne）
我相信，这篇文章将帮助您prideparrot.com/blog/archive/2014/6/...
— VJAI
1
— 以星

Answers:

127

最好的办法是。

1.从github派生twitter-bootstrap并在本地克隆。

他们正在迅速地改变库/框架（它们在内部有所不同。有些人更喜欢库，我会说这是一个框架，因为从将其加载到页面时开始就更改了布局）。好吧...分叉/克隆将使您轻松获取即将推出的新版本。

2.不要修改bootstrap.css文件

当您需要升级引导程序时（这将使您的生活变得复杂）。

3.创建自己的CSS文件，并在需要原始引导程序内容时覆盖

例如，如果他们将topbar设置为color: black;白色，但您希望将其设置为白色，则为该topbar创建一个新的非常特定的选择器，并在特定topbar上使用此规则。例如，对于一个表，它将为<table class="zebra-striped mycustomclass">。如果在之后声明css文件bootstrap.css，这将覆盖您想要的任何内容。

— 帕布鲁兹
source
15
+1好答案。只是添加到他的第三点上：您可以创建一个新的类以在旧类之外进行应用，或者只覆盖/添加要更改的属性。
— Wex 2011年
那就是我对mycustomcss的意思...除了斑马条纹（引导程序类）之外，我将其编辑为mycustomclass
— Pabluez 2011年
1
您可以通过“少” /“少”的新方法添加一些内容吗？即：如何继承“引导”样式？继承全部+扩充。我还没弄清楚这是混搭，扩展还是?? 对不起，你傻了。
— 亚历克斯·格雷
1
+1感谢您的回答。我一直在这样做，它奏效了，但感觉并不是最可持续的答案。如果获得更新的bootstrap.css文件，则可能必须更改自定义替代类以适应任何更改。像@alexgray一样，我想了解一种使用less或mixins做到这一点的方法。或者，甚至更好的方法是创建没有应用引导程序的沙箱，以便我可以使用样式而不必覆盖引导程序。如果有人那里有很好的教程
— 安妮
2
如果仅要将更改添加到自己的CSS文件中，那么分叉Bootstrap有什么意义？
32

更新2019-Bootstrap 4

我正在重新讨论4.x的Bootstrap自定义问题，该问题现在使用SASS而不是LESS。通常，有两种自定义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特殊性。在重写custom.css需要使用那些具体的选择bootstrap.css。

请注意!important，除非您要覆盖Bootstrap Utility类之一，否则无需在自定义CSS中使用。CSS特异性 始终适用于一个CSS类来覆盖另一个CSS类。

2.使用SASS进行自定义

如果您熟悉SASS（并且应该使用此方法），则可以使用自己的自定义Bootstrap custom.scss。Bootstrap文档中有一个部分对此进行了说明，但是文档中没有说明如何利用中的现有变量custom.scss。例如，让我们将主体的background-color 更改为#eeeeee，并将蓝色上下文颜色更改/覆盖primary为Bootstrap的$purple变量 ...

/* 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到创建主题颜色全部为CSS btn-purple，text-purple，bg-purple，alert-purple，等...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

使用SASS，必须在自定义后使用@import bootstrap才能使它们起作用！一旦将SASS编译为CSS（必须使用SASS编译器node-sass，gulp-sass，npm webpack等完成此操作），生成的CSS是自定义的Bootstrap。如果您不熟悉SASS，则可以使用我创建的此主题生成器之类的工具来自定义Bootstrap 。

自定义引导程序演示（SASS）

注意：与3.x不同，Bootstrap 4.x不提供官方的定制工具。但是，您可以仅下载网格 CSS，也可以根据需要使用其他4.x定制构建工具来重新构建Bootstrap 4 CSS。

相关：
如何使用SASS扩展/修改（自定义）Bootstrap 4
如何更改引导程序原色？
如何使用sass在Bootstrap 4中创建一组新的颜色样式
如何自定义Bootstrap

— 齐姆
source
Noice-如何为新的自定义按钮设置背景，边框，字体的自定义颜色？
— 挖出
生成的CSS文件大约为160 Kb（压缩后为130Kb）是否正常？例如，是否可以仅覆盖原色？
— 叶夫根尼
@Zim感谢您创建的主题生成器！
— Kareem Jeiroudi
注意：记住在编译后使用Autoprefixer
— kanlukasz
20

我认为现在官方首选的方法是使用Less，然后动态覆盖bootstrap.css（使用less.js），或者重新编译bootstrap.css（使用Node或Less编译器）。

在Bootstrap文档中，以下是如何动态覆盖bootstrap.css样式的方法：

下载最新的Less.js，并将其路径（和Bootstrap）包含在中<head>。

 <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
— 对称的
source
这是首选的方法：）
— Srivathsa 2013年
10

自从Pabluez在12月份回答以来，现在有了更好的自定义Bootstrap的方法。

使用：Bootswatch生成您的bootstrap.css

Bootswatch从最新版本（无论安装在bootstrap目录中）构建普通的Twitter Bootstrap，但也导入您的自定义项。这样就可以轻松使用最新版本的Bootstrap，同时保留自定义CSS，而无需更改HTML内容。您可以简单地摇摆boostrap.css文件。

— mdashx
source
您能否详细说明使用此功能的最佳方法。我下载了bootswatch并使用grunt swatch：theme构建了CSS，但是我仍然不知道应该将哪些文件放在哪里。我正在尝试一种情况，我可以下载引导程序或引导程序主题的更新版本并使用它，但仍使用我的自定义变量。（如果有帮助，我正在VisualStudio2013 Pro中工作）。我不想使用javascript进行编译。现在，我可以运行构建命令。稍后，我将尝试找到一种自动化的好方法。感谢马克
— mark1234
5

您可以从以下位置使用引导模板

http://www.initializr.com/

其中包括所有bootstrap .less文件。然后，您可以根据需要更改变量/更新较少的文件，它将自动编译CSS。部署时，将较少的文件编译到CSS。

— 汤姆
source
3

我认为最好的选择是编译一个自定义的LESS文件，包括bootstrap.less，一个自定义的variables.less文件和您自己的规则：

  1. 在您的根文件夹中克隆引导程序： git clone https://github.com/twbs/bootstrap.git
  2. 重命名为“ bootstrap”
  3. 创建一个package.json文件：https : //gist.github.com/jide/8440609
  4. 创建一个Gruntfile.js：https ://gist.github.com/jide/8440502
  5. 创建一个“较少”文件夹
  6. 将bootstrap / less / variables.less复制到“ less”文件夹中
  7. 更改字体路径： @icon-font-path: "../bootstrap/fonts/";
  8. 在“ less”文件夹中创建一个自定义style.less文件，该文件会导入bootstrap.less和您的自定义variable.less文件：https ://gist.github.com/jide/8440619
  9. 跑 npm install
  10. 跑 grunt watch

现在，您可以按任何方式修改变量，在自定义style.less文件中覆盖引导程序规则，如果有一天要更新引导程序，则可以替换整个引导程序文件夹！

编辑：我使用这种技术创建了一个Bootstrap样板：https : //github.com/jide/bootstrap-boilerplate

— 吉德
source
3

我最近写了一篇关于过去几年我在Udacity的工作方式的帖子。这种方法意味着我们能够在需要时随时更新Bootstrap，而不会发生合并冲突，丢掉工作等问题。

该帖子通过示例进行了更深入的介绍，但是基本思想是：

  • 保留引导程序的原始副本并在外部覆盖它。
  • 修改一个文件（bootstrap的variables.less）以包含您自己的变量。
  • 将站点文件设置为@include bootstrap.less，然后进行覆盖。

这确实意味着要使用LESS，并在将其交付给客户端之前将其编译为CSS（如果有挑剔，则要在客户端使用LESS，我通常会避免使用），但是对于可维护性/可升级性来说，它非常好，并且获得LESS编译确实非常容易。链接的github代码有一个使用grunt的示例，但是有很多方法可以实现这一点-即使是GUI，只要您愿意。

使用此解决方案，您的示例问题将如下所示：

  • 在您的变量中使用@ navbar-inverse-bg更改导航栏的颜色。less（不是引导程序的）
  • 将您自己的导航栏样式添加到bootstrap_overrides.less中，以覆盖您需要的任何内容。
  • 幸福。

当需要升级您的引导程序时，您只需换出原始的引导程序副本，一切仍然可以进行（如果引导程序进行了重大更改，则需要更新您的替代项，但无论如何都必须这样做）

带有演练的博客文章在这里。

github上的代码示例在这里。

— 胸围
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.