吴裕雄 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> ...
随机推荐
- 【SSM 】导出excel含图片
ExprotRentUtils package com.kikyo.stat.utils; import java.awt.image.BufferedImage; import java.io.By ...
- YUM方式安装LAMP
本文介绍两种方法yum安装LAMP, 方法1: 通过httpd的php模块方式安装LAMP 方法2: 通过php-fpm方式安装LAMP 安装环境:CentOS Linux release 7.5.1 ...
- windows与linux的文件路径
在windows操作系统中,文件路径的分隔符是反斜杠(“\\”),例如: E:\\hsta\\pdf(这里为防止转义,所以要写成两个反斜杠) 但是在linux操作系统中,文件的分隔符是斜杠(“/”), ...
- Redis Set操作
public void CleanPur() { var typedClient = _redisClient.As<PurClass>(); typedClient.DeleteAll( ...
- 【已解决】iOS11使用MJRefresh上拉加载结束tableView闪动、跳动的问题
更新提示: [2018年11月20日更新] 经过放置在项目中运行发现,如果在快速滚动tableview的时候会在下面这行代码中崩溃(慢慢的滚动是没关系的-): CGFloat cellHeight = ...
- el-select 选项值动态更新的问题
如果 类似 el-select 等表单元素绑定了 类似 a.b 之类的属性,而不是直接的一级属性的话,当这个属性发生更改的时候,它的显示效果可能不会动态地进行更新,这个时候需要使用 Vue.$se ...
- python学习记录（持续更新）--最最最基础的一部分（方法，异常处理，注释，类）
写在前面 本系列教程针对有一定编程经验的伙伴快速入门python基础,一些涉及开发的常识问题,本文并不涉及. 方法 function def greet_user(name): print(f'Hi ...
- c数据结构链式存储-静态链表
#include "string.h" #include "ctype.h" #include "stdio.h" #include &qu ...
- webservice之实现天气预报
前通过传智的视频自学了webservice的基本使用,也了解到webservice就是一种跨编程语言和跨操作系统平台的远程调用技术. 对于这些理论知识在这里也不再做过多的解释,本次主要就是记录与分享使 ...
- 「Luogu P1383 高级打字机」
一道非常基础的可持久化数据结构题. 前置芝士 可持久化线段树:实现的方法主要是主席树. 具体做法 这个基本就是一个模板题了,记录一下每一个版本的字符串的长度,在修改的时候就只要在上一个版本后面加上一个 ...