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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php仿discuz分页效果代码
2008/10/02 PHP
php中的比较运算符详解
2013/10/28 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python类属性与实例属性用法分析
2015/05/09 Python
Python对列表排序的方法实例分析
2015/05/16 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python SocketServer源码深入解读
2019/09/17 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
安全生产实施方案
2014/02/23 职场文书
我的求职择业计划书
2014/04/04 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
经理任命书模板
2014/06/06 职场文书
员工工作表现自我评价
2015/03/06 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
Python实现socket库网络通信套接字
2021/06/04 Python
python程序的组织结构详解
2021/12/06 Python