bootstrap下拉列表与输入框组结合的样式调整
作者:ahl123 发布时间:2024-04-22 13:25:02
标签:bootstrap,下拉列表,输入框组
输入框组默认是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>
效果如下:
二、将按钮嵌套的下拉菜单改为下拉列表,并调整样式:
<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>
效果如下:
其中,背景图片arrow.jpg如下:
这样就可实现下拉菜单选择邮箱后缀的效果
以上所述是小编给大家介绍的bootstrap下拉列表与输入框组结合的样式调整网站的支持!
来源:http://maplebb.blog.51cto.com/2547849/1859106
0
投稿
猜你喜欢
- 海豚本文例子主要展示了如何使用补丁、路径和转换类绘制和操作给定的顶点和节点的形状。测试可用。import matplotlib.cm as
- 一、前言在本系列前面几篇文章中,我们分别介绍了 argparse 和 docopt 的主要功能和用法。它们各具特色,都能出色地完成命令行任务
- 一、前言在Python开发的过程中,为了实现某项功能,经常需要对某些字符串进行特殊的处理,如拼接字符串、截取字符串、格式化字符串等。下面将对
- 界面设计页面引用了youzan组件进行设计,包括icon,button,tag,toast以及布局github地址:https://gith
- 废话不多说 上语句:查询锁表语句:select object_name,machine,s.sid,s.serial#from v$lock
- 所有平台的Mysql下载地址为: MySQL 下载. 挑选你需要的 MySQL Community Server 版本及对应的平台。一、Li
- Python 实现使用 dict 创建二维数据dict 的 keys、values 分别作为二维数据的两列In [16]: d = {1:&
- 本文所用环境:Python 3.6.5 |Anaconda custom (64-bit)|引言由于某些原因,需要用python读取二进制文
- mysql在5.1之后增加了存储过程的功能, 存储过程运行在mysql内部,语句都已经编译好了,速度比sql更快. 存储过程与mysql相当
- 我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下:1.show(*args)def show(*ar
- 前言最近 GitHub 上有个基于 ChatGPT API 的浏览器脚本,openai-translator, 短时间内 star 冲到了
- 假如有一个数据表A:id name title
- SQL Server 获取数据的总记录数,有两种方式:1.先分页获取数据,然后再查询一遍数据库获取到总数量2.使用count(1) over
- 介绍分面是指事物的多维度属性。例如一本书包含主题、作者、年代等分面。而分面搜索是指通过事物的这些属性不断筛选、过滤搜索结果的方法。可以将分面
- 数据库和操作系统一样,是一个多用户使用的共享资源。当多个用户并发地存取数据 时,在数据库中就会产生多个事务同时存取同一数据的情况。若对并发操
- 函数介绍Socket对象方法:服务端:函数描述.bind()绑定地址关键字,AF_INET下以元组的形式表示地址。常用bind((host,
- 看下面的例子就明白了class Test(object): def __init__(self, value='hell
- 最近,在做一个项目时遇到的了一个问题,主线程无法捕获子线程中抛出的异常。先看一个线程类的定义'''''
- 首先我是用pycharm完成的,要确定命令行和界面里是同一个环境。如果不确定可以设置再add在新增加的环境里看现在是哪个环境,只要选择已有的
- 如下所示:df = pd.DataFrame({'key': ['b', 'b', '