bootstrap - btn 实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.github-style .btn{ font-weight:700;}
.icon-fork{ background:url(img/fork.png) no-repeat; background-size:cover; width:12px; height:12px;}
</style>
</head> <body style="height:2000px;">
<div class="container">
<br>
<input type="button" value="按钮1" class="btn btn-primary">
<input type="button" value="按钮2" class="btn btn-primary">
<input type="button" value="按钮3" class="btn btn-primary">
<br><br>
<div class="btn-group">
<input type="button" value="按钮1" class="btn btn-primary">
<input type="button" value="按钮2" class="btn btn-primary">
<input type="button" value="按钮3" class="btn btn-primary">
</div>
<br><br>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<br><br>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="button" value="按钮1" class="btn btn-primary">
</div>
<div class="btn-group">
<input type="button" value="按钮2" class="btn btn-primary">
</div>
<div class="btn-group">
<input type="button" value="按钮3" class="btn btn-primary">
</div>
</div>
<br><br>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-primary">按钮1</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">按钮2</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">按钮3</button>
</div>
</div>
<br><br>
<div class="btn-group-vertical">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<div class="btn-group-vertical btn-group-lg">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<div class="btn-group-vertical btn-group-sm">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<div class="btn-group-vertical btn-group-xs">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<br><br>
<a href="#" class="btn btn-primary">按钮 <span class="caret"></span></a>
<button class="btn btn-primary">按钮 <span class="caret"></span></button>
<input type="button" value="按钮" class="btn btn-primary"><span class="caret"></span>
<div class="btn-group">
<a href="#" class="btn btn-primary">按钮</a>
<a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>
<div class="btn-group">
<button class="btn btn-primary">按钮</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
<div class="btn-group dropup">
<button class="btn btn-primary">按钮</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
<br><br>
<div class="github-style">
<div class="btn-group btn-group-sm">
<button class="btn btn-default active"><span class="glyphicon glyphicon-eye-open"></span> Watch <span class="caret"></span></button>
<button class="btn btn-default">3,064</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default active"><span class="glyphicon glyphicon-star"></span> Unstar</button>
<button class="btn btn-default">36,296</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default active"><span class="glyphicon icon-fork"></span> fork</button>
<button class="btn btn-default">9,258</button>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</html>
bootstrap - btn 实例的更多相关文章
- Bootstrap历练实例：轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：响应式导航(带有表单)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- Bootstrap历练实例：简单的可折叠
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap 历练实例 - 按钮（Button）插件复选框
复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...
- Bootstrap历练实例：按钮(Button)插件单个切换
单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...
- Bootstrap历练实例：弹出框(popover)事件
事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...
- Bootstrap历练实例：popover插件中的方法
方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...
- Bootstrap历练实例：模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
随机推荐
- N皇后问题——递归求解
比较简单,废话不说,上代码: public class NQueen { //比如:position[1]=3,表示第一行的第三列有一个皇后 private int [] position; //总的 ...
- BMP085气压传感器驱动
BMP085是新一代的小封装气压传感器,主要用于气压温度检测,在四轴飞行器上可以用作定高检测,该传感器属于IIC总线接口,依然沿用标准IIC驱动程序 使用该传感器需要注意的是我们不能直接读出转换好的二 ...
- Java的内存泄漏
内存泄漏是指,无用对象(不再使用的对象)持续占用内存或者无用对象的内存得不到及时释放,从而造成的内存浪费 就说是有一块内存你不需要再用了,但是呢你还保留着它的指针,那么这块内存就不会被回收 举个例子 ...
- js中的 substring和substr方法
原文: http://www.cnblogs.com/chinafine/archive/2009/02/26/1398771.html 1.substring 方法 定义和用法 substring ...
- 在 WindowMobile 上的模拟LED 显示屏插件（转）
源:在 WindowMobile 上的模拟LED 显示屏插件 我在给一个对话框上的控件查找翻看合适的图标时,无形中看到了一个LED显示屏的图标,这里所说的LED显示屏是指由很多LED灯密集排列组成的点 ...
- 概率dp初探
论文链接: http://wenku.baidu.com/link?url=vEcfxpqAvGRf6JL9IL2R6v8plBgPnaP3tKp5niOBmoajk0y4CcpwFzL4SkfGS ...
- java学习(三) java 中 mongodb的各种操作
一. 常用查询: 1. 查询一条数据:(多用于保存时判断db中是否已有当前数据,这里 is 精确匹配,模糊匹配 使用 regex...) public PageUrl getByUrl(String ...
- python unicode 转中文 遇到的问题 爬去网页中遇到编码的问题
How do convert unicode escape sequences to unicode characters in a python string 爬去网页中遇到编码的问题 Python ...
- UVa 10700 - Camel trading
题目大意:给一个不含括号.只有+和*运算的表达式,数字的范围在1到20之间,算出计算结果的可能最大值和最小值. 贪心,如果加法优先级比乘法高,那么得出的结果为最大值.(a+b)*c = a*c + b ...
- gec210 NAND BOOT与SD BOOT启动原理
CPU上电后,此时SP指针指向0x0000_0000,从这个地址取第一条指令.但此时:PLL没有启动,CPU工作频率为外部输入晶振频率,非常低(S5PV210中晶振在CPU旁边,两颗24MHz,一颗2 ...