bootstrap学习笔记——07——图标菜单按钮组件

  • 小图标组件
    Bootstrap提供了免费的263个小图标,具体可以参考中文官网的组件链接:
    http://v3.bootcss.com/components/#glyphicons  。部分图标如下:
                                              部分图标
    bootstrap学习笔记——07——图标菜单按钮组件_第1张图片
    可以使用标签来配合使用,具体如下:
    //使用小图标
     
       
    //也可以结合按钮
       
     
     
     
  • 下拉菜单组件
    下拉菜单,就是点击一个元素或按钮,触发隐藏的列表显示出来。
    //基本格式
     
    按钮和菜单需要包裹在.dropdown的容器里,而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分,设置class="dropdown-menu"才能自动隐藏并添加固定样式。设置class="caret"表示箭头,可上可下。
        //设置向上触发


                 
                 
               

    注:如果想菜单默认是打开的加一个open  在外面的div中.
    不过需要注意的是,如果你点击按钮。没有展开下拉菜单,请看看你的js加载顺序是否正确
     

    data-toggle 然后看看是否有此属性。

       //菜单项居右对齐,默认值是dropdown-menu-left

你可能感兴趣的:(bootstrap)