Se bootstrap 3 de liberación del ser compatible con los actuales AngularJS, bootstrap directivas?

Quiero usar Bootstrap 2.3.1 directiva con AngularJS:

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

Con el Bootstrap 3.0.0 CSS:

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

¿Por qué?

AngularJS equipo sigue trabajando en JS directivas para la v2.3.1 y tendrá tiempo de ponerse a la v3.0.0. Yo quiero empezar a usar v3 CSS grid sintaxis de ahora.

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

InformationsquelleAutor Dan Kanze | 2013-05-01

3 Comentarios

  1. 65

    Así, el http://angular-ui.github.io/bootstrap/ proyecto no dependen de Bootstrap JavaScript (no es envolver, que no requieren etc.). Aquellos que son nativos de AngularJS directivas escrito desde cero para ser ligero y bien integrada en el AngularJS ecosistema.

    La única adhesión al proyecto de Bootstrap es Bootstrap del lenguaje de marcado (HTML) y CSS.

    Si haces una pregunta: «¿puedo agarrar todas las directivas y el uso de ellos con Bootstrap 3.0», la respuesta es «depende». Realmente depende de si y cuánto Bootstrap 3.0 decidir hacer cambiar su marcado y las correspondientes clases CSS. Me gustaría suponer que el marcado de algunos controles han cambiado y no para otros.

    Ahora, la buena noticia con http://angular-ui.github.io/bootstrap/ es que la mayoría de las marcas HTML y CSS clases son encapsulados en separar AngularJS plantillas. En la práctica, esto significa que usted puede tomar el código JavaScript de las directivas y sólo cambiar de marcado (plantillas) para encajar en Bootstrap 3.0.

    Todas las plantillas se encuentran aquí:
    https://github.com/angular-ui/bootstrap/tree/master/template
    y navegando por ellos que usted debe tener una idea de que es bastante simple de actualización de marcado sin jugar con JavaScript. Este es uno de los objetivos de diseño de este proyecto.

    Me animo a simplemente darle una oportunidad y ver cómo los CSS de Bootstrap 3.0 funciona con las directivas existentes y plantillas. Si usted encuentra cualquier problema siempre se puede actualizar plantillas Bootstrap 3.0 (y contribuir al proyecto!)

    • Encuentra más información aquí: github.com/angular-ui/bootstrap/issues/331
    • Puede que desee echar un vistazo a la interfaz de usuario alias si usted siente la necesidad de cambiar el nombre de las directivas. También es parte de la angulares-proyectos de interfaz de usuario: github.com/angular-ui/alias
    • Hay una rama separada para el bootstrap 3.0 que contiene las plantillas actualizadas. Parece estar trabajando con Bootstrap 3.0 CSS. github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
    • Espero que ustedes son conscientes del hecho de que a partir de la versión 0.9.0 apoya Bootstrap3 fuera de la caja!
  2. 3

    Sólo para darles una alternativa: dispuestos a integrar Angular JS y Boostrap 3 para el desarrollo de aplicaciones móviles que he tratado de superar el bootstrap.js la integración de una manera diferente.

    Lugar para intentar reproducir bootstrap.js comportamiento exactamente componente por componente, yo, básicamente, dos de propósito general de las directivas de la comunicación de cada uno de los otros a través de eventos para sincronizar el activo/inactivo estado de dos o más nodos DOM. Reflejando el estado de comedero clases hace capaz de reproducir casi todos los de la básica bootstrap.js los componentes de interacción.

    Así que para las aplicaciones más comunes que usted necesita solamente el bootstap 3 de css y estas pocas líneas de js para obtener casi todos los de boostrap 3 funcionalidades.

    Puedes tomar el código de aquí, va a trabajar fuera del proyecto y se puede adaptar para adaptarse a sus necesidades: https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.coffee.

    Es Coffeescript, pero se puede traducir fácilmente a js través de js2coffee.org.

    Puede que también quiera leer la documentación aquí: http://mobileangularui.com/#toc6.

    Este es un ejemplo sencillo para mostrar los conceptos básicos de cómo funciona:

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

    Y esto es cómo usted puede utilizar para crear Pestañas componente:

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

    Como un plus también puede controlar las mismas fichas de diferentes nodos:

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

    No sé si esto puede adaptarse a sus necesidades pero de esta manera usted puede crear al menos: las pestañas, acordeones, collapsibles, los modales y las listas desplegables sin la necesidad de una biblioteca específica. También tenga en cuenta que va a trabajar con bootstrap 2 y 3, ya que no depende de bootstrap marcado a todos.

Dejar respuesta

Please enter your comment!
Please enter your name here