55

bootstrap 3 版本会与当前的 AngularJS 引导指令兼容吗？

我想在 AngularJS 中使用 Bootstrap 2.3.1 指令：

http://angular-ui.github.io/bootstrap/

使用 Bootstrap 3.0.0 CSS：

https://github.com/twitter/bootstrap/tree/3.0.0-wip/

为什么？

AngularJS 团队仍在为 v2.3.1 开发 JS 指令，需要时间赶上 v3.0.0。我现在想开始使用 v3 CSS 网格语法。

https://github.com/angular-ui/bootstrap/issues/331

4

3 回答 3

65

因此，http://angular-ui.github.io/bootstrap/项目不依赖于 Bootstrap 的 JavaScript（它不包装它，不需要等）。这些是从头开始编写的原生 AngularJS 指令，轻量级并很好地集成到 AngularJS 生态系统中。

唯一遵守 Bootstrap 项目的是 Bootstrap 的标记 (HTML) 和 CSS。

如果您问一个问题“我可以获取所有指令并将它们与 Bootstrap 3.0 一起使用”，那么答案是“取决于情况”。这实际上取决于 Bootstrap 3.0 是否以及在多大程度上决定更改其标记和相应的 CSS 类。我认为某些控件的标记已更改，而其他一些控件则没有更改。

现在， http://angular-ui.github.io/bootstrap/的好消息是大多数 HTML 标记和 CSS 类都封装在单独的 AngularJS 模板中。在实践中，这意味着您可以获取指令的 JavaScript 代码，并且只更改标记（模板）以适应 Bootstrap 3.0。

所有模板都位于此处： https ://github.com/angular-ui/bootstrap/tree/master/template 并且通过浏览它们，您应该知道更新标记非常简单而不会弄乱 JavaScript。这是本项目的设计目标之一。

我鼓励你尝试一下，看看 Bootstrap 3.0 的 CSS 如何与现有的指令和模板一起工作。如果您发现任何问题，您可以随时将模板更新到 Bootstrap 3.0（并将它们贡献回项目！）

于 2013-05-02T17:08:04.700 回答
10

有一个待处理的拉取请求，其中包含针对 Bootstrap 3.0 和 AngularUi 指令的大多数问题的修复：

https://github.com/angular-ui/bootstrap/pull/742

于 2013-08-07T04:39:30.120 回答
3

只是给你一个选择：愿意为移动开发集成 Angular JS 和 Boostrap 3 我试图以不同的方式克服 bootstrap.js 集成。

为了尝试逐个组件地重现 bootstrap.js 的行为，我基本上制作了两个通用指令，通过事件相互通信，以同步两个或多个 DOM 节点的活动/非活动状态。反射状态槽类使它们能够重现几乎所有基本的 bootstrap.js 组件交互。

因此，对于最常见的应用程序，您只需要 bootstap 3 css 和这几行 js 即可获得几乎所有 boostrap 3 功能。

您可以在此处获取代码，它将在项目之外工作，您可以对其进行调整以满足您的需求：https ://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle .咖啡。

它是 Coffeescript，但您可以通过 js2coffee.org 轻松地将其翻译成 js。

您可能还想在此处阅读文档：http: //mobileangularui.com/#toc6。

这是一个简单的示例，展示了它的工作原理：

<p toggleable id="lightbulb" active-class="text-primary" class="text-default">
  <i class="fa fa-lightbulb-o"></i>
</p>

<div class="btn-group justified nav-tabs">
  <a toggle="toggle" target="lightbulb" active-class="active" class="btn btn-default" href>
      Toggle
  </a>
  <a toggle="on" target="lightbulb" class="btn btn-default" href>
      Turn On
  </a>
  <a toggle="off" target="lightbulb" class="btn btn-default" href>
      Turn Off
  </a>        
</div>

这就是您可以使用它们创建选项卡组件的方式：

<ul class="nav nav-tabs">
<li><a href="#Tab1" toggle="on" parent-active-class="active">Tab 1</a></li>
  <li><a href="#Tab2" toggle="on" parent-active-class="active">Tab 2</a></li>
  <li><a href="#Tab3" toggle="on" parent-active-class="active">Tab 3</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane" toggleable active-class="active" default="active" id="Tab1" exclusion-group="myTabs">

    <h3 class="page-header">Tab 1</h3>
    <p><!-- ... --></p>
  </div>

  <div class="tab-pane" toggleable active-class="active" id="Tab2" exclusion-group="myTabs">
    <h3 class="page-header">Tab 2</h3>
    <p><!-- ... --></p>
  </div>

  <div class="tab-pane" toggleable active-class="active" id="Tab3" exclusion-group="myTabs">
    <h3 class="page-header">Tab 3</h3>
    <p><!-- ... --></p>
  </div>
</div>

另外，您还可以控制来自不同节点的相同选项卡：

<div class="btn-group justified nav-tabs">
  <a class="btn btn-default" href="#Tab1" toggle="on" active-class="active">Tab 1
  </a>

  <a class="btn btn-default" href="#Tab2" toggle="on" active-class="active">Tab 2
  </a>

  <a class="btn btn-default" href="#Tab3" toggle="on" active-class="active">Tab 3
  </a>

</div>

不知道这是否能满足您的需求，但这样您至少可以创建：标签、手风琴、可折叠、模式和下拉列表，而无需专用库。另请注意，它可以与 bootstrap 2 和 3 一起使用，因为它根本不依赖于 bootstrap 标记。

于 2014-02-14T14:21:12.323 回答