Bootstrap 表單

2018-03-03 16:34 更新

在本教程中，我們將學習如何使用Bootstrap創(chuàng)建精致的表單。

Bootstrap提供三種不同類型的表單布局：

  • 垂直表單（默認表單布局）
  • 水平表單
  • 內(nèi)聯(lián)表單

垂直表單布局

垂直表單布局中的表單控件在頂部以左對齊標簽堆疊。

<!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 附加到輸入元素將使其成為全角元素。

例子

讓我們創(chuàng)建一個輸入字段，以詢問訪問者的名字：

<!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的網(wǎng)格類來對齊標簽和表單控件。
將類.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>

內(nèi)聯(lián)表單

我們可以創(chuàng)建元素存在于一行中的表單。

使用 form-inline 使表單元素內(nèi)聯(lián)。

內(nèi)聯(liá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="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>


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號