自定义Bootstrap CSS模板
我刚刚开始使用Twitter的Bootstrap,并且想知道自定义的“最佳实践”是什么。我想开发一种系统,该系统将利用css模板(Bootstrap或其他)的所有功能,完全(轻松)地进行修改,具有可持续性(即–从Twitter发布下一版本的Bootstrap时,我不会)不必重新开始。
例如,我想将背景图像添加到顶部导航中。看来有3种方法可以解决此问题:
- 修改bootstrap.css中的.topbar类。我不是特别喜欢这个,因为我会有很多.topbar项,并且我不一定要用相同的方式进行修改。
- 用我的背景图像创建新类,然后将两种样式都应用(新样式和引导样式应用于我的元素)。这可能会产生样式冲突,可以通过将.topbar类剥离到单独的类中,然后仅使用未由我的自定义类踩下的片段来避免。再次,这需要比我认为必要的工作更多的工作,并且尽管它很灵活,但是当Twitter发布下一部分时,它不允许我轻松地更新bootstrap.css。
- 使用.LESS中的变量来实现自定义。副手这似乎是一个不错的方法,但是没有使用过。除非我担心在客户端上编译css和代码的可持续性。
尽管我使用的是Bootstrap,但是这个问题可以推广到任何CSS模板。
预先感谢您的输入。
回答:
最好的办法是。
他们正在迅速地改变库/框架(它们在内部有所不同。有些人更喜欢库,我会说这是一个框架,因为从将其加载到页面时开始就更改了布局)。好吧…分叉/克隆将使您轻松获取即将推出的新版本。
当您需要升级引导程序时(这将使您的生活变得复杂)。
假设他们使用设置了一个顶部栏,color:
black;但您希望将其设置为白色,请为此顶部栏创建一个非常具体的新选择器,并在特定顶部栏上使用此规则。例如,对于一个表,它将为<table
class="zebra-striped
mycustomclass">。如果您在之后声明css文件bootstrap.css
,这将覆盖您想要的任何内容。
以上是 自定义Bootstrap CSS模板 的全部内容, 来源链接: utcz.com/qa/430237.html