猿问

自定义引导CSS模板

自定义引导CSS模板

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

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

  1. 在bootstrap.css中修改.topbar类。我并不特别喜欢这个,因为我会有很多.topbar项目,我不一定想以相同的方式修改它们。
  2. 用我的背景图像创建新的类,并应用这两种样式(新的和引导到我的元素)。这可能会创建样式冲突,可以通过将.topbar类剥离成单独的类,然后只使用我的自定义类没有执行的部分来避免这种冲突。同样,这需要做比我认为应该需要的更多的工作,虽然它是灵活的,但在Twitter发布下一篇文章时,它将不允许我轻松地更新bootstrap.css。
  3. 使用.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,这会覆盖你想写的任何东西。

米脂

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