<!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语言精粹》——第3章对象

    第三章:对象: 属性名字:可以是包括空字符串在内的任意字符串: 属性值:是除undefined值之外的任何值; [1].对象字面量: var obj={}; //空对象 var obj = new O ...

  2. iOS UICollectionView 长按移动cell

    ref:http://www.jianshu.com/p/31d07bf32d62 iOS 9之后: 示例如下 效果 前言: 看完你可以学到哪些呢? 就是文章标题那么多, 只有那么多. . 手残效果图 ...

  3. FUNCTION CALL STACK FRAME

    function call stack frame 两个寄存器 esp 栈顶指针寄存器,指向调用栈的栈顶(始终指向,意味着栈分配到哪里了,从当前栈往高地址是已经分配了的) ebp 基址指针寄存器,指向 ...

  4. 企业建站http://www.douco.com/

    http://www.douco.com/ 非常方便的,搭建简单的企业网站

  5. VMVare 桥接上网

    桥接模式设置小解: 第1步 虚拟机下fedora安装好后,打开VM虚拟机的菜单栏,单击编辑------虚拟网络编辑器,选择“主机虚拟网络 映射”标签,然后把VMnet0 手动选择为你本地的物理网卡(要 ...

  6. Struts2标签遍历List<Map<String,String>>

    <s:if test="resultList != null && resultList.size() > 0"> <s:iterator  ...

  7. [Angular Tutorial] 3-Components

    在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户 ...

  8. iOS 开源库介绍

    1. Github-iOS备忘 2. iOS 第三方开源库的吐槽和备忘 3. 移动开发的后台服务支持平台 4. iOS 开源库 之 AFNetWorking 2.x 5. iOS 之 二维码 ZXin ...

  9. IOS 动画的两种方式

    方式一: [UIView animateWithDuration:1 animations:^{ //动画的内容 CGRect frame = CGRectMake([UIParam widthScr ...

  10. centos服务器设置代理上网的方法

    这里以centos7.0为例,记录代理服务器设置过程: 1.全局的代理设置: vi /etc/profile 添加下面内容 http_proxy = http://username:password@ ...