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

Bootstrap3.0学习第八轮:工具Class

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

上一篇:Bootstrap3.0学习第七轮:按钮

本文学习的内容主要如下所示:1.关闭按钮;2.Carets;3.快速设置浮动;4.内容区域居中;5.清除浮动;6.显示或隐藏内容;7.针对屏幕阅读器的内容;8.图片替换;9.总结。

关闭按钮

通过使用一个象征关闭的图标,可以用来让模式对话框和警告框消失。

Carets

使用插入符表示下拉的功能和方向。请注意,默认插入符会自动反转在dropup菜单。

快速设置浮动

过这两个class让页面元素左右浮动。 !important被用来避免某些问题。也可以像mixin一样使用这两个class。

不要用于导航条

如果是用于对齐导航条上的组件,请务必使用.navbar-left 或 .navbar-right。查看导航条文档以获取详情。

内容区域居中

将页面元素设置为 display: block并通过设置margin使其居中。可以作为mixin或class使用。

清除浮动

使用.clearfix清除任意页面元素的浮动。我们使用了Nicolas Gallagher的the micro clearfix。也可以像mixin一样使用。

显示或隐藏内容

通过.show 和 .hidden可以强制显示或隐藏任一页面元素(包括在屏幕阅读器上)。这两个class使用了!important以避免冲突。这两个class只能做用于块级元素,也可以作为mixin使用。

.hide 仍然可以用,但是它不能影响屏幕阅读器,并且从v3.0.1版本开始已将被标记为不建议使用。请使用.hidden 或 .sr-only。

此外,可以使用.invisible切换只有一个元素的可见性,这意味着它的显示不被修改,仍然可以影响文档流中的元素。

针对屏幕阅读器的内容

使用.sr-only可以针对除了屏幕阅读器之外的所有设备隐藏一个元素。此class还可以作为mixin使用。

图片替换

使用.text-hide class(也可作为mixin使用)可以将页面元素所包含的文本内容替换为背景图。

总结

本文当中主要是讲了一些比较特殊的效果。比如显示隐藏、消除浮动、关闭按钮等。在一些特性的情况下,可能会有用到。

下一篇:Bootstrap3.0学习第九轮:CSS补充

网友热搜:

  • 相关推荐
  • 大家在看
  • 苹果将推Apple Glass智能眼镜 可根据视力自动调整镜片度数

    6月19日消息,据国外媒体报道,美国专利商标局(USPTO)近日发布的一项专利显示,苹果眼镜可以自动调整镜片度数,以适应用户眼睛并弥补任何缺陷,从而满足需佩戴处方镜片或隐形眼镜的用户需求。该专利描述了可能用于传闻中的“苹果眼镜”(Apple Glass)的自动校正镜片背后的技术。用户可根据自己的视力自动调整镜片所需要的度数,从而达到矫正视力的目的。此外,眼镜屏幕也可以进行调整,以使图像显示更清晰,这是通?

  • Facebook正在关闭模仿TikTok的Lasso短视频服务

    上线一年半后,Facebook 已决定放弃旨在取代 TikTok 的 Lasso 短视频应用。在周三的公告中,该公司很遗憾地通知 Lasso 用户,其将于 7 月 10 日关闭这项服务。2018 下半年推出的 Lasso,曾被视作在中西年轻用户群体中都占有一席之地的 TikTok 的有力竞争者。

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

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

  • 学习通崩了?6月17日学习通app疑似无法打开

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

  • Glassdoor发布美国最受应届生青睐十大雇主:字节跳动旗下TikTok上榜

    【TechWeb】6月24日消息,日前,美国职场社区Glassdoor的一项调查显示,字节跳动旗下短视频平台TikTok在“疫情期间最受毕业生青睐公司”的排名中位列第五,超越谷歌和Facebook。这项统计不限于科技公司,结果显示,应届生最关注的前五名雇主分别是亚马逊、微软、高盛、苹果和TikTok。有7家科技公司进入榜单前十,3家非科技公司分别是高盛、安永和任仕达。该报告称,由于新冠病毒的大流行,导致2020届毕业生出现成千上万的失业者,

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

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

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

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

  • 小程序与APP相互搏杀,内容创业者究竟需要怎样的平台?

    截止 2019 年年底,国内市场上监测到的APP数量达 367 万款,小程序则超过 450 万。在艾瑞咨询日前发布的这份《 2020 年中国移动互联网内容生态洞察报告》中,小程序正展现出巨大的活力,成为用户触达内容和服务的关键途径。

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

    随着国内疫情的缓解,学生们这个超长的假期即将结束了。国内头部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的同时,更搭载了?

  • 易信APP发布“说吧吧主激励计划”,百万元扶持优质内容创作

    近日,易信App在「说吧」公众号发布《吧主激励计划》,易信在计划中表示,我们知道不少吧主建吧时都对自己的「说吧」有美好的规划,比如希望它有丰富的内容和高活跃度等。后来,我们想如果易信能让「说吧」的吧主通过产生或运营出优质内容而获得收入(星币激励金),让他们有更多时间和精力投入到创作中去,那「说吧」的内容一定会更多更好。因此我们考虑现在实现这个想法,推出“易信说吧吧主激励计划”。计划内容很简单,为了给予?

  • 美团单车:北京运营团队将在热点区域加强运维和消毒力度

    【TechWeb】6月24日消息, 端午假期即将到来,针对北京疫情防控需要,美团单车称,北京运营团队将在热点区域加强运维力度和消毒力度。6月16日晚,北京市突发公共卫生事件应急响应级别由三级调至二级,并相应调整防控策略。针对北京疫情防控策略调整,美团单车推出多重举措保障市民骑行安全。首先,在原有防疫管理基础上,升级运维员工的卫生防护,提供并严格要求佩戴口罩、手套上岗,正确引导科学防护,要求上岗员工每日先测体温?

  • 今年雄安新区主城区公共区域将实现5G信号覆盖

    【TechWeb】根据雄安发布消息,河北省通信管理局获悉,一年来河北省加快推进5G网络建设,聚焦工业互联网、远程医疗、智慧城市等5G应用重点领域,推动5G在各行业各领域的融合应用创新。截至5月底,全省已建成7460个5G基站。河北省通信管理局相关负责人表示,今年是5G网络建设的大发展之年,我省将充分发挥各基础电信企业的主体作用,至少建设1.5万个5G基站,年底力争达到1.8万个5G基站,实现11个设区市和雄安新区主城区公共区域5G?

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

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

  • 街电科技与面包新语开启全新合作,广东地区全门店覆盖强化区域优势

    日,街电科技与新加坡都市时尚烘焙品牌面包新语开启全新阶段的独家合作,续签广东地区全部 85 家门店,延续品质美味与贴心服务的完美组合,为广大食客驱走炎炎夏日的焦躁。街电与面包新语的再次牵手,将进一步巩固街电在广东地区的餐饮场景渗透和区域影响。完善广东美食布局,街电订单持续提升巩固区域优势餐饮作为日常生活中最高频的消费场景,最能反映城市特色和地域文化,而广东人对于美食的追求更是广博与精致并存。餐饮场景中

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