<!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. git 忽略 Pycharm 中的 workspace.xml 文件

    .gitignore 中要写上 workspace.xml 如果已经不幸之前commit workspace.xml 的话,必须执行以下命令 $ git rm --cached .idea/works ...

  2. Codevs 1018 单词接龙

    1018 单词接龙 2000年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描 ...

  3. 洛谷P3321 [SDOI2015]序列统计（NTT）

    传送门 题意:$a_i\in S$,求$\prod_{i=1}^na_i\equiv x\pmod{m}$的方案数 这题目太珂怕了……数学渣渣有点害怕……kelin大佬TQL 设$f[i][j]$表示 ...

  4. git上如何删除已有项目

    删除fork别人的项目 由于最近想删除fork别人项目,步骤如下. 点击进入需要删除fork的项目 进入Settings选项 找到delete this repository按钮 确认是否要删除,Pl ...

  5. cdq(2018.10.18)

    一句话题意:给你三个数列{a_i},{b_i},{c_i},保证每个数列都恰好是一个排列.你需要求出满足\(a_i<a_j,b_i<b_j,c_i<c_j\)的有序对\((i,j)\ ...

  6. 洛谷 P1169||bzoj1057 [ZJOI2007]棋盘制作

    洛谷P1169 bzoj1057 这个题目跟最大全0子矩阵是类似的.正方形的话,只要把任意极大子正方形(”极大“定义见后面的”论文“)当成把某个极大子矩形去掉一块变成正方形即可,容易解决. 解法1:看 ...

  7. mac下启动lnmp的方式

    mac air 系列由于各种原因使得我不得不重启,重启后发现lnmp全部都关闭了, nginx: sudo nginx   php-fpm: sudo php-fpm mysql: cd /usr/l ...

  8. [译]Understanding ECMAScript6 对象

    对象 ECMAScript6将大量精力聚焦在提升对象的实用性性上.聚焦的意义在于JavaScript中几乎每一个值是由对象中的某种类型表示.此外,在一个普通的JavaScript程序中使用对象的数量持 ...

  9. elasticsearch的模糊查询

    https://blog.csdn.net/a772304419/article/details/78951561

  10. 详细说明phpmyadmin连接，管理多个mysql服务器

    用phpmyadimn来连接管理多个数据库要修改配置文件,挺不爽的,并且连接远程数据库,速度不行.可以使用其他数据库管理工具,请参考,navicat 结合快捷键 非常好用,开源,好用mysql 管理工 ...