bootstrap的输入框组

最新推荐文章于 2022-06-14 07:21:26 发布

xxiaowen

最新推荐文章于 2022-06-14 07:21:26 发布

阅读量2.1k

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/43717057

版权

bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。
只支持文本输入框 <input>
这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。
避免使用 <textarea> 元素，由于它们的 rows 属性在某些情况下不被支持。
输入框组中的工具提示和弹出框需要特别的设置
为 .input-group 中所包含的元素应用工具提示（tooltip）或popover（弹出框）时，必须设置 container: 'body' 参数，为的是避免意外的副作用（例如，工具提示或弹出框被激活后，可能会让当前元素变得更宽或/和变得失去其圆角）。
不要和其他组件混用
不要将表单组或栅格列（column）类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部。

1、基本案例

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap输入框</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">[        DISCUZ_CODE_108        ]lt;/span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>
<pre name="code" class="html">

效果图

尺寸
为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。
代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap输入框</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

  </body>
</html>

详细介绍尽在java教程网，本文链接网址： http://java.662p.com/thread-4671-1-1.html