Home » Bootstrap » Cómo crear una factura con Twitter Bootstrap (Parte 1)

Cuando hay que crear las primeras facturas, es habitual empezar buscando en Google servicios online para crear una factura rápida y fácilmente. Encontré un sitio web, con el que  pude crear una factura simple. Cuando hice clic en el botón “Guardar como PDF”, me avisó que era necesario inscribirse en el sitio. La verdad es que yo no estaba dispuesto a registrarme solo para descargar mi “muy simple” factura en formato PDF.

Soy usuario de Bootstrap y me encanta este maravilloso framework, así que me propuse ver si podía crear mi factura con Bootstrap.

Me llevó algo de tiempo crear la factura con Bootstrap, pero fue una buena experiencia de aprendizaje. En este artículo voy a compartir esta experiencia con ustedes.

Twitter Bootstrap es un framework muy popular para crear sitios web, que ofrece grandes prestaciones. Se puede crear un sitio web muy rápidamente con Bootstrap, pero en este artículo voy a crear algo diferente y menos habitual. Les mostraré cómo crear una factura con Twitter Bootstrap y después guardarla con formato PDF.

Qué se necesita para crear una factura con Twitter Bootstrap

En primer lugar, necesitamos un editor de texto para editar ficheros HTML. Se puede utilizar cualquier editor, aunque para este ejemplo usaré SublimeText. También se necesitan los ficheros del framework Twitter Bootstrap y un navegador como Google Chrome, que permite guardar páginas web como archivos PDF.

Enlaces para las descargas:

Empecemos

Empezaremos creando una nueva carpeta en el escritorio con el nombre de Factura. Luego descargamos y descomprimimos el archivo con el framework Bootstrap; hay carpetas con ficheros CSS, JS y fuentes. Para nuestro proyecto necesitamos sólo los archivos CSS. Simplemente copiaremos la carpeta CSS de la distribución de Bootstrap en nuestra nueva carpeta Factura.

En la carpeta CSS, verá cuatro archivos CSS. Necesitamos bootstrap.css, por lo que puede eliminar los otros archivos si lo desea.

Abra su editor de texto, cree un nuevo archivo y guardarlo como factura.html en la carpeta Factura. A continuación, agregue el siguiente código en el archivo factura.html.

< ! DOCTYPE html>
< html lang="en">
<meta charset="utf-8" />Plantilla de FACTURA    	<link href="css/bootstrap.css" rel="stylesheet" /></pre>
<div class="container">
<div class="row">
            content here</div>
 <!-- /row --></div>
<pre>

 <!-- /container -->

Este es el código HTML básico para nuestro archivo. Para nuestro proyecto de factura usaremos una rejilla extra pequeña (small grid). Usaremos el prefijo de clases CSS de Bootstrap,  col-xs- * que es la clase para una rejilla extra pequeña (dispositivos muy pequeños: teléfonos móviles).

Este es el código HTML básico para nuestro archivo. Para nuestro proyecto de factura usaremos una rejilla extra pequeña (small grid). Usaremos el prefijo de clases CSS de Bootstrap,  col-xs- * que es la clase para una rejilla extra pequeña (dispositivos muy pequeños: teléfonos móviles).

La rejilla o grid es la base que utiliza Bootstrap para construir el layout de una página, es decir, la disposición de elementos. Bootstrap basa el diseño de páginas en rejilla o grid, para mediante filas y columnas colocar los contenidos. Es el componente esencial para asegurar que una web se adaptará convenientemente a diferentes resoluciones y pantallas.

¿Por qué tenemos que utilizar una rejilla (grid) “no-responsive”

Vamos a utilizar Google Chrome para guardar nuestra factura final en formato PDF. Si utilizamos una rejilla media, Chrome apilará las columnas una debajo de otras cuando imprimimos nuestra página, como en la siguiente imagen.

Google Chrome print problem

Como se puede ver, la rejilla media se muestra bien en una página web normal, pero cuando se intenta imprimir la página, Chrome apila las columnas de rejilla mediana una debajo de otra. Ahora entenderá por qué vamos a utilizar una clase de rejilla extra pequeña col-xs- *  (las columnas se muestran siempre horizontalmente; número de columnas: 12).

Método alternativo: El uso de CSS no-responsive de Bootstrap 2

Si está familiarizado con Bootstrap 2, puede utilizarlo como alternativa, ya que incluye CSS “no responsive”.  Bootstrap 2 no se creó incialmente pensando en los móviles, por lo que para hacer que las páginas se adaptaran a los dispositivos móviles, había que incluir  una hoja de estilo adicional para que las páginas web fueran “responsive”.

Si quiere usar Bootstrap 2, entonces debe utilizar la clase span* para crear las columnas (reemplace * con un número del 1 al 12 para el ancho de columna). El siguiente ejemplo crea un diseño con tres columnas iguales.

</pre>
<div class="row"></div>
<pre>

Advertencia: Si desea utilizar Bootstrap 2, entonces tendrá que usar dos hojas de estilo, primero la de Bootstrap 2 para rejilla “no responsive”, y la segunda de Bootstrap 3 para Paneles, porque los Paneles son nuevos en Bootstrap 3 (los paneles “panels” permiten encerrar cierto contenido dentro de una caja).

Lo que vamos a utilizar

Usaremos Bootstrap 3, Small Grid y Panels. Para este Artículo voy a utilizar Bootstrap 3, porque usaré la clase .panel para crear paneles, que está disponible en Bootstrap 3. Hay diferentes paneles disponibles y puede usar los que quiera. Yo voy a utilizar las clases en panel-primary y panel-info para crear paneles.

Las clases .panel-default .panel-success .panel-danger .panel-warning .panel-info están disponibles para paneles contextuales (paneles que pueden adaptar su estilo al tipo de información que muestran).

Paneles contextuales en Bootstrap 3

Hay algunas clases más disponibles para dar estilo al contenido del panel como .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse

Algo importante acerca de estilos de impresión de Bootstrap

Tenga en cuenta Bootstrap elimina algunos estilos para la impresión. Por ejemplo Bootstrap hace transparente el fondo, elimina text-shadow, box-shadow para la impresión. Para los enlaces, las URL de los enlaces se mostrarán después que el texto del enlace. Esto significa que su color de fondo y color de los enlaces no serán visibles en PDF, al imprimir las páginas web en Chrome.

Previsualización de Paneles Bootstrap con estilos de impresión en Google Chrome

Cómo restablecer los estilos de impresión de Bootstrap

Puede encontrar el estilo de impresión en la línea 33 en bootstrap-min.css, mientras que en bootstrap.css los estilos de impresión están desde la línea 217 hasta la línea 290.

En bootstrap.css  los estilos de impresión empiezan desde


        @ media print {
        * {
        color: #000 !important;
        text-shadow: none !important;
        background: transparent !important;
        box-shadow: none !important;
        }

Y terminan en la línea 290


.table {
border-collapse: collapse !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}

Para eliminar o resetear los estilos de impresión, seleccione Estilos de Impresión y haga  Ctrl+/ en el editor Sublime Text. Esto hará que todos los estilos de impresión aparezcan en el código como comentarios y por tanto no estén activos.

Previsualización en Google Chrome después de resetear los estilos de impresión Bootstrap

Ahora que hemos puesto en marcha todas las características necesarias previas, en la parte 2 de este Artículo, vamos a crear nuestra factura y guardarla como un archivo PDF.

Deja un comentario

Si te gustó este Artículo, lo mejor que puedes hacer por el Blog es compartirlo en tu Red Social y darle un "Me Gusta".

Tu dirección de correo electrónico no será publicada.

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>