En el módulo anterior,
examinamos el número de componentes de Bootstrap que se basan puramente en CSS.
Por lo tanto, al aplicar las clases CSS para estos componentes,
pudimos crearlos en nuestra página web.
En este módulo, vamos a examinar más componentes basados en JavaScript de Bootstrap.
Así que resumiendo, como vimos en el módulo anterior,
Bootstrap soporta una serie de clases CSS que se pueden aplicar a
su marcado HTML en sus páginas web para activar y hacer uso de estas clases CSS.
Por lo tanto, podría ver cómo las clases CSS modificaron las etiquetas HTML genéricas y
proporcionaron la propia forma de Bootstrap de presentar la misma información.
Por lo tanto, los componentes que se basan puramente en CSS se pueden activar fácilmente
aplicando las clases CSS bootstrap a
las diversas etiquetas HTML que están allí en sus páginas web.
Bootstrap por sí mismo se puede usar puramente para sus clases CSS.
Otro aspecto de las clases CSS de Bootstraps que vimos fue
que la mayoría de estos componentes comenzaron con una clase base que aplicó.
Como, por ejemplo, cuando miras el botón,
viste que la clase base era la clase BTN.
Luego aplicaría algo así como
un primario BTN que agregaría sus colores al BTN,
luego podría definir el tamaño del botón diciendo BTN SM.
Entonces también podría definir el botón para que sea un bloque completo usando la clase de bloque BTN.
Por lo tanto, todas estas clases y modificadores posteriores a la clase BTN base.
Así que este enfoque, lo verá una
y otra vez en muchos de los componentes de Bootstraps.
Por lo tanto, tendrá una clase base y luego un conjunto de clases modificadoras que
se pueden aplicar para modificar el comportamiento del componente base.
Esto facilita el diseño fácil de su página web.
Tomando otro ejemplo, podemos ver la clase Nav.
Utilizamos la clase Nav en la barra de navegación que
incluimos en nuestra página web en el módulo anterior.
La clase Nav, modificamos eso aplicando la clase Nav-bar Nav a ella.
Así que eso nos proporcionó una cierta forma de presentar la información de navegación.
En este módulo, examinaremos las pestañas de
navegación y las pastillas de navegación que son otra forma de presentar información de navegación para la página web.
Las pestañas y las píldoras que estamos presentando de nuevo la navegación,
soportado con un plugin de JavaScript,
proporciona una forma mejorada de proporcionar navegación dentro de su contenido.
Por lo tanto, examinaremos eso en este módulo en particular.
Utilizo esto como ejemplo para ilustrarle cómo comenzó desde una clase base,
puede modificar aplicando las clases modificadoras a la clase base.
Por supuesto, si desea poner en
acción la parte JavaScript de sus componentes de Bootstrap,
entonces debe comenzar a aplicar las clases de JavaScript.
Por lo tanto, Bootstrap soporta una serie de componentes que
se soportan a través de plugins de JavaScript.
Ahora, cuando usa estos complementos en su página web,
puede incluir plugins individuales que realmente va a usar en su sitio web,
o todo el conjunto de plugins.
Ahora, lo que vamos a hacer en los ejercicios es
incluir todo el conjunto de plugins porque sólo queremos explorarlos todos.
Pero si está diseñando un sitio web,
puede incluir solo un subconjunto de estos complementos
que realmente está empleando en su sitio web,
reduciendo así la cantidad de código JavaScript que necesita
ser enviado a un usuario que está viendo su página web.
Esta es la forma en que veo el enfoque de Bootstraps para usar JavaScript en
su propio soporte para componentes de Bootstrap que están habilitados con JavaScript.
Si miras JavaScript por sí solo,
proporciona mucha flexibilidad y te permite hacer muchas cosas interesantes.
Pero eso también implica
escribir código JavaScript para ser utilizado cuando está diseñando su sitio web.
Ahora, veo JavaScript como un gran luchador de sumo con mucha capacidad,
mucha potencia, pero indomable.
Ahora, jQuery como una biblioteca que está construida sobre JavaScript,
esencialmente toma el luchador de sumo y luego lo empaqueta de una manera mejor para hacer que
este gorila de cien libras en un tamaño más manejable,
más fácil de abordar y más fácil de
incluir y hacer uso en su sitio web diseño.
Por lo tanto, si está utilizando la biblioteca jQuery directamente,
definitivamente puede aprovechar muchos de
los componentes de jQuery y hacer uso de ellos en su página web.
Ahora, ese es un enfoque que siempre puede tomar porque jQuery
ya se incluirá en su página web de Bootstrap,
si va a aprovechar los componentes basados en JavaScript.
Bootstrap lleva esto un paso más allá,
y luego mirando el
enfoque de la imagen de Bootstrap es tomar al luchador de sumo y luego ponerlo en una caja.
Esencialmente de pie para empaquetar
sus complementos de JavaScript en un componente que puede usar más fácilmente en sus páginas web.
Por lo tanto, los componentes basados en Bootstrap JavaScript esencialmente toman soporte basado en jQuery,
pero luego los empaquetan de una manera que pueda emplearlos en
su página web incluso sin escribir una sola línea de código JavaScript.
Aquí es donde el componente Bootstrap JavaScript
se puede usar sin escribir una sola línea de código.
La forma en que se admite en Bootstrap es que,
los componentes de JavaScript admiten una serie de
atributos de estrella de guiones de datos que puede aplicar a sus etiquetas HTML.
Entonces, me verás usando cosas como alternar
datos, espía de datos, objetivo de datos, etc.
Si recuerdas, cuando diseñamos la barra de navegación,
habías visto un par de estos atributos.
Allí diseñamos el botón para las pantallas extra pequeñas.
Ahora, es hora de que [inaudible] por qué lo hicimos en el módulo anterior.
Por lo tanto, vamos a explorar este enfoque con gran detalle en este módulo,
mirando varios componentes de Bootstrap que aprovechan el soporte de JavaScript.
Por supuesto, puede aprovechar
la API de JavaScript completa que está
disponible para todos estos componentes escribiendo código JavaScript.
Vamos a aplazar esto al siguiente módulo,
donde examinaremos cómo puede escribir código JavaScript simple basado en
la sintaxis jQuery para agregar
más funcionalidad a sus componentes de Bootstrap basados en JavaScript.