bootstrap-按钮组

来源：互联网发布：做淘宝客服基本规则编辑：程序博客网时间：2024/06/15 09:18
<!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-->
阅读全文
0 0