15-6-2014
Daniel Flores Saladino UNIVERSIDAD TECNOLOGICA DEL VALLE DE TOLUCA
Tic-92
¿Qué es Bootstrap? Es el framework de Twitter que permite crear interfaces web con CSS y Javascript que adaptan la interfaz dependiendo del tamaño del dispositivo en el que se visualice de forma nativa, es decir, automáticamente se adapta al tamaño de un ordenador o de una Tablet sin que el usuario tenga que hacer nada, esto se denomina diseño adaptativo o Responsive Design y…está de moda
1.- Como utilizarlo
Primero ir a la página oficial de Bootstrap: http://getbootstrap.com/
Una vez que estemos en la página le damos clic en Download Bootstrap Lo que se está descargando son librerías css, js de bootstrack
Una vez que se alla descargado el archivo Ir a la opción de Examples
Clic en Examples
Elegimos cualquier ejemplo
Clic en el Ejemplo
Una vez que hallamos elegido un ejemplo dar derecho y elegir la opción Ver código fuente de la pagina
Copiamos el código y lo pegamos en un archivo html

Descomprimir el archivo de bootstrap
bootstrap-3.1.1-dist.zip
Y creamos un directorio donde se va alojar la practica
Solo cambiar las rutas de los css y js de la carpeta bootstrap y css
Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="">
<meta name="author" content=""> <title>Signin Template for Bootstrap</title> <!-- Bootstrap core CSS cambiar la ruta de los archivos descargados--> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="style.css" rel="stylesheet"> </head> <body> <div class="container"> <form class="form-signin" role="form"> <h2 class="form-signin-heading">Please sign in</h2> <input type="email" class="form-control" placeholder="Email address" required autofocus> <input type="password" class="form-control" placeholder="Password" required> <label class="checkbox"> <input type="checkbox" value="remember-me"> Remember me </label> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> </body> </html> Copiamos el c贸digo fuente de la p谩gina
Style.css body { padding-top: 40px; padding-bottom: 40px; background-color: #eee; } .form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; height: auto; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }