自定义引导CSS模板

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

例如，我希望将背景图像添加到顶部导航。看起来有三种方法可以做到这一点：

在bootstrap.css中修改.topbar类。我并不特别喜欢这个，因为我会有很多.topbar项目，我不一定想以相同的方式修改它们。
用我的背景图像创建新的类，并应用这两种样式(新的和引导到我的元素)。这可能会创建样式冲突，可以通过将.topbar类剥离成单独的类，然后只使用我的自定义类没有执行的部分来避免这种冲突。同样，这需要做比我认为应该需要的更多的工作，虽然它是灵活的，但在Twitter发布下一篇文章时，它将不允许我轻松地更新bootstrap.css。
使用.less中的变量来实现自定义。顺便说一下，这似乎是一种不错的方法，但我没有使用.less，我担心在客户机上编译CSS和代码的可持续性。

虽然我使用的是引导，这个问题可以推广到任何CSS模板。

提前感谢您的输入。

慕尼黑8549860

浏览 427回答 3

3回答

慕侠2389804

最好的办法就是。1.分叉Twitter-从GitHub启动并在本地克隆。他们正在非常迅速地改变图书馆/框架(他们内部有分歧)。有些人更喜欢库，我会说它是一个框架，因为从加载到页面上时就改变了布局)。好吧.。分叉/克隆可以轻松获取新版本。2.不要修改bootstrap.css文件当你需要升级引导程序时，它会使你的生活变得复杂(而且你需要这样做)。3.创建自己的css文件，并在需要原始引导的时候覆盖如果他们设置了一个顶板，比如说，color: black;但是您可以选择白色，为这个Topbar创建一个非常特定的选择器，并在特定的Topbar上使用这个规则。例如，对于一个表，它应该是<table class="zebra-striped mycustomclass">..之后，如果您声明您的css文件bootstrap.css，这会覆盖你想写的任何东西。

0 0

米脂

我认为官方首选的方法是现在使用更少的，或者动态地重写bootstrap.css(使用减.js)，或者重新编译bootstrap.css(使用Node或者使用较少的编译器)。从引导文档，下面是如何动态重写bootstrap.css样式：下载最新的Less.js并在<head>. <link rel="stylesheet/less" href="/path/to/bootstrap.less">     <script src="/path/to/less.js"></script>要重新编译.less文件，只需保存它们并重新加载页面即可。js编译它们并将它们存储在本地存储中。或者，如果您喜欢使用自定义样式(对于生产环境)静态编译一个新的bootstrap.css：通过Node安装较少的命令行工具，并运行以下命令：$ lessc ./less/bootstrap.less > bootstrap.css

0 0

随时随地看视频慕课网APP