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

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