Bootstrap 輸入框組

時間 2019-11-13

標籤 bootstrap 輸入欄目 Bootstarp 简体版

原文原文鏈接

本章將講解 Bootstrap 支持的另外一個特性，輸入框組。輸入框組擴展自表單控件。使用輸入框組，您能夠很容易地向基於文本的輸入框添加做爲前綴和後綴的文本或按鈕。php

經過向輸入域添加前綴和後綴的內容，您能夠向用戶輸入添加公共的元素。例如，您能夠添加美圓符號，或者在 Twitter 用戶名前添加 @，或者應用程序接口所須要的其餘公共的元素。css

向 .form-control 添加前綴或後綴元素的步驟以下：html

把前綴後後綴元素放在一個帶有 class .input-group 的 <div> 中。jquery
接着，在相同的 <div> 內，在 class 爲 .input-group-addon 的 <span> 內放置額外的內容。bootstrap
把該 <span> 放置在 <input> 元素的前面或者後面。瀏覽器

爲了保持跨瀏覽器的兼容性，請避免使用 <select> 元素，由於它們在 WebKit 瀏覽器中不能徹底渲染出效果。也不要直接向表單組應用輸入框組的 class，輸入框組是一個孤立的組件。

基本的輸入框組

下面的實例演示了基本的輸入框組：ide

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 基本的輸入框組</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="input-group">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control" placeholder="twitterhandle">
      </div>
      <br>

      <div class="input-group">
         <input type="text" class="form-control">
         <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">
         <span class="input-group-addon">.00</span>
      </div>
   </form>
</div>


</body>
</html>

嘗試一下 »spa

結果以下所示：插件

輸入框組的大小

您能夠經過向 .input-group 添加相對錶單大小的 class（好比 .input-group-lg、input-group-sm、input-group-xs）來改變輸入框組的大小。輸入框中的內容會自動調整大小。code

下面的實例演示了這點：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 輸入框組的大小</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="input-group input-group-lg">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control" placeholder="Twitterhandle">
      </div><br>

      <div class="input-group">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control" placeholder="Twitterhandle">
      </div><br>

      <div class="input-group input-group-sm">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control" placeholder="Twitterhandle">
      </div>
   </form>
</div>


</body>
</html>

嘗試一下 »

結果以下所示：

複選框和單選插件

您能夠把複選框和單選插件做爲輸入框組的前綴或者後綴元素，以下面的實例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 輸入框組的複選框和單選插件</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="row">
         <div class="col-lg-6">
            <div class="input-group">
               <span class="input-group-addon">
                  <input type="checkbox">
               </span>
               <input type="text" class="form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         <div class="col-lg-6">
            <div class="input-group">
               <span class="input-group-addon">
                  <input type="radio">
               </span>
               <input type="text" class="form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
   </form>
</div>


</body>
</html>

嘗試一下 »

結果以下所示：

按鈕插件

您也能夠把按鈕做爲輸入框組的前綴或者後綴元素，這個時候您就不是添加 .input-group-addon class，您須要使用 class .input-group-btn 來包裹按鈕。這是必需的，由於默認的瀏覽器樣式不會被重寫。下面的實例演示了這點：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 輸入框組的按鈕插件</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="row">
         <div class="col-lg-6">
            <div class="input-group">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                     Go!
                  </button>
               </span>
               <input type="text" class="form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         <div class="col-lg-6">
            <div class="input-group">
               <input type="text" class="form-control">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button">
                     Go!
                  </button>
               </span>
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
   </form>
</div>


</body>
</html>

嘗試一下 »

結果以下所示：

帶有下拉菜單的按鈕

在輸入框組中添加帶有下拉菜單的按鈕，只須要簡單地在一個 .input-group-btn class 中包裹按鈕和下拉菜單便可，以下面的實例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 輸入框組的下拉菜單按鈕</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="row">
         <div class="col-lg-6">
            <div class="input-group">
               <div class="input-group-btn">
                  <button type="button" class="btn btn-default 
                     dropdown-toggle" data-toggle="dropdown">
                     下拉菜單 
                     <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu">
                     <li><a href="#">功能</a></li>
                     <li><a href="#">另外一個功能</a></li>
                     <li><a href="#">其餘</a></li>
                     <li class="divider"></li>
                     <li><a href="#">分離的連接</a></li>
                  </ul>
               </div><!-- /btn-group -->
               <input type="text" class="form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         <div class="col-lg-6">
            <div class="input-group">
               <input type="text" class="form-control">
               <div class="input-group-btn">
                  <button type="button" class="btn btn-default 
                     dropdown-toggle" data-toggle="dropdown">
                     下拉菜單 
                     <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu pull-right">
                     <li><a href="#">功能</a></li>
                     <li><a href="#">另外一個功能</a></li>
                     <li><a href="#">其餘</a></li>
                     <li class="divider"></li>
                     <li><a href="#">分離的連接</a></li>
                  </ul>
               </div><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
   </form>
</div>

</body>
</html>

嘗試一下 »

結果以下所示：

分割的下拉菜單按鈕

在輸入框組中添加帶有下拉菜單的分割按鈕，使用與下拉菜單按鈕大體相同的樣式，可是對下拉菜單添加了主要的功能，以下面的實例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 輸入框組中分割的下拉菜單按鈕</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div style="padding: 100px 100px 10px;">
   <form class="bs-example bs-example-form" role="form">
      <div class="row">
         <div class="col-lg-6">
            <div class="input-group">
               <div class="input-group-btn">
                  <button type="button" class="btn btn-default" 
                     tabindex="-1">下拉菜單
                  </button>
                  <button type="button" class="btn btn-default 
                     dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                     <span class="caret"></span>
                     <span class="sr-only">切換下拉菜單</span>
                  </button>
                  <ul class="dropdown-menu">
                     <li><a href="#">功能</a></li>
                     <li><a href="#">另外一個功能</a></li>
                     <li><a href="#">其餘</a></li>
                     <li class="divider"></li>
                     <li><a href="#">分離的連接</a></li>
                  </ul>
               </div><!-- /btn-group -->
               <input type="text" class="form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         <div class="col-lg-6">
            <div class="input-group">
               <input type="text" class="form-control">
               <div class="input-group-btn">
                  <button type="button" class="btn btn-default" 
                     tabindex="-1">下拉菜單
                  </button>
                  <button type="button" class="btn btn-default 
                     dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                     <span class="caret"></span>
                     <span class="sr-only">切換下拉菜單</span>
                  </button>
                  <ul class="dropdown-menu pull-right">
                     <li><a href="#">功能</a></li>
                     <li><a href="#">另外一個功能</a></li>
                     <li><a href="#">其餘</a></li>
                     <li class="divider"></li>
                     <li><a href="#">分離的連接</a></li>
                  </ul>
               </div><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
   </form>
</div>

</body>
</html>

嘗試一下 »

結果以下所示：

原文地址：http://www.phplearn.cn/bootstrap/bootstrap-input-groups.html