Bootstrap: Cómo hacer que tus páginas se parezcan a las de Twitter

Tweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn0Digg thisBuffer this pageEmail this to someone

bootstrap

A veces customizar tus paginas Visualforce se vuelve un dolor de cabeza, pues los estilos que nos proporciona Salesforce por defecto son muy poco ¨estéticos¨ y aburridos. Utilizar unos botones bonitos o unas cajetillas de texto redondeadas ya nunca más será un problema, y lo mejor de todo es que ya están diseñadas y no tendremos que desarrollar ninguna hoja de estilos CSS o código en JavaScript para definir el comportamiento de nuestros componentes (ejemplo: al hacer click en un botón se nos desplieguen diferentes opciones dentro del mismo, el llamado «Dropdown Button»). Y lo más chulo de todo, estás librerías de estilos las han desarrollado los chicos de Twitter, son las mismas que ellos utilizan, las cuales actualizan periódicamente y las han compartido con el resto de la humanidad. Yeahh!

En este post no explicaré todas las funcionalidades de bootstrap pero si os mostraré como poder cargarlo en salesforce en forma de «Static Resources» y hacer uso de las librerias. Mi objetivo con este post es que conozcáis la existencia de estas herramientas, como acceder a ella en vuestras Visualforce pages y donde encontrar la información para aprender más de ellas.  Finalmente os mostraremos un ejemplo de cómo quedarían unos componentes con y sin las clases de bootstrap.

Primero descargaros la librería más reciente en Descargar Bootstrap | Twitter Bootstrap 3.0 (oficial). A continuación cargaremos el archivo .zip descargado en nuestras ¨Static Resources¨ de SFDC. Setup -> Develop -> Static Resourcces -> New.

static_resources

Una vez hemos subido nuestro archivo .zip crearemos nuestra página, y desde ella cargaremos las librerias JavaScript que ofrece bootstrap, así como su hoja de estilos CSS.  Para ello, emplearemos los comandos apex:includeScript y apex:stylesheet que podemos encontrar en Cómo referenciar Static Resources en Visualforce pages.

Es importante destacar en la línea 1 el comando standardStylesheets = «false». De esta forma no cargaremos las librerías de estilos de salesforce, evitando sobreescribir las de bootstrap.

En este ejemplo cabe destacar las diferentes clases de botones que podemos cargar con Bootstrap así como las funciones de las clases. ¨row» para colocar los componentes en diferentes filas o lo mas importante, las clases de tipo class=»col-md-9 col-md-push-3 con las que podremos ajustar el tamaño de nuestros botones y cajas a nuestros dispositivos moviles para que no pierdan la estructura

Da igual el tamaño de la pantalla del dispositivo, todos mis componentes se ajustaran automáticamente a la pantalla para una correcta visualización, lo que se conoces como Grid de respuesta móvil y que os invito a que aprendáis sobre el este enlace.

Este es el resultado del codigo en nuestra página Visualforce. Notar lo bonito del diseño y de los colores, así como lo fácil que es tener una hoja de estilos echa por profesionales y con constantes actualizaciones. Crearos un pagina nueva desde salesforce, meted el código que os hemos adjuntado anteriormente, guardar y hacer click en ¨Preview¨.

bootstrapsample

Fijaros en la impresionante respuesta de los componentes cuando hacemos la pantalla de nuestro portatil más pequeña y así como lo bonitos que son los botones en comparación a los que nos ofrece salesforce por defecto.  «This is awsome!».

Espero que os haya gustado y os invito a aprender un poco mas sobre este impresionante framework. Aquí os dejo el enlace a la página oficial de Bootstrap

Que tengáis buenos salesforce 🙂

, ,