小图标组件

来源：互联网发布：社会调查数据方法编辑：程序博客网时间：2024/06/06 20:11

小图标组件Bootstrap 提供了免费的 263 个小图标（数了n次）。部分图标可以使用或标签来配合使用，具体如下：使用小图标

<span class="glyphicon glyphicon-lock"></span><i class="glyphicon glyphicon-lock"></i>

也可以结合按钮

<button class="btn btn-primary btn-xs">    <span class="glyphicon glyphicon-lock"></span></button>

下拉菜单组件下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。基本格式

<div class="dropdown open">    <button class="btn btn-default" data-toggle="dropdown">                下拉菜单        <span class="caret"></span>    </button>    <ul class="dropdown-menu ">        <li class="dropdown-header">下拉标题</li>        <li><a href="#">首页</a></li>        <li class="divider">        <li><a href="#">资讯</a></li>        <li><a href="#">产品</a></li>        <li class="disabled"><a href="#">关于</a></li>    </ul></div>

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle=”dropdown”才能有效。对于菜单部分，设置 class=”dropdown-menu”才能自动隐藏并添加固定样式。设置 class=”caret”表示箭头，可上可下。设置向上触发

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

<div class="btn-group">    <button class="btn btn-default">左   </button>    <button class="btn btn-default">中   </button>    <button class="btn btn-default">右   </button></div>

将多个按钮组整合起来便于管理

<div class="btn-toolbar">            <div class="btn-group">            <button class="btn btn-default">左           </button>            <button class="btn btn-default">中           </button>            <button class="btn btn-default">右           </button>            </div>            <div class="btn-group">            <button class="btn btn-default">左           </button>            <button class="btn btn-default">中           </button>            <button class="btn btn-default">右           </button>            </div>            <div class="btn-group">            <button class="btn btn-default">左           </button>            <button class="btn btn-default">中           </button>            <button class="btn btn-default">右           </button>            </div></div>

嵌套一个分组，比如下拉菜单

<div class="btn-group">    <button class="btn btn-default">左   </button>    <button class="btn btn-default">中   </button>    <button class="btn btn-default">右   </button>    <div class="btn-group">        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">                    下拉菜单        <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li class="dropdown-header">下拉标题</li>            <li><a href="#">首页</a></li>            <li class="divider">            <li><a href="#">资讯</a></li>            <li><a href="#">产品</a></li>            <li class="disabled"><a href="#">           关于</a></li>        </ul>    </div></div>

设置按钮组垂直排列

<div class="btn-group-vertical"></div>
如果需要使用标签，则需要对每个按钮进行群组

<div class="btn-group-justified">    <div class="btn-group">        <button class="btn btn-default">左</button>    </div>    <div class="btn-group">        <button class="btn btn-default">左</button>    </div>    <div class="btn-group">        <button class="btn btn-default">左</button>    </div></div>

阅读全文

0 0