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

Bootstrap3.0学习第十二轮:导航、标签、面包屑导航

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

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

本文主要来讲解以下内容:1.导航;2.标签;3.面包屑导航。

导航

Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。改变修饰类可以改变样式。

1、标签页

注意.nav-tabs类需要.nav基类。

在这里暂时只进行探讨简单的样式。

2、胶囊式标签页

用相同的 HTML 标记,但要用.nav-pills代替。

Pills 可以竖直堆叠。只要加上.nav-stacked。

3、两端对齐的导航

在大于768px的屏幕上,通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。

4、禁用的链接

对任何导航(包括标签页,pills,或列表,加入.disabled使链接为灰色且没有鼠标悬停效果

链接功能没有受到影响

这个类只改变的外观,而不是它的功能。用自定义的 JavaScript 禁用这里的链接。

通过将鼠标悬停你就可以查看简单的效果了,暂时无法截图。

5、使用下拉菜单 

6、带下拉菜单的胶囊式标签页

标签

简单案例

可用的变体

用下面的任何一个class即可改变标签的外观。

面包屑导航

用一个带方向的层次表明当前页面的位置。

分割符自动地通过CSS的:before和content添加上了。

  • 相关推荐
  • 大家在看
  • 稳定导航,不断革新—智斗士导航仪

    导航仪属于现代汽车科技的产物,用于汽车导航、定位和娱乐。但随着汽车的普及和道路的建设,人们在城际之间的经济往来也更加频繁,车载GPS导航仪显得更加重要,准确的定位、导航、娱乐功集于一身的导航更能满足车主的需求,成为每辆车子的基本装备;但是随着市场需求量的增大,市场上出现了众多的山寨汽车导航仪品牌,这就为车主选购车载GPS导航仪增加了很大的难度。智斗士也就是在这个情况下悄然孕育而生,智斗士是河南方戈贸易有限公司旗?

  • 北斗导航系统最后一颗卫星:后天发射!

    经过长达26年的艰辛建设,北斗卫星导航系统终于要大功告成了!来自中国卫星导航系统管理办公室的官方消息:按照发射技术流程,我国北斗三号全球卫星导航系统最后一颗、也就是第55颗组网卫星,

  • 中国北斗导航系统完成布局 美国GPS III卫星升空:3倍精度

    随着最后一颗北斗GEO卫星的发射成功,中国谋划了20多年的北斗导航定位系统已经完成布局,今年将开始为全球提供服务。美国也没闲着,马斯克的SpaceX公司用猎鹰九号也成功发射了一颗GPS III卫星,

  • 将面包装进“口红”里,三只松鼠口红小面包创造社交领域新玩法

    “要面包还是爱情”是亘古不变的难题,那么二者融合又会产生什么奇妙的火花呢?近日,三只松鼠将恋爱中的必送礼物口红与口袋面包结合起来,一款自带话题的口红小面包正式上线。随着消费水平不断升级,消费者对零食的要求也越来越高,好吃又要好玩的零食成为新宠儿。好玩的零食能够很快拉近人的距离,因此成为了打开社交场景的钥匙,零食社交化逐渐成为零食演变的新趋势。三只松鼠深蕴其道,为了让消费者吃面包也能变得优雅有趣,口

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

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

  • 最后一颗卫星成功发射!交通部:全国超660万辆车已安装北斗导航

    6月23日9时43分,我国在西昌卫星发射中心用长征三号乙运载火箭,成功发射北斗系统第五十五颗导航卫星,暨北斗三号最后一颗全球组网卫星,至此北斗三号全球卫星导航系统星座部署比原计划提前半年

  • 百度地图新增摊位上传绿色通道 用户使用地图可直接导航至地摊前

    要说当下最火的一个热词,想必就是”地摊经济“了。各行各业都在探索”地摊经济+某某“的全新市场模式。除了有不少网友再朋友圈晒起了自己的摆摊计划,还有毕业生称,作为

  • 四维图新:子公司获准导航电子地图制作甲级测绘资质增项

    【TechWeb】6月10日消息,四维图新对外发布公告称,公司的控股子公司中交宇科(北京)空间信息技术有限公司已通过中华人民共和国自然资源部关于甲级测绘资质单位新增专业范围审查意见的公示,获准其甲级测绘资质新增“导航电子地图制作”的专业范围。公告称,中交宇科为公司旗下从事交通信息化和空间数据服务的提供商,通过高精度测绘、高精度地图、高精度定位等技术为行业用户提供应用服务。此次获准新增甲级测绘资质“导航电子?

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

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

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

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

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

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

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

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

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

    随着国内疫情的缓解,学生们这个超长的假期即将结束了。国内头部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 年前五个月,犯罪分子在新冠疫情蔓延之际利用?

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

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

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