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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
Vue.js快速入门教程
Sep 07 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
Vue仿支付宝支付功能
May 25 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
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
基于header的一些常用指令详解
2013/06/06 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
javascript时区函数介绍
2012/09/14 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python原始字符串(raw strings)用法实例
2014/10/13 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python实战教程之自动扫雷
2018/07/13 Python
简单了解Django ContentType内置组件
2019/07/23 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
软件项目开发计划书
2014/05/01 职场文书
户外活动总结
2015/02/04 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL