编程 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 日期处理之时区问题

Oct 08 Javascript

JS记录用户登录次数实现代码

Jan 15 Javascript

JavaScript中的Math.atan2()方法使用详解

Jun 15 Javascript

jQuery地图map悬停显示省市代码分享

Aug 20 Javascript

javascript动画之磁性吸附效果篇

Dec 09 Javascript

vue-cli+webpack在生成的项目中使用bootstrap实例代码

May 26 Javascript

Vue.js中轻松解决v-for执行出错的三个方案

Jun 09 Javascript

使用Node.js实现简易MVC框架的方法

Aug 07 Javascript

node版本管理工具n包使用教程详解

Nov 09 Javascript

JS实现的杨辉三角【帕斯卡三角形】算法示例

Feb 26 Javascript

vue 实现element-ui中的加载中状态

Nov 11 Javascript

Promise静态四兄弟实现示例详解

Jul 07 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

You might like

PHP把小数转成整数3种方法

2014/06/30 PHP

PHP连接sftp并下载文件的方法教程

2018/08/26 PHP

php计数排序算法的实现代码(附四个实例代码)

2020/03/31 PHP

PHP 实现链式操作

2021/03/09 PHP

网页javascript精华代码集

2007/01/24 Javascript

JavaScript实现关键字高亮功能

2014/11/12 Javascript

javascript 事件处理示例分享

2014/12/31 Javascript

jQuery仿天猫实现超炫的加入购物车

2015/05/04 Javascript

简单实现js页面切换功能

2021/01/10 Javascript

H5用户注册表单页注册模态框!

2016/09/17 Javascript

jQuery实现标签页效果实战（4）

2017/02/08 Javascript

使用Math.max,Math.min获取数组中的最值实例

2017/04/25 Javascript

webpack项目轻松混用css module的方法

2018/06/12 Javascript

vue中引用swiper轮播插件的教程详解

2018/08/16 Javascript

React中使用UEditor百度富文本的方法

2018/08/22 Javascript

深入理解react-router 路由的实现原理

2018/09/26 Javascript

vue动态绑定class选中当前列表变色的方法示例

2018/12/19 Javascript

微信小程序移动拖拽视图-movable-view实例详解

2019/08/17 Javascript

关于layui时间回显问题的解决方法

2019/09/24 Javascript

vue打开子组件弹窗都刷新功能的实现

2020/09/21 Javascript

[01:39]（回顾）各路豪强针锋相对，几经鏖战四强产生

2014/07/01 DOTA

[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾

2016/06/28 DOTA

python threading模块操作多线程介绍

2015/04/08 Python

解决Django模板无法使用perms变量问题的方法

2017/09/10 Python

matplotlib自定义鼠标光标坐标格式的实现

2021/01/08 Python

html5.2 dialog简介详解

2018/02/27 HTML / CSS

捷克鲜花配送：Florea.cz

2018/10/29 全球购物

代办委托书怎样写

2014/04/08 职场文书

小学阳光体育活动总结

2014/07/05 职场文书

2014年监理工作总结范文

2014/11/17 职场文书

2014年人大工作总结

2014/12/10 职场文书

护士个人年度总结范文

2015/02/13 职场文书

2015年第十五个全民国防教育日宣传活动方案

2015/05/06 职场文书

Android Studio 计算器开发

2022/05/20 Java/Android

Linux中各个目录的作用与内容

2022/06/28 Servers

Oracle查看表空间使用率以及爆满解决方案详解

2022/07/23 Oracle