Logo Bootstrap

Bootstrap, el mejor framework para tus diseños

Logo BootstrapHola a todos:

Imagino que entre nuestros lectores los habrá que estén deseando crear sus propios themas, o simplemente buscan la manera de añadir algunos elementos a plantillas ya existentes. Hacerlo desde cero requiere unos conocimientos de Css, Html y Jquery que no están al alcance de todos, al menos sin echarle un buen número de horas.

Pero Bootstrap viene en nuestra ayuda. Bootstrap es un framework de desarrollo en Css y Jquery, que nos echará una mano para crear nuestros diseños. ¿Y esto? ¿Cómo que un framework de desarrollo?

Qué es Bootstrap

En resumidas cuentas, y sin entrar en demasiados detalles, Bootstrap no es más que unos cuantos archivos css y js, unas librerías que podemos usar en nuestros proyectos para no tener que desarrollar desde cero, y que hará que nuestro trabajo sea mucho más rápido.

framework bootstrap

Está basado en algo muy sencillo: divide la pantalla en 12 columnas, y nosotros decidimos cuántas columnas ocupa cada elemento de nuestro diseño. Por ejemplo, la cabecera ocupará las 12 columnas, la parte central puede tener un espacio de 8 columnas para los contenidos y 4 para la sidebar, etc. De esta manera, con pocos divs tendremos el esqueleto de nuestro diseño Bootstrap.

botones bootstrap

Además de esto, Bootstrap viene preparado con estilos para formularios, botones, tablas… La lista es importante. Y por si fuera poco, su librería jQuery nos permite incluir carruseles de imágenes, tabs, breadcrumbs, persianas, menús dropdown… Todo un arsenal a nuestra disposición para incluirlo en nuestros diseños.

En la web Bootstrap (accede aquí) tienes ejemplos comentados de cada uno de estos apartados, así que, si te decides a usarla, no tienes más que bajarte los archivos, incluirlos en tu tema, y copiar y pegar los distintos ejemplos que te encuentras en su site.

pestañas bootstrap

Otra de las ventajas de la librería Bootstrap es que es responsiva, es decir, nuestro diseño se ajustará a los distintos anchos de pantalla. Incluso podemos mostrar u ocultar distintos elementos de nuestro diseño, según si el visitante lo hace desde su ordenador, una tablet o un móvil. Algo muy de agradecer y que nos ahorra mucho tiempo de diseño.

badgets bootstrapPara los expertos, decir también que podemos usarlas en formato LESS y SASS, de manera que la podemos modificar a nuestro antojo, si lo consideramos necesario.

Para terminar, una cuestión: ¿cómo añadimos a nuestro tema estas librerías? Es bien sencillo:

a) En primer lugar, las descargas (obvio) y copias los archivos en una carpeta dentro de tu tema. Yo suelo crear una carpeta assets, en la que incluyo como subcarpetas css, js, img y fonts. De esa manera, tengo muy localizados mis archivos.

b) En el archivo function.php de tu tema, debes añadir el siguiente código:

function themeScripts ()
 {
wp_enqueue_script ( 'bootstrap-js' , '' . get_template_directory_uri () . '/assets/js/bootstrap.min.js' , array( 'jquery' ) , NULL , TRUE );
 }
add_action ( 'wp_enqueue_scripts' , 'themeScripts' );
function themeStyles ()
{
wp_enqueue_style ( 'bootstrap-css' , '' . get_template_directory_uri () . '/assets/css/bootstrap.min.css' , array() , '3.1.1' , 'all' );
}
add_action ( 'wp_enqueue_scripts' , 'themeStyles' );

Estas dos funciones se encargan de cargar la hoja de estilos css y la librería jquery en nuestro tema. De esta manera estarán a nuestra disposición para que las usemos a diestro y siniestro.

Incluso podrías usarlas sin descargarlas, añadiendo en el head de tu tema:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

De esta manera, en lugar de tener esas librerías en nuestro tema las leeremos desde un servidor externo. Esto tiene sus ventajas, como la de que no has de preocuparte de las actualizaciones, pues en ese servidor siempre tendrás la última versión. Pero como desventaja, estás leyendo archivos externos, y esto aumenta el tiempo de la carga de la web, y aumenta los tiempos de espera, sobre todo para conexiones más lentas (que no todo el mundo tiene ADSL a 100 megas…)

Y eso es todo. Lo mejor, como antes te dije, es que leas los ejemplos, los copies, los trastees y los cambies a tu gusto hasta que le cojas el tranquillo. Bootstrap es sencillo, muy fácil de usar, y con gran cantidad de tutoriales y nuevas librerías basadas en ella, que permiten ampliar aún más sus posibilidades.

Nos leemos en el siguiente post…

The following two tabs change content below.

Francisco Palacios Chaves

Licenciado en Matemáticas, programador en PHP, Bootstrap, CSS, Codeignite entre otros. Francisco Palacios es un Freak de Bing Bang Theory, Pet Shop Boys y Apple, techno malagueño, escritor, politólogo, amante de la noche malagueña, bailongo, Indi adicto a las lágrimas de pollo en Mitjana, emprendedor empedernido, CEO y co-fundador de Social Grown.

Latest posts by Francisco Palacios Chaves (see all)

Posted in Blog, Programación and tagged , , , , , , , , , .

Deja un comentario