Bootstrap为我们提供了按钮组的样式,博主写了几个简单的例子，以后也许用的到。

效果如下

代码如下

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

    <script src="~/Scripts/jquery-2.1.4.min.js"></script>

    <link href="~/Content/bootstrap/NewFolder1/bootstrap.min.css" rel="stylesheet" />

    <script src="~/Scripts/bootstrap.min.js"></script>

</head>

<body>

    <div class="container">

        <div class="form-group">

            <span>普通横向按钮组</span>

            <div class="btn-group">

                <button type="button" class="btn btn-default">A</button>

                <button type="button" class="btn btn-default">B</button>

                <button type="button" class="btn btn-default">C</button>

            </div>

        </div>

        <div class="form-group">

            <span>普通竖直按钮组</span>

            <div class="btn-group-vertical">

                <button type="button" class="btn btn-default">A</button>

                <button type="button" class="btn btn-default">B</button>

                <button type="button" class="btn btn-default">C</button>

            </div>

        </div>

        <div class="form-group">

            <span>普通横向按钮组</span>

            <div class="btn-group btn-group-justified">

                <div class="btn-group">

                    <button type="button" class="btn btn-default">A</button>

                </div>

                <div class="btn-group">

                    <button type="button" class="btn btn-default">B</button>

                </div>

                <div class="btn-group">

                    <button type="button" class="btn btn-default">C</button>

                </div>

            </div>

        </div>

        <div class="form-group">

            <span>带有下拉列表按钮组</span>

            <div class="btn-group">

                <div class="btn-group">

                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">

                        下拉菜单

                    </button>

                    <ul class="dropdown-menu" role="menu">

                        <li><a href="#">C</a></li>

                        <li><a href="#">D</a></li>

                        <li><a href="#">E</a></li>

                    </ul>

                </div>

            </div>

        </div>

        <div class="form-group">

            <span>带有下拉列表按钮组</span>

            <div class="btn-group">

                <button type="button" class="btn btn-info btn-sm">

                    分裂式下拉列表

                </button>

                <button type="button" class="btn btn-info dropdown-toggle btn-sm" data-toggle="dropdown">

                    <span class="caret"></span>

                </button>

                <ul class="dropdown-menu" role="menu">

                    <li><a href="物流订单导出模板?id=1">导出.xls格式</a></li>

                    <li><a href="物流订单导出模板?id=2">导出.xlsx格式</a></li>

                    <li><a href="物流订单导出模板?id=3">导出.csv格式</a></li>

                </ul>

                </div>

            </div>

        </div>

</body>

</html>

Bootstrap学习------按钮的更多相关文章

  1. Bootstrap学习-菜单-按钮-导航

    1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...

  2. BootStrap学习（2）

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  3. Bootstrap 学习（1）

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  4. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  5. bootstrap学习笔记之三（组件的使用）

    bootstrap组件需要引入bootstrap.js才行,当然要引入bootstrap.js首先得引入JQuery. 一.下拉菜单 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另 ...

  6. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  7. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  8. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  9. bootstrap学习大纲

    bootstrap 学习分三部分,分别是 css样式,css组件,js插件. 下面介绍三部分分别要学习的内容: 1.css样式:栅格系统,排版,代码,表格,表单,按钮,图片,辅助类,响应式工具. 2. ...

随机推荐

  1. C++11 - 类型推导auto关键字

    在C++11中,auto关键字被作为类型自动类型推导关键字 (1)基本用法 C++98:类型 变量名 = 初值;   int i = 10; C++11:auto 变量名 = 初值;  auto i ...

  2. nodejs处理图片、CSS、JS链接

    接触Nodejs不深,看到页面上每一个链接都要写一个handler,像在页面显示图片,或者调用外部CSS.JS文件,每个链接都要写一个handler,觉得太麻烦,是否可以写个程序出来,能够自动识别图片 ...

  3. 如何读取Access里的OLE类型的图片

    身份证一类读卡器读取的照片信息,保存在Access数据库中一般为OLE型字段,图片为BMP格式,因为是用其读卡器写入的,其数据类型为常二进制数据. 再用报表或EXCEL读取这些图片时,如果将该图片字段 ...

  4. thinkphp发送邮件

    看thinkPHP手册发送邮件 Thinkphp3.2 PHPMailer 发送邮件结合QQ企业邮箱发送邮件下载附件PHPMailer解压到ThinkPHP\Library\VendorPHPMail ...

  5. 关于SSH的一些tricks

    改善SSH登录速度 登录慢的原因有很多, 慢的症状也很多, 有些是出login慢, 有些是出password慢, 有些是输入完password后进提示符慢, 根据 http://superuser.c ...

  6. button

  7. BZOJ 1857 传送带 (三分套三分)

    在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线段CD.lxhgww在AB上的移动速度为P,在CD上的移动速度为Q,在平面上的移动速度R.现在lxhgww想从 ...

  8. openstack上创建vm实例后，状态为ERROR问题解决

    问题说明:在openstack上创建虚拟机,之前已顺利创建了n个centos6.8镜像的vm现在用ubuntu14.04镜像创建vm,发现vm创建后的状态为ERROR! 1)终端命令行操作vm创建 [ ...

  9. Qt——一些工具的使用

    一.使用Qt需要安装哪些软件 如果不使用VS,那么只需Qt组件就行了,安装完成后使用QtCreator进行编程. 如果使用VS,则需要安装下面几个: 1.Visual Studio 2.Qt组件 3. ...

  10. 6款程序员不得不爱的bootstrap模板

    Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大 部分jQuery插件.Bootstrap中包含了丰富的 ...