<!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. <Natural Language Processing with Python>学习笔记一

    Spoken input (top left) is analyzed, words are recognized, sentences are parsed and interpreted in c ...

  2. PHP的Cookie、Session和跟Laravel相关的几点了解

    这两天通过对Cookie和Session的查找和了解,网上关于它们两个的基础知识点都是差不多的,也收藏了几篇不错的博客,同时自己做了些实验后,有了以下几点了解: 1.setcookie 这里有三个地方 ...

  3. ubuntu10.4的更新源因过期无法更新的解决方法

    转载自:http://blog.csdn.net/suquan629/article/details/52333769 ubuntu10.4到2016年早已停止了更新支持,ubuntu也不再维护了.官 ...

  4. FB面经 Prepare: All Palindromic Substrings

    Given a string, calculate how many substring is palindrome. Ignore non-char characters. Ignore case; ...

  5. UVa 10814 - Simplifying Fractions

    题目大意:给一个分数,对其进行化简.因为分子.分母最大为1030,所以用要用大数. import java.io.*; import java.util.*; import java.math.*; ...

  6. java 解析excel

    2014年2月25日 14:24:48 解析excel方法 //首先是jar包下载,请自行百度 //代码 package cn.wuwenfu.excel; import java.io.File; ...

  7. 使用jquery时一些小技巧的总结

    使用 each 遍历 var nodes = Ztree.getCheckedNodes(true); //获取所有勾选的节点 $.each(nodes,function(i,value){ aler ...

  8. 【转】 如何提高自己的acm个人能力

    2011-05-17 21:26 1429人阅读 评论(0) 收藏 举报 算法网络blog八卦游戏读书 转载自 简单de数字 最终编辑 fading_code by   zfy0701 本来以为HNU ...

  9. Atom 编辑器系列视频课程

    此课程为 Atom 编辑器系列课程,主要介绍了 Atom 的高效开发技巧以及必备插件. 课程列表 Atom编辑器系列课程 #1 - Atom简介 Atom编辑器系列课程 #2 - 设置简介 Atom编 ...

  10. HTTPS=HTTP + SSL / TLS

    以下的两个链接作为本次编辑的参考 https://www.bennythink.com/school-1.htmlhttps://www.bennythink.com/school-2.html 应一 ...