zoukankan      html  css  js  c++  java
  • bootstrap按钮组

       种类

         -a,   input ,   button

       块级

            btn-block

       按钮组

            btn-group

            btn-group-justified

            btn-group-vertical

         

            </div>
            <div class="btn-group">
                <button class="btn btn-primary">按钮2</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary">按钮3</button>
            </div>
        </div>
        <br><br>
        <div class="btn-group-vertical">
            <a href="#" class="btn btn-primary">按钮1</a>
            <a href="#" class="btn btn-primary">按钮2</a>
            <a href="#" class="btn btn-primary">按钮3</a>
        </div>
        <div class="btn-group-vertical btn-group-lg">
            <a href="#" class="btn btn-primary">按钮1</a>
            <a href="#" class="btn btn-primary">按钮2</a>
            <a href="#" class="btn btn-primary">按钮3</a>
        </div>
        <div class="btn-group-vertical btn-group-sm">
            <a href="#" class="btn btn-primary">按钮1</a>
            <a href="#" class="btn btn-primary">按钮2</a>
            <a href="#" class="btn btn-primary">按钮3</a>
        </div>
        <div class="btn-group-vertical btn-group-xs">
            <a href="#" class="btn btn-primary">按钮1</a>
            <a href="#" class="btn btn-primary">按钮2</a>
            <a href="#" class="btn btn-primary">按钮3</a>
        </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="按钮" class="btn btn-primary"><span class="caret"></span>
        <div class="btn-group">
               <a href="#" class="btn btn-primary">按钮</a>
            <a href="#" class="btn btn-primary"><span class="caret"></span></a>     
        </div>
        <div class="btn-group">
               <button class="btn btn-primary">按钮</button>
            <button class="btn btn-primary"><span class="caret"></span></button>     
        </div>
        <div class="btn-group dropup">
               <button class="btn btn-primary">按钮</button>
            <button class="btn btn-primary"><span class="caret"></span></button>     
        </div>
        <br><br>
        <div class="github-style">
            <div class="btn-group btn-group-sm">
                <button class="btn btn-default active"><span class="glyphicon glyphicon-eye-open"></span> Watch <span class="caret"></span></button>
                <button class="btn btn-default">3,064</button>
            </div>
            <div class="btn-group btn-group-sm">
                <button class="btn btn-default active"><span class="glyphicon glyphicon-star"></span> Unstar</button>
                <button class="btn btn-default">36,296</button>
            </div>
            <div class="btn-group btn-group-sm">
                <button class="btn btn-default active"><span class="glyphicon icon-fork"></span> fork</button>
                <button class="btn btn-default">9,258</button>
            </div>
        </div>
    </div>
    </body>
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
    </html>

       

  • 相关阅读:
    mysql主从复制搭建
    centos下安装mysql
    Elasticsearch5.1.1+ik分词器+HEAD插件安装小记
    cento下安装elasticsearch2.4.2小记
    plotly线上绘图和离线绘图的区别
    利用ZotFile对Zotero中的文献进行整理
    数据0-1标准化
    指针和引用的区别
    C++中使用sstream进行类型转换(数字字符串转数字、数字转数字字符串)
    C++ 中字符串查找、字符串截取、字符串替换
  • 原文地址:https://www.cnblogs.com/hack-ing/p/5962193.html
Copyright © 2011-2022 走看看