CREANDO UNA PLANTILLA RÁPIDA CON BOOTSTRAP (SOLO 6 PASOS)

Hola amigos en esta ocacion, les traigo una opción muy buena a la hora de iniciar una plantilla con bootstrap.

En algunas ocasiones tenemos limitantes al momento de conseguir los archivos de bootstrap, o no tenemos acceso a nuestros dispositivos de almacenamiento para poder implementarlos.

En ese aspecto podemos echar mano de una herramienta de bootstrap,  que nos permite utilizar algunos diseños que ellos tienen en su sitio los cuales están disponibles de forma gratuita para todos los usuarios, y que a partir de ellos podemos trabajar según sean nuestras necesidades, o incluso porque no, realizar un híbrido, incluyendo elementos de varias plantilla.

Para poder implementar este ejercicio, antes deben haber  creado su carpeta de proyecto, como mejor les parezca, acá tienen una imagen de una carpeta de proyecto.

facebook: MaDesWeb

Sin mas que agregar les muestro lo que tienen que hacer para tener una plantilla muy completa en tan solo 6 pasos!!!

Paso 1

Debes visitar este enlace para poder apreciar los temas que tienen bootstrap.

madesweb

Paso 2

Deberás elegir un tema que tenga los componentes con los que quieras trabajar en tu proyecto, una vez echo eso damos clic para abrir la plantilla.

maquetacion y desarrollo web

El botón de descargar que aparece en la esquina superior derecha, te descargara todos los archivos de bootstrap así que de momento no nos sirve.

Paso 3

Damos clic derecho en la plantilla y elegimos "VER CÓDIGO FUENTE"... yo nunca he encontrado un botón que permita descargar el código de otra manera así que es lo que yo aplico para poder usar todos los componentes que tiene la plantilla.

Paso 4

Nos aparecerá todo el código HTML de la plantilla como los enlaces de los archivos adicionales para que esta funciones, como CSS y el JS.

Lo que tenemos que hacer es copiar TODO el código HTML5 que nos aparece y pegarlo en nuestro editor de código en mi caso sublime y guardarlo con el nombre de index o como quieran ponerle.

Si visualizamos esto en el explorador veremos que no tiene el mismo estilo o forma de la plantilla original y es porque los CSS están siendo utilizados de forma local.

Es decir están almacenados en unas carpetas a las cuales se hace referencia en el código, como podemos darnos cuenta en la linea de cogido siguientes:

<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">

Paso 5

Como ya se imaginaran lo que tendremos que hacer es dar un clic en la linea de código que nos marca la ruta de acceso a los archivos CSS necesarios para esta plantilla.

Esto nos abrirá una nueva ventana en el explorador con el código css necesario para cierta parte de la plantilla.

No se asusten cuando vean todo ese código, recuerden que es el min.css de bootstrap, osea esta minimizado para efectos de optimisacion.

Recuerden que la ruta de acceso a los css, deben de ser modificadas y acopladas a las de su proyecto.

Solo selecciona todo el código copialo en tu editor y guárdalo en la carpeta CSS de tu proyecto, es aconsejable que le pongas: bootstrap.min.css.

Otro consejo es que debes fijarte en el codigo HTML si tiene esta linea de código:

<!-- Custom styles for this template --> <link href="product.css" rel="stylesheet">

Que significaría que esta plantilla usa CSS personalizado, por lo cual tendrán que darle en el link, para descarar esos estilos CSS también, de lo contrario tu plantilla no lucirá como la original.

De esta manera lucen los códigos CSS personalizados para la plantilla que yo utilice, solo es de copiarlos en el editor, asignarle un nombre y ver que coincida con el nombre que aparece en la plantilla HTML.

Paso 6 

Deberán copiar los respectivos .JS que aparecen en la plantilla y incorporarlos a la suya, deberán copiar el JQUERY y el BOOTSTRAP.MIN.JS  para que todos los efectos de plantilla funcionen al cien.

En definitiva todos los .js que aparecen en la parte inferior de la plantilla.

Y después de eso hemos instalado la plantilla en 6 simples pasos.

Espero que les sirva amigos, recuerden compartir y dejar un like en nuestra pagina de facebook.

Hasta la próxima.