CARRERA: INGENIERIA EN TECNOLOGIAS DE LA INFORMACION Y

COMUNICACIÓN

TIC-SI 92

INTEGRANTES:

AXEL AARON HERNANDEZ VILLA

RICARDO RIVEROLL VARGAS

REPORTE DE LA PRACTICA “USO DE LAS HERRAMIENTAS BOOTSTRAP”

MATERIA: DESARROLLO DE APLICACIONES WEB

PROFESOR: RAUL ARTURO GARCIA MARTINEZ

CUATRIMESTRE MAYO-AGOSTO 2014

Universidad Tecnológica del

Valle de Toluca

Pasos para utilizar diseños de Bootstrap 1. Nos dirigimos a su sitio web con la siguiente dirección:

http://getbootstrap.com/

2. Le damos a descargar Bootstrap.

* En la siguiente pantalla le damos de nuevo en descargar pero esta vez nos descargara la versión

compilada.

3. Después de haber descargado él .ZIP debemos crear en el escritorio una carpeta que la

llamaremos librerías.

* Después de haberla creado abrimos el archivo comprimido, después borramos todo de su

nombre de su carpeta y le ponemos “bootstrap”.

* Después de haber creado nuestra carpeta la pegamos en una carpeta nueva en htdocs con el

nombre que nosotros deseáramos en este caso la llamamos muestra1.

4. Bajamos una plantilla de ejemplo de la página de bootstrap.

* En este caso del ejemplo seleccionamos la siguiente de la página bajando con el scroll del mouse.

* Nos muestra la vista previa de la página seleccionada.

* Con el clic derecho descargamos su código fuente del índex como se muestra en el siguiente

ejemplo.

* Lo copiamos en un notepad ++ en un bloc de notas, en este ejemplo se usó “sublime text”.

* Lo guardamos en htdocs y en la carpeta previamente creada.

5. Volvemos a la página de bootstrap y descargamos la página de la siguiente:

* Nos vamos en Mozilla Firefox le damos en el botón y luego en el botón para

guardar los componentes js o css de la página que estamos visualizando en línea.

** Los guardamos en el escritorio como se muestra abajo.

*** Guardamos de la carpeta solo estos:

**** Y las pegamos en nuestra carpeta librerías en htdocs como se muestra abajo en la ruta

bootstrap.

- Esta vista muestra que el archivo css debemos pegarla en: librerías\bootstrap\css.

- Esta vista muestra que debemos pegar el js en: librerías\bootstrap\js.

6. Después de haber pegado estos archivos nos vamos al código fuente de index que

guardamos del código fuente de la página donde lo obtuvimos.

- Visualizamos la página primero antes de mover el código en nuestro navegador preferido con la

siguiente ruta en la barra de direcciones: http://localhost/muestra1/. Muestra1 es la carpeta que

creamos en xampp/htdocs/carpeta.

- Y nos muestra lo siguiente:

- Como verán no tiene estilos porque bueno lo que se entiende a interpretar el código fuente es

que todo debe estar local y no en línea, como pues si tenemos las direcciones de funciones que

tiene funcionara como en línea así que haremos lo siguiente:

Nos vamos a sublime text o cualquier editor que tengamos en nuestra pc nos vamos en la

siguientes partes del codigo:

- Empecemos por remplazarlas con nuestra librería que descargamos de bootstrap aplicando el

siguiente remplazo de líneas de la siguiente manera.

7. Volvemos a ejecutar la página con estos cambios y ya está, con esto abras aprendido como

usar las librerías bootstrap.