input-group两侧添加额外元素

使用input-group，轻松在输入框前后添加文本或者按钮元素，使用方法如下：

1.用一个

包裹住输入框input按钮。

2.给input加上class="form-control"样式。

3.在input的前/后添加一个,在span中添加文本或者其他元素。

如：左右边添加文本（效果如上图中第一个输入框所示）：

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

左边添加复选框：

<div class="input-group form-group"><span class="input-group-addon"><input type="checkbox"/></span><input type="text" class="form-control">
</div>

左边添加单选按钮：

<div class="input-group form-group"><span class="input-group-addon"><input type="radio"/></span><input type="text" class="form-control"/>
</div>

右边添加按钮（注意这时我们不再是在span中添加class .input-group-addon样式，而是添加input-group-btn。

<div class="input-group form-group"><input type="text" class="form-control"/><span class="input-group-btn">button class="btn btn-primary">搜索</button></span>
</div>

input-group表示一行
form-group表示一个文本加上一行，文本可以在这一行的左边或上边
input-group和input-group-addon一般会成对出现

运行效果如下：

上面代码运行结果如下：

运行效果如下:

input-group两侧添加额外元素相关推荐

html添加伪元素,给before和after伪元素设置js效果的方法
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是"伪元 ...
动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格效果如下: 源代码如下: <!DOCTYPE htm ...
pandas 插入空列_Pandas在DF创建期间添加额外的空列(Pandas add additional empty columns during DF creation)...
Pandas在DF创建期间添加额外的空列(Pandas add additional empty columns during DF creation) 我越来越: AssertionError: 1 ...
JavaScript实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可.动态添加的元素怎么绑定事件呢? 原生JavaScript ...
运用jQuery动态向html中添加表格元素
实现的功能是运用jQuery动态的向一个table中添加行元素,很简单,也不废话,直接上代码. <!DOCTYPE html> <html lang="en"&g ...
给动态生成的id标签添加html,比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格效果如下: 源代码如下: function btnClic ...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题一般的浏览器input和button的高度不一致问题...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
javaScript动态添加Li元素
html代码块 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
使用JavaScript在input标签中添加readonly属性
JavaScript如何将readonly属性添加到input标签?下面本篇文章就来给大家介绍一下使用JavaScript将readonly属性添加到input标签的方法,希望对大家有所帮助. 在Ja ...

input-group两侧添加额外元素

input-group两侧添加额外元素相关推荐

最新文章

热门文章