Upload
fox-mccloud
View
222
Download
0
Embed Size (px)
DESCRIPTION
Integrantes: - Axel Aaron Hernandez Villa - Ricardo Riveroll Vargas
Citation preview
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.
**** 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.