学习Bootstrap3组件之下拉菜单及组合

bootstrap 的组件和基本样式相比,大都是细节修饰性的,使用背景、边框、圆角、分隔线、组合、图标、颜色、大小、阴影进行更精细的修饰,以符合各种情形,丰富了表现能力,让页面从简单的布局过渡到有设计感,让用户能更友好的观感去使用界面。
运用这些组件进行组合,使用页面具有一定级别的艺术性,标准性,而且不用过多的使用自定义样式,就可以获得一个脱离简陋、枯燥的页面,所以说在使用过程中,要善于使用组件,不要拘泥与基本样式的排版,而要选择合适的组件去表现页面内容,使用页面生动、严谨,脱离word文档的感觉。

一、下拉菜单

下拉菜单的基本结构为 .dropdown>([data-toggle="dropdown"]+.dropdown-menu)
也是一个容器,嵌套一个触发器和一个列表。

  • 容器 .dropdown 仅仅是定义一个相对定位,保证菜单弹出位置的正确性,其命名起到一个可读性,可以用其它有相对定位的元素代替。

  • 触发器 ([data-toggle="dropdown"] 由一个属性指定,一般会加上 .dropdown-toggle 类来左浮动,元素大都使用 .btn
    使用 button.btn.btn-default 得到一个有边框的按钮式触发器,使用 span.btn 或者 a.btn 或者 .btn.btn-link 得到一个简单文本的触发器。

  • 菜单使用 .dropdown-menu 类来添加绝对定位、阴影、最小宽度的修饰,一般使用

      元素来保持内边距。

    • 右侧小箭头在基本样式中定义过,使用一个 标签。

      下拉菜单

    • 可以使用图标组件对菜单项进行修饰,因为左边距过大,可以自定义一个样式进行左移。

        .dropdown-menu .glyphicon{
          left: -5px;
        }
    

    二、菜单项修饰

    标准的菜单项是由 li>a 构成,bootstrap 提供了标题、分隔线、禁用这几个更细致的修饰。

    备注
    .dropdown 类不是必须的,可以被 .dropupbtn-group 等类似的容器类代替,只要实现相对定位即可,.dropdown 仅仅是可读性的加强。

    三、按钮组

    所谓按钮组,就是把多个按钮水平或者垂直排列,整个组合形成一个整体,可以有整体的圆角,类似分割的胶囊形外观。
    按钮组由 .btn-group>.btn*n 构成
    多个按钮组可以组合成一个工具栏 .btn-toolbar, 形成多个胶囊组排列的样式。
    大多数时候,按钮组是和下拉菜单配合形成一个功能强大的工具栏或者按钮组。

    按钮组
        
    • 按钮组.btn-group是相对定位的内联块,并控制中间按钮的取消圆角。
    • 工具栏 .btn-toolbar 抵消按钮组有可能的5px内补,其它只起到一个结构化整体的作用。
    • 按钮的大小.btn-group-lg,.btn-group-sm,.btn-group-xs可以直接一次性添加到按钮组上,调节整个按钮组的大小。
    • 垂直按钮组 .btn-group-vertical 内联块,取代.btn-group,它会定义内部按钮左浮动,块级化,形成了垂直排列样式。
      分列式按钮下拉菜单(右侧带单独下拉小按钮的)不支持这种方式
      垂直按钮组

    四、按钮组与下拉菜单组合

    • 把下拉菜单添加到按钮上很简单,只要把原来的按钮位置添加一个按钮组,做为下拉菜单的容器,然后原来的按钮移动到下拉菜单的触发器就可以了,结构为 .btn-group>(.btn+.dropdown-menu)
    image.png
       
    
    image.png
    • 分裂式按钮下拉菜单, 也就是按钮右侧添加一个小按钮,两个按钮组成一组,只有小按钮是菜单的触发器。实现很简单,就是在触发器上再添加一个按钮,把原来按钮的文本移到前面按钮就可以。
      注意分裂式按钮组不支持两端对齐与垂直排列!
         
    
    image.png

    五、输入框组

    在输入框前后添加 span.input-group-addon, 构成类似按钮组的胶囊外观,前后可以添加文本、图标。

    • 容器使用 div.input-group,插入内容使用span.input-group-addon
    • 可以添加按钮,此时插入块要修改为 span.input-group-btn,而且按钮好象会比输入框矮1px, 自行手动修复。可以添加多个按钮在div.input-group-btn块中。
        .input-group-btn .btn{
          padding-bottom: 7px;
        }
    
    • 也可以添加下拉菜单或者分裂式按钮下拉菜单,和添加按钮一样处理即可。


      image.png
    • 可以在组上添加尺寸类 .input-group-lg, .input-group-sm
    • 插入元素可以为单选或者复选框。
    注意事项
    1、不支持