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

很全的显示阴历（农历）日期的js代码

Jan 01 Javascript

利用js获取服务器时间的两个简单方法

Jan 08 Javascript

javascript中的delete使用详解

Apr 11 Javascript

js获取指定的cookie的具体实现

Feb 20 Javascript

提升PHP安全：8个必须修改的PHP默认配置

Nov 17 Javascript

react.js 翻页插件实例代码

Jan 19 Javascript

Node.js中的http请求客户端示例(request client)

May 04 Javascript

js如何找出字符串中的最长回文串

Jun 04 Javascript

React中嵌套组件与被嵌套组件的通信过程

Jul 11 Javascript

Vue项目服务器部署之子目录部署方法

May 12 Javascript

vue-cli3配置与跨域处理方法

Aug 17 Javascript

基于redis的小程序登录实现方法流程分析

May 25 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中switch与ifelse的效率区别及适用情况分析

2015/02/12 PHP

实例化php类时传参的方法分析

2020/06/05 PHP

getElementsByTagName vs selectNodes效率及兼容的selectNodes实现

2010/02/26 Javascript

js字符编码函数区别分析

2011/12/28 Javascript

Javascript中数组sort和reverse用法分析

2014/12/30 Javascript

Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)

2015/01/23 Javascript

jQuery检测滚动条是否到达底部

2015/12/15 Javascript

js无提示关闭浏览器窗口的两种方法分析

2016/11/06 Javascript

AngularJS路由切换实现方法分析

2017/03/17 Javascript

easyui combogrid实现本地模糊搜索过滤多列

2017/05/13 Javascript

JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值

2018/10/29 Javascript

JS栈stack类的实现与使用方法示例

2019/01/31 Javascript

react 组件传值的三种方法

2019/06/03 Javascript

js实现简易计算器小功能

2020/11/18 Javascript

Python找出list中最常出现元素的方法

2016/06/14 Python

Python中的错误和异常处理简单操作示例【try-except用法】

2017/07/25 Python

对python xlrd读取datetime类型数据的方法详解

2018/12/26 Python

5款Python程序员高频使用开发工具推荐

2019/04/10 Python

python如何实现读取并显示图片（不需要图形界面）

2020/07/08 Python

AmazeUI导航的示例代码

2020/08/14 HTML / CSS

车间调度岗位职责

2013/11/30 职场文书

学生打架检讨书大全

2014/01/23 职场文书

中药专业自荐信范文

2014/03/18 职场文书

精神文明单位申报材料

2014/05/02 职场文书

城管大队整治方案

2014/05/06 职场文书

活动总结报告怎么写

2014/07/03 职场文书

夫妻房产协议书的格式

2014/10/11 职场文书

教师党员批评与自我批评

2014/10/15 职场文书

通知的格式范文

2015/04/27 职场文书

2016新年感言

2015/08/03 职场文书

给学校的建议书400字

2015/09/14 职场文书

药品销售员2015年终工作总结

2015/10/22 职场文书

《卖火柴的小女孩》教学反思

2016/02/19 职场文书

2019通用版劳动合同范本！

2019/07/11 职场文书

Idea连接MySQL数据库出现中文乱码的问题

2021/04/14 MySQL

2022新作动画《福星小子》释出宣传影片加入内田真礼&宫野真守配音演出

2022/04/08 日漫