<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 按钮（Button）插件单选按钮</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

  <h2>按钮组</h2>

  <p>.btn-group 类用于创建按钮组：</p>

  <div class="btn-group">

    <button type="button" class="btn btn-primary">Apple</button>

    <button type="button" class="btn btn-primary">Samsung</button>

    <button type="button" class="btn btn-primary">Sony</button>

  </div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 按钮组</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container">

            <h2>Button 按钮组 - 设置按钮大小</h2>

            <p>通过 .btn-group-* 类来控制按钮组中使用按钮的大小。</p>

            <h3>大按钮:</h3>

            <div class="btn-group btn-group-lg">

                <button type="button" class="btn btn-primary">Apple</button>

                <button type="button" class="btn btn-primary">Samsung</button>

                <button type="button" class="btn btn-primary">Sony</button>

            </div>

            <h3>默认大小按钮:</h3>

            <div class="btn-group">

                <button type="button" class="btn btn-primary">Apple</button>

                <button type="button" class="btn btn-primary">Samsung</button>

                <button type="button" class="btn btn-primary">Sony</button>

            </div>

            <h3>小按钮:</h3>

            <div class="btn-group btn-group-sm">

                <button type="button" class="btn btn-primary">Apple</button>

                <button type="button" class="btn btn-primary">Samsung</button>

                <button type="button" class="btn btn-primary">Sony</button>

            </div>

            <h3>超级小按钮:</h3>

            <div class="btn-group btn-group-xs">

                <button type="button" class="btn btn-primary">Apple</button>

                <button type="button" class="btn btn-primary">Samsung</button>

                <button type="button" class="btn btn-primary">Sony</button>

            </div>

        </div>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 按钮</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container">

            <h2>垂直按钮组</h2>

            <p>如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：</p>

            <div class="btn-group-vertical">

                <button type="button" class="btn btn-primary">Apple</button>

                <button type="button" class="btn btn-primary">Samsung</button>

                <button type="button" class="btn btn-primary">Sony</button>

            </div>

        </div>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：激活状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮被点击

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：块级按钮(拉伸至父元素100%的宽度)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个超小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个大按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：表示一个危险动作的按钮操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. __str__()方法和__repr__()方法

    有时候我们想让屏幕打印的结果不是对象的内存地址,而是它的值或者其他可以自定义的东西,以便更直观地显示对象内容,可以通过在该对象的类中创建或修改__str__()或__repr__()方法来实现(显示对 ...

  2. jquery 分页 Ajax异步

    //使用Ajax异步查询数据 <div class="table-responsive"> <table class="table table-bord ...

  3. 【PAT甲级】1056 Mice and Rice (25 分)

    题意: 输入两个正整数N和M(<=1000),接着输入两行,每行N个数,第一行为每只老鼠的重量,第二行为每只老鼠出战的顺序.输出它们的名次.(按照出战顺序每M只老鼠分为一组,剩余不足M只为一组, ...

  4. Struts2高级(插件)笔记一

    插件 Struts-plugin.xml 说明: Struts-plugin.xml文件是在tomcat服务器启动的时候加载的 该配置文件在classpath的根目录下 在每一个含有plugin字母的 ...

  5. nginx 变量相关的map模块与split_clients模块及geo模块和geoip模块及keepalive介绍

    map 模块指令默认编译进nginx的 Syntax: map string $variable { ... } # 表示string匹配到{}里的值或变量赋值给$variable Default: ...

  6. C# Lambda排序

    1.按照多个字段进行排序:xxxList.OrderBy(c => c.RoadCode).ThenBy(c => c.Qdzh),表示先按照RoadCode字段进行排序再按照Qdzh字段 ...

  7. flex布局（非常重要）

    首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写.故其取值可以考虑以下情况: flex 的默认值是以上三个属性值的组合.假设以上三个属性同样取默认 ...

  8. 38 java 使用标签跳出多层嵌套循环

    public class Interview { public static void main(String[] args) { //使用带标签的break跳出多层嵌套循环 Boolean flag ...

  9. redis 之redis持久化rdb与aof

    redis是内存型的数据库 重启服务器丢失数据 重启redis服务丢失数据 断电丢失数据 Redis是一种内存型数据库,一旦服务器进程退出,数据库的数据就会丢失,为了解决这个问题,Redis提供了两种 ...

  10. 嵊州普及Day6T3

    题意:n个点,对于q个询问,有t秒及一个矩形的范围.在此矩形内的数每秒加1,若等于c,则下一秒变为0. 思路:t可能很大,%c+1就可以了.然后一个一个加起来就可以了. 见代码: #include&l ...