图片图标类下拉菜单按钮按钮组

Posted 2021-03-17 zuiaimiusi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片图标类下拉菜单按钮按钮组相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style type="text/css">
</style>
<body>
<!--按钮-->
<div class="container">
    <button type="button" class="btn btn-success">success</button>
    <button type="button" class="btn btn-block">block</button>
    <button type="button" class="btn btn-danger">danger</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-primary">primary</button>
    <button type="button" class="btn btn-link">link</button>
    <button type="button" class="btn btn-warning">warning</button>
</div>
<div class="container">
   <button type="button" class="btn btn-info btn-lg">info</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-info btn-sm">info</button>
    <button type="button" class="btn btn-info btn-xs">info</button>
</div>
<!--激活 禁用-->
<a href="#" class="btn btn-default btn-lg active" disabled="disable">default</a>
<!--图片 圆形 圆角 带边框-->
<img src="1.png" alt="" class="img-circle">
<img src="1.png" alt="" class="img-rounded">
<img src="1.png" alt="" class="img-thumbnail">


<!--
图标类基于span标签 不能与其他组件同用
-->
<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>



<!--下拉菜单-->
<div class="container">
    <!--pull-right 按钮向右边靠-->
    <div class="dropdown pull-right">
        <button class="btn btn-success dropdown-toggle"
        type="button" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <!--添加一个标题-->
            <li role="presentation" class="dropdown-header">###</li>
           <li><a href="#" role="menuitem">联系方式</a></li>
            <li><a href="#" role="menuitem">关于</a></li>
            <!--添加分割线-->
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">***</li>
            <li><a href="#" role="menuitem">1</a></li>
            <li class="disabled"><a href="#" role="menuitem">2</a></li>
        </ul>
    </div>
</div>



<!--按钮组-->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

<div class="btn-toolbar">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    </div>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    </div>
</div>

<!--按钮组加下拉菜单
默认水平 垂直btn-group-vertical
-->
<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>

    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle"
                data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>
    </div>
</div>
<!--3个按钮充满整个屏幕-->
<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>
</body>
</html>
以上是关于图片图标类下拉菜单按钮按钮组的主要内容，如果未能解决你的问题，请参考以下文章