<!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. lightoj刷题日记

    提高自己的实力, 也为了证明, 开始板刷lightoj,每天题量>=1: 题目的类型会在这边说明,具体见分页博客: SUM=54; 1000 Greetings from LightOJ [简单 ...

  2. c#实现优先级队列

    http://www.baidu.com/s?wd=c%23%E4%BC%98%E5%85%88%E7%BA%A7%E9%98%9F%E5%88%97&ie=utf-8&f=8& ...

  3. C\C++书籍

    原文链接: bert hubert   翻译: 伯乐在线- 周昌鸿译文链接: http://blog.jobbole.com/61308/ 人们常常问我有什么C++和编程的书籍推荐,也许是因为我在Po ...

  4. P3270 [JLOI2016]成绩比较（拉格朗日插值）

    传送门 挺神仙的啊-- 设\(f[i][j]\)为考虑前\(i\)门课程,有\(j\)个人被\(B\)爷碾压的方案数,那么转移为\[f[i][j]=\sum_{k=j}^{n-1}f[i-1][k]\ ...

  5. android okhttp和webview session共享

    public static OkHttpClient get(Context context){ OkHttpClient.Builder builder = new OkHttpClient.Bui ...

  6. saltstack_API接口

    1 介绍 saltstack部署完后,要和master交互,就需要使用/usr/bin/salt这个工具.but..我不想手动到salt服务器上去执行这个命令,而是让web工具来调用salt. sal ...

  7. python之序列化json模块与pickle模块(待补充)

    一.json是所有语言都通用的一种序列化格式 只支持 : 列表,字典字符串,数字,且字典的key必须是字符串 ''' 1. dumps , loads 在内存中做数据转换: dumps : 数据类型 ...

  8. 改变滚动条的原始样式： chrome 可以改变， IE只能变相关颜色，firfox好像也不好改。最好是自己写一个或是用插件

    相关作者链接地址: https://www.lyblog.net/detail/314.html 问题: 1.我在项目中遇到的问题: 在设置了::-webkit-scrollbar 后,滚动条不见了! ...

  9. [转]AngularJS：何时应该使用Directive、Controller、Service？

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directi ...

  10. SpringBoot整合国际化I18n

    本文主要实现的功能: 从文件夹中直接加载多个国际化文件 后台设置前端页面显示国际化信息的文件 实现 国际化项目初始化,简单看下项目的目录和文件 在resource下创建国际化文件 messages.p ...