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中的信号处理机制（二）

    首先谢谢 @小尧弟 这位朋友对我昨天夜里写的一篇<浅谈Linux中的信号处理机制(一)>的指正,之前的题目我用的“浅析”一词,给人一种要剖析内核的感觉.本人自知功力不够,尚且不能对着Lin ...

  2. Canvas绘图基础（一）

    简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...

  3. POJ 2955 Brackets --最大括号匹配，区间DP经典题

    题意:给一段左右小.中括号串,求出这一串中最多有多少匹配的括号. 解法:此问题具有最优子结构,dp[i][j]表示i~j中最多匹配的括号,显然如果i,j是匹配的,那么dp[i][j] = dp[i+1 ...

  4. BZOJ1878: [SDOI2009]HH的项链[树状数组 离线]

    1878: [SDOI2009]HH的项链 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 3486  Solved: 1738[Submit][Statu ...

  5. Java里的生产者-消费者模型(Producer and Consumer Pattern in Java)

    生产者-消费者模型是多线程问题里面的经典问题,也是面试的常见问题.有如下几个常见的实现方法: 1. wait()/notify() 2. lock & condition 3. Blockin ...

  6. [ASP.NET 5]终于解决：Unable to load DLL 'api-ms-win-core-localization-obsolete-l1-2-0.dll'

    11月12日,惊喜地发现SqlClient(System.Data.SqlClient.dll)跨平台了(对应的nuget包包是runtime.unix.System.Data.SqlClient), ...

  7. 备忘：用fiddler搭一个请求响应器

    最近工作中发现美国的服务器响应慢,影响工作效率.就在想办法.突然发现fiddler可以帮我解决这个问题.AutoResponder功能可以帮我们做到.在其中设置一些请求,比如:http://xxxx. ...

  8. Android Studio NDK编程-环境搭建及Hello!

    一,下载 安装android-ndk开发包 NDK各个版本链接二,新建项目NDKDemo,选择空Activity就可以:(注:Android studio 2.2,可通过SDK Tools 添加LLD ...

  9. java学习指南

    @Override public BaseResponse selectListPage(PageData page, Object obj) { BaseResponse response = ne ...

  10. cmd命令快速修改dns

    新建cmd文件,修改红色ip部分,以 ANSI 编码保存,双击运行即可快速修改dns配置 netsh interface ip set dns "本地连接" source=stat ...