小图标组件

最新推荐文章于 2024-05-20 15:15:14 发布

不要叫我小俊俊

最新推荐文章于 2024-05-20 15:15:14 发布

阅读量528

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/q812258983/article/details/78769221

版权

bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小图标组件 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>