bootstrap入门【组件之按钮组，下拉菜单，嵌套】

来源：互联网发布：html5引导动画源码编辑：程序博客网时间：2024/04/30 17:28

btn-group-vertical 按钮组默认是水平排列的，运用vertical变成竖式排列

<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="#">点我</a></li>    <li><a href="#">点我</a></li></ul>       完整的下拉菜单：在button上加dropdown-toggle，为它设置类型是下拉的data-toggle="dropdown"，然后在ul表格上设置class="dropdown-menu"，角色是menu。  最后把它们嵌套在按钮组中。

btn-group-justified  使按钮充满整个屏幕，很好看。
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <!--<link href="bootstrap.min.css" rel="stylesheet">-->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"></head><body>    <p>按钮组</p>    <div class="container">        <div class="btn-group-vertical">            <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>    <p>按钮工具栏</p>    <div class="btn-group">        <button type="btn" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>        <button type="btn" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>        <button type="btn" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>    </div>    <p>按钮组和下拉菜单的嵌套</p>    <div class="btn-group">        <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="#">点我</a></li>                <li><a href="#">点我</a></li>            </ul>        </div>    </div>    <p>按钮组充满整个屏幕</p>    <div class="btn 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">center</button>        </div>        <div class="btn-group">            <button type="button" class="btn btn-default">right</button>        </div>    </div>    <script src="jquery-2.1.3.min.js"></script>    <script src="bootstrap.min.js"></script></body></html>

0 0