Question

我需要在同一页面上同时使用bootstrap 2和bootstrap 3。我不想使用<iframe>。是否可以编译Bootstrap 3，Bootstrap 2的方式可以在本地使用某些HTML 5标签或id指定的内部元素。一个例子（首先是Bootstrap 2，第二个是Bootstrap 3导航栏）：

.navbar {
  *position: relative;
  *z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  color: #777777;
}

.navbar {
  position: relative;
  z-index: 1000;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

在这种情况下，两者都适用于具有类navbar的元素。我想通过使用Bootstrap编译来改变它，如下所示：

.B2WorksHere .navbar {
  *position: relative;
  *z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  color: #777777;
}

.B3WorksHere .navbar {
  position: relative;
  z-index: 1000;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

然后Bootstrap 2将在B2WorksHere的元素内部工作，Bootstrap 3将在B3WorksHere的元素内部工作。我可以在没有任何编译工具的情况下完成它，但我想知道Boostrap的javaScripts是否正常工作，是吗？

我的想法可能吗？或者你有其他一些可以帮助我实现这种行为的解决方案吗？

Answer 1

如果您可以访问.less文件，您可以将所有内容放在类中，就像这样的包装器

.bs2{
   //bootstrap2 classes here
}

.bs3{
 //boostrap3 classes here
}

HTML就是这样：

<div class="bs2">
   <div class="navbar"> </div>
</div>

对于Javascript部分，我认为它不会起作用，因为两个版本都有不同的行为。您必须编辑每个函数以仅查找带有＆＃34; .bs2 .x＆＃34;的元素。而不只是＆＃34; .x＆＃34;

Bootstrap 3可以在本地工作，只能在特定的HTML 5标签内吗？

1 个答案: