<!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. 鸽笼原理的运用HDU1205

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1205 题目解析:开始没看清题,WA了一发,以为只要最大的次大的差2就是NO,后来仔细看过之后才发现,, ...

  2. 关于JAVA中hashCode

    hash code 即散列码根据对象计算出的一个整型值,散列码是没有规律的. 如果两个对象相等(equal() 返回true),则hashCode一定相等,如果两个对象hashCode相等,则对象不一 ...

  3. MySQL的char和varchar

    一.VARCHAR与CHAR字符型数据的差异 在MySQL数据库中,用的最多的字符型数据类型就是Varchar和Char,这两种数据类型虽然都是用来存放字符型数据,但是无论从结构还是从数据的保存方式来 ...

  4. 怎么把自己电脑上开发的项目发布到自己电脑IIS上面？

    windowsxp中: 步骤: 1.新建一个文件夹,把项目发布到里面(发布的时候需要注意的是: ) 注意:发布方法要选择:文件系统 目标位置选择:你新建来发布的那个文件夹名称 2.在IIS中新建网站 ...

  5. FireBug 调试工具(推荐)

    Firebug是网页浏览器 Mozilla Firefox 下的一款开发类扩展,如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利. 安装如下: 下面是 ...

  6. IOS开发－UI学习－根据URL显示图片，下载图片的练习（button，textfield，image view，url，data）

    编写一个如下界面,实现: 1.在文本输入框中输入一个网址,然后点击显示图片,图片显示到UIImageView中. 2.点击下载,这张显示的图片被下载到手机的Documents文件夹下的Dowmload ...

  7. django QuerySet里那些常用又不常见的技巧

    QuerySet 像Entry.Objects.all(),这些操作返回的是一个QuerySet对象,这个对象比较特别,并不是执行Objects.all(),或者filter之后就会与数据库交互,具体 ...

  8. PHP加水印代码 支持文字和图片水印

    PHP加图片水印.文字水印类代码,PHP加水印类,支持文字图片水印的透明度设置.水印图片背景透明.自己写的一个类,因为自己开发的一套CMS中要用到,网上的总感觉用着不顺手,希望大家也喜欢这个类,后附有 ...

  9. add jars和add external jars有什么区别

    原文add jars和add external jars有什么区别?   add jars和add external jars有什么区别?   add external jars  = 增加工程外部的 ...

  10. swift button一些简单设置

    1,按钮的创建(1)按钮有下面四种类型: UIButtonType.ContactAdd:前面带“+”图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果 UIButtonType.DetailDiscl ...