《响应式页面设计》_项目6-任务6.1任务6.2.pptxVIP

1、按钮组;按钮组主要包括基本按钮组（水平按钮组）、垂直按钮组、内嵌按钮组及下拉菜单、按钮组大小等方面的内容;使用.bth-group-lglsm来控制按钮组的大小，如下图所示。;垂直方向的按钮组可以通过.btn-group-vertical设置，如图6-3所示。;我们可以在按钮组内设置下拉菜单，如图6-4所示。。;类.dropdown-toggle的作用时展示下拉的小三角，属性data-toggle=dropdown，data-toggle的意思是设置触发器，相当于告诉浏览器你是一个什么组件，以什么形式展示，常用的如dropdown、modal、popover、tooltips等。

下拉菜单通过点击触发，而不是通过鼠标悬停悬浮触发，下拉菜单控件依赖于第三方Popper.js插件，使用时请确保popper.min.js文件放在bootstrap.js之前，或者使用bootstrap.bundle.min.js、bootstrap.bundle.js文件，因为这两个文件中包含了Popper.js。

上述主要代码部分也可以写成如下代码;divclass=container

h2拆分按钮下拉菜单/h2

divclass=btn-group

buttontype=“button”class=btnbtn-primarySony/button

buttontype=“button”class=btnbtn-primarydropdown-toggledropdown-toggle-splitdata- toggle=dropdown/button

divclass=dropdown-menu

aclass=dropdown-itemhref=#Tablet/a

aclass=dropdown-itemhref=#Smartphone/a

/div

/div

/div

;divclass=container

h2垂直按钮组及下拉菜单/h2

divclass=btn-group-vertical

buttontype=“button”class=btnbtn-primaryApple/button

buttontype=“button”class=btnbtn-primarySamsung/button

divclass=btn-group

buttontype=“button”class=btnbtn-primarydropdown-toggledata-toggle=dropdown

Sony

/button

divclass=dropdown-menu

aclass=dropdown-itemhref=#Tablet/a

aclass=dropdown-itemhref=#Smartphone/a

/div

/div

/div

/div

;6.1.2Bootstrap下拉菜单;下面演示单一按钮的下拉菜单示例，其中按钮可以是button也可以是超链接a，，效果如图6-7所示。可以自由引用.btn-primry等颜色及样式类来定义下拉菜单的外在表现。;分裂式按钮就是前边学习的拆分按钮下拉菜单，效果如图6-8所示。;除此之外，下拉菜单中可以添加标题和分割线，使用.dropdown-header类创建下拉菜单标题，使用.dropdown-divider类创建下拉菜单中的水平分割线。下拉菜单中还可以设置的可用项与禁用项，.active类会让下拉菜单的选项高亮显示(添加蓝色背景)，显示为可用项，如果要禁用下拉菜单的选项，可以使用.disabled类。;下拉菜单默认的对齐方式是自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right到.dropdown-menu就会右侧轻松对齐下拉菜单。如图6-10所示。;下拉菜单默认的对齐方式是自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right到.dropdown-menu就会右侧轻松对齐下拉菜单。如图6-10所示。;1、Bootstrap导航;如果想创建一个简单的水平导航，可以在ul元素上添加.nav类，在每个li选项上添加.nav-item类，在每个链接上添加.nav-link类来完成。主要代码示例如下，效果如图6-11所示。;.nav的class可以使用在很多地方，所以标签可以非常灵活，比如使用在ul列表，或者自定义一个nav组件那次导航还可以使用nav，因为.nav基于display:flex定义，导航链接的行为与导航项目相同，不需要额外的标记。如下代