Bootstrap: descripción general de los complementos

Los componentes discutidos en los capítulos anteriores bajo Layout Componentsson solo el comienzo. Bootstrap viene con 12 complementos de jQuery que amplían las funciones y pueden agregar más interacción a su sitio. Para comenzar con los complementos de JavaScript de Bootstrap, no necesita ser un desarrollador avanzado de JavaScript. Al utilizar Bootstrap Data API, la mayoría de los complementos se pueden activar sin escribir una sola línea de código.

Los complementos de Bootstrap se pueden incluir en su sitio de dos formas:

  • Individually- Usando archivos * .js individuales de Bootstrap . Algunos complementos y componentes CSS dependen de otros complementos. Si incluye plugins individualmente, asegúrese de comprobar si existen estas dependencias en los documentos.

  • O compiled (all at once)- Usando bootstrap.js o el bootstrap.min.js minificado . No intente incluir ambos, ya que tanto bootstrap.js como bootstrap.min.js contienen todos los complementos en un solo archivo.

Todos los complementos dependen de jQuery. Por lo tanto, jQuery debe incluirse antes de los archivos del complemento. Compruebe bower.json para ver qué versiones de jQuery son compatibles.

Atributos de datos

  • Se puede acceder a todos los complementos de Bootstrap mediante la API de datos incluida. Por lo tanto, no es necesario que incluya una sola línea de JavaScript para invocar cualquiera de las funciones del complemento.

  • En algunas situaciones, puede ser conveniente desactivar esta funcionalidad de la API de datos. Si necesita desactivar la API de datos, puede desvincular los atributos agregando la siguiente línea de JavaScript:

$(document).off('.data-api')

  • Para desactivar un complemento específico / único, simplemente incluya el nombre del complemento como un espacio de nombres junto con el espacio de nombres de data-api como este:

$(document).off('.alert.data-api')

API programática

Los desarrolladores de Bootstrap creen que debería poder utilizar todos los complementos únicamente a través de la API de JavaScript. Todas las API públicas son métodos únicos y encadenables, y devuelven la colección sobre la que se actuó, por ejemplo:

$(".btn.danger").button("toggle").addClass("fat")

Todos los métodos aceptan un objeto de opciones opcional, una cadena que apunta a un método en particular o nada (que inicia un complemento con comportamiento predeterminado) como se muestra a continuación:

// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Cada complemento también expone su constructor en bruto en un Constructorpropiedad: $ .fn.popover.Constructor . Si desea obtener una instancia de complemento en particular, recupérela directamente de un elemento:

$('[rel = popover]').data('popover').

No conflicto

Los complementos de Bootstrap a veces se pueden usar con otros marcos de interfaz de usuario. En estas circunstancias, pueden producirse ocasionalmente colisiones de espacios de nombres. Para superar esta llamada.noConflict en el complemento cuyo valor desea revertir.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

Eventos

Bootstrap proporciona eventos personalizados para la mayoría de las acciones únicas de los complementos. Generalmente, estos eventos se presentan en dos formas:

  • Infinitive form- Esto se activa al inicio de un evento. Por ejemplo, mostrar . Los eventos infinitivos proporcionan la funcionalidad preventDefault . Esto proporciona la capacidad de detener la ejecución de una acción antes de que comience.

$('#myModal').on('show.bs.modal', function (e) {
   // stops modal from being shown
   if (!data) return e.preventDefault() 
})

  • Past participle form- Esto se activa al completar una acción. Ej. Mostrado.