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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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中去除所有js,html,css代码
2010/10/12 PHP
php获取根域名方法汇总
2014/10/28 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
vue实现登陆登出的实现示例
2017/09/15 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python使用剪切板的方法
2017/06/06 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python和php哪个容易学
2020/06/19 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
大学自荐信
2013/12/12 职场文书
第二课堂活动总结
2014/05/07 职场文书
运动会加油稿20字
2014/11/15 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
《月光曲》教学反思
2016/02/16 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
Python绘画好看的星空图
2022/03/17 Python