首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

bootstrap输入框组使用方法

Posted in Javascript onFebruary 07, 2017

本文实例为大家分享了bootstrap输入框组的使用方法，供大家参考，具体内容如下

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="input-group"><!--输入框组-->
    <span class="input-group-addon">@</span>
    <!--input-group-addon给输入框前后添加辅助的额外元素-->
    <input type="text" class="form-control"/>
   </div>
  </div>
  <!--输入框组的大小-->
  <div class="row" style="margin-top:10px;">
   <div class="input-group input-group-lg">
   <!--input-group-lg为输入框组尺寸还有md,sm-->
    <span class="input-group-addon">@</span>
    <!--给输入框前后添加辅助的额外元素-->
    <input type="text" class="form-control"/>
   </div>
  </div>
  <div class="row" style="margin-top:10px;">
   <div class="input-group">
    <span class="input-group-addon">
     <input type="checkbox"/>
     <!--输入框组添加额外元素为checkbox，还可以是radio-->
    </span>
    <input type="text" class="form-control"/>
   </div>
  </div>
  <div class="row" style="margin-top:10px;">
   <div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-btn">
     <button class="btn btn-default">搜索</button>
    </span>
   </div>
  </div>
  <div class="row" style="margin-top:10px;">
   <div class="input-group">
    <div class="input-group-btn">
     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">学院课程<span class="caret"></span></button>
     <ul class="dropdown-menu">
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >css</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >javascript</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >less</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bootstrap</a></li>
     </ul>
    </div>
    <input type="text" class="form-control"/>
   </div>
  </div>
 </div>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图：

bootstrap输入框组使用方法

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

bootstrap输入框组使用方法

- Author -

轻扰时光

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
jquery实现异步加载图片（懒加载图片一种方式）
Apr 24 jQuery
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
vue中监听返回键问题
Aug 28 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 #Javascript
Bootstrap下拉菜单样式
Feb 07 #Javascript
基于JavaScript实现购物车功能
Feb 07 #Javascript
js实现类bootstrap模态框动画
Feb 07 #Javascript
canvas实现探照灯效果
Feb 07 #Javascript
javascript数据类型详解
Feb 07 #Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 #Javascript
慢日志(1) cmd(1) 相对路径 (1) 相对路径(1) 面向对象(3) REST(1) mt-swipe(1) 远程桌面(2) exists(2) Mint UI(1)
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
javascript中clone对象详解
2014/12/03 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
浅析BootStrap中Modal（模态框）使用心得
2016/12/24 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
vue内置指令详解
2018/04/03 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
es6数值的扩展方法
2019/03/11 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
表扬信格式
2014/01/12 职场文书
大学生党员自我批评
2014/02/14 职场文书
给学校的建议书
2014/03/12 职场文书
基督教婚礼主持词
2014/03/14 职场文书
班干部演讲稿
2014/04/24 职场文书
小学生节水倡议书
2015/04/29 职场文书
小学运动会加油稿
2015/07/22 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python