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. OpenStack 通用设计思路 - 每天5分钟玩转 OpenStack（25）

    API 前端服务 每个 OpenStack 组件可能包含若干子服务,其中必定有一个 API 服务负责接收客户请求. 以 Nova 为例,nova-api 作为 Nova 组件对外的唯一窗口,向客户暴露 ...

  2. vmstat命令

    vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行深 ...

  3. 配置TortoiseSVN客户端, 强制签入前加注释

    正如上篇提到, 总有一些人在签入代码到SVN前没有加注释, 然后, 像这样: 鬼才知道改了什么东西. ①有些人可能就是没有写注释的习惯, ②有些人可能是忘记写注释 && SVN服务端和 ...

  4. Java基础知识笔记（一：修饰词、向量、哈希表）

    一.Java语言的特点(养成经常查看Java在线帮助文档的习惯) (1)简单性:Java语言是在C和C++计算机语言的基础上进行简化和改进的一种新型计算机语言.它去掉了C和C++最难正确应用的指针和最 ...

  5. Entity Framework 6 with MySql

        MySQL Connector/Net 6.8.x MySQL Server 5.1 or above Entity Framework 6 assemblies .NET Framework ...

  6. NopCommerce Alipay 支付插件

    NopCommerce Alipay 支付插件 1.查找及下载NopCommerce Alipay插件 http://www.nopcommerce.com/p/963/alipay-payment- ...

  7. Linux Kernel代码艺术——数组初始化

    前几天看内核中系统调用代码,在系统调用向量表初始化中,有下面这段代码写的让我有点摸不着头脑: const sys_call_ptr_t sys_call_table[__NR_syscall_max+ ...

  8. 【原】Learning Spark (Python版) 学习笔记(二)----键值对、数据读取与保存、共享特性

    本来应该上周更新的,结果碰上五一,懒癌发作,就推迟了 = =.以后还是要按时完成任务.废话不多说,第四章-第六章主要讲了三个内容:键值对.数据读取与保存与Spark的两个共享特性(累加器和广播变量). ...

  9. 延迟容忍网络(Delay-tolerant networking)

    标签: 网络networking存储工作network路由器 2012-03-24 10:01 3702人阅读 评论(0) 收藏 举报 分类: 计算机网络(12) 版权声明:本文为博主原创文章,对文章 ...

  10. Android开发之Touch事件分发机制

    原地址http://www.cnblogs.com/linjzong/p/4191891.html Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实 ...