吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组
<!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 按钮：按钮组的更多相关文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：激活状态
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮大小
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮被点击
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：块级按钮(拉伸至父元素100%的宽度)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个超小按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个小按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个大按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：表示一个危险动作的按钮操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Lora、zigbee比较
一 lora 主要频段:470MHz,亚洲其他地区主要是902-928MHz,欧洲主要是868MHz,美洲主要是915mHz lora优点: 通讯距离远(适合半径500m~2km,通信距离大于7000 ...
- 洛谷 P1241 括号序列（栈）
嗯... 题目链接:https://www.luogu.org/problem/P1241 首先这道题是栈的入门题的加强版, 不仅要你判断这个括号序列是否合法,还要你将这个序列补充完整... 一开始是 ...
- 【协作式原创】查漏补缺之Golang中mutex源码实现(预备知识)
预备知识 CAS机制 1. 是什么 参考附录3 CAS 是项乐观锁技术,当多个线程尝试使用 CAS 同时更新同一个变量时,只有其中一个线程能更新变量的值,而其它线程都失败,失败的线程并不会被挂起,而是 ...
- Unknown column '××' in 'where clause',出现这个问题,如何处理?
stmt.executeQuery("select * from user where username = " + name); 执行上述代码就会引发该错误. 原因是:拼凑sql ...
- notepad++常用命令
1>shift+tab减少缩进 2>tab键增加缩进 3>ctrol+d键复制多行 4>shift+alt+方向箭头,选中列 5>alt+c插入序列 6>ctrl+ ...
- 墨西哥萨卡特卡斯将举行GNOME GUADEC 2020 峰会
导读 GNOME基金会今天宣布了下两届GUADEC(GNOME用户和开发人员欧洲会议)活动的主办城市,这也将是GNOME桌面环境下一版本的代号. 随着GNOME 3.34 “Thessalonik”的 ...
- 学习不一样的vue实战(2): 项目分析
学习不一样的vue实战(2): 项目分析 首先 首发博客: 我的博客 项目源码: 源码(喜欢请star) 项目预览: 预览 上一章: <学习不一样的vue(1)实战:环境搭建> 我的Q群: ...
- SpringBoot之数据访问和事务-专题三
SpringBoot之数据访问和事务-专题三 四.数据访问 4.1.springboot整合使用JdbcTemplate 4.1.1 pom文件引入 <parent> <groupI ...
- Linux CentOS7 VMware LAMP架构Apache用户认证、域名跳转、Apache访问日志
一.Apache用户认证 vim /usr/local/apache2.4/conf/extra/httpd-vhosts.conf //把111.com那个虚拟主机编辑成如下内容 <Virtu ...
- IDEA导入项目后，导入artifacts 方法 以及 Spring的配置文件找不到的解决方法
我们一般选择 open 项目,如果没有artifacts 的添加选项,我们就要选择 import 项目. 如果没有artifacts ,项目下面会有错误提示,点击错误提示Fix,设置里面导入artif ...