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个精彩的专题:

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

Javascript 相关文章推荐
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
es6函数之严格模式用法实例分析
Mar 17 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
You might like
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python异常和文件处理机制详解
2016/07/19 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python实现SOM算法
2018/02/23 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python 如何提高元组的可读性
2019/08/26 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
施工人员岗位职责
2013/12/12 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
同学聚会主持词
2014/03/18 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
读书笔记怎么写
2015/07/01 职场文书
安全教育的主题班会
2015/08/13 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP