<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：按钮组大小</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">按钮1</button>
<button type="button" class="btn btn-default">按钮2</button>
<button type="button" class="btn btn-default">按钮3</button>
</div>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">按钮4</button>
<button type="button" class="btn btn-default">按钮5</button>
<button type="button" class="btn btn-default">按钮6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">按钮7</button>
<button type="button" class="btn btn-default">按钮8</button>
<button type="button" class="btn btn-default">按钮9</button>

</div>
</div>

</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：按钮组大小的更多相关文章

  1. Bootstrap 历练实例 - 按钮（Button）插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

  2. Bootstrap历练实例：输入框组的大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. bootstrap历练实例：按钮作为输入框组前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap历练实例：垂直的按钮组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Bootstrap历练实例：基本按钮组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Bootstrap历练实例：基本按钮群组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  8. Bootstrap历练实例：向列表组添加内容

    向列表组添加自定义内容 我们可以向上面已添加链接的列表组添加任意的 HTML 内容.下面的实例演示了这点: <!DOCTYPE html><html><head>& ...

  9. Bootstrap历练实例：向列表组添加链接

    向列表组添加链接 通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html ...

随机推荐

  1. Codeforces 358D【DP】

    思路:  dp[i][0] 代表取的时候左边没有 dp[i][1] 代表取的时候右边没有 dp[i][2] 代表取的时候左右都没有 dp[i][3] 代表取的时候左右都有 然后自己转移吧= =. 注意 ...

  2. laravel MVC分布及数据库配置

    laravel MVC分布 M app\Http\Middleware V resources\views C app\Http\Controllers 数据库配置 目录   config\datab ...

  3. OPENGL_三角形带GL_TRIANGLE_STRIP详解

    使用三角形带原因:减少顶点传递,渲染时api向显卡传输数据量是瓶颈,用较好的传递方法传递一个三角形最少可以少于一个点. 点的顺序根据奇数,偶数不一样的原因:保持所有三角形法线在同一方向. 原文:htt ...

  4. Apollo应用相关JVM配置参数

    -Dapollo_profile=github,auth-Ddev_meta=http://localhost:8080/-Dserver.port=8070-Dspring.datasource.u ...

  5. unicode码表和标准下载 unicode官网

  6. ko.js循环绑定值问题(工作遇见)

    fewTags()这是一个数组,循环实现以上效果,箭头所指的不属于循环出来的值, 以前循环是绑定在<div class="file-tag-list">中造成编辑不能在 ...

  7. (转)MySql的常用的语句

    MySQL常用语句 一.连接MySQL 格式: mysql -h 主机地址 -u 用户名 -p 用户密码 1.例1:连接到本机上的MYSQL. 首先在打开DOS窗口,然后进入目录 mysql bin, ...

  8. Codeforces 371BB. Fox Dividing Cheese

    Two little greedy bears have found two pieces of cheese in the forest of weight a and b grams, corre ...

  9. gulp的入门

    http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/ http://www.ydcss.com/a ...

  10. Android Studio报错Unable to resolve dependency for ':app@release/compileClasspath':无法引用任何外部依赖的解决办法

    Android Studio 在引用外部依赖时,发现一直无法引用外部依赖.刚开始以为是墙的问题,尝试修改Gradle配置,未解决问题. 最终发现原来是在Android Sudio安装优化配置时,将Gr ...