自定义Bootstrap CSS模板

时间：2011-12-21 21:44:35

标签： css twitter-bootstrap bootswatch

我刚从Twitter开始使用Bootstrap，我想知道什么是“最佳实践”用于定制。我想开发一个系统，它将利用css模板（Bootstrap或其他）的所有功能，完全（并且容易）可修改，可持续（即 - 当Twitter的下一个版本从Twitter发布时我不会我必须重新开始。

例如，我想在顶部导航中添加背景图像。看起来有三种方法可以解决这个问题：

  1. 修改bootstrap.css中的.topbar类。我不是特别喜欢这个，因为我会有很多.topbar项目，我不一定要以同样的方式修改它们。
  2. 使用我的背景图像创建新类并应用这两种样式（new和bootstrap到我的元素）。这可能会产生样式冲突，可以通过将.topbar类剥离到单独的类中然后仅使用我的自定义类未处理的部分来避免这种冲突。同样，这需要比我认为必要的更多的工作，虽然它是灵活的，但是当Twitter发布下一部分时，它将不允许我轻松更新bootstrap.css。
  3. 使用.LESS中的变量来实现自定义。这似乎是一个很好的方法，但没有使用过。很少我担心在客户端编译css和代码可持续性。

    4. 虽然我使用的是Bootstrap，但这个问题可以推广到任何css模板。

    提前感谢您提供意见。

9 个答案:

答案 0 :(得分：126)

最好的办法是。

<强> 1。从github分叉twitter-bootstrap并在本地克隆。

他们正在快速改变库/框架（它们在内部发生分歧。有些人更喜欢库，我说它是一个框架，因为从你在页面上加载它时改变你的布局）。好吧...分叉/克隆可以让你轻松获取新版本。

<强> 2。不要修改bootstrap.css文件

当你需要升级bootstrap时，它会让你的生活变得复杂（你需要这样做）。

第3。创建自己的css文件，并在需要原始引导程序时覆盖

如果他们设置了一个顶部栏，让我们说color: black;，但是你白了，为这个顶栏创建一个新的非常具体的选择器，并在特定的顶栏上使用此规则。例如，对于表格，它将是<table class="zebra-striped mycustomclass">。如果你在bootstrap.css之后声明你的css文件，这将覆盖你想要的任何内容。

答案 1 :(得分：20)

我认为官方首选的方法是使用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

答案 2 :(得分：15)

更新2018 - Bootstrap 4

我正在重新审视4.x的Bootstrap自定义问题，现在使用SASS代替LESS。通常，有两种方法可以自定义Bootstrap ...

<强> 1。简单的CSS覆盖

自定义的一种方法是使用CSS覆盖Bootstrap CSS。为了可维护性，CSS自定义放在单独的custom.css文件中，以便bootstrap.css保持不变。 <{1}}的引用在 custom.css后跟进行，以便覆盖工作... 

bootstrap.css

只需在自定义CSS中添加所需的任何更改即可。例如...... 

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

之前（ /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; } ）

enter image description here

之后（bootstrap.css）

enter image description here

进行自定义时，您应该了解CSS Specificity。 custom.css中的覆盖需要使用与custom.css一样具体的选择器。

  

请注意，除非是自定义CSS中不需要使用bootstrap.css   你正在覆盖其中一个Bootstrap Utility classes。 CSS specificity   总是适用于一个CSS类来覆盖另一个。

<强> 2。使用SASS进行自定义

如果您熟悉SASS（并且您应该使用此方法），则可以使用自己的!important自定义Bootstrap。有section in the Bootstrap docs解释了这一点，但文档没有解释如何利用custom.scss中的现有变量。例如，让我们将正文背景颜色更改为custom.scss，将更改/覆盖蓝色#eeeeee背景颜色更改为Bootstrap's $purple variable ... 

primary

这也适用于创建新的自定义类。例如，我在此处向主题颜色添加/* 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，{{1}创建所有 CSS等等... 

bg-purple

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

使用SASS，您必须 @import bootstrap 自定义后才能使它们正常工作！一旦将SASS编译为CSS（必须使用SASS编译器node-sass，gulp-sass，npm webpack等完成），生成的CSS就是自定义的Bootstrap。如果您不熟悉SASS，您可以使用我创建的theme builder工具自定义Bootstrap。

<强> Custom Bootstrap Demo (SASS)

注意：与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

答案 3 :(得分：10)

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

使用：Bootswatch生成bootstrap.css

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

答案 4 :(得分：5)

您可以使用

中的引导程序模板

http://www.initializr.com/

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

答案 5 :(得分：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. 创建“less”文件夹
  6. 将bootstrap / less / variables.less复制到“less”文件夹
  7. 更改字体路径：@icon-font-path: "../bootstrap/fonts/";
  8. 在“less”文件夹中创建一个自定义style.less文件，该文件夹导入bootstrap.less和您自定义的variables.less文件：https://gist.github.com/jide/8440619
  9. 运行npm install
  10. 运行grunt watch

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

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

答案 6 :(得分：3)

我最近写了post关于过去几年我在Udacity的做法。here。这种方法意味着我们可以随时更新Bootstrap而不会出现合并冲突，抛出工作等等。

该帖子更深入地举例说明，但基本思路是：

  • 保留原始的bootstrap副本并在外部覆盖它。
  • 修改一个文件（bootstrap＆＃39; s variables.less）以包含您自己的变量。
  • 制作您的网站文件@include bootstrap.less，然后填写。

这确实意味着使用LESS，并在将其发送到客户端之前将其编译为CSS（客户端LESS，如果挑剔，我通常会避免使用它），但它对于可维护性/可升级性非常有用，并且获得较少的编译是真的很容易链接的github代码有一个使用grunt的例子，但有很多方法可以实现这一点 - 即使是GUI，如果这是你的事情。

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

  • 使用变量中的@ navbar-inverse-bg更改导航栏颜色。无（不是自举＆＃39;）
  • 将您自己的导航栏样式添加到bootstrap_overrides.less，随时覆盖您需要的任何内容。
  • 幸福。

当升级你的引导程序时，你只需要换掉原始的引导程序副本，一切都仍然可以工作（如果引导程序发生了重大变化，你需要更新你的替换，但是你有无论如何要做到这一点）

带有演练的博客文章是here。

github上的代码示例是{{3}}。

答案 7 :(得分：0)

将LESS与Bootstrap一起使用......

Here are the Bootstrap docs for how to use LESS

（自上次答案以来，他们已经搬迁）

答案 8 :(得分：0)

您可以从https://themestr.app/theme这个工具开始，看看它如何覆盖scss变量，您将了解什么变量会影响什么。这是我认为的最简单的方法。

示例CSS生成：

@import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700);
$font-family-base:Montserrat;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
$headings-font-family:Open Sans;

$enable-grid-classes:false;
$primary:#222222;
$secondary:#666666;
$success:#333333;
$danger:#434343;
$info:#515151;
$warning:#5f5f5f;
$light:#eceeec;
$dark:#111111;
@import "bootstrap";
相关问题
最新问题