Bootstrap 3 совместим с текущими инструкциями по загрузке AngularJS?

Ответ 1

Итак, http://angular-ui.github.io/bootstrap/ проект не зависит от от JavaScript Bootstrap (он не обертывает его, а не требующих и т.д.). Это локальные директивы 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. Это одна из целей дизайна этого проекта.

Я бы посоветовал вам просто попробовать и посмотреть, как CSS Bootstrap 3.0 работает с существующими директивами и шаблонами. Если вы обнаружите какие-либо проблемы, вы всегда можете обновить шаблоны до Bootstrap 3.0 (и внести их обратно в проект!)

Ответ 2

В ожидании запроса на растяжение, содержащем исправления для большинства проблем с Bootstrap 3.0 и директивами AngularUi:

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

Ответ 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.coffee.

Это Coffeescript, но вы можете легко перевести его на js через js2coffee.org.

Вы также можете прочитать документы здесь: 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>

И так вы можете использовать их для создания компонента Tabs:

<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>

Не знаю, может ли это соответствовать вашим потребностям, но таким образом вы можете создать как минимум: вкладки, аккордеоны, коллапсы, модалы и выпадающие списки без необходимости использования специальной библиотеки. Также обратите внимание, что он будет работать либо с загрузкой 2 и 3, так как это не зависит от разметки загрузки.