Qué es Bootstrap y cómo instalarlo en WordPress con éxito

Bootstrap

¿Qué es Bootstrap?

Bootstrap

Bootstrap es un framework basado en HTML, CSS y JavaScript para crear webs responsive, es decir, 100% adaptables a todo tipo de dispositivos móviles.

En el ámbito del diseño y desarrollo web un framework es un conjunto de herramientas basadas en lenguajes web como por ejemplo PHP, JavaScript y CSS cuyo principal objetivo es el de facilitar al máximo el proceso de diseño de tus páginas.

Bootstrap fue desarrollado por Twitter en el año 2011 y debido a simplicidad de uso, utilidad y coste nulo se ha posicionado como uno de los frameworks de referencia.

Principales características de Bootstrap

Características Bootstrap

Bootstrap posee muchas funcionalidades distintas que hacen de él una herramienta muy valiosa para cualquier persona que quiera diseñar una web totalmente responsive y que a su vez esté optimizada para conservar así buenos tiempos de carga.

Sus principales características son:

  • Open source: es un framework de código abierto y por tanto accesible para todo el mundo sin que esto implique ningún coste o limitación.
  • Grid: gracias a su sistema de rejilla basado en un diseño de 12 columnas conseguimos adaptar nuestro contenido a los distintos tamaños de pantalla.
  • HTML5 y CSS3: soporta las últimas versiones de HTML y CSS.
  • Optimización: posee un código limpio y optimizado para que tu web cargue lo más rápido posible.
  • Uso: tiene una curva de aprendizaje moderada y cuenta con documentación suficiente para conseguir resultados desde el primer día.
  • Componentes: a parte del Grid posee elementos de fácil instalación como por ejemplo iconos, botones, menús desplegables, etc…
  • Compatibilidad: el framework es compatible en navegadores tan importantes como:
    • Google Chore
    • Mozilla Firefox
    • Safari
    • Internet Explorer
    • Opera
  • LESS: funciona a la perfección con LESS, un preprocesador que te permitirá escribir CSS de forma mucho más rápida y con muchas más opciones.
  • Garantías: ha sido creado por Twitter, una empresa de renombre mundial que te asegurará un correcto funcionamiento así como continuas actualizaciones.

Requisitos previos para usar Bootstrap

Requisitos para usar Bootstrap

Antes de comenzar a utilizar la herramienta necesitarás conocimientos previos en HTML y CSS ya que el framework está basado en su totalidad en estos lenguajes.

Si bien JavaScript está involucrado también para activar y desactivar diferentes elementos como es el caso de los menús desplegables de Bootstrap no es necesario que tengas ningún conocimiento previo .

Para empezar con estos recursos tendrás más que suficiente:

Cómo funciona Bootstrap

Sistema de rejillas Grid

Sistema de rejillas (Grid)

Lo más importante de Bootstrap es su sistema de rejillas (también conocido como Grid) por el que mediante una serie de clases de CSS lograrás posicionar tu contenido en base a un sistema de 12 columnas adaptándose a la perfección hasta en 4 resoluciones diferentes.

Como podrás comprobar en la documentación cada resolución tiene asociada una clase CSS:

  • Extra small devices – Phones (<768px) : .col-xs-
  • Small devices – Tablets (≥ 768px): .col-sm
  • Medium devices – Desktops (≥992px): .col-md-d
  • Large devices – Desktops (≥1200px): .col-lg

Para determinar el número de columnas que cada elemento tomará le añadiremos a las clases un número que irá del 1 al 12,  siendo 1 el espacio que tomará para una columna y 12 el correspondiente a las 12 columnas, es decir, todo el ancho del grid.

Por ejemplo, en el siguiente caso tenemos un div con 4 clases:

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">Contenido del div</div>
  • .col-xs-12: significa que para smartphones el div tomará todo el ancho del Grid.
  • .col-sm-12: para tablets ocupa todo el ancho también.
  • .col-md-8: en desktops medianos tomará 8 columnas, es decir un 8/12 del ancho total.
  • .col-lg-6: en desktops grandes ocupará justamente la mitad.

