ch05-下拉菜单和按钮组组件.pptVIP

第5章下拉菜单和按钮组组件小图标组件下拉菜单组件按钮组组件教学内容一．小图标组件小图标组件Bootstrap提供了免费的200多个小图标，具体可以参考中文官网的组件。链接：/components/。部分图标如下：可以使用i或span标签来配合使用，具体如下：1.使用小图标spanclass=glyphiconglyphicon-home/spanspan首页/span2.也可以结合按钮buttonclass=btnbtn-defaultbtn-lg spanclass=glyphiconglyphicon-star/span /button二．下拉菜单组件下拉菜单组件下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。1.bootstrap声明式用法具体参照menu.html。下拉菜单(divclass=dropdown)，设置上拉菜单(divclass=dropup)说明：按钮和菜单需要包含在.dropdown的容器里，而作为被点击的元素按钮需要设置data-toggle=dropdown才能有效。对于菜单部分，设置class=dropdown-menu才能自动隐藏并添加固定样式。设置class=caret表示箭头，可上可下。 1)在.dropdown的div内的效果：下拉菜单组件divclass=dropdown buttonclass=btnbtn-defaultdata-toggle=dropdown产品 spanclass=caret/span /button ulclass=dropdown-menu liahref=#手机/a/li liahref=#电脑/a/li liahref=#电视/a/li liahref=#智能家居/a/li /ul /div说明：button标签也可以使用a标签下拉菜单组件2)在.dropdown的div外的效果：按钮加属性data-target=”#menu2”，外层div加属性id=”menu2”。buttonclass=btnbtn-primarydata-toggle=dropdowndata-target=#menu2产品2 spanclass=caret/span/buttondivclass=dropdownid=menu2 ulclass=dropdown-menu liahref=#手机/a/li liahref=#平板/a/li liahref=#电视/a/li /ul /div下拉菜单组件//菜单项居右对齐ulclass=dropdown-menudropdown-menu-right?//设置菜单的标题liclass=dropdown-header网站导航/li?//设置菜单的分割线liclass=divider/li?//设置菜单的禁用项liclass=disabledahref=#产品/a/li//让菜单默认显示divclass=dropdownopen下拉菜单组件2.下接菜单的jQuery用法（了解部分）在JavaScript调用中，没有属性，只有方法。下拉菜单支持4种事件，分别对应弹出前、弹出后、关闭前和关闭后。事件类型 描述show.bs.dropdown在show方法调用时立即触发。shown.bs.dropdown在下拉菜单完全显示出来，并且等CSS动画完成之后触发。hide.bs.dropdown在hide方法调用时，但还未关闭隐藏时触发。hidden.bs.dropdown在下拉菜单完全隐藏之后，并且等CSS动画完成之后触发。//事件，其他的事件类似$(#drop1).on(show.bs.dropdown,function(){ alert(在show方法调用时立即触发);});三．按钮组组件按钮组组件按钮组就是多个按钮集成在一个容器里形成独有的效果。buttonclass=btnbtn-default按钮1/button buttonclass=btnbtn-primary按钮2/buttonbuttonclass=btnbtn-danger按钮3/button//将多个按钮组整合起来便于管理divclass=btn-group buttonclass=btnbtn-default按钮1/button buttonclass=btnbtn