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 时间显示效果代码
Aug 23 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
mock.js模拟数据实现前后端分离
Jul 24 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实现框架(二)
2006/10/09 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
pytorch构建多模型实例
2020/01/15 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
自荐信如何制作?
2014/02/21 职场文书
委托书模板
2014/04/04 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
班级联欢会主持词
2015/07/03 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2016年母亲节广告语
2016/01/28 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js