Bootstrap 表单控件尺寸

高度输入和选择框

要更改输入元素的高度,请使用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">
                &lt;textarea class="form-control"&gt;&lt;/textarea&gt;
            </div>
            <div class="col-xs-4">
                &lt;textarea class="form-control"&gt;&lt;/textarea&gt;
            </div>
            <div class="col-xs-5">
                &lt;textarea class="form-control"&gt;&lt;/textarea&gt;
            </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>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部