3.3Bootstrap学习组件篇之输入框组

浅浅的花香味﹌ 2022-08-27 03:42 231阅读 0赞

**1、基本案例**

**通过在基于文本的输入框前面，后面或是两边加上文字或按钮，可以扩展对表单的控制。用带有`.input-group-addon`的`.input-group`，可以给`.form-control`前面或后面追加元素。**

#### 跨浏览器兼容性 ####

这里请避免使用 `<select>` 元素，因为 WebKit 浏览器不能完全支持它的样式。

#### 输入框组中的工具提示和弹出框需要特别的设置 ####

When using tooltips or popovers on elements within an `.input-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

#### 不要和`.form-group`混用 ####

不要直接将`.input-group`和`.form-group`混合使用，因为`.input-group`是一个独立的组件。

代码段：

预览效果：

![Center][]

**2、尺寸**

**给`.input-group`添加标明尺寸的class，它自己和其中的内容都会自动调整尺寸。没必要给每个元素都重复添加尺寸class。**

**代码段：**

预览：

**![Center 1][]**

**3、复选框与单选框**

**可以把复选框或单选框放在输入组里而不是文本前。**

代码段：

<h1 class="page-header">复选框与单选框</h1>
    	<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>
    		</div>
    		<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>
    		</div>
    	</div>

预览:

![Center 2][]

**首先看到的这个是在屏幕宽度足够大的情况下，两个组合控件在同一行进行排列。接下来我们通过收缩浏览器的宽度。可以看到如下效果**

**![09014909-f3db9525d3e2481a8f4776a857bf2c15.png][]**

**4、附加按钮**

**输入组里的有点不同，它需要多加一层元素。 你要用 `.input-group-btn` 包住按钮而不是 `.input-group-addon`。这是因为默认的浏览器样式不能被覆盖。**

**代码段：**

预览：

**![Center 3][]**

**5、带下拉菜单的按钮**

**代码段：**

<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">
    				Action<span class="caret"></span>
    			</button>
    			<ul class="dropdown-menu">
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Action</a></li>
    			</ul>
    		</div>
    		<input type="text" class="form-control" />
    	</div>
    	</div>
    	
    	
    	<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">
    				Action<span class="caret"></span>
    			</button>
    			<ul class="dropdown-menu">
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Action</a></li>
    			</ul>
    		</div>
    	</div>
    	</div>
    	</div>

预览

**![Center 4][]**

**6、分段按钮**

**代码段：**

<h1 class="page-header">分段按钮</h1>
    	<div class="input-group">
    	
    		<div class="input-group-btn">
    			<button type="button" class="btn btn-default ">Action</button>
    			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    			<span class="caret"></span>
    			</button>
    			<ul class="dropdown-menu">
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Action</a></li>
    				<li><a href="#">Action</a></li>
    			</ul>
    		</div>
    		<input type="text" class="form-control" />
    	</div>

预览：

**![Center 5][]**

[Center]: /images/20220824/b771776a43814163914f2ddd4c59ea92.png
[Center 1]: /images/20220824/56092c870f3347a3aeb6b76fb00fdfdc.png
[Center 2]: /images/20220824/56299efa2f904510813604258411afc4.png
[09014909-f3db9525d3e2481a8f4776a857bf2c15.png]: /images/20220824/7d9b6042b75b4d08b4a3c4493b925278.png
[Center 3]: /images/20220824/7b186e06df1f494f820a2f3ed800dd87.png
[Center 4]: /images/20220824/177ae2d074c54e3a8c2a4ad87b32e322.png
[Center 5]: /images/20220824/3bb7dcd635f04de191cc0399ce6e0d16.png