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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
webpack4 升级迁移的实现
Sep 12 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
php 破解防盗链图片函数
2008/12/09 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
js css自定义分页效果
2017/02/24 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
python抓取网页中的图片示例
2014/02/28 Python
Python中实现常量(Const)功能
2015/01/28 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python 调用HBase的简单实例
2016/12/18 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
Yahoo-PHP面试题1
2016/07/20 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
会议邀请函范文
2014/01/09 职场文书
项目合作计划书
2014/01/09 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
人事文员岗位职责
2014/02/16 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
家长反馈意见及建议
2015/06/03 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
微信早安问候语
2015/11/10 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书