首页 > 教程 > 关键词 > Bootstrap3.0学习最新资讯 > 正文

Bootstrap3.0学习第十一轮:输入框组

2013-12-06 15:37 · 稿源:aehyok博客园

上一篇:Bootstrap3.0学习第十轮:下拉菜单及按钮组

本文主要来讲解以下内容:1.基本案例;2.尺寸;3.复选框和单选框;4.附加按钮;5.带下拉菜单的按钮;6.分段按钮;7.总结。

基本案例

通过在基于文本的输入框前面,后面或是两边加上文字或按钮,可以扩展对表单的控制。用带有.input-group-addon的.input-group,可以给.form-control前面或后面追加元素。

跨浏览器兼容性

这里请避免使用 

不要和.form-group混用

不要直接将.input-group和.form-group混合使用,因为.input-group是一个独立的组件。

通过效果就可以看到,可在前面加,可以在后面加,也可以在前后同时加,使用起来很方便。

尺寸

给.input-group添加标明尺寸的class,它自己和其中的内容都会自动调整尺寸。没必要给每个元素都重复添加尺寸class。

复选框和单选框

可以把复选框或单选框放在输入组里而不是文本前。

这个简单的案例,首先使用了栅格系统,通过.row样式类和.col-lg-*样式类的组合。

首先看到的这个是在屏幕宽度足够大的情况下,两个组合控件在同一行进行排列。接下来我们通过收缩浏览器的宽度。可以看到如下效果

附加按钮

输入组里的有点不同,它需要多加一层元素。 你要用 .input-group-btn 包住按钮而不是 .input-group-addon。这是因为默认的浏览器样式不能被覆盖。

带下拉菜单的按钮

分段按钮

总结

各个控件之间的组合样式多变,根据需求的不同,可以设计出很多的花样出来。

  • 相关推荐
  • 大家在看
  • 学习通崩了?6月17日学习通app疑似无法打开

    6月17日,在今天有不少网友表示学习通App出现无法开打,页面刷新不出来等多种问题,疑似该app崩了。而在今年3月份学习通也曾发生过app故障,当时官方表示因为上千万用户同时使用,造成瞬间流量过载,导致部分功能不流畅,学习通通过“起飞”模式,使用户分批次登陆,最大限度保障用户的使用。

  • 苹果iPadOS14发布 可以直接使用Apple Pencil书写输入

    苹果首次在线上举办全球开发者大会WWDC20。在本次大会上,苹果会照例对iOS、iPadOS、macOS、watchOS、tvOS进行更新,从每年WWDC的软件蓝图中,开发者和用户都能大致看到苹果未来产品的走向与大致定位,从今年的新iPad Pro定位直指电脑不难发现,苹果也势必会将旗下诸多OS做进一步融合。在iOS之后,苹果继续带来了全新iPadOS14系统,本次更新针对iPad进行了更深度的定制,对iPad的特

  • 联发科独立AI处理器APU3.0,手机AI应用的原动力

    近年来,手机在语音助手、AI拍照、视频优化、VR/AR游戏等方面的AI应用快速发展,手机想要实现这些AI应用,需要芯片提供足够强大的AI算力和低功耗效能,因此手机芯片厂商纷纷在SoC中加入了独立的人工智能处理器,用于专门进行AI运算。例如联发科的天玑系列5G芯片,无论是主打高端市场的天玑 1000 系列,还是主打中高端市场的天玑 800 系列,都搭载了联发科自研的独立AI处理器 APU 3.0。早在 2018 年,联发科就开始将独立AI处理器内?

  • 小狸AI:作为家长,该如何帮助孩子从小培养学习习惯和学习能力?

    科学证明,每个孩子都是天生的学习高手。与生俱来的学习动力让他们生来就对外界事物充满了好奇心,但随着年龄的增大,有些孩子的内在学习动力则会相对减退。因此,有远见的父母都会有意识地帮孩子从小培养主动学习的习惯和能力。甚至懂得要为孩子搭建成长生态。那么,家长到底该如何科学地帮助孩子培养主动学习力呢?一直以来,我都认为要让专业的人做专业的事。所以,在网上看了很多资料后,帮孩子选择了小狸AI课。小狸AI课,是中

  • 艾媒咨询发布输入法疫期专题报告,百度输入法月活、满意度、语音输入大满贯

    突如其来的新冠肺炎疫情,给我们生活的方方面面都带来了可感知的影响。当娱乐、教育、办公等快速“线上化”、“云化”,在线交流需求随之爆发,而这背后也掀起了一场用户习惯的变革。近日,全球领先的移动互联网第三方数据分析机构艾媒咨询(iiMedia Research)发布《 2020 中国第三方手机输入法市场疫期专题报告》(以下简称为《报告》),针对新冠疫情下手机输入法行业的市场情况、用户情况、典型厂商案例及未来趋势进行调研分析,?

  • 苹果iOS14与iPadOS14系统原生输入法将内置五笔输入

    昨日凌晨,苹果全球开发者大会WWDC2020 首次在线上举办,在本次大会上,苹果更新了iOS14、iPadOS14、watchOS7、macOS Big Sur等OS系统。

  • 父母只会粤语用不了拼音输入法?这款自带粤语键盘的输入法了解一下

    从人数规模上看,粤语无疑是中国方言使用率的第一名。据统计,目前全球有1. 2 亿人使用粤语,还有更多喜欢粤语却不太会说的广义粤语粉。遗憾的是,目前市面上几乎没有推出过专门针对粤语用户定制的输入法。 近日,搜狗输入法升级了到10. 11 版,为广大粤语用户带来了粤语键盘功能。在新版搜狗输入法的加持下,用户只需在搜狗输入法的语言设置中添加“中文—粤语”,就能在日常生活中使用粤语输入法与亲朋好友们愉快交流啦! 如果?

  • 猿辅导在线教育开放多种学习课程 为学生提供学习支持

    随着国内疫情的缓解,学生们这个超长的假期即将结束了。国内头部K12 在线教育公司猿辅导在这个假期推出了线上免费直播课,为学生们宅在家里提供了精神食粮,帮助学生们启发思维,探索自身价值,受到了广大学子们的好评。其实无论在什么时候,学习力和专注力是影响学生学习效果的最主要的两个因素;而往往,学生自己却意识不到自己学习进步缓慢是受这两个因素的影响。寒假延长期期间,学生们在家学习,它们的影响也就更为显著了。针?

  • 联想撮合“四大天王”带货:罗永浩、王自如首次同框

    锤子创始人罗永浩已经退出手机江湖,专心做直播带货还债,但是老罗当年跟Zealer创始人王自如的直播可谓手机史上的一次经典。两人也自此结怨,大有老死不相往来的可能,直到现在两人同时出现在联

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • 当代青年都该掌握的投屏学习指南

    我们正处于一个信息爆炸的时代,不管是知识层面还是技术层面,几乎都是日新月异的,职场的激烈竞争,无形中要求了每个人都需要不断学习来完善自我。所幸,这些年互联网分享知识趋势发展迅猛,以B站为例,从 2020 年 2 月 1 日到 3 月 25 日,不到 2 个月的时间,热爱知识的的UP们在学习频道里上传了数以万计的学习视频,同时有超过千万的用户在B站学习。其学习内容包罗万象,今天小编总结了一份B站学习指南,希望大家好好学习,天?

  • 兴趣是英语学习源动力,阿卡索多元化课程提高孩子学习效果

    近几年,随着全球化进程加快及消费升级,父母对子女英语教育方面的投入意愿越来越强。相较于传统的线下大班教学,在线英语教育因其突破时空限制,随时随地都能学习英语,而受到众多家长青睐。易观发布的《 2020 中国互联网教育行业总结和新风向洞察》显示,聚焦互联网语言教育市场领域,青少儿英语份额正在持续上升,预计到 2022 年,青少儿英语市场份额占互联网语言教育市场比例将上升到23%。 对于青少年来说,缺少互动的线上学?

  • 终身学习者无畏,万门大学VIP一站式学习新体验

    终身学习的概念对许多人来说并不陌生。机遇和挑战伴随着人的一生,但不管是抓住机会,还是迎接挑战都离不开学习带来的提升。那有没有更实在高效的终身学习方案呢?万门大学推出万门VIP,提供一站式终身学习解决方案,为终身学习保驾护航。从万门大学官网了解到,万门大学VIP分为,一年和终身两种权益。平台课程适用人群非常广泛,从适龄中小学生,到升学、考证、跨专业学习的大学生,以及职场白领都能从万门大学VIP提供的服务中享?

  • 更轻盈,更安全,宏碁TravelMate X5高效办公

    在市面上众多类型的笔记本中,轻薄本其轻薄的特征受到职场人士的青睐,对于现代企业办公方式与工作场景多样化的情形下,易于携带的轻薄本则成为都市白领们的必备武器。突破新极限,宏碁TravelMate X5 轻薄本拥有超越想象的轻薄,整机仅重0.98kg,薄至14.9mm,轻松收纳,更拥有强劲的性能与安全的工作环境为高效办公护航。 轻薄体验,搭载酷睿处理器性能非凡 TravelMate X5 不仅仅只是轻薄,整机重量控制在0.98kg的同时,更搭载了?

  • 讯飞输入法道歉:与相关IP没有任何合作

    6月23日晚,讯飞输入法官方微博发布消息,表示运营人员私用账号发布不妥言论,该涉事运营人员已被公司严肃处理,后续也不再担任该岗位工作,经内部评估后再进行其它岗位调整,同时讯飞还表示没有与相关IP进行合作。

  • Windows 10启用全新开始菜单 微软:纯色背景统一视觉效果

    从今天开始,Windows 10开始启用全新菜单,对于这样的举措,微软表示,这是用一种更流畅的简化设计更新开始菜单,去掉了应用程序列表中logo后面的纯色背景,并为程序图标应用了部分透明化的统一

  • 微软开始编译Win10 20H2第一个版本:对开始菜单调整

    Windows 105 月更新后,接下来微软要进行的就是Win10 20H2 的工作,其会在今年 10 月份推送,不过相比前者来说,它的更新幅度并不会太大。

  • 中科院少儿英语报告:在线学习意愿首超线下 72%家长愿意选择线上学习

    近日,中科院大数据挖掘与知识管理重点实验室发布了《 2020 年中国在线青少儿英语教育市场报告》,对在线青少儿英语市场和品牌,以及家长选择在线英语教育因素作了相关调查。报告显示,39%的家长认为线上师资和教研产品已经感伤甚至超越线下机构,同时具备便捷、省时省力的优势,他们更愿意只为孩子选择线上学习方式。同时为孩子搭配线上线下学习的家长占比为33%,只愿意选择线下机构的占比将至28%。这就意味着,从家长的选择意愿?

  • 李佳琦质检团队全为研究生 李佳琦薇娅首次同框对话

    在 6 月 6 日晚间播出的央视财经的《对话》栏目中李佳琦薇娅同框直播带货。李佳琦和薇娅是目前直播带货领域两大公认的最顶级的主播。在央视财经的《对话》栏目中李佳琦薇娅首次同框对话,两大头部主播背后团队曝光。

  • 直播3.0时代:综艺+带货+内容如何“赢过”买买买

    用户对不同品类商品的关注点不同,带货方式也有所不同。比如罗永浩带货网红食品钟薛高跟薇娅带货卫星,梁建章带货酒店与董明珠带货家电,都会有所不同。随着直播赛道越来越拥挤,各个细分品类的直播开始呈现出不同的行业规律。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议