编程 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 相关文章推荐

40个新鲜出炉的jQuery 插件和免费教程[上]

Jul 24 Javascript

解析dom中的children对象数组元素firstChild,lastChild的使用

Jul 10 Javascript

JavaScript控制网页层收起和展开效果的方法

Apr 15 Javascript

基于Jquery实现万圣节快乐特效

Nov 01 Javascript

[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示

Apr 14 Javascript

jQuery实现可拖拽的许愿墙效果【附demo源码下载】

Sep 14 Javascript

树结构之JavaScript

Jan 24 Javascript

详解vue-cli脚手架build目录中的dev-server.js配置文件

Nov 24 Javascript

Vue的H5页面唤起支付宝支付功能

Apr 18 Javascript

新手入门带你学习JavaScript引擎运行原理

Jun 24 Javascript

用VsCode编辑TypeScript的实现方法

May 07 Javascript

uniapp开发打包多端应用完整方法指南

Dec 24 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算开始时间到过期时间的相隔的天数

2011/01/12 PHP

CI框架的安全性分析

2016/05/18 PHP

Yii实现复选框批量操作实例代码

2017/03/15 PHP

PHP htmlentities()函数用法讲解

2019/02/25 PHP

IE与Firefox在JavaScript上的7个不同写法小结

2009/09/14 Javascript

基于MooTools的很有创意的滚动条时钟动画

2010/11/14 Javascript

jQuery实现表格行上移下移和置顶的方法

2015/05/22 Javascript

jQuery取消ajax请求的方法

2015/06/09 Javascript

详解JavaScript中getFullYear()方法的使用

2015/06/10 Javascript

使用jQuery制作基础的Web图片轮播效果

2016/04/22 Javascript

详解JavaScript跨域总结与解决办法

2016/10/31 Javascript

BootstrapValidator超详细教程(推荐)

2016/12/07 Javascript

Bootstrap布局之栅格系统学习笔记

2017/05/04 Javascript

详解node-ccap模块生成captcha验证码

2017/07/01 Javascript

js实现随机点名系统(实例讲解)

2017/10/18 Javascript

node express使用HTML模板的方法示例

2019/08/22 Javascript

浅谈vue项目,访问路径#号的问题

2020/08/14 Javascript

[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

Python IDLE 错误：IDLE''s subprocess didn''t make connection 的解决方案

2017/02/13 Python

python进程管理工具supervisor的安装与使用教程

2017/09/05 Python

Python使用matplotlib实现绘制自定义图形功能示例

2018/01/18 Python

在Pycharm中项目解释器与环境变量的设置方法

2018/10/29 Python

基于Python对数据shape的常见操作详解

2018/12/25 Python

python使用knn实现特征向量分类

2018/12/26 Python

python检测IP地址变化并触发事件

2018/12/26 Python

Python3爬虫中pyspider的安装步骤

2020/07/29 Python

关于python tushare Tkinter构建的简单股票可视化查询系统（Beta v0.13）

2020/10/19 Python

python 基于UDP协议套接字通信的实现

2021/01/22 Python

ASP.NET Core中的配置详解

2021/02/05 Python

在canvas上实现元素图片镜像翻转动画效果的方法

2018/03/20 HTML / CSS

文明家庭先进事迹材

2014/01/27 职场文书

研究生考核个人自我鉴定

2014/03/27 职场文书

公司口号大全

2014/06/11 职场文书

大学生违纪检讨书300字

2014/10/25 职场文书

会计工作总结范文2014

2014/12/23 职场文书

2015年药店店长工作总结

2015/04/29 职场文书