自定义Bootstrap CSS模板

发布时间：2020-12-17 23:37:16 所属栏目：安全来源：网络整理

导读：我只是从Twitter开始Bootstrap，我想知道什么是“最佳实践”是定制。我想开发一个系统，将利用css模板(Bootstrap或其他)的所有权力，完全(和容易)可修改，可持续(即 – 当下一个版本的Bootstrap从Twitter发布我不’不得不重新开始。例如，我想添加背景图片

我只是从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文件，这将覆盖你想要的任何东西。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!