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

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

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

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

终于把前面关于Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题。不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真是的效果。挺不错的。那么接下来的几篇文章主要来讲解Bootstrap的组件。

那么本文主要来讲解以下内容:1.下拉菜单;2.按钮组;3.按钮式下拉菜单;4.总结。

再来熟悉一下这个开始建立一个页面的代码,首先新建一个测试网页加入如下代码

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。

案例

将下拉菜单触发器和下拉菜单都包裹在.dropdown里,然后添加组成菜单的HTML代码。

可以通过上面的代码发现,里面可能有很多陌生的样式类或者属性。

一个Dropdown按钮和右侧有个小图标caret,当然这个小图标和按钮的文本是平级的。

首先看button按钮中有个dropdown-toggle,还有一个data-toggle属性,根据这个属性来弹出下来列表。

紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用,在通过aria-labelledby绑定上面的button按钮。

下来第四个li标签中有个divider其实是一个分割线的样式类。

大概我理解的就这个样子,理解的肯定不到位。

对齐选项

给下拉菜单.dropdown-menu加上.text-right 使文字右对齐。

只是在上面的代码中的ul标签上添加了一个text-right的样式类。

  • 相关推荐
  • 大家在看
  • 联发科独立AI处理器APU3.0,手机AI应用的原动力

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

  • HTTP和HTTPS是什么?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 用算法寻找肿瘤的分子弱点,代码真的能治愈癌症?

    ruxolitinib试验是哥伦比亚大学系统生物学家Andrea Califano历时十年的追求的产物。通过复杂的计算,他对催化癌细胞的分子网络进行建模,并精确定位到转录因子蛋白作为关键因子,从而控制细胞内许多基因表达。

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

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

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

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

  • 三星Galaxy Note 20 Ultra爆料:一亿像素主摄敲定

    6月26日消息,知名爆料人士Roland Quandt推特表示,已经有确凿证据表明三星Galaxy Note 20 Ultra的主摄为108MP。除了一亿像素主摄之外,Galaxy Note 20 Ultra还有可能会使用潜望式长焦镜头及超

  • 三星Galaxy S20 Ultra从15楼摔下:屏幕基本完好

    6月13日消息,有网友表示,自己的Galaxy S20 Ultra从15楼摔到3楼,背板摔坏了,但是屏幕基本完好,仅有一个坏点。据悉,Galaxy S20 Ultra是三星2月份推出的年度旗舰,首发起售价9999元,它采用

  • 见证历史:“blacklist”等表述将逐渐从源代码中消失!

    美国、欧洲“Black Lives Matter”运动愈演愈烈。本周消息,谷歌决定放弃 Chrome 浏览器中“blacklist(黑名单)“、“whitelist(白名单)”的用法,后续使用“blocklist”和“allowlist”来替代它们。

  • 鲸小喜3.0:实体店开始复苏了,来研究一下新会员联盟--鲸鲤店

    2020 年的实体店市场可谓是如履薄冰,全国在今年倒闭的零售店不计其数。但我觉得实体店会慢慢复苏,因为电商的发展也遇到了瓶颈。近几年电商红利逐渐消失,营业费用也在不断提高,商家抱怨平台收费太高,电商法出台对网购雪上加霜,导致大批平台经营者纷纷退出投身实体店。然而如何克服传统实体店弊端,依旧是众多实体店主必须面临的思考。很多实体店商家面临着拓客,锁客,留客三大问题。在做活动的过程中,无法长期锁定客户,而?

  • 鲸小喜3.0:零售业会员制到底该怎么玩?

    会员制是帮助企业建立忠诚顾客群体的重要工具。据统计,如果一家企业至少有70%的顾客消费是由会员或回头客带来的,那么其营销活动的投入会降低很多。但绝大部分零售商并没有真正树立“既卖商品,又提供服务”的用户意识,他们仅仅是想把商品卖出去,从顾客口袋里拿到更多的钱。这样的思路下,零售业的会员制是很难做好的。通过数月的调研,我们总结出本土化会员制存在的三大问题。1. 大众普遍不适应商场会员准入制从国外引入的会员

  • Dafex 达菲创新小宇宙 AIT 3.0 引领金融科技

    随着大时代的改变与发展迁移,人工智能、大数据、云计算等新一代信息技术的发展已经成为了改变传统一尘不变的模式。DAFEX 达菲是一家全球性的专业金融技术服务提供商,用心致力于创新科技为一直保守着传统方式的金融业带来新景象。一个汇集顶尖人工智能技术及金融交易的专业平台 – 小菲达人(AIT 3.0)正是DAFEX 达菲的核心所在。小菲达人(AIT 3.0)不仅汇聚了业内专家和各大技术支持,更以区块链技术为研发领航者创建了许多人工

  • iOS测试版代码透露苹果可能正为旗下服务准备捆绑套餐

    DoNews 6月4日消息(记者 刘文轩)需要定期付费的在线服务越来越多,分别为它们支付费用也是一件麻烦事。苹果推出的一系列在线服务也是如此,目前用户还没有一个可以一次性支付Apple News+、Apple TV+、Apple Music和Arcade的办法。不过据9to5Mac报道,iOS 13.5.5中的代码中,出现“bundle offer”和“bundle subscription”字符串,这意味着,苹果可能正在为旗下的订阅服务准备一个套餐。这些文件据称与苹果自己的服务订阅管理系?

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