脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap input输入框组

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

 更新时间：2016年12月07日 08:56:34   作者：kikay  
这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之input输入框组,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用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>

效果如下：

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

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

效果如下：

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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

您可能感兴趣的文章:

相关文章

  • setTimeout函数的神奇使用

    setTimeout函数的神奇使用

    setTimeout函数是一个原生的javascript函数。setTimeout函数会在一个指定的延迟时间之后调用一个函数或执行一段指定的代码。它的应用非常广泛，例如我们希望用户在浏览器某个页面一段时间后弹出一个对话框，或者是鼠标点击某个元素后隔几秒钟在删除这个元素。
    2017-02-02
  • 原生js实现放大镜

    原生js实现放大镜

    本文主要分享了原生js实现放大镜效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • ES6中的Promise代码详解

    ES6中的Promise代码详解

    本文通过实例代码给大家介绍了ES6中的Promise，感兴趣的朋友参考下吧
    2017-10-10
  • 微信小程序使用picker实现时间和日期选择框功能【附源码下载】

    微信小程序使用picker实现时间和日期选择框功能【附源码下载】

    这篇文章主要介绍了微信小程序使用picker实现时间和日期选择框功能,结合实例形式分析了微信小程序picker组件进行日期与时间选择的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • Javascript日期格式化format函数的使用方法

    Javascript日期格式化format函数的使用方法

    这篇文章主要介绍的是javascript时间格式format函数，我们有时候调用的new Date()不是格式化的时间，可能显示不是很正常，那么这时候就需要格式化时间，今天这里分享一个javascript的foramt()函数，有需要的可以参考借鉴。
    2016-08-08
  • javascript 对象数组根据对象object key的值排序

    javascript 对象数组根据对象object key的值排序

    本文仅仅是实现了javascript 对象数组根据对象object key的值排序，算是对自己学习javascript这么久的一个小结，希望大家能够喜欢
    2015-03-03
  • 使用js简单实现了tree树菜单

    使用js简单实现了tree树菜单

    使用js简单实现了树菜单！具体实现实例代码如下，相信自己你一定可以实现的更好
    2013-11-11
  • javascript html实现网页版日历代码

    javascript html实现网页版日历代码

    这篇文章主要介绍了javascript html实现网页版日历代码,需要的朋友可以参考下
    2016-03-03
  • ajax java 实现自动完成功能

    ajax java 实现自动完成功能

    都知道百度建议是用ajax做的，想要做的快速稳定，可复制可移植就不容易了,花时间研究还不如自己来写。根据一个pdf文档提供的资料，用了小半天时间，终于实现了。在此与大家分享
    2012-12-12
  • JS中锚点链接点击平滑滚动并自由调整到顶部位置

    JS中锚点链接点击平滑滚动并自由调整到顶部位置

    这篇文章主要介绍了JS中锚点链接点击平滑滚动并自由调整到顶部位置,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-02-02

最新评论