Bootstrap como sabemos, es un framework de Twitter que nos permite crear interfaces Web con estilos CSS y librerias Javascript y que adaptan la interfaz web, dependiendo del tamaño del dispositivo en el que se visualice, esto se llama diseño adaptativo o Responsive Design, automáticamente se adapta al tamaño de un ordenador o de una Tablet, es muy utilizado por las empresas y demandando por los clientes.
Los diseños creados con Bootstrap son simples, limpios y <<useful>> fáciles de utilizar, esto les da agilidad a la hora de cargar y se adaptan rápido a los dispositivos. En mozilla firefox podemos ver el resultado en distintos tamaños de pantalla, mientras estamos en fase de pruebas.
El Framework posee varios elementos con estilos predefinidos muy fáciles de configurar, como:
Los diseños creados con Bootstrap son simples, limpios y <<useful>> fáciles de utilizar, esto les da agilidad a la hora de cargar y se adaptan rápido a los dispositivos. En mozilla firefox podemos ver el resultado en distintos tamaños de pantalla, mientras estamos en fase de pruebas.
El Framework posee varios elementos con estilos predefinidos muy fáciles de configurar, como:
- Menus desplegables
- Botones
- Formularios incluyendo todos sus elementos e integración jQuery para ofrecer ventanas y tooltips dinámicos.
Desde Junio del año pasado no había utilizado Bootstrap y han cambiado algunas cosas, así que ahora que dispongo de un poco mas de tiempo, haré algunas pruebas. De momento estoy implementando un formulario de contacto, la interfaz ya está hecha y he pasado a la parte de programación con JQuery y Php.
Formulario de contacto
 |
| Captura formulario |
Para realizar este diseño he creado un documento HTML5 desde cero y una hoja de estilos propia que sustituye y modifica algunas propiedades y clases que me proporciona Bootstrap por defecto.
Como este ejemplo es para repasar, el código contiene excesivos comentarios que en un proyecto no deberían figurar.
Código Html:
<!DOCTYPE html>
<html>
<head>
<!-- Etiqueta que me permite los diseños adaptables de Bootstrap, la escala inicial 1.0 1 px x pixel -->
<meta name="Viewport" contente="width=device-width, initial-scale=1.0">
<meta hhttp-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Declaramos o adjuntamos la hoja de estilos de bootstrap -->
<link rel="stylesheet" type="text/css" href="framework/css/bootstrap.css">
<!-- Declaramos o adjuntamos la hoja de estilos propia que modifica a los de Bootstrap -->
<link rel="stylesheet" type="text/css" href="framework/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type="text/css">
<title>Document</title>
</head>
<body>
<!-- Creamos un divisor/contenedor para el formulario div.ibody+tab nos pone el div con la clase -->
<div class="ibody">
<!-- Encerramos esta parte del encabezado dentro de otro divisor-->
<div class="jumbotron">
<h1>Contacta</h1>
</div>
<!-- Creo un divisor para separar el formulario del borde -->
<div class="fcontacto">
<!-- Encierro en un divisor la imagen para centrarlo div.logo-->
<div class="logo">
<!-- Pondré un logotipo con img+tab-->
<img src="img/ic_devmanager_future.png" alt="Contacto">
</div>
<!-- Formulario con la acción hacia la misma página, con un método POST -->
<form method="POST" name="fcontacto" id="fcontacto" action="./">
<!-- Creo un contenedor llamado row para poder usar el grid/grillas de Bootstrap -->
<div class="row">
<!-- Creo otros 2 contenedores dentro para las columnas div.col-md-6, esto lo que
hará será dividir el espacio del row en 2 partes, ahorra espacio y da visibilidad-->
<div class="col-md-6">
<!-- Creo varios labels con sus respectivos input. label*3+tab,
ponemos la clase a nuestros input, para ponerla en todos a la
vez ctrl y click en cada tag, creo los punteros.-->
<label>Nombre:</label>
<!-- Aplicamos la clase form-control de Bootstrap q aplica estilo a los formularios-->
<input type="text" name="name" id="name" class="form-control">
</div>
<!-- Como son dos columnas metemos este también dentro de un div class col -->
<div class="col-md-6">
<label>Email:</label>
<input type="text" name="email" id="email" class="form-control">
</div>
</div>
<label>Asunto:</label>
<input type="text" name="subject" id="subject" class="form-control">
<label>Mensaje:</label>
<textarea name="message" id="message" cols="30" rows="10" class="form-control">
</textarea>
<!-- Boton enviar con su clase bootstrap btn btn-info que es color blue, texto -->
<input type="submit" class="btn btn-info" value="Enviar">
</form>
</div> <!--cierro divisor fcontacto-->
</div>
</body>
</html>
CSS
/*Lo primero es resetear todos los márgenes de los tags a 0, ya que algunos llevan su margen y padding*/
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #f0f0f0;/*cambio el color de fondo para que no sea tan blanco*/
color: #4c4c4c;/*cambiamos el color de la letra*/
font-family: 'Asap', sans-serif;
font-size: 14px;/*tamaño de la fuente*/
}
/*tag label y tag input*/
label, input[type="submit"]{
margin-top: 6px;
}
/*Creo la clase ibody*/
.ibody{
background-color: #ecf0f3;
border: 1px solid #bfd8eb;/*borde del formulario*/
border-radius: 8px ;/*Los 4 Bordes redondeados*/
margin: 30px auto;/*Margen 30px sup e inf. Izq y dcha auto*/
width: 500px;/*Ancho*/
/*Importante la compatibilidad*/
-webkit-border-radius: 8px ;
-moz-border-radius: 8px ;
}
/*Agregar/reemplazar Características del css de Bootstrap que viene por default*/
.jumbotron{
background-color: #bfd8eb;/*Color de fondo al encabezado*/
border-radius: 8px 8px 0px 0px ;/*Sup dcho y sup izq de 8px los inf a 0*/
margin-bottom: 0;/*Al colocar la imagen veo que tiene mucoh margen y se me queda separada, lo pongo a 0*/
padding: 16px;
/*Importante la compatibilidad*/
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
}
.jumbotron h1{
color: #77a5c7;/*Cambio color de la letra de los h1 de dentro del jumbotron*/
font-size: 36px;/*Bajamos el tipo de letra*/
text-align: center;/*Queremos que lo centre*/
text-shadow:0px 1px #fff;/*Sombra del texto: ejex 0 eje y 1px y el color*/
}
/*Creo la clase fcontacto del formulario y el divisor*/
.fcontacto{
padding: 14px;
}
/*Contenedor del logo*/
.logo{
margin-bottom: 6px;/*Para que no se escape*/
text-align: center;/*Centrar todo con la propiedad text-align*/
}
el link de tu git hub lo compartes ?? para ver tus proyectos.
ResponderEliminarMe gustaria ponerme en contacto con tigo