Bootstrap 表单控件尺寸
2018-03-01 09:55 更新
高度输入和选择框
要更改输入元素的高度，请使用Bootstrap的控件尺寸类：
- input-lg用于比默认大小更大的输入元素。
- input-sm用于比默认大小更小的输入元素。
这里有一些使用中的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".myDropdownHandle").dropdown("toggle");
});
</script>
</head>
<body style="margin:30px">
<div class="form-group has-success">
<input class="form-control input-lg" type="text" placeholder="Larger Input Field">
<input class="form-control" type="text" placeholder="Default Input Field">
<input class="form-control input-sm" type="text" placeholder="Smaller Input Field">
</div>
</body>
</html>例
我们可以控制输入的高度和选择框以匹配按钮大小。.input-lg，.input-sm可以在<input>和<select>框中使用，以创建更大或更小的尺寸。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control input-lg" placeholder="Larger input">
</div>
<div class="col-xs-6">
<select class="form-control input-lg">
<option>Larger select</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" placeholder="Default input">
</div>
<div class="col-xs-6">
<select class="form-control">
<option>Default select</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control input-sm" placeholder="Smaller input">
</div>
<div class="col-xs-6">
<select class="form-control input-sm">
<option>Smaller select</option>
</select>
</div>
</div>
</form>
</div>
</body>
</html>输入框、文本区域和选择框的网格尺寸
我们可以将表单控件的尺寸与Bootstrap网格列尺寸相匹配。封装表单控件如<input>，<textarea>和<select>在网格列或任何自定义元素中，并对其应用网格类。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="row">
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
<div class="col-xs-4">
<input type="text" class="form-control">
</div>
<div class="col-xs-5">
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
<textarea class="form-control"></textarea>
</div>
<div class="col-xs-4">
<textarea class="form-control"></textarea>
</div>
<div class="col-xs-5">
<textarea class="form-control"></textarea>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
<select class="form-control">
<option>Select</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control">
<option>Select</option>
</select>
</div>
<div class="col-xs-5">
<select class="form-control">
<option>Select</option>
</select>
</div>
</div>
</form>
</div>
</body>
</html>输入组的高度
我们可以将相关表单尺寸类添加到 .input-group以使其更大或更小。
.input-group中的内容将自动调整大小。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="row">
<div class="col-xs-4">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown"
class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown"
class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-4">
<div class="input-group input-group-sm">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group input-group-sm">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group input-group-sm">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown"
class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>
</div>
</body>
</html>以上内容是否对您有帮助：
更多建议：