bootstrap-按钮组

WEB前端 waitig 367℃ 百度已收录 0评论
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮组</title>
    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
    <script src="../JS/jquery-3.2.1.min.js"></script>
    <script src="../JS/bootstrap.js"></script>

</head>
<body style="height: 2000px;">
    <div class="container"><!-- 容器 -->

        <br><br>
        <input type="button" value="按钮1" class="btn btn-primary">
        <input type="button" value="按钮2" class="btn btn-primary">
        <input type="button" value="按钮3" class="btn btn-primary">

        <br><br>
        <div class="btn-group">
            <input type="button" value="按钮1" class="btn btn-primary">
            <input type="button" value="按钮2" class="btn btn-primary">
            <input type="button" value="按钮3" class="btn btn-primary">
        </div>

        <br><br>
        <div class="btn-group btn-group-justified">
            <a href="#" class="btn btn-primary">按钮</a>
            <a href="#" class="btn btn-primary">按钮</a>
            <a href="#" class="btn btn-primary">按钮</a>
        </div>

        <br><br>
        <div class="btn-group btn-group-justified">
            <input type="button" value="按钮1" class="btn btn-primary">
            <input type="button" value="按钮2" class="btn btn-primary">
            <input type="button" value="按钮3" class="btn btn-primary">
        </div>

        <br><br>
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <input type="button" value="按钮1" class="btn btn-primary">
            </div>
            <div class="btn-group">
                <input type="button" value="按钮1" class="btn btn-primary">
            </div>
            <div class="btn-group">
                <input type="button" value="按钮1" class="btn btn-primary">
            </div>
        </div>

        <br><br>
        <div class="btn-group btn-group-vertical">
            <input type="button" value="按钮1" class="btn btn-primary">
            <input type="button" value="按钮2" class="btn btn-primary">
            <input type="button" value="按钮3" class="btn btn-primary">
        </div>

        <br><br>
        <div class="btn-group btn-group-vertical btn-group-lg ">
            <input type="button" value="按钮1" class="btn btn-primary">
            <input type="button" value="按钮2" class="btn btn-primary">
            <input type="button" value="按钮3" class="btn btn-primary">
        </div>


        <!-- 下拉列表 -->
        <br><br>
        <a href="#" class="btn btn-primary">按钮<span class="caret"></span> </a>
        <button class="btn btn-primary">按钮<span class="caret"></span></button>
        <input type="button" value="按钮1" class="btn btn-primary"><span class="caret"></span>

        <br><br>
        <div class="btn-group"><!-- a 和 button 可以做成相同的按钮 -->
            <a href="#" class="btn btn-primary">按钮a</a>
            <a href="#" class="btn btn-primary"><span class="caret"></span></a>
            <br><br>
            <button class="btn btn-primary">按钮button</button>
            <button class="btn btn-primary"><span class="caret"></span></button>
        </div>

        <br><br>
        <div class="btn-group dropup">
            <a href="#" class="btn btn-primary">按钮a</a>
            <a href="#" class="btn btn-primary"><span class="caret"></span></a>
            <br><br>
            <button class="btn btn-primary">按钮button</button>
            <button class="btn btn-primary"><span class="caret"></span></button>
        </div>

        <br><br>
        <div class="github-style">
            <div class="btn-group btn-group-lg">
                <button class="btn btn-default active"><div class="glyphicon glyphicon-euro" ></div>Watch<span class="caret"></span></button>
                <button class="btn btn-default">3,064</button>
            </div>
            <div class="btn-group btn-group-lg">
                <button class="btn btn-default "><div class="glyphicon glyphicon-euro" ></div>Star<span class="caret"></span></button>
                <button class="btn btn-default">36,064</button>
            </div>
            <div class="btn-group btn-group-lg">
                <button class="btn btn-default active"><div class="glyphicon glyphicon-euro" ></div>fork<span class="caret"></span></button>
                <button class="btn btn-default">3,064</button>
            </div>
        </div>
    </div>
</body>
</html>
<!-- 
按钮组
btn-group(默认) :按钮按原来的大小连接在一起

btn-group-justified(按钮比例):按钮连接在一起,自适应容器的大小,按均分配大小,但只有对a标签可以自动做到,对于input 和 button 标签必须要在它们的每个外面加上父级且class="btn-group",如上面所示

btn-vertical (按钮方向):将横向的样式改为纵向的样式

btn-group-[lg sm xs]:按钮大小

class="btn-group"
class="btn-group btn-group-justified"
class="btn-group-vertical" 一般不再加btn-group否则四个角的样式不同


箭头:
向下:class="caret":<span class="caret"></span>
当按钮和图标组合使用时 ,应该尽量使用a 和 button ,因为input中的内容是通过value添加的,而不是inhtml ,所以添加的图标会出现在按钮的外部

向上:没有单独的class设置向上的箭头,但在父级的class中设置dropup  同时向下dropdown

-->

本文由【waitig】发表在等英博客
本文固定链接:bootstrap-按钮组
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)