bootstrap下拉列表与输入框组结合的样式调整


Posted in Javascript onOctober 08, 2016

输入框组默认是div.input-group

已知可在input表单元素前后加入两类元素【分别是文本和按钮】如下所示:

div.input-group-addon{文字或符号}
input.form-control
div.input-group-btn

其中按钮还可嵌套下拉菜单(包括分裂式下拉菜单)

一、基本用法如下:

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default"> 提交2 </button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-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>
</div>
</div>

效果如下:

bootstrap下拉列表与输入框组结合的样式调整

二、将按钮嵌套的下拉菜单改为下拉列表,并调整样式:

<div class="input-group input-group-lg">
<span class="input-group-addon">@2</span>
<input type="text" class="form-control">
<div class="input-group-btn input-group-lg">
<select name="" id="idsel" class="form-control" style="
width:150px;
padding:3px 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background:url(img/arrow.jpg) no-repeat right center;
background-color: #eee;
background-size:20%;
">
<option value="">@163.com</option>
<option value="">@gmail.com</option>
<option value="">@gsafc.com</option>
<option value="">@qq.com</option>
</select>
</div>
</div>

效果如下:

bootstrap下拉列表与输入框组结合的样式调整

其中,背景图片arrow.jpg如下:

bootstrap下拉列表与输入框组结合的样式调整

这样就可实现下拉菜单选择邮箱后缀的效果

以上所述是小编给大家介绍的bootstrap下拉列表与输入框组结合的样式调整,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
Javascript的一种模块模式
Sep 08 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
three.js实现圆柱体
Dec 30 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 #Javascript
Javascript中常用的检测方法小结
Oct 08 #Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 #Javascript
AngularJS 2.0入门权威指南
Oct 08 #Javascript
省市区三级联动jquery实现代码
Apr 15 #Javascript
微信小程序 数据访问实例详解
Oct 08 #Javascript
Bootstrap Table的使用总结
Oct 08 #Javascript
You might like
php adodb分页实现代码
2009/03/19 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php简单截取字符串代码示例
2016/10/19 PHP
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
python 自定义装饰器实例详解
2019/07/20 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
pycharm修改file type方式
2019/11/19 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
运动会通讯稿100字
2014/01/31 职场文书
五年级音乐教学反思
2014/02/06 职场文书
人事科岗位职责范本
2014/03/02 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
教务处教学工作总结
2015/08/10 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android