Bootstrap輸入框組 · 致力于web前端技術撰寫

輸入框組是由表單控件擴展而來，使用輸入框組，可以很容易地向基于文本的輸入框添加作為前綴和后綴的文本或按鈕。通過向輸入域添加前綴和后綴的內容，可以向用戶輸入添加公共的元素。例如，您可以添加美元符號，或者在 Twitter 用戶名前添加 @，或者應用程序接口所需要的其他公共的元素。向?.form-control?添加前綴或后綴元素的步驟如下： - 把前綴或后綴元素放在一個帶有 class?.input-group?的 <div> 中。 - 接著，在相同的 <div> 內，在 class 為?.input-group-addon?的 <span> 內放置額外的內容。 - 把該 <span> 放置在 <input> 元素的前面或者后面。為了保持跨瀏覽器的兼容性，請避免使用 <select> 元素，因為它們在 WebKit 瀏覽器中不能完全渲染出效果。也不要直接向表單組應用輸入框組的 class，輸入框組是一個孤立的組件。 ### 基本的輸入框組： ~~~ <!doctype html> <html lang="en"> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="Yvette Lau"> <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> <title>BootstrapDemo</title>  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> <script type="text/javascript" src = "../jquery-1.11.2.min.js"></script> <script type="text/javascript" src = "../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> </head> <body style="padding: 20px;"> <div class="container"> <form class="col-lg-3" role="form"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="who"> </div> <br/> <div class="input-group"> <input type="text" class="form-control" placeholder="1200"> <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="1200"> <span class="input-group-addon">.00</span> </div> </form> </div> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f6d380f.jpg) 給.input-group加上.input-group-lg或者是.input-group-sm,.input-group-xs可以改變輸入框的大小，這部分內容，和bootstrap 表單部分相同。 ### 復選框和單選插件可以把復選框和單選插件作為輸入框組的前綴或者后綴元素。（將復選框或單選放在span中） ~~~ <body style="padding: 20px;"> <div class="container"> <form class="col-lg-3" role="form"> <div class="input-group"> <span class="input-group-addon"> <input type = "radio"> </span> <input type="text" class="form-control" placeholder="who"> </div> <br/> <div class="input-group"> <input type="text" class="form-control" placeholder="1200"> <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="1200"> <span class="input-group-addon"> <input type = "checkbox"> </span> </div> </form> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f6e275c.jpg) ### 按鈕插件將.input-group-addon改為.input-group-btn，來包裹按鈕。 ~~~ <body style="padding: 20px;"> <div class="container"> <form class="col-lg-3" role="form"> <div class="input-group"> <span class="input-group-btn"> <button type = "button" class="btn btn-success">填寫</button> </span> <input type="text" class="form-control" placeholder="who"> </div> <br/> <div class="input-group"> <input type="text" class="form-control" placeholder="1200"> <span class="input-group-btn"> <button type="button" class="btn btn-primary">登錄</button> </span> </div> <br/> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="1200"> <span class="input-group-btn"> <button type="button" class="btn btn-danger">登錄</button> </span> </div> </form> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f6f1f2c.jpg) ### 帶有下拉菜單的按鈕在輸入框組中添加帶有下拉菜單的按鈕，只需要簡單地在一個?.input-group-btn?class 中包裹按鈕和下拉菜單即可。 ~~~ <body style="padding: 20px;"> <div class="container"> <form class="col-lg-3" role="form"> <div class="input-group"> <input type="text" class="form-control" placeholder="1200"> <span class="input-group-btn"> <button type = "button" class="btn btn-success dropdown-toggle" data-toggle = "dropdown">下拉 <span class = "caret"></span> </button> <ul class="dropdown-menu" role = "menu"> <li><a href="#">下拉菜單1</a></li> <li><a href="#">下拉菜單2</a></li> <li><a href="#">下拉菜單3</a></li> <li><a href="#">下拉菜單4</a></li> </ul> </span> </div> </form> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f70f4a5.jpg)