Bootstrap 3 совместим с действующими директивами по загрузке AngularJS?

Будет ли релиз начальной загрузки 3 совместим с текущими директивами начальной загрузки AngularJS?

Я хочу использовать директиву Bootstrap 2.3.1 с AngularJS:

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

С помощью Bootstrap 3.0.0 CSS:

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

Зачем?

Команда AngularJS все еще работает над директивами JS для v2.3.1, и потребуется время, чтобы наверстать упущенное до v3.0.0. Я хочу начать использовать синтаксис сетки v3 CSS сейчас.

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

Источник

3 ответа

Решение

Таким образом, проект 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 (и добавить их обратно в проект!)

Источник

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

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

Источник

Просто чтобы дать вам альтернативу: желая интегрировать Angular JS и Boostrap 3 для мобильной разработки, я попытался преодолеть интеграцию bootstrap.js по-другому.

Вместо того, чтобы пытаться воспроизводить поведение bootstrap.js в точности компонент за компонентом, я в основном сделал две директивы общего назначения, связывающихся друг с другом через события для синхронизации активного / неактивного состояния двух или более узлов DOM. Отражение состояний через классы позволяет им воспроизводить почти все основные компоненты взаимодействия с bootstrap.js.

Таким образом, для наиболее распространенных приложений вам понадобится только начальная загрузка 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/.

Это простой пример, демонстрирующий основы его работы:

<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, поскольку он вообще не зависит от разметки начальной загрузки.

Источник
Другие вопросы по тегам