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输入框组使用方法

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

Javascript 相关文章推荐
javascript 函数使用说明
Apr 07 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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
You might like
php 中文和编码判断代码
2010/05/16 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
PHP创建XML接口示例
2019/07/04 PHP
PHP7修改的函数
2021/03/09 PHP
javascript字符串拼接的效率问题
2010/12/25 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
vant实现购物车功能
2020/06/29 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
Python 类的继承实例详解
2017/03/25 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
电子信息专业应届生自荐信
2014/06/04 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
简历自荐信范文
2015/03/09 职场文书
小学中队活动总结
2015/05/11 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL