开发者学堂课程【前端开发框架Bootstrap使用教程：Bootstrap 组件_输入框组1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4242
Bootstrap 组件_输入框组1
目录：
一、输入框组
二、基本实例
三、尺寸
四、作为额外元素的多选框和单选框
一、输入框组
1.定义
通过在文本输入框<input>前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input -group赋予 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。
2.只支持文本输入框<input>
这里请避免使用<select> 元素,因为 WebKit 浏览器不能完全绘制它的样式。
避免使用<textarea> 元素,由于它们的 rows 属性在某些情况下不被支持。
3.输入框组中的工具提示和弹出框需要特别的设置
为 .input-group 中所包含的元素应用工具提示( tolip )或 popover (弹出框)时,必须设置 contalner:'body' 参数,为的是避免意外的副作用(例如,工具提示或弹出框被激活后,可能会让当前元素变得更宽或和变得失去其圆角)。
4.不要和其他组件混用
不要将表单组或栅格列( column )类直接和输入框组混合使用。而是将输入框组嵌喜到表单组或栅格相关元素的内部。
二、基本实例
在输入框的任意一侧添加额外元素或按钮。 你还可以在输入框的两侧同时添加额外元素。
我们不支持在输入框的单独侧添加多个额外元素。
我们不支持在单个输入框组中添加多个表单控件。
实例：
<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">$</span>
<input type=" text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class=" input -group- addon">.00</span>
</div>
新建inputgroup.html文件，编辑：
1 <！DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>输人框组</title>
6 <link href="bootstrap.min.css" rel="stylesheet">
7 </head>
8 <body>
9 <div class="container">
10 <div class="input- group">
11 <span class="input- group- addon">@</span>
12 <input type-"text" class-"form-control" placeholder="email">
13 </div>
14 </div>
15 < /body>
16 < /htm1>
打开浏览器看到显示结果为@和 email 的组合框。
将11行和12行程序调换次序，刷新浏览器看到显示结果为 email 和@的组合框。
三、尺寸
为 .input-group 添加相应的尺寸类,其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复
地添加控制尺寸的类。
实例：
<div class="input-group input-group-1g" >
<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>
四、作为额外元素的多选框和单选框
可以将多选框或单选框作为额外元素添加到输入框组中。
实例：
<div class="row">
<div class="col-1g-6">
<div class= "input- group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class=" form-control" aria-label="...">
</div><！-- /input-group -->
</div><！-- 1.col-1g-6 -->
<div class="col-1g-6">
<div class="input-group" >
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type-"text" class-"form-control" aria-label-"...">
</div><!-- /input- group -->
</div><!-- 1.col-1g-6 -->
</div><!-- /.row -->
