Bootstrap 表单

2018-03-03 16:34 更新

在本教程中，我们将学习如何使用Bootstrap创建精致的表单。

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="form-group">
            <label for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>
</body>
</html>

Bootstrap将设置文本元素，如<input>，<textarea>和<select>，类.form-control的默认宽度为100％。

对于每个标签和输入字段，我们需要一个 form-group分类的div元素。

将类 form-control 附加到输入元素将使其成为全角元素。

例子

让我们创建一个输入字段，以询问访问者的名字：

<!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">
    <form  class="form">
    <div class="form-group">
        <label  for="nameField">Name</label>
        <input  type="text" 
                class="form-control" 
                id="nameField" 
                placeholder="Your Name"/>
    </div>
    </form>
  </body>
</html>

表单按钮

我们用电子邮件、电话号码和textarea字段填写表单，最后是提交按钮。

<!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">
    <form  class="form">
        <div class="form-group">
            <label  for="nameField">Name</label>
            <input  type="text" class="form-control" id="nameField" placeholder="Your Name"  />
        </div>
        <div class="form-group">
            <label  for="emailField">Email</label>
            <input  type="email" class="form-control" id="emailField" placeholder="Your Email"  />
        </div>
        <div class="form-group">
            <label  for="phoneField">Phone</label>
            <input  type="text" class="form-control" id="phoneField" placeholder="Your Phone  Number" />
        </div>
        <div class="form-group">
            <label  for="descField">Description</label>
            <textarea class="form-control" id="descField" placeholder=" Your Comments"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-default">Reset</button>
    </form>
  </body>
</html>

水平表单

在水平表单布局中，标签右对齐并向左浮动，使它们与表单控件显示在同一行上。
在<form>元素中我们需要.form-horizontal类。
在<div>元素中封装标签和表单控件，并应用类.form-group。
使用Bootstrap的网格类来对齐标签和表单控件。
将类.control-label添加到<label>元素。

<!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">
    <form  class="form-horizontal">
        <div class="form-group">
            <label  for="nameField" class="col-xs-2">Name</label>
            <div class="col-xs-10">
                <input  type="text" class="form-control" id="nameField" placeholder="Your Name"  />
            </div>
        </div>
        <div class="form-group">
            <label  for="emailField" class="col-xs-2">Email</label>
            <div class="col-xs-10">
                <input  type="email" class="form-control" id="emailField" placeholder="Your Email"  />
            </div>
        </div>
        <div class="form-group">
            <label  for="phoneField" class="col-xs-2">Phone</label>
            <div class="col-xs-10">
                <input  type="text" class="form-control" id="phoneField" placeholder="Your Phone  Number" />
            </div>
        </div>
        <div class="form-group">
            <label  for="descField" class="col-xs-2">Description</label>
            <div class="col-xs-10">
                <textarea class="form-control" id="descField" placeholder="Your Comments"></textarea>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-2">
            <button type="submit" class="btn btn-primary">Submit </button> 
            <button type="reset" class="btn btn-default">Reset</button>
        </div>
    </form>
  </body>
</html>

内联表单

我们可以创建元素存在于一行中的表单。

使用 form-inline 使表单元素内联。

内联表单的标记如下：

<!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="well well-sm">
        <form  class="form-inline">
            <div class="form-group">
                <input  type="email" class="form-control" id="emailField" placeholder="Enter email">
            </div>
            <div class="form-group">
                <input  type="password" class="form-control" id="passwordField" placeholder="Password">
            </div>
            <div class="checkbox">
                <label><input  type="checkbox"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
    </div>
  </body>
</html>

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

Bootstrap 表单

垂直表单布局

例子

表单按钮

水平表单

内联表单

推荐文章

推荐教程

推荐课程