Bienvenid@s, si algo tiene Bootstrap es que no se deja un ápice por detallar, de hecho la creación de formularios con un diseño elegante con bootstrap es muy fácil de hacer, podemos obtener cada elemento con la simple llamada de unas clases, posicionarlos como más nos interesa; verticalmente y ordenado a modo de tabla u horizontalmente con los elementos en línea, agregar botones, campos de texto, textareas, etc. A continuación vamos a ver algunos ejemplo listos para copiar, pegar y probar ...
Ejemplo 1: Formulario vertical con dimensiones adaptables
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulario vertical con campos adaptables Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class='container'>
<h1>Login</h1>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> recordar sesión
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default form-control">Iniciar sesión</button>
</div>
</form>
</div>
</body>
</html>
Ejemplo 2: Formulario en línea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulario en línea Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class='container'>
<h1>Login</h1>
<form role="form" class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> recordar sesión
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default form-control">Iniciar sesión</button>
</div>
</form>
</div>
</body>
</html>
Ejemplo 3: checkbox, radio, select y textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>checkbox, radio, select y textarea Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class='container'>
<h1>Otros elementos: checkbox, radio, select y textarea</h1>
<form role="form">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox 2
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox 3
</label>
</div>
<div class="radio">
<label>
<input type="radio" checked> Radio 1
</label>
</div>
<div class="radio">
<label>
<input type="radio"> Radio 2
</label>
</div>
<div class="radio">
<label>
<input type="radio"> Radio 3
</label>
</div>
<!-- Inputs checkbox en línea -->
<label class="checkbox-inline">
<input type="checkbox"> Checkbox 1
</label>
<label class="checkbox-inline">
<input type="checkbox"> Checkbox 2
</label>
<label class="checkbox-inline">
<input type="checkbox"> Checkbox 3
</label>
<div class="clear"></div>
<!-- Inputs Radio en línea -->
<label class="radio-inline">
<input type="radio" checked> Radio 1
</label>
<label class="radio-inline">
<input type="radio"> Radio 2
</label>
<label class="radio-inline">
<input type="radio"> Radio 3
</label>
<!--Textarea -->
<textarea class="form-control" rows="3">
</textarea>
<!--SELECT -->
<label>Campo Select:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<label>Campo Select Multiple:</label>
<select class="form-control" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
</div>
</body>
</html>
Ejemplo 4: Mensajes de validación e iconos
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mensajes de validación e iconos Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class='container'>
<h1>Mensajes de validación e iconos</h1>
<form role="form">
<div class="form-group has-success">
<label class="control-label" for="success">success</label>
<input type="text" class="form-control">
</div>
<div class="form-group has-warning">
<label class="control-label" for="warning">warning</label>
<input type="text" class="form-control">
</div>
<div class="form-group has-error">
<label class="control-label" for="error">error</label>
<input type="text" class="form-control">
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="success">success</label>
<input type="text" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="warning">warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="error">error</label>
<input type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario