下拉菜单
特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
效果图:
实现原理:
在刚开始的时候,其中class中有一个display:none;下面看一下css
然后利用点击事件,控制标签class的移除和添加,用来实现显示和隐藏 通过js技术手段,给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说,默认情况,
“div.dropdown”没有类名“open”,当用户第一次点击时,“div.dropdown”会添加类名“open”;当用户再次点击时,“div.dropdown”容器中的类名“open”又会被移除。我们可以通过浏览器的firebug查看整个过程:
默认情况:
用户第一次点击:
用户再次点击:
open的css
下拉菜单分割线
还是上面的例子,再贴上代码!看看效果,还是要引入js文件!后面就不多少了!
效果图:
实际上就多了这么一行代码
下拉菜单 菜单标题
直接上代码
效果图:
下拉菜单 对齐方式
使用pull-right类使下拉菜单与父容器右边对齐
下拉菜单
使用dropdown-menu-right类使下拉菜单与父容器右边对齐
下拉菜单
下拉菜单与父容器左边对齐
下拉菜单
实际上是在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名,其中css的样式代码
下拉菜单(菜单项状态)
下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus)
下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。
鼠标放上去,在禁用的上面会显示一个禁止的标志,截图不能截进去!
按钮(按钮组)
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等
效果图:
在这里可以根据不同的图标生成不同的图标按钮!可以在此网址查看:http://getbootstrap.com/components/#glyphicons
按钮(按钮工具栏)
在富文本编辑器中,将按钮组分组排列在一起,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和两端对齐一组,如下图所示:
那么Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中,如下所示: