自定义Bootstrap CSS模板

前端之家收集整理的这篇文章主要介绍了自定义Bootstrap CSS模板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我只是从Twitter开始Bootstrap,我想知道什么是“最佳实践”是定制。我想开发一个系统,将利用css模板(Bootstrap或其他)的所有权力,完全(和容易)可修改,可持续(即 – 当下一个版本的Bootstrap从Twitter发布我不’不得不重新开始。

例如,我想添加背景图片到顶部导航。看起来有3种方法可以做到这一点:

>在bootstrap.css中修改.topbar类。我不是特别喜欢这个,因为我会有很多.topbar项目,我不一定要修改他们都一样的方式。
>使用我的背景图片创建新类,并应用这两种样式(新的和bootstrap到我的元素)。这可能会创建样式冲突,可以通过将.topbar类拆分为单独的类,然后仅使用未由自定义类处理的片段来避免。再次,这需要更多的工作,比我认为应该是必要的,虽然它是灵活的,它不会允许我很容易更新bootstrap.css当Twitter发布下一期。
>使用.LESS中的变量来实现定制。 Offhand这似乎是一个好的方法,但没有使用。我有关于编译客户端和代码可持续性的CSS。

虽然我使用Bootstrap,这个问题可以推广到任何CSS模板。

感谢您提前输入。

解决方法

最好的事情是。

fork twitter-bootstrap从github和本地克隆。

他们正在改变真正快速的库/框架(他们在内部分歧。有些喜欢图书馆,我会说,这是一个框架,因为改变你的布局从你加载到页面上的时间)。好…分叉/克隆将让你轻松获取新的即将到来的版本。

2.不要修改bootstrap.css文件

当你需要升级引导时,它会使你的生活复杂化(你需要这样做)。

3.创建你自己的css文件,并覆盖每当你想要原始的bootstrap东西

如果他们设置了一个顶栏,让我们说,颜色:黑色;但你是白色的,为这个顶栏创建一个新的非常具体的选择器,并在特定的顶部栏使用这个规则。例如,对于表,它将是< table class =“zebra-striped mycustomclass”&gt ;.如果你在bootstrap.css之后声明你的css文件,这将覆盖你想要的任何东西。

猜你在找的Bootstrap相关文章