Bootstrap CSS组件之输入框组


Posted in Javascript onDecember 17, 2016

本文实例为大家分享了Bootstrap输入框组的具体代码,供大家参考,具体内容如下

了解table-cell的表格width设置为1%的原因。

http://www.tuicool.com/articles/VzUVfyi

通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。

input-group(input-group-xs,input-group-sm,input-group-lg)、input-group-addon、form-control

//源码
//各元素设置为等高显示,input-group输入框组display:table,input-group-addon和form-control设置display:table-cell
.input-group {
 position: relative;
 display: table;
 border-collapse: separate;
}
//input-group如果同时应用了col样式,则取消浮动和左右padding
.input-group[class*="col-"] {
 float: none;
 padding-right: 0;
 padding-left: 0;
}
.input-group .form-control {
 position: relative;
 z-index: 2;
 float: left;
 width: 100%;
 margin-bottom: 0;
}
.input-group-addon,
.input-group-btn {
//设置最小值,以便表格模式进行近似等分
 width: 1%;
 white-space: nowrap;
 vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
 display: table-cell;
}

1.基本用法
有时需要将文本输入框(input-group)和文字或者小icon组合在一起进行显示
2.复选框与单选框作为addon .input-group-addon(可以放置label,icon,checkbox,radio)
3.按钮作为addon
4.下拉菜单按钮作为addon
5.分段按钮作为addon

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Bootstrap从3.0版本开始全面支持移动平台,贯彻移动先行宗旨 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 </head>
 <body>

  <!-- 将文本输入框(input-group)和文字或者小icon组合在一起进行显示:
      input-group/input-group-addon/form-control-->
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">0.0</span>
  </div>

  <!-- 复选框与单选框作为addon .input-group-addon(可以放置label,icon,checkbox,radio)
     源码中如果对margin-top值进行了消除,方便对齐
     input-group/input-group-addon/form-control-->
  <div class="input-group">
    <span class="input-group-addon"><input type="checkbox"></span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><input type="radio"></span>
    <input type="text" class="form-control">
  </div>

  <!-- 按钮作为addon
     input-group/input-group-addon/form-control-->
  <div class="input-group">
    <span class="input-group-addon">
      <button class="btn btn-default">Go!</button>
    </span>
    <input type="text" class="form-control">
  </div>

  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">
      <button class="btn btn-default">Go!</button>
    </span>
  </div>

  <!-- 下拉菜单按钮作为addon:
     input-group/input-group-btn/dropdown-menu/form-control-->
  <div class="input-group">
    <input type="text" class="form-control">

    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        前端 <span class="caret"></span>
      </button>

      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">JS</a></li>
        <li><a href="#">CSS</a></li>
      </ul>
    </div>
  </div>

  <!-- 分段按钮作为addon:
     在input-group-btn里有多个btn-->

  <div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-btn">
      <button class="btn btn-default" type="button">按钮A</button>
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <button class="btn btn-default" type="button">按钮B</button>
      <button class="btn btn-default" type="button">按钮C</button>

      <ul class="dropdown-menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </div>
  <!-- bootstrap是基于jQuery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

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

Javascript 相关文章推荐
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
微信小程序日期时间选择器使用方法
Feb 01 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
vue中引入mxGraph的步骤详解
May 17 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
原生js验证简洁注册登录页面
Dec 17 #Javascript
javascript 数组去重复(在线去重工具)
Dec 17 #Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 #Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 #Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 #Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 #Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
PHP中phar包的使用教程
2017/06/14 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
pytorch masked_fill报错的解决
2020/02/18 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
C++面试题目
2013/06/25 面试题
小学生竞选班长演讲稿
2014/04/24 职场文书
初中新生军训方案
2014/05/13 职场文书
职务任命书范本
2014/06/05 职场文书
大学生活感想
2015/08/10 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis