首页 > 教程 > 关键词 > HTML标签最新资讯 > 正文

Bootstrap3.0学习第七轮:按钮

2013-12-05 16:42 · 稿源:aehyok博客园

上一篇:Bootstrap3.0学习第六轮:表单

本文主要讲解的是按钮的样式,主要包括:1.选项;2.尺寸;3.活动状态;4.禁用状态;5.可做按钮使用的Html标签;6.总结。

选项

使用上面列出的class可以快速创建一个带有样式的按钮。

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">链接</button>

尺寸

需要让按钮具有不同尺寸吗?使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。

<p>

<button type="button" class="btn btn-primary btn-lg">Large button</button>

<button type="button" class="btn btn-default btn-lg">Large button</button>

</p>

<p>

<button type="button" class="btn btn-primary">Default button</button>

<button type="button" class="btn btn-default">Default button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-sm">Small button</button>

<button type="button" class="btn btn-default btn-sm">Small button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

<button type="button" class="btn btn-default btn-xs">Extra small button</button>

</p>

通过给按钮添加.btn-block可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

活动状态

当按钮处于活动状态时,其表现为被按压下(底色更深,边框夜色更深,内置阴影)。对于B<button>元素,是通过:active实现的。对于<a>元素,是通过.active实现的。然而,你还可以联合使用.active <button>并通过编程的方式使其处于活动状态。

按钮元素

由于:active是伪状态,因此 无需添加,但是在需要表现出同样外观的时候可以添加.active。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>

<button type="button" class="btn btn-default btn-lg active">Button</button>

链接元素

可以为<a>添加.active class。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

可以和上面的button进行一下对比。

禁用状态

通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。

按钮元素

为<button>添加disabled属性。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

可以把鼠标放在按钮上点击查看效果。

跨浏览器的兼容性

如果为<button>添加disabled属性,Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前还没有办法解决。

链接元素

为<a>添加.disabled class。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

这是和上面的按钮做一个对比。

我们把.disabled作为工具class使用,就像.active class一样,因此不需要增加前缀。

链接功能不受影响

上面提到的class只是改变<a>的外观,不影响功能。在此文档中,我们通过JavaScript代码禁用了链接的默认功能。

Context-specific usage

While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

可做按钮使用的Html标签

可以为<a>、<button>或<input>元素添加按钮class。

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

跨浏览器表现

作为最佳实践,我们强烈建议尽可能使用<button>元素以确保跨浏览器的一致性样式。

出去其它原因,这个Firefox的bug让我们无法为基于<input>标签的按钮设置line-height,这导致在Firefox上,他们与其它按钮的高度不一致。

总结

本节主要讲解的内容是button按钮的样式。主要是灵活的运行这几个样式进行控制就可以了。

网友热搜:

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

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

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

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

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

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

  • HTTP和HTTPS是什么?

    我们都知道使用浏览器访问一个网站页面,需要知道该网站的域名,例如访问百度知道,在浏览器的地址栏中我们会看到一串URL。网站的URL会分为两部分:通信协议和域名地址。域名地址都很好理解,不同的域名地址表示网站中不同的页面,而通信协议,简单来说就是浏览器和服务器之间沟通的语言。网站中的通信协议一般就是HTTP协议和HTTPS协议。两者分别是什么,有什么区别呢?HTTP协议HTTP协议也就是超文本传输协议,是一种使用明文数据?

  • 用内容给客户打标签 网易互客如何给销售装上“雷达”?

    教育培训行业通行的销售方式柠智都尝试过:地推、周边社区推广、电梯广告,时下流行的抖音和微信等线上渠道也投放过,不过,整体的转化效率和宣传效果并没有达到理想状态。

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

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

  • 微信文章的点赞按钮复活了?这下小编们集体慌了…

    ​昨天!有眼尖的朋友们发现了!微信订阅号文章底部的样式又双叒叕改了!这次改动除了增加了【分享】键,还把之前消失的点【赞】按钮给复活了,于是很多文章的底部就变成了这样:

  • 微信公众号更新:新增文章「分享」和「点赞」按钮

    今天微信公众号文章大改版,评论区底部新增「点赞」和「分享」按钮,与「在看」并列,用户可以直接将文章分享到朋友圈或者发送给好友。

  • 微信公众号文章新增分享点赞按钮

    今日,微信公众号文章底部,评论区上方新增“分享”、“点赞”按钮,用户可以直接将文章分享到朋友圈或者发送给好友。

  • 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的同时,更搭载了?

  • 区块链FBI再升级,欧科云链OKLink添加地址标签功能

    随着新基建范围的确认,区块链技术将迎来快速发展已经成为了不争的事实, “区块链”也成为了 2020 年的新兴主流词。提起区块链,主流大众对区块链的印象更多还是停留在以比特币、以太坊为代表的加密货币。而对于用户来说,资金安全是涉及到资产问题时最为关心的一个问题。安全事故频发,资产保障堪忧据外媒Cointelegraph消息,数字资产情报公司CipherTrace不久前发布报告称,仅 2020 年前五个月,犯罪分子在新冠疫情蔓延之际利用?

  • 百度搜索界面改版 按钮变圆润页面更加整洁

    近日,有网友发现百度搜索首页以及百度搜索结果页出现了改版的情况,相比旧版,新版的百度搜索按钮更加的圆润,同时蓝色色值从#3385ff改成#4e71f2,并且搜索结果页面的区域划分更加明显。

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

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

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

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

  • 鲸小喜3.0:实体店如何用会员制提高业绩?

    最近几年,会员制的发展速度可以用惊人来形容,很多大公司,都开始疯狂推会员制。2015 年,京东推出PLUS会员; 2016 年,唯品会推出超级VIP会员; 2017 年,网易考拉推出黑卡会员、苏宁易购推出SUPER会员; 2018 年,阿里推出 88 超级会员。 以上是一些互联网公司,我们再来看一看线下实体商家。 2015 年物美推出会员制超市尚佳会员店、永辉也在上海开出超市会员店; 2017 年,银泰推出付费会员365; 2019 年,中国首家Costco开市客落址

  • 学习如何正确开通微众银行微粒贷

    微众银行微粒贷作为国内首家互联网银行微众银行推出的信贷产品,自推出以来便一直采用官方邀请制,只有受邀用户才能在手Q钱包和微信支付里看到入口,但有些小伙伴还不算太了解。下面小编就根据官方消息为大家解答一些常见问题。微粒贷如何知道自己是否是微众银行微粒贷的受邀用户?微众银行微粒贷目前为官方邀请制,部分符合当期授信条件的用户会成为受邀用户,可以在微信支付和手Q钱包中看到微众银行微粒贷入口。如果还不是受邀用户,则?

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