Bootstrap 表单插件

2018-02-28 19:25 更新

前置和附加输入

我们可以在任何基于文本的输入之前或之后添加文本、图标或按钮。
使用.input-group-addon类在一个<span>元素中封装文本或图标，并将其放置在<input>元素之前或之后。
在<div>中封装<span>和基于文本的<input>，然后应用.input-group类。
Bootstrap只能预先添加或附加到基于文本的输入。

<!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">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control" placeholder="Username">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Amount">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <input type="text" class="form-control" placeholder="US Dollar">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
        </div>
    </form>
    <hr>
    <form>
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Amount">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" placeholder="US Dollar">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>
</body>
</html>

例1

我们可以在input组的插件而不是文本中放置复选框或单选按钮。

<!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">
            <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-6">
            <div class="input-group">
              <span class="input-group-addon">
                <input type="radio">
              </span>
              <input type="text" class="form-control">
            </div>
          </div>
        </div>
    </form>
    <hr>
    <form>
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox">
            </span>
            <input type="text" class="form-control">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">
                <input type="radio">
            </span>
            <input type="text" class="form-control">
        </div>
    </form>
</div>
</body>
</html>

例2

我们可以添加或附加按钮，而不是文本。在<span>元素中封装按钮，并应用类.input-group-btn，而不是.input-group-addon。

<!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">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search&amp;hellip;">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default">Go</button>
                    </span>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default">Action</button>
                        <button type="button" class="btn btn-default">Options</button>
                    </span>
                    <input type="text" class="form-control"  placeholder="Type something&amp;hellip;">
                </div>
            </div>
        </div>
    </form>
    <hr>
    <form>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search&amp;hellip;">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">Go</button>
            </span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">Action</button>
                <button type="button" class="btn btn-default">Options</button>
            </span>
            <input type="text" class="form-control"  placeholder="Type something&amp;hellip;">
        </div>
    </form>
</div>
</body>
</html>

以上内容是否对您有帮助：

Bootstrap 表单插件

前置和附加输入

例1

例2

推荐文章

推荐教程

推荐课程