¿Qué es el Bootstrap? - Ecdisis Estudio

¿Qué es el Bootstrap?

Bootstrap es un es un framework basado en HTML, CSS y JavaScript para crear webs responsivas.

Fue desarrollado inicialmente por Twitter para que los desarrolladores trabajaran con un marco de trabajo similar, para que el desarrollo de los diferentes apartados de la aplicación fueran homogéneos y estandarizados y se pudiese hacer el trabajo de programación más rápido.

Posteriormente, el código fue liberado y ahora es software libre y en continuo desarrollo.

Bootstrap contiene cientos de páginas de estilo (CSS) responsivas para que el desarrollo de un tema de WordPress, por ejemplo, sea más sencillo, evitándonos escribir y modificar cientos de líneas de código.

Instalando Bootstrap en nuestra web podremos crear botones, transiciones, desplegables, modales, etc. Tendremos también acceso a diferentes scripts que harán una web responsiva y atractivas sin necesidad de tener que escribir código.

A continuación, explicamos cómo usar Bootstrap en nuestra web sin tener que copiar todo el código en nuestro tema.

Solo habría que hacer una función que haga que se integre en nuestra web modificando unas cuantas líneas de nuestro tema.

¿Cómo podemos usar Bootstrap en WordPress?

Para poder usar Bootstrap tendremos que añadir algunas línea de código en la carpeta de nuestro tema mediante FTP.

Debemos modificar el archivo strong>functions.php en nuestro tema.

Para ello, en primer lugar debemos ir al repositorio oficial de Bootstrap donde podremos encontrar la última versión, concretamente en la siguiente dirección:

 
Aquí copiamos el código que aparece en el primer lugar para que nuestro tema llame a la compilación de Bootstrap y la integre sin necesidad de subir más archivos.

Posteriormente, accedemos a la estructura general de archivos y carpetas de WordPress, concretamente a la carpeta Theme de nuestro tema y abrimos el archivo functions.php.

Dentro de las funciones tendremos que crear una nueva en la que se incluirá ese enlace que hemos copiado antes.

La nueva función quedaría así:

    • Incluir Bootstrap CSS
function bootstrap_css() {
	wp_enqueue_style( 'bootstrap_css', 
  					'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', 
  					array(), 
  					'4.1.3'
  					); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_css');
    • Incluir Bootstrap JavaScript y dependencia popper
function bootstrap_js() {
	wp_enqueue_script( 'popper_js', 
  					'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', 
  					array(), 
  					'1.14.3', 
  					true); 
	wp_enqueue_script( 'bootstrap_js', 
  					'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', 
  					array('jquery','popper_js'), 
  					'4.1.3', 
  					true); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_js');

 
Nota: Si no vas a usar Tooltips o Dropdowns puedes obviar la dependencia Popper.

El enlace deberás copiarlo directamente de la página oficial de Bootstrap ya que va cambiando y la versión que exista en el momento en el que estés leyendo este artículo puede que sea otra superior, con lo que ya no te valdría esto.

Características de un Bootstrap

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS3, pero es compatible con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la información básica de un sitio web para todos los dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para su uso.

Desde la versión 2.0 también soporta diseños web adaptables. Esto significa que el diseño gráfico de la página se ajusta dinámicamente, tomando en cuenta las características del dispositivo usado (Computadoras, tabletas, teléfonos móviles).

Función y Estructura

Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.

Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS.

El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.

Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de “Personalizar” en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS pre-compilada.

 

Sistema de cuadrilla y diseño sensible

Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho. Alternativamente, el desarrollador puede usar un diseño de ancho-variable. Para ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y tipos de dispositivos: teléfonos móviles, formato de retrato y paisaje, tabletas y computadoras con baja y alta resolución (pantalla ancha). Esto ajusta el ancho de las columnas automáticamente.

 

Comprensión de la hoja de estilo CSS

Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Esto otorga una uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y formularios.

 

Componentes re-utilizables

Además de los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye botones con características avanzadas (e.g grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso.

 

Plug-ins de JavaScript

Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de auto-completar para campos de entrada (input). La versión 2.0 soporta los siguientes plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead.

Una implementación de Bootstrap usando el Dojo toolkit también está disponible. Es llamada Dojo Bootstrap  y es un puerto de los plug-ins de Twitter Bootstrap. Usa el código Dojo al 100% y tiene soporte para AMD (Asynchronous Module Definition​).

Write a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *