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

JQuery 插件模板制作jquery插件的朋友可以参考下

Mar 17 Javascript

JavaScript中各种编码解码函数的区别和注意事项

Aug 19 Javascript

js限制文本框输入长度两种限制方式(长度、字节数)

Dec 19 Javascript

jquery 实现上下滚动效果示例代码

Aug 09 Javascript

js利用正则表达式检验输入内容是否为网址

Jul 05 Javascript

纯JS实现轮播图

Feb 22 Javascript

jQuery实现的背景颜色渐变动画效果示例

Mar 24 jQuery

前端MVVM框架解析之双向绑定

Jan 24 Javascript

解决webpack+Vue引入iView找不到字体文件的问题

Sep 28 Javascript

JavaScript实现京东放大镜效果

Dec 03 Javascript

解决vue net :ERR_CONNECTION_REFUSED报错问题

Aug 13 Javascript

Vue实现返回顶部按钮实例代码

Oct 21 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

全国FM电台频率大全 - 14 江西省

2020/03/11 无线电

php中获得视频时间总长度的另一种方法

2011/09/15 PHP

组合算法的PHP解答方法

2012/02/04 PHP

PHP正则表达式之定界符和原子介绍

2012/10/05 PHP

php实现随机显示图片方法汇总

2015/05/21 PHP

PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法

2016/04/01 PHP

js前台判断开始时间是否小于结束时间

2012/02/23 Javascript

禁止空格提交表单的js代码

2013/11/17 Javascript

jquery 检测元素是否存在的实例代码

2013/11/19 Javascript

Jquery的each里用return true或false代替break或continue

2014/05/21 Javascript

JS实现网页背景颜色与select框中颜色同时变化的方法

2015/02/27 Javascript

jQuery利用sort对DOM元素进行排序操作

2016/11/07 Javascript

从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例

2017/04/13 Javascript

深入理解Node中的buffer模块

2017/06/03 Javascript

Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

2017/09/11 Javascript

jQuery实现的简单图片轮播效果完整示例

2018/02/08 jQuery

Vue下路由History模式打包后页面空白的解决方法

2018/06/29 Javascript

关于vue项目中搜索节流的实现代码

2019/09/17 Javascript

[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场

2018/04/05 DOTA

Pyhton中防止SQL注入的方法

2015/02/05 Python

python直接获取API传递回来的参数方法

2018/12/17 Python

Python下opencv图像阈值处理的使用笔记

2019/08/04 Python

Python Pandas 转换unix时间戳方式

2019/12/07 Python

python将图片转base64,实现前端显示

2020/01/09 Python

Python3标准库之functools管理函数的工具详解

2020/02/27 Python

Python StringIO及BytesIO包使用方法解析

2020/06/15 Python

python 下载文件的几种方法汇总

2021/01/06 Python

保加利亚运动鞋购物网站：SneakerStudio.bg

2020/12/23 全球购物

机关门卫岗位职责

2013/12/30 职场文书

高中化学教学反思

2014/01/13 职场文书

支教自我鉴定

2014/01/18 职场文书

2014国庆节主题活动方案：快乐的国庆节

2014/09/16 职场文书

2014年世界艾滋病日演讲稿

2014/11/28 职场文书

餐饮服务食品安全承诺书

2015/04/29 职场文书

vue中三级导航的菜单权限控制

2021/03/31 Vue.js

javascript的setTimeout()使用方法总结

2021/11/20 Javascript