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. x01.Weiqi.7: 调整重绘

    GitHub 谁方便谁拍,谁重要拍谁.在这个砖头满天飞的时代,一个好的生态显得尤为重要.  红颜小头发,要的很简单. 也许成绝唱,只因鱼断肠. 姚贝福娃的离去,除感叹人生无常外,活着做点有意义的事情, ...

  2. java设计模式之策略模式

    策略模式 定义了算法家族,分别封装起来,让它们之间可以相互替换,此模式让算法的变化,不会影响到使用算法的客户(大话设计模式). 策略模式UML图   策略模式代码 古代的各种计谋都是一种策略,这次我们 ...

  3. ACM练手

    #include<iostream> #include<string.h> using namespace std; #define N 100 class stack { c ...

  4. 最小生成树 kruskal算法 codevs 1638 修复公路

    1638 修复公路  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description A地区在地震过后,连接所有村庄的公 ...

  5. zookeeper安装

    http://blog.itpub.net/27099995/viewspace-1394831/ http://blog.csdn.net/huwei2003/article/details/491 ...

  6. Struts2 contentType属性列表

    Struts2 contentType属性列表 博客分类: Struts 2   'ez' => 'application/andrew-inset', 'hqx' => 'applica ...

  7. signalr推送消息

    参考:Tutorial: Getting Started with SignalR 2 and MVC 5 环境:vs2013,webapi2,entity framework6.0 实现效果:当用户 ...

  8. 关于Repository、Autofac、DbContext简单例子

    运行环境:Visual Studio 2012  Mvc4 数据库备份:Sql Server 2008 r2 解决方案图片: 简单介绍:此示例供初学者了解基本的Repository模式,并结合依赖注入 ...

  9. docker-compose启动的tomcat无法远程连接jmx

    最近想学习下java GC优化,就用了一下VisualVM,在远程服务器启动了一个非docker的tomcat,很顺利的就连接了,但是用docker-compose启动的服务却 怎么也连不上,一定是d ...

  10. jquery插件treetable使用

    下载后treetable插件后只需要保留jquery.treetable.css样式文件,jquery.treetable.theme.default.css皮肤文件和jquery.treetable ...