首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap基本组件学习笔记之input输入框组(9)

Posted in Javascript onDecember 07, 2016

使用input输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

看下面的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>input控件组</title>
</head>
<body>
<div class="container">
 <div class="col-lg-3"></div>
 <div class="col-lg-6">
 <div class="page-header">
 <h1>样式1</h1>
 </div>
 <div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-btn">
 <button type="button" class="btn btn-primary">搜索</button>
 </div>
 </div>
 <div class="page-header">
 <h1>样式2</h1>
 </div>
 <div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-btn">
 <div class="dropdown">
  <button type="button" class="btn btn-primary" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
  <li class="active"><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li class="divider"></li>
  <li><a href="#">菜单3</a></li>
  <li><a href="#">菜单4</a></li>
  </ul>
 </div>
 </div>
 </div>
 </div>
 <div class="col-lg-3"></div>
</div>
</body>
</html>

效果如下：

Bootstrap基本组件学习笔记之input输入框组(9)

如果和input配合使用的按钮是不可单击的，只是用于文字的说明，修改如下：

<div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-addon">用来搜索</div>
</div>

效果如下：

Bootstrap基本组件学习笔记之input输入框组(9)

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本组件学习笔记之input输入框组(9)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
jquery选择器排除某个DOM元素的方法（实例演示）
Apr 25 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
分分钟学会vue中vuex的应用（入门教程）
Sep 14 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
详解ES6中的let命令
Apr 05 #Javascript
jquery操作ID带有变量的节点实例
Dec 07 #Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 #Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 #Javascript
浅述Javascript的外部对象
Dec 07 #Javascript
vue2.0开发实践总结之疑难篇
Dec 07 #Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 #Javascript
pdf(1) Word(2) openGauss(1) ant design(2) 二维码(2) 太阳码(1) JDBC(3) 延时任务(1) cypress(1) Eclipse(1)
You might like
如何判断php数组的维度
2013/06/10 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
asp知识整理笔记3（问答模式）
2015/09/27 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
js实现可爱的气泡特效
2020/09/05 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
深入学习python的yield和generator
2016/03/10 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
2014年开学第一课活动方案
2014/03/06 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
青涩记忆观后感
2015/06/18 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
MySQL学习必备条件查询数据
2022/03/25 MySQL