zoukankan      html  css  js  c++  java
  • Bootstrapbutton组

    button组同意多个button被堆叠在同一行上。当你想要把button对齐在一起时,这就显得很实用。

    基本button组

    给div加上class .btn-group

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset = "utf-8">
        <title>demo</title>
        <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
            body{padding: 20px;}
        </style>
    </head>
    <body>
        <div class="btn-group">
            <button class="btn btn-primary">按钮1</button>
            <button class="btn btn-primary">按钮2</button>
            <button class="btn btn-primary">按钮3</button>
            <button class="btn btn-primary">按钮4</button>
            <button class="btn btn-=primary">按钮5</button>
        </div>
    </body>
    </html>


    button工具栏


    使用class .btn-toolbar和 .btn-group


    <body>
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-primary">按钮1</button>
                <button class="btn btn-primary">按钮2</button>
                <button class="btn btn-primary">按钮3</button>
                <button class="btn btn-primary">按钮4</button>
                <button class="btn btn-primary">按钮5</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary">按钮1</button>
                <button class="btn btn-primary">按钮2</button>
                <button class="btn btn-primary">按钮3</button>
                <button class="btn btn-primary">按钮4</button>
                <button class="btn btn-primary">按钮5</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary">按钮1</button>
                <button class="btn btn-primary">按钮2</button>
                <button class="btn btn-primary">按钮3</button>
                <button class="btn btn-primary">按钮4</button>
                <button class="btn btn-primary">按钮5</button>
            </div>
        </div>
    </body>


    能够看出每个button组之间都有一点空隙

    .btn-toolbar>.btn-group {
        margin-left: 5px;
    }

    调整button大小

    给btn-group 加上.btn-group-lg,.btn-group-sm。.btn-group-xs能够调整整个button组的button大小

    <body>
        <div class="btn-toolbar">        
            <div class="btn-group btn-group-lg">
                <button class="btn btn-primary">按钮1</button>
                <button class="btn btn-primary">按钮2</button>
                <button class="btn btn-primary">按钮3</button>
                <div class="btn-group btn-group-lg">
                    <button type="button" class="btn btn-default dropdown-toggle" 
                      data-toggle="dropdown">
                      下列
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a href="#">下拉链接 1</a></li>
                      <li><a href="#">下拉链接 2</a></li>
                    </ul>  
                </div>          
            </div>
        </div>
    </body>


    嵌套

    能够在一个button组内嵌套还有一个button组。即,在一个 .btn-group 内嵌套还有一个 .btn-group 

    当下拉菜单与一系列button组合使用

    时。就会用到这个。


    <body>
        <div class="btn-toolbar">        
            <div class="btn-group btn-group-lg">
                <button class="btn btn-primary">按钮1</button>
                <button class="btn btn-primary">按钮2</button>
                <button class="btn btn-primary">按钮3</button>            
                <button type="button" class="btn btn-default dropdown-toggle" 
                  data-toggle="dropdown">
                  下列
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">下拉链接 1</a></li>
                  <li><a href="#">下拉链接 2</a></li>
                </ul>  
            </div>
        </div>
    </body>

    感觉嵌套并没有什么作用,于是去掉btn-group,显示效果变成例如以下。


    审查元素。发现.dropdown-menu使用的是绝对定位,而.btn-group是相对定位,由于就不难理解为什么我们去掉嵌套的

    btn-group之后,效果变成了上图所看到的。


    垂直的button组

    使用.btn-group-vertical


    <body>
        <div class="btn-toolbar">
            <div class="btn-group btn-group-lg">
                <button class="btn btn-primary">按钮1</button>
                <button class="btn btn-primary">按钮2</button>
                <button class="btn btn-primary">按钮3</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary">按钮1</button>
                <button class="btn btn-primary">按钮2</button>
                <button class="btn btn-primary">按钮3</button>
            </div>
            <div class="btn-group btn-group-lg btn-group-vertical">
                <button class="btn btn-primary">按钮1</button>
                <button class="btn btn-primary">按钮2</button>
                <button class="btn btn-primary">按钮3</button>           
            </div>
        </div>
    </body>




  • 相关阅读:
    APP内跳转链接用INTENT,但是用系统浏览器,在内部还是要webview
    MNIST练习
    Trigger_word_detection_v1a
    Neural_machine_translation_with_attention_v4a
    Operations_on_word_vectors_v2a
    Improvise_a_Jazz_Solo_with_an_LSTM_Network_v3a-2
    Dinosaurus_Island_Character_level_language_model_final_v3b
    Building_a_Recurrent_Neural_Network_Step_by_Step_v3b
    Sequence model
    Face_Recognition_v3a
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/7050004.html
Copyright © 2011-2022 走看看