Page 1

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; }

Bootstrap  
Read more
Read more
Similar to
Popular now
Just for you