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

bootstrap入门【组件之按钮组,下拉菜单,嵌套】_第1张图片


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>






你可能感兴趣的:(bootstrap入门【组件之按钮组,下拉菜单,嵌套】)