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. linux下使用tar命令

    解压语法:tar [主选项+辅选项] 文件或者目录 使用该命令时,主选项是必须要有的,它告诉tar要做什么事情,辅选项是辅助使用的,可以选用. 主选项: c 创建新的档案文件.如果用户想备份一个目录或 ...

  2. android 学习JSON

    JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据 ...

  3. Service 广播 到Fragment

    //Fragment public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Sys ...

  4. 有关stm32的问题，程序里面的u8、u16这些是什么意思啊

    u8 是 unsigned charu16 是 unsigned shortu32 是 unsigned int

  5. UNIX文件的权限之“设置用户ID位”

    用stat函数可以获取一个文件的状态信息,原型是这样的: int stat(const char *path, struct stat *buf); 其中结构体stat的结构: struct stat ...

  6. jenkins,jmeter,ant报告模板

    http://www.cnblogs.com/yangxia-test/p/5283139.html

  7. LinkedIn的即时消息：在一台机器上支持几十万条长连接

    最近我们介绍了LinkedIn的即时通信,最后提到了分型指标和读回复.为了实现这些功能,我们需要有办法通过长连接来把数据从服务器端推送到手机或网页客户端,而不是许多当代应用所采取的标准的请求-响应模式 ...

  8. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  9. SharePoint 2013技巧分享系列 - 同步Exchange显示高清用户照片

    在“SharePoint 2013技巧分享系列 - Active Directory同步显示用户照片”文中介绍了如何同步Active Directory显示用户照片,但是同步完成后,用户照片尺寸和清晰 ...

  10. 新书《编写可测试的JavaScript代码 》出版，感谢支持

    本书介绍 JavaScript专业开发人员必须具备的一个技能是能够编写可测试的代码.不管是创建新应用程序,还是重写遗留代码,本书都将向你展示如何为客户端和服务器编写和维护可测试的JavaScript代 ...