首页
所有分类
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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
浅谈Vuejs Prop基本用法
Aug 17 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 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
BOSE(2) ICF-2010(1) 音箱(1) 探测器(1) 原理(1) 单管机(1) 电路(15) 春雷3P7(1) 耳机(1) AM(1)
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
php SQL防注入代码集合
2008/04/25 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
php生成微信红包数组的方法
2019/09/05 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
深入理解js中this的用法
2016/05/28 Javascript
HTML页面定时跳转方法解析（2种任选）
2016/12/22 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
Python制作微信好友背景墙教程（附完整代码）
2019/07/17 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
英国时尚女装购物网站：Missguided
2018/08/23 全球购物
医院检讨书范文
2014/02/01 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
元宵晚会主持词
2014/03/25 职场文书
竞聘书怎么写，如何写？
2014/03/31 职场文书
银行求职信
2014/05/31 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
民间借贷被告代理词
2015/05/23 职场文书
Python实现对齐打印 format函数的用法
2022/04/28 Python