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. gpuimage的各种滤镜简介

    #import"GLProgram.h" //Baseclasses #import"GPUImageOpenGLESContext.h" #import&qu ...

  2. EF 数据库连接字符串-集成安全性访问 SQL Server

    使用 Windows 集成安全性访问 SQL Server 如果您的应用程序运行在基于 Windows 的 Intranet 上,则也许可以将 Windows 集成身份验证用于数据库访问.集成安全性使 ...

  3. 报表开发工具Finereport移动端app js接口列表【全】

    应用报表工具Finereport的开发人员会发现其移动端app 同样也推出了很多js接口,那这些接口到底有多少,其移动端又有哪些地方支持调用js,这些接口具体又该如何调用呢.根据我平时的开发经验,给大 ...

  4. JSP 错题

      (选择一项) 8 A: B: C: D: 正确答案是 D 您回答的是 A 回答错误   试题分析:web容器处理JSP文件请求的三个阶段翻译阶段:这一个阶段,编写好的jsp文件首先被web容器中的 ...

  5. Oracle 中的伪列

    昨天做了一个Oracle PL/SQL 相关的测试,其中有一道这样的题目:   下列那些是Oracle的伪列(ACD)  A.ROWID   B.ROW_NUMBER()  C.LEVEL  D.RO ...

  6. SeaJS入门篇一 怎么使用query

    研究了2个多小时,终于搞定引入jq 1.写个html页面 <h1>ddddddddd</h1> <script src='/Scripts/dist/sea.js'> ...

  7. java并发编程学习: 阻塞队列 使用 及 实现原理

    队列(Queue)与栈(Stack)是数据结构中的二种常用结构,队列的特点是先进先出(First In First Out),而Stack是先进后出(First In Last Out),说得通俗点: ...

  8. jquery easyui 1.4.1 验证时tooltip 的位置调整

    现象是在表单中如果显示两列控件,右边的控件是combo,combobox 等右边有按钮的,宽度为100%时,验证不通过的tooltip 显示位置不准确如下图所示 打开 jquery.easyui-1. ...

  9. C#基础系列——多线程的常见用法详解

    前言:前面几节分别介绍了下C#基础技术中的反射.特性.泛型.序列化.扩展方法.Linq to Xml等,这篇跟着来介绍下C#的另一基础技术的使用.最近项目有点紧张,所以准备也不是特别充分.此篇就主要从 ...

  10. 面向对象和面向过程的jquery版选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...