首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap按钮组简单实现代码

Posted in Javascript onMarch 06, 2017

本文实例为大家分享了Bootstrap按钮组的具体代码，供大家参考，具体内容如下

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<!-- 按钮组 -->
<div class="btn-group">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr>

<!-- 按钮组,垂直 -->
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>

<!-- 按钮组嵌套下拉菜单 -->
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown<span class="caret"></span></button>

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >Action</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >Another action</a></li>

</ul>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<!-- 按钮组的组 -->
<div class="btn-toolbar" role="toolbar">

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>
<div class="btn-group">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<br/>

</div>

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

效果图：

Bootstrap按钮组简单实现代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap按钮组简单实现代码

- Author -

deepquiet

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
深入理解JavaScript系列（49）：Function模式（上篇）
Mar 04 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 #Javascript
Javascript中引用类型传递的知识点小结
Mar 06 #Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 #Javascript
js正则表达式验证表单【完整版】
Mar 06 #Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 #Javascript
js实现动态显示时间效果
Mar 06 #Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 #Javascript
百度地图(1) 继承(1) gRPC(3) promise(2) 封装(1) variables(1) 构造函数(1) 主从复制(1) transaction(1) PyAutoGUI(1)
You might like
php绘制一个矩形的方法
2015/01/24 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Python实现图片添加文字
2019/11/26 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
python开根号实例讲解
2020/08/30 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
美国汽车性能部件和赛车零件网站：Vivid Racing
2018/03/27 全球购物
优衣库台湾官网：UNIQLO台湾
2019/02/01 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
解除合同协议书
2014/04/17 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
公务员政审材料
2014/12/23 职场文书
聘任书范文大全
2015/09/21 职场文书