A continuación te muestro un vídeo para que entiendas mejor como funciona el Grid:

Componentes

Además de la herramienta Grid Bootstrap te ofrece la posibilidad de incluir una serie de elementos en tus páginas: los componentes.

Los componentes no son más que una serie de estructuras en HTML que gracias a las clases CSS y el código desarrollado en JavaScript te permitirá dotar a tu web con una serie de elementos muy interesantes.

 

Componentes Bootstrap

Destacamos por ejemplo:

  • Glyphicons: más de 250 iconos en formato fuente en distintos tamaños y colores.
  • Dropdowns: menú desplegables para mostrar y ocultar toda la información en él en forma de enlaces.
  • Botones: botones simples o agrupados.
  • Breadcrumbs: también conocidas como «migas de pan», para indicarte la localización de la página en la que te encuentras.
  • Alertas: te aportan información diferente en función del color que posea.

Para su implementación lo único que tienes que hacer es copiar la estructura básica del elemento y posteriormente añadir el contenido que quieras en su estructura HTML así como aplicarle los estilos que necesites vía CSS.

Aquí tenemos un ejemplo para la estructura de un menú desplegable:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Te muestro un segundo vídeo para que veas lo fácil que es crear alguno de los componentes de Bootstrap:

Cómo instalar Bootstrap en tu proyecto

Instalación de Bootstrap

Si quieres aprender a usar esta magnífica herramienta lo mejor es ensuciándote las manos y eso comienza por instalar Bootstrap.

Para ello dirígete a la página oficial y pulsa en Download Bootstrap”.

Como verás tienes varias opciones. Para que no te compliques te aconsejo que selecciones una de estas dos:

  • Download Bootstrap.
  • Bootstrap CDN.

Download Bootstrap

Lo único que tienes que hacer es seguir los siguientes pasos:

  1. Descarga Bootstrap en fichero zip pulsando en «Download Bootstrap».
  2. Abre tu documento HTML y en la etiqueta <head> justo debajo de <title> introduce el enlace del archivo CSS minificado «bootstrap.min.css».
  3. Añade a continuación dos enlaces. El primero para la librería jQuery de JavaScript ya que es requisito imprescindible para determinadas acciones (puedes acceder a ella aquí). Debajo del anterior añade el segundo al archivo «bootstrap.min.js» (también puedes incluirlos antes de finalizar la etiqueta </body> para que tu página cargue mejor).
  4. Transfiere todo los archivos a tu servidor vía FTP en el servidor de tu proveedor hosting.

La estructura de tu documento HTML tendría que ser algo así:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documento de prueba</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="main.css"> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
	<h1>Contenido del documento HTML</h1>
</body>
</html>

La distribución de archivos y carpetas de tu proyecto quedaría de forma simplificada de esta manera:

Estructura Proyecto Bootstrap

¿No te ha quedado claro? Déjame ayudarte entonces con otro vídeo:

Bootstrap CDN

Bootstrap utiliza la CDN MaxCDN para evitar que tengas que descargarte el framework previamente y transferirlo a tu servidor.

Como verás en la página official Bootstrap te ofrece varios enlaces para implementarlo:

MaxCDN Bootstrap

De estos tres realmente sólo necesitas dos: el «bootstrap.min.css» y el«bootstrap.min.js» (no te olvides de añadir también tu enlace a jQuery). Cópialos y pégalos justo debajo de la etiqueta <title> de tu documento:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documento de prueba</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="main.css"> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
	<h1>Contenido del documento HTML</h1>
</body>
</html>

Y listo. Con eso ya tendríamos el framework listo para ser usado.

Terminamos con otro vídeo para implementar Bootstrap vía CDN:

¿Qué opción elegir?

