javascript - programacion - table title html
Bootstrap 3 compatible con las actuales directivas de arranque AngularJS? (3)
Hay una solicitud de extracción pendiente que contiene correcciones para la mayoría de los problemas con Bootstrap 3.0 y las directivas de AngularUi:
¿La versión de bootstrap 3 será compatible con las actuales directivas de arranque de AngularJS?
Quiero usar la directiva Bootstrap 2.3.1 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é?
El equipo de AngularJS sigue trabajando en las directivas JS para v2.3.1 y necesitará tiempo para alcanzar la versión 3.0.0. Quiero empezar a usar la sintaxis de cuadrícula v3 CSS ahora.
Por lo tanto, el proyecto http://angular-ui.github.io/bootstrap/ no depende del JavaScript de Bootstrap (no lo está envolviendo, no necesita, etc.). Esas son directivas AngularJS nativas escritas desde cero para ser livianas y estar bien integradas en el ecosistema AngularJS.
La única adherencia al proyecto de Bootstrap es el marcado de Bootstrap (HTML) y CSS.
Si hace una pregunta "¿Puedo tomar todas las directivas y usarlas con Bootstrap 3.0?", La respuesta es "depende". Realmente depende de si y cuánto decide Bootstrap 3.0 cambiar su marcado y las clases de CSS correspondientes. Supongo que el marcado de algunos controles ha cambiado y no para otros.
Ahora, la muy buena noticia con http://angular-ui.github.io/bootstrap/ es que la mayoría de las clases de marcado HTML y CSS están encapsuladas en plantillas separadas de AngularJS. En la práctica, significa que puede tomar el código JavaScript de las directivas y solo cambiar el marcado (plantillas) para que se ajuste a Bootstrap 3.0.
Todas las plantillas se encuentran aquí: https://github.com/angular-ui/bootstrap/tree/master/template y navegándolas, debe hacerse una idea de que es bastante simple actualizar el marcado sin interferir con JavaScript. Este es uno de los objetivos de diseño de este proyecto.
Le animo a que simplemente lo pruebe y vea cómo el CSS de Bootstrap 3.0 funciona con las directivas y plantillas existentes. Si detecta algún problema, siempre puede actualizar las plantillas a Bootstrap 3.0 (¡y contribuir con ellas al proyecto!)
Solo para darle una alternativa: dispuesto a integrar Angular JS y Boostrap 3 para el desarrollo móvil, he tratado de superar la integración de bootstrap.js de una manera diferente.
En lugar de intentar reproducir el comportamiento de bootstrap.js exactamente componente por componente, básicamente hice dos directivas de propósito general que se comunicaban entre sí a través de eventos para sincronizar el estado activo / inactivo de dos o más nodos DOM. La reflexión de las clases de estado a través las hace capaces de reproducir casi toda la interacción básica de los componentes bootstrap.js.
Por lo tanto, para las aplicaciones más comunes, solo necesitará el css bootstap 3 y estas pocas líneas de js para obtener casi todas las funcionalidades de boostrap 3.
Puede obtener el código aquí, funcionará fuera del proyecto y puede adaptarlo a sus necesidades: https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.coffee .
Es Coffeescript pero puedes traducirlo fácilmente a js a través de js2coffee.org.
También puede leer los documentos aquí: http://mobileangularui.com/#toc6 .
Este es un ejemplo simple 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 así es como puedes usarlos para crear el componente 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>
Como ventaja, también puedes controlar las mismas pestañas 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 puede crear al menos: pestañas, acordeones, collapsibles, modales y listas desplegables sin la necesidad de una biblioteca dedicada. También tenga en cuenta que funcionará con bootstrap 2 y 3 ya que no depende del marcado de bootstrap.