免費(fèi)AI編程助手
Bootstrap 表單控件尺寸
2018-03-01 09:55 更新
高度輸入和選擇框
要更改輸入元素的高度，請使用Bootstrap的控件尺寸類：
- input-lg用于比默認(rèn)大小更大的輸入元素。
- input-sm用于比默認(rèn)大小更小的輸入元素。
這里有一些使用中的例子：
<!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>框中使用，以創(chuàng)建更大或更小的尺寸。
<!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>輸入框、文本區(qū)域和選擇框的網(wǎng)格尺寸
我們可以將表單控件的尺寸與Bootstrap網(wǎng)格列尺寸相匹配。封裝表單控件如<input>，<textarea>和<select>在網(wǎng)格列或任何自定義元素中，并對其應(yīng)用網(wǎng)格類。
<!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>輸入組的高度
我們可以將相關(guān)表單尺寸類添加到 .input-group以使其更大或更小。
.input-group中的內(nèi)容將自動調(diào)整大小。
<!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>以上內(nèi)容是否對您有幫助：
更多建議：