编程 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 错误处理与调试经验总结

Aug 10 Javascript

IE8下String的Trim()方法失效的解决方法

Nov 08 Javascript

编程语言JavaScript简介

Oct 16 Javascript

jQuery Mobile框架中的表单组件基础使用教程

May 17 Javascript

自带气泡提示的vue校验插件（vue-verify-pop）

Apr 07 Javascript

ionic3+Angular4实现接口请求及本地json文件读取示例

Oct 11 Javascript

Vue 进入/离开动画效果

Dec 26 Javascript

vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

Oct 31 Javascript

原生JS实现的放大镜特效示例【测试可用】

Dec 08 Javascript

教你完全理解ReentrantLock重入锁

Jun 03 Javascript

vue安装遇到的5个报错及解决方法

Jun 12 Javascript

layui实现左侧菜单点击右侧内容区显示

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

Search Engine Friendly的URL设计

2006/10/09 PHP

通俗易懂的php防注入代码

2010/04/07 PHP

PHP中strtotime函数使用方法详解

2011/11/27 PHP

PHP框架Laravel插件Pagination实现自定义分页

2020/04/22 PHP

php关联数组与索引数组及其显示方法

2018/03/12 PHP

php面试中关于面向对象的相关问题

2019/02/13 PHP

Yii框架安装简明教程

2020/05/15 PHP

Jquery工作常用实例使用AJAX使网页进行异步更新

2011/07/26 Javascript

JS获取单击按钮单元格所在行的信息

2014/06/17 Javascript

高效利用Angular中内置服务$http、$location等

2016/03/22 Javascript

js中数组结合字符串实现查找(屏蔽广告判断url等)

2016/03/30 Javascript

最原始的jQuery注册验证方式

2016/10/11 Javascript

JS中关于事件处理函数名后面是否带括号的问题

2016/11/16 Javascript

js获取浏览器和屏幕的各种宽度高度

2017/02/22 Javascript

webpack HappyPack实战详解

2019/10/08 Javascript

JavaScript对象字面量和构造函数原理与用法详解

2020/04/18 Javascript

详解Howler.js Web音频播放终极解决方案

2020/08/23 Javascript

element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)

2020/12/02 Vue.js

python使用内存zipfile对象在内存中打包文件示例

2014/04/30 Python

python学习之面向对象【入门初级篇】

2017/01/21 Python

Python时间和字符串转换操作实例分析

2019/03/16 Python

pandas基于时间序列的固定时间间隔求均值的方法

2019/07/04 Python

DJANGO-URL反向解析REVERSE实例讲解

2019/10/25 Python

Python3监控疫情的完整代码

2020/02/20 Python

matplotlib.pyplot.plot()参数使用详解

2020/07/28 Python

Python自动登录QQ的实现示例

2020/08/28 Python

python中@contextmanager实例用法

2021/02/07 Python

css3.0新属性效果在ie下的解决方案

2010/05/10 HTML / CSS

投标授权委托书范文

2014/08/02 职场文书

放飞理想演讲稿

2014/09/09 职场文书

房屋租赁授权委托书范本

2014/09/20 职场文书

学校副校长四风对照检查材料整改措施

2014/09/25 职场文书

致运动员加油稿

2015/07/21 职场文书

2019年七夕情人节浪漫祝福语大全！

2019/08/08 职场文书

励志语录：你若不勇敢，谁替你坚强

2019/11/08 职场文书

仅用几行Python代码就能复制她的U盘文件?

2021/06/26 Python