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 ...
随机推荐
- webstorm安装express报错
.... Exit code: -1 解决方法: webstorm创建express 需要 预先安装express-generator npm install express-generator -g
- cpptoolstip界面提示库使用
很多时候写一些界面程序,需要实时的给用户提示,每次都弹出一个messagebox挺烦的,状态栏又怕人看不到,最后找了一个相关的类,显示效果不错,分享一下,效果如下 下载库下来之后对应八个文件 将八个文 ...
- BLE 安卓APP控制LED灯的实现（转）
源:BLE 安卓APP控制LED灯的实现 //注:参考AmoMcu源代码修改. 打开APP,检查蓝牙是否打开 BluetoothAdapter mBluetoothAdapter; final Blu ...
- 关于浏览器和HTTP协议
关于浏览器 浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示想要访问的网络资源.这里资源一般是指 HTML 文档,图片等其他的类型.资源的位置由用户使用 URL(统一资源标示符)指定. 而浏览 ...
- UVa 532 - Dungeon Master
题目大意:给一个三维迷宫,给出入口和出口,找出最短路径. 无权图上的单源最短路问题,使用BFS解决. #include <cstdio> #include <queue> #i ...
- ios framework 开发
ios framework 开发 之 参考 ios framework 开发 之 实战 iOS workspace 依次编译多个工程
- 二 APPIUM Android自动化 环境搭建
1.安装JAVA运行环境 2.安装Android开发环境 3.安装nodejs 下载地址:https://nodejs.org/en/ 下载完成之后双击安装. 4.安装APPIUM,App ...
- logback的日志配置文件
日志配置文件logback.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE con ...
- 使用XML文件定义菜单
Android提供了两种创建菜单的方式,一种是在Java代码中创建,一种使用XML资源文件定义.上面的实例都是在Java代码中创建菜单,在Java代码中创建菜单存在如下不足. 在Java代码中定义菜单 ...
- swift版 关于微信支付的那点事
今天心情那真是想要强奸吉娃娃的冲动 说白了就是不想做和工作沾边的任何事 但是也不能闲着啊 时间那么贵 之前就想把微信支付做一下 主要就是怕自己忘记了 今天难得有时间 就来简单的记录一下 旨 ...