您现在的位置是:网站首页> 编程资料编程资料
Bootstrap3.0学习笔记之按钮与下拉菜单_心得技巧_网页制作_
2023-11-07
269人已围观
简介 Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁、大气的Bootstrap界面上靠,着实要费一些功夫。下面我们就来一个个的学习bootstrap3.0的组件。
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题。不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真实的效果。挺不错的。那么接下来的几篇文章主要来讲解Bootstrap的组件。那么本文主要来讲解以下内容
再来熟悉一下这个开始建立一个页面的代码,首先新建一个测试网页加入如下代码
的
如果你有什么不太了解的话,我在之前的文章当中有过介绍,你可以点击链接进行查看http://www.cnblogs.com/aehyok/p/3398359.html
用于显示链接列表的可切换、有上下文的菜单。
案例
将下拉菜单触发器和下拉菜单都包裹在.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的样式类。

标题
在任何下拉菜单中均可通过添加标题来标明一组动作。
下拉菜单
主要是添加了

禁用的菜单项
给下拉菜单中的
继续修改上面的代码将Something else here行的代码进行替换
主要是在li标签中添加.disabled的样式类。
你运行之后可以查看效果,其实效果和上面的标题样式差不多,当你点击的时候会有一个禁用的图标显示。截不到图。
按钮组中的工具提示和弹出框需要特别的设置
当为.btn-group中的元素应用工具提示或弹出框时,必须指定container: 'body'选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。
基本案例
把一系列的.btn按钮放入.btn-group。
通过.btn-group就可以将一组button按钮并且为其添加样式类btn

按钮工具栏
把一组
提示:
本文由神整理自网络,如有侵权请联系本站删除!
本站声明:
1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!
相关内容
- Bootstrap3.0学习笔记之CSS相关补充_心得技巧_网页制作_
- Bootstrap3.0学习笔记之特殊的效果(显示隐藏、消除浮动、关闭按钮等)_心得技巧_网页制作_
- Bootstrap3.0学习笔记之按钮的样式_心得技巧_网页制作_
- Bootstrap3.0学习笔记之表格相关_心得技巧_网页制作_
- Bootstrap3.0学习笔记之页面布局_心得技巧_网页制作_
- 神之刃怎么刷灵魂石最效率 灵魂石掉率实测_手机游戏_游戏攻略_
- 神之刃试炼场新手玩家须知_手机游戏_游戏攻略_
- 神庙逃亡2道具如何使用_手机游戏_游戏攻略_
- 神庙逃亡2Bug解析 获得加成分数的方法_手机游戏_游戏攻略_
- 全民飞机大战 钢铁雷霆与甜心战神哪个好 属性对比分析_手机游戏_游戏攻略_
点击排行
本栏推荐



