<!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-justified 类来设置自适应大小的按钮组。</p>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</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>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
</div> </body>
</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:自适应大小的按钮组的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:激活状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:禁用按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮被点击

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:块级按钮(拉伸至父元素100%的宽度)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:制作一个超小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:制作一个小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:制作一个大按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 【原】Django问题总结

    一:python manage.py makemigrations No changes detected 在修改了models.py后,有些用户会喜欢用python manage.py makemi ...

  2. 【原】Mysql最大连接数

    MySQL最大连接数的默认值是100, 这个数值对于并发连接很多的数据库的应用是远不够用的,当连接请求大于默认连接数后,就会出现无法连接数据库的错误,因此我们需要把它适当调大一些. 在使用MySQL数 ...

  3. 重装VisualSVN Server报错

    由于eclipse无法连接SVN服务器,尝试着重装SVN,安装到一半时,弹出如下图所示错误: 打开提示窗口输入services.msc,进入服务界面: 发现VisualSVN Server服务无法启动 ...

  4. JAVA 常用包

    JAVA是以包的形式进行语言结构组织的. 引入这些包的关键词就是 import 下面说说 JAVA常用包有下面的几个 1. java.lang 这个是默认引入的,也是一个最基础的包.其中lang不是中 ...

  5. 【JavaWeb】导入Excel并进行校验

    一.需要实现的目标 1.界面编写 2.导入表读取表名,进行校验,后台匹配(判断此表的名称是否能够模糊匹配上) 3.确定表存在,读取其中的数据,暂存 4.正则表达式数据校验(判断是否已存在,数据是否符合 ...

  6. OS(操作系统)结构

    1.整体式: 模块设计(独立的) 调用自由 用全局变量来通信 缺点:信息不安全,维护更新比较难 2.层次结构(典型的如TCP/IP协议): 所有的模块排成若干层,相邻的互相依赖调用 按调用次序来安排 ...

  7. SpringBoot集成Freemarker前端模板

    1.在pom.xml中引入freemarker的jar包 <dependency> <groupId>org.springframework.boot</groupId& ...

  8. tornado框架的简单实用

    一.安装模块 pip3 install tornado 二.简单的起服务的方法 import json, datetime from tornado.web import RequestHandler ...

  9. 区间树Splay——[NOI2005]维护数列

    无指针Splay超详细讲解 区间树这玩意真TM玄学. 学这东西你必须要拥有的 1.通过[模板]文艺平衡树(Splay),[模板]普通平衡树,GSS3 - Can you answer these qu ...

  10. PAT T1015 Letter-moving Gam

    双下标法找最长公共子序列(不能删除字符) #include<bits/stdc++.h> using namespace std; ; string s; string t; int ma ...