<!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 实例的更多相关文章

  1. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  4. Bootstrap历练实例：简单的可折叠

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Bootstrap 历练实例 - 按钮（Button）插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

  6. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  7. Bootstrap历练实例：弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  8. Bootstrap历练实例：popover插件中的方法

    方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...

  9. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

随机推荐

  1. javascript基础教程学习总结(1)

    摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...

  2. iOS开发——判断邮箱格式

    //判断邮箱格式 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-]+@ ...

  3. backup-mysql.sh

    #!/bin/bash#auto backup mariadb#xuegod 2015-12-30#Define PATH 定义变量date=`date +%Y-%m-%d`BAKDIR=" ...

  4. sqlite3API函数

    回顾: DDL 表的创建.修改.删除 create table 表名(字段名 字段类型 [约束],...); alter table 表名 {rename to 新名字 | add column 字段 ...

  5. [原]崩溃在ole32!CStdMarshal::DisconnectSrvIPIDs

    最近项目里遇到一个崩溃,不定期出现,很是头疼!今晚终于忍无可忍,下决心要干掉它!(于是用凉水洗了把脸,开始分析dump)希望凌晨的这篇总结对有相似经历的朋友有所启发!(看之前相关的几个dump可以猜到 ...

  6. 开始Java学习（Java之负基础实战）

    开发平台: JavaSE:java标准平台,一般用于桌面程序开发 JavaEE:开发web(如网站+Sping) JavaME:开发移动应用 开发环境: JVM:跨平台核心. JRE:java运行时, ...

  7. Eclipse常见操作

    Eclipse打开Package Explorer Window > Show View > Other Java > Package Explorer 然后可以将其拖拽到Eclip ...

  8. spring异常处理

    http://cgs1999.iteye.com/blog/1547197 1 描述 在J2EE项目的开发中,不管是对底层的数据库操作过程,还是业务层的处理过程,还是控制层的处理过程,都不可避免会遇到 ...

  9. Angular - - angular.element

    angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素. 格式:angular.element(element); element:包装成jquery对象的html ...

  10. Windows与Linux文件系统互访的几种方法

    首先,我们知道基于文件的几种服务:ftp,sftp,这两种服务都是文件传输服务,偏重于网络传输,并不是实时互访.通常,我们需要在远程和本地 同时操作同一个目录,如:在Windows下使用各种强大的ID ...