编程 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 相关文章推荐

LazyForm jQuery plugin 定制您的CheckBox Radio和Select

Oct 24 Javascript

js 页面元素的几个用法总结

Nov 18 Javascript

浅析document.ready和window.onload的区别讲解

Dec 18 Javascript

javascript动态控制服务器控件实例

Sep 05 Javascript

jquery获取img的src值的简单实例

May 17 Javascript

浅谈JavaScript 中有关时间对象的方法

Aug 15 Javascript

jQuery.cookie.js使用方法及相关参数解释

Mar 06 Javascript

JS实现css hover操作的方法示例

Apr 07 Javascript

jQuery ajax请求struts action实现异步刷新

Apr 19 jQuery

详解Vue2 SSR 缓存 Api 数据

Nov 20 Javascript

vue视图不更新情况详解

May 16 Javascript

node 版本切换的实现

Feb 02 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 采集心得技巧

2009/05/15 PHP

Zend framework处理一个http请求的流程分析

2010/02/08 PHP

编译php 5.2.14+fpm+memcached(具体操作详解)

2013/06/18 PHP

php输出1000以内质数(素数)示例

2014/02/16 PHP

使用phpstorm和xdebug实现远程调试的方法

2015/12/29 PHP

获取当前网页document.url location.href区别总结

2008/05/10 Javascript

通过js来制作复选框的全选和不选效果

2014/05/22 Javascript

JS实现带缓冲效果打开、关闭、移动一个层的方法

2015/05/09 Javascript

jQuery.each使用详解

2015/07/07 Javascript

Javascript实现的SHA-256加密算法完整实例

2016/02/02 Javascript

JS图片等比例缩放方法完整示例

2016/08/03 Javascript

jQuery鼠标悬停内容动画切换效果

2017/04/27 jQuery

vue与bootstrap实现时间选择器的示例代码

2017/08/26 Javascript

Vue.js搭建移动端购物车界面

2020/06/28 Javascript

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

2018/11/09 Javascript

如何在VUE中使用vue-awesome-swiper

2021/01/04 Vue.js

[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan

2014/07/15 DOTA

[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路

2016/07/01 DOTA

[08:08]DOTA2-DPC中国联赛2月28日Recap集锦

2021/03/11 DOTA

Python构建XML树结构的方法示例

2017/06/30 Python

Python3导入CSV文件的实例(跟Python2有些许的不同)

2018/06/22 Python

三步实现Django Paginator分页的方法

2019/06/11 Python

python路径的写法及目录的获取方式

2019/12/26 Python

使用PyQt的QLabel组件实现选定目标框功能的方法示例

2020/05/19 Python

基于Python实现2种反转链表方法代码实例

2020/07/06 Python

Python实现七个基本算法的实例代码

2020/10/08 Python

python中四舍五入的正确打开方式

2021/01/18 Python

Html5画布_动力节点Java学院整理

2017/07/13 HTML / CSS

个人自我评价和职业目标

2014/01/24 职场文书

2014新年元旦活动策划方案

2014/02/18 职场文书

委托书范本

2014/04/02 职场文书

公司承诺书格式

2014/05/21 职场文书

酒店总经理岗位职责范本

2014/08/08 职场文书

幼儿园迎国庆65周年活动策划方案

2014/09/16 职场文书

办公室主任岗位职责范本

2015/03/31 职场文书

详解解Django 多对多表关系的三种创建方式

2021/08/23 Python