BootStrap Por: www.raulgarcia.com.mx
1) Descargar de la pรกgina oficial http://getbootstrap.com/
www.raulgarcia.com.mx
ď‚– Descomprimir archivo zip dentro de la carpeta de nuestro proyecto.
2) Descomprimir y renombrar. ď‚– Renombramos la carpeta bootstrap eliminando los datos de la versiĂłn.
www.raulgarcia.com.mx
En la página oficial, damos clic sobre la opción “getting started” del menú superior y posteriormente en el costado derecho, damos clic sobre “Examples”.
3) Selección de un ejemplo como base. Damos clic sobre el ejemplo que mejor se ajuste a nuestro desarrollo.
www.raulgarcia.com.mx
Clic derecho sobre la página de ejemplo que seleccionamos y damos clic en la opción ver código fuente.
4) Copiar código fuente. Copiamos el código fuente, creamos un archivo index.php en la carpeta de nuestro proyecto y pegamos el código.
www.raulgarcia.com.mx
En la parte superior de nuestro index.php realizamos las siguientes modificaciones:
<!-- Bootstrap core CSS -->
5) Ajustar los paths de los archivos de bootstrap
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> Por: <link href=“bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap theme -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet"> Por: <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="bootstrap/theme.css" rel="stylesheet"> Por: <link href="bootstrap/css/theme.css" rel="stylesheet">
www.raulgarcia.com.mx
Para este archivo es necesario desde la página original del ejemplo, dar clic sobre el link del archivo, copiar y copiar el contenido del mismo, en un archivo nuevo, dentro de la carpeta boostrap/css y llamarlo “theme.css”
En la parte inferior de nuestro index.php realizamos las siguientes modificaciones:
5) Ajustar los paths de los archivos de bootstrap
<script src="../../dist/js/bootstrap.min.js"></script> Por: <script src=“boostrap/js/bootstrap.min.js"></script> <script src="../../assets/js/docs.min.js"></script> Por: <script src=“boostrap/js/docs.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> Por: <script src=“boostrap/js/ie10-viewport-bug-workaround.js"></script>
www.raulgarcia.com.mx
Para este archivo es necesario desde la página original del ejemplo, dar clic sobre el link del archivo, copiar y copiar el contenido del mismo, en un archivo nuevo, dentro de la carpeta boostrap/js y llamarlo “ie10-viewport-bug-workaround.js”
ď&#x201A;&#x2013; Desde el navegador, accedemos a la carpeta de nuestro proyecto ď&#x201A;&#x2013; http://localhost/proyecto/
6) Probando .
www.raulgarcia.com.mx
7) Personalización
Ajustar el archivo index.php, con los datos necesarios. En la página oficial de bootstrap en la sección componentes podemos observar a detalle los elementos que conforman bootstrap y como implementarlos.