A grandes rasgos es mejor usar la segunda opción  ya que su instalación es mucho más rápida y al estar alojada en una CDN consumirá mucho menos recursos, ancho de banda y, en definitiva, hará que tu sitio web vaya mucho más rápido.

Por el contrario, descargar todos los ficheros en tu servidor y enlazarlo a tu documento HTML nunca está demás para darte mayor conocimiento sobre el funcionamiento de un servidor y aprender más de estas magníficas herramientas.

Incluso podrías trabajar offline con Bootstrap tras transferirlo a un servidor local.

Bootstrap en WordPress. ¿Es recomendable implementarlo?

Necesidad Bootstrap

Si usas un gestor de contenidos como WordPress puede darse el caso de necesitar este tipo de frameworks en situaciones en las que no puedas recurrir a plugins, temas framework y otras herramientas que ofrezcan diseño responsive.

El caso de las entradas de tu blog puede ser uno de ellos. Me explico.

Normalmente usamos el editor de WordPress para editar nuestras entradas. Es algo que te recomiendo al 100% pues si usaras un plugin de maquetación con efecto lock-in y lo desinstalarás algún día podrías perder toda la información que habías añadido.

¿Y que ocurre si usamos el editor para las entradas? Pues que toda la información almacenada allí va a ser contenido HTML plano por lo que no todos los elementos que añadamos se comportarán de forma responsive.

En cambio, teniendo Bootstrap conseguirás hacer que cualquier elemento de tu web esté sujeto a sus reglas pudiendo adaptarse a los dispositivos móviles.

Veamos un ejemplo para que lo entiendas con mayor claridad:

Cómo instalar Bootstrap en WordPress

Instalación Bootstrap WordPress

El proceso para implementar Bootstrap en WordPress será en cierta forma similar al que te mostré para instalarlo en tu proyecto web:

  • Download Bootstrap.
  • Bootstrap CDN.

Download Bootstrap

La transferencia de archivos vía FTP es la misma cambiando sólo el método para enlazar los archivos del framework con la estructura HTML de tu WordPress.

Para ello utilizaremos el siguiente código:

Código FTP Bootstrap WordPress

Con el código del recuadro rojo lo que estamos haciendo es insertar en la estructura HTML de nuestro sitio web un enlace al archivo CSS «bootstrap.min.css»  que irá situado justo encima del enlace de nuestra hoja de estilos principal y que he nombrado como «style.css». 

Esto se hace para que el archivo CSS Bootstrap cargue antes y puedas sobreescribir los estilos de éste si lo necesitaras. Esto es algo típico de las hojas de estilos y que entenderás nada más adquieras unos conocimientos básicos sobre ellas.

Para el código JavaScript el procedimiento es exactamente el mismo cambiando sólo los nombres y extensiones de los archivos: «bootstrap.js.css» para el archivo JavaScript de Bootstrap y «javacript.js «para mi archivo principal JavaScript.

Copia el siguiente código, haz los cambios necesarios según el directorio de tus archivos y pégalos en tu archivo functions.php de tu tema hijo:

function theme_styles() {

  wp_enqueue_style( 'bootstrap_css', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' ); 
  wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() . '/style.css' );

}

add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() {

  global $wp_scripts;

  wp_enqueue_script( 'bootstrap_js', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.min.js' ); 
  wp_enqueue_script( 'main_js', get_stylesheet_directory_uri() . '/javascript.js' );

}

add_action( 'wp_enqueue_scripts', 'theme_js');

No te pierdas el siguiente vídeo donde te lo explico con mayor detalle:

Bootstrap CDN

Si quieres utilizar la CDN de Bootstrap sólo tendrás que añadir los enlaces correspondientes al CSS y JavaScript:

Código CDN Bootstrap WordPress

El código a utilizar es el siguiente:

function theme_styles() {function theme_styles() {

   wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
   wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() . '/style.css' );

}

add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() {

  global $wp_scripts;

  wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
  wp_enqueue_script( 'main_js', get_stylesheet_directory_uri() . '/javascript.js' );

}

add_action( 'wp_enqueue_scripts', 'theme_js');

Como en el caso anterior pega el código en archivo functions.php de tu tema hijo y no te olvides de cambiar la ruta de tus archivos.

De nuevo te muestro un vídeo para implementar el Bootstrap vía CDN paso a paso.

Nota: tanto si implementas Bootstrap en WordPress vía transferencia de archivos en FTP como a través de la CDN no es necesario preocuparse por tener lista la librería de jQuery ya que WordPress la tiene instalada por defecto.

Recursos para sacarle todo el partido a Bootstrap

Si te ha parecido interesante todo lo que has visto hasta ahora te dejo aquí toda la documentación necesaria para que puedas recurrir a ella cada vez que lo necesites y beneficiarte de el potencial de esta magnífica herramienta:

Conclusión

Como habrás podido comprobar durante el artículo Bootstrap es una herramienta muy potente, relativamente sencilla de implementar y totalmente gratuita.

Si bien WordPress ofrece gran cantidad de recursos para hacer que tu blog sea 100% responsive puede darse el caso de que un framework como éste te aporte soluciones que antes no habías podido contemplar.

Además, y no menos importante, el hecho de aprender a usar esta herramienta implicará adquirir nuevos conocimientos que te pueden ser muy útiles a la hora de aprender otras técnicas y metodologías relacionadas con el diseño web en general.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(18 votos, promedio: 4.9)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

15 comentarios en “Qué es Bootstrap y cómo instalarlo en WordPress con éxito”

  1. El próximo articulo será «Como abrir la puerta de tu casa para ver WordPress con éxito».

    Ridículo encontrarte un artículo de estas características para añadir unos recursos. Además, que dudo que sea con éxito, ve y mira como quedan las páginas de etiquetas tras instalarlo nada más. ¡Pues así muchas
    cosas más!

    «Soy diseñador web especializado en WordPress y Divi» con eso ya lo dices todo….

    ¡Un saludo!

    1. Por supuesto, Bootstrap no se puede instalar en WordPress así tal cual, es para usarlo como base de un tema. Que ocurrencias!

    2. Hola Un usuario,

      Lamento que no hayas encontrado interesante el artículo. Simplemente decidí desarrollarlo porque he visto como más de una persona quería saber como instalar la herramienta no sólo en WordPress sino en otro tipo de webs estáticas ya fuera para hacer pruebas y aprender o para empezar a crear una web responsive sin tener que crearse ellos mismos un CSS con todas las clases y estilos necesarios para tal fin.

      Yo he visto buenos profesionales que diseñan con WordPress y utilizan Bootstrap para ciertos casos específicos y no pasa nada.

      El caso es probar, comprobar si se adapta a tus necesidades y listo.

      Para gustos colores pero lo que no puedo dejar pasar esa manera de desprestigiar a las personas con tu última frase.

      Yo he intentado crear algo que consideré interesante. Acepto críticas pero no faltas de respecto, que me intento ganar la vida de forma muy digna y dedicándole muchas horas.

      Un saludo

  2. Estoy usando Bootstrap 3 en dos de mis proyectos y mi opinión sobre este framework es cada día más negativa:

    – Estilos absurdos e inexplicables: por defecto da un margin a la etiqueta form! XD. O paddings a las etiquetas a de las barras de navegación (la hemos liado si quieres desactivar una, no lo hagas quitándola).
    – Te las ves y te las deseas si quieres personalizar la barra de navegación.
    – Te jode el diseño responsive si usas row sin col-: row asigna unos márgenes laterales negativos que luego los compensa col-, y así de enrevesado todo.
    – Tamaño: ocupa ciento y pico Kb sin contar JQuery (que debe ser una versión determinada), su propia librería JS que depende de JQuery, y los dichosos Glyphicons.
    – 5-6 clases de colores contextuales que nunca vas a usar, y que además son horrorosos. Yo les llamo «los colorines de Bootstrap» Y todo redondeado XD.
    – Hereda la familia de fuente pero no sus tamaños, que luego en algunos elementos (button) los modifica en píxeles.
    – Alta curva de aprendizaje hasta que empiezas a entender bien el mamotreto.
    – Si tienes que personalizar bien un diseño o un tema le tienes que dar la vuelta a todo el framework. Por ej. para usarlo en un tema de WP deberás personalizar todos los colorines, dado que el usuario los puede usar, y no sirven ni los breadcrumbs.
    – Si algo le salva como es el sistema de columnas, decir que no lleva puntos de ruptura por debajo de los 768px. Creo que esto lo cambian en la versión 4, pero si quieres cambiar de versión deberás revisar cada línea de html y css.

    Lo elegí por su renombre, ahora sinceramente no me creo que esto lo use Twitter, y de hecho el diseño actual de Twitter no se parece en nada. Se darían cuenta de que personalizarlo todo ocupaba menos tamaño que el framework XD.

    Sinceramente creo que debe haber muchas mejores alternativas, como Pure CSS. Que por cierto, ahora todos los frameworks son responsive y mobile-first, no es ninguna cualidad de Bootstrap.

    En fin que tenía ganas de ponerlo verde y me he quedado bien a gusto.

    1. Hola Fernando!

      Lamento que tu experiencia con la herramienta no sea positiva. Yo comencé a utilizarla hace unos años en varios proyectos y no me fue mal.

      Cierto es lo que dices sobre el tamaño. Cuando me descargué el framework me extrañó el peso. Sinceramente no me acuerdo de Bootstrap 2 pero seguro que pesaba menos.

      Para mí la gran utilidad siempre radicó en el Grid que te lo pone bastante fácil. De hecho conozco de primera mano desarrolladores Full Stack que lo utilizan en bastantes proyectos.

      Yo en WordPress he visto que lo han utilizado en ciertos asuntos como en las entradas del blog para hacerlas más adaptables o incluso para crearse su propio tema.

      Si tu proyecto es pequeño, quieres algo rápido y responsive Bootstrap puede venirte bien.

      En cambio, si dispones de tiempo para crearte tu mismo un framework donde aplicar reglas css para hacerte tu propio Grid pues adelante. Pesará mucho menos, será más minimalista y lo entenderás mejor que nadie.

      Se de primera mano que es un asunto un tanto polémico ya que hay gente que le encanta y otros que lo detestan.

      Pero para mí lo más importante es que tras usarlo, como en el caso de prácticamente cualquier herramienta, aunque hayas «sufrido» o disfrutado, lo más importante que te llevas es el aprendizaje.

      Me alegro que te hayas quedado a gusto y gracias por una crítica tan constructiva xD,

      Un saludo

      1. Hola Pedro, buenos días.

        Sinceramente no he estudiado otro framework CSS aparte de Bootstrap, es el que único que estoy usando, pero estoy seguro de que los debe haber mucho mejores, empezando por el tamaño.

        Sí, lo primero que te llama la atención y te facilita las cosas es el grid o sistema de columnas, y lo segundo, en mi caso, las barras de navegación responsive… Pero de estas cosas disponen hoy en día todos los considerados mejores frameworks css: Pure.css, Foundation, Skeleton…

        No le resto importancia al uso de un framework css, yo ya lo considero imprescindible, ni tampoco a lo que se aprende, sobretodo cuando quieres modificar estilos tan enrevesados como algunos de Bootstrap XD.

        En resumen, creo que algo que incluyera normalize.css, un sistema de columnas y unos menús responsive sencillos y fáciles de personalizar (para mí los de BS no lo son), y pocas cosas más, y creo que sería suficiente para un buen framework, y a partir de ahí personalizar tu lo demás.

        Por ejemplo no le veo sentido a que un framework te redondee, te sombree y le de colores a todo cuando por defecto los elementos no son redondeados ni coloreados. Si esas clases las quieres personalizar tienes que sobreescribirlas todas, y eso es doble carga de trabajo para el diseñador y para el navegador.

        Creo que BS está pensado para un diseño rápido modificando lo mínimo, como un tema más que un framework, y en ese caso el resultado es una web como tantas.

        Pero bueno que todo es muy discutible y esto es muy complejo.

        Por cierto que yo tampoco entiendo como usar Bootstrap fuera de un tema de WordPress que incluya otro framework y estilos, pues creo que los resultados así de buenas a primeras pueden ser espeluznantes.

        Saludos.

        1. Hola Fernando,

          Pues si que los hay. El otro día me estuvieron hablando muy bien de éste: https://daneden.github.io/Toast/. Si quieres un grid que no pese, sencillo y directo puede ser una muy buena opción a elegir.

          En lo demás también estoy totalmente de acuerdo contigo.

          Yo como te digo me basaba más en el grid lo que pasa es que aunque no uses los componentes de Bootstrap al final el código está ahí en los archivos y puede molestarte si apenas sabes de CSS…

          Bootstrap para empezar está muy bien, para adquirir más conocimientos, etc.. Pero si tu trayectoria como desarrollador o diseñador evoluciona seguramente se te quede corto y optes (como será tu caso) por algo más personalizado siempre con la máxima de «menos es más» que todos conocemos…

          ¡Ya me dirás si encuentras algo más interesante!

          Un saludo!

  3. El problema del artículo es que a efectos prácticos, «para utilizar Bootstrap todo se reduce a cargar sus respectivas librerías», y si WordPress actualiza su versión de Jquery y esta no es compatible con tu versión de Bootstrap también pierdes la maquetación de tu sitio web, de la misma forma que lo harías si utilizas un plugin, deja de ser compatible y este no es actualizado, así que por esta parte no hay ninguna ventaja a favor de Bootstrap.

    Tomando en cuenta eso, el artículo se reduce a explicar las librerías a incluir en el archivo functions, pero eso no es todo lo que haz de hacer para utilizar Bootstrap en tu theme, eso solo es el comienzo, pues a pesar que te extendiste más de la cuenta en otros puntos – que sin animo de ofender debo decir que los considero de relleno – dejaste en el tintero el quid del asunto ¿y después que? ya tienes Bootstrap listo para ser utilizado en WordPress ¿como hacer compatible el menú de Bootstrap con el menú nativo de WordPress de forma automática y no construyendo el menú en HTML? ¿como utilizar los estilos de Bootstrap para widgets como – nuevamente – los menús? ¿como hacer que la paginación de WordPress tome los estilos de Bootstrap? ¿y los tags? etc. etc. etc. digo, es algo que ya tengo solucionado desde hace tiempo (utilizando Bootstrap 3, con Bootstrap 4 puede que tenga que hacer bastantes cambios) mediante algunas modificaciones más al archivo functions junto al uso de los temidos plugins que en cualquier momento «pueden dejar de funcionar y arruinan la maquetación» o bien recurriendo a Javascript para modificar el DOM, sea como sea, eso es lo más difícil y lo único que no se explica pues de lo contrario, si no haces esos cambios tienes Bootstrap a tu disposición siempre y cuando estés dispuesto escribir todo el HTML a mano y para eso ni siquiera veo necesario hacer uso de Bootstrap, que por cierto es un framework CSS bastante pesado, yo lo recomiendo solo si se va hacer uso de sus ventajas para acelerar el trabajo, si no es así, solo es capricho.

    Saludos!!

    1. Hola Javier Ocampos,

      El motivo del artículo era explicar de forma general en qué consiste el framework, cómo instalarlo en tu servidor para utilizarlo en cualquier proyecto así como para hacer uso de él en WordPress.

      Es simplemente un tutorial de introducción a la herramienta para que el que le interese investigue, aprenda, se equivoque y saque en claro si el framework es lo que necesita o todo lo contrario.

      En ningún momento fue mi intención explicar como aplicar Bootstrap en un tema en su totalidad ya que eso daría para uno o más artículos.

      Pero oye, que igual investigo un poco más y desarrollo un artículo para darle caña a este tema en mayor profundidad 😉

      Un abrazo y gracias por tu opinión!

  4. Hola buenas, no os peleeis que en cierta forma todos teneis razón, pero como dice Pedro, todas las opiniones y criticas balen menos las faltas de respeto. Yo puedo decir que empecé a utilizar bootstrap en su versión 3 y lo he utilizado en un montón de proyectos, tanto con wordpress y sin el, y nunca he tenido ningún problema, cierto es que pesa un poco más, pero la cantidad de trabajo que te quita merece la pena.

    Yo quisirea consultar una cosa a los expertos, el bootstrap 4 esta en su versión beta, esta preparado para utilizar en proyectos finales, en producción, o hay que esperar a que salga la definitiva para utilizarlo en producción??

    Gracias

    1. Hola algoeraello,

      Muchas gracias por pasarte por aquí y hacernos saber tu opinión sobre el producto.

      No te preocupes que por lo menos yo no he tenido la sensación en ningún momento de andar metido en una pelea. jaja.

      Lo que pasa es que no permito ciertos comentarios y menos en casa de alguien que me ha abierto amablemente las puertas de su blog para escribir.

      El peso del framework es algo que está ahí y por ahora no se puede hacer mucho. Cierto es que para ello está la CDN que Bootstrap pone a tu disposición. Reducirás el tiempo de carga y el ancho de banda usado a través de tu servidor.

      Con respecto a tu última pregunta si no me equivoco está en su versión alpha, la beta aún no ha llegado aún.

      Yo la probaría para familiarizarme con las nuevas características y funcionalidades que aporte para más adelante (cuando salga la versión estable) implementarla donde la necesite.

      Aquí encontrarás respuesta a tus preguntas (está en inglés):

      https://www.quora.com/Is-it-advisable-to-use-Bootstrap-4-0-Alpha-for-production-Will-it-cause-any-issues-in-the-interface-because-it-is-still-in-Alpha

      Saludos

  5. Muchisimas gracias Pedro, según puedo leer en el articulo que me mandas, pone que no se deben utilizar las versiones Alpha y beta para la etapa de Producción. Para la producción, se debe utilizar la versión estable. Asi que no nos queda otra que esperar, para la producción seguire utilizando bootstrap 3 para proyectos finales, pero para proyectos propios empezaré a utilizar la 4, asi la boy aprendiendo.

    Mil gracias y muy buen articulo 🙂

    1. Hola algoeraello,

      Eso es. Lo recomendable es esperar un poco más para hacer uso de una versión más estable evitando así futuros problemas en cualquier proyecto que tengas en mente.

      De todas formas siempre puedes probar la versión actual en un sitio web donde quieras experimentar con las nuevas funcionalidades que hayan sacado y así cuando salga la versión final ya podrás sacarle todo el partido rápidamente.

      Cualquier cosa aquí estamos.

      Un abrazo!

  6. Muchas Gracias Pedro por el artículo y la información que me has hecho llegar sobre Bootstrap, que no estaba muy informado al respecto.
    otra cosa queria comentar y es la existencia de determinados personajes que existen en la red y que deambulan de blog en blog soltando su veneno y aparente sabiduria, haciendo malas críticas de todo lo que leen. Estos personajes como digo, jamás aportan nada en provecho de los demás, solo critican y tiran por tierra las horas de trabajo y buena intención de los creadores de artículos como este.
    Pedro en este mundo tiene que haber de todo, así que no te desmolarice y sigue en esta linea escribiendo articulos, que muchos los agradecemos. Un saludo.

Deja un comentario

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

 

Ir arriba Ir al contenido