编程 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代码要注意的几条规则

Sep 10 Javascript

jQuery初学:find()方法及children方法的区别分析

Jan 31 Javascript

有关于eclipse配置spket需要注意的一些地方

Apr 07 Javascript

JS获得浏览器版本和操作系统版本的例子

May 13 Javascript

JS实现统计复选框选中个数并提示确定与取消的方法

Jul 01 Javascript

js实现将选中值累加到文本框的方法

Aug 12 Javascript

js命名空间写法示例

Dec 18 Javascript

js编写一个简单的产品放大效果代码

Jun 27 Javascript

jQuery中的100个技巧汇总

Dec 15 Javascript

JS判断两个数组或对象是否相同的方法示例

Feb 28 Javascript

JavaScript中的相等操作符使用详解

Dec 21 Javascript

vue点击按钮实现简单页面的切换

Sep 08 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+js iframe实现上传头像界面无跳转

2014/04/29 PHP

PHP实现删除字符串中任何字符的函数

2015/08/11 PHP

PHP中通过getopt解析GNU C风格命令行选项

2019/11/18 PHP

Tab页界面，用jQuery及Ajax技术实现

2009/09/21 Javascript

html+javascript实现可拖动可提交的弹出层对话框效果

2013/08/05 Javascript

Jquery通过JSON字符串创建JSON对象

2014/08/24 Javascript

浅谈jQuery页面的滚动位置scrollTop、scrollLeft

2015/05/19 Javascript

Javascript基础知识盲点总结之函数

2016/05/15 Javascript

jQuery EasyUI Layout实现tabs标签的实例

2017/09/26 jQuery

详解webpack babel的配置

2018/01/09 Javascript

详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

2018/11/14 Javascript

小程序实现锚点滑动效果

2019/09/23 Javascript

JS函数本身的作用域实例分析

2020/03/16 Javascript

[00:14]PWL：老朋友Mushi拍VLOG与中国玩家问好

2020/11/04 DOTA

Python3基础之基本数据类型概述

2014/08/13 Python

初步解析Python下的多进程编程

2015/04/28 Python

Python的Django框架中使用SQLAlchemy操作数据库的教程

2016/06/02 Python

Python HTTP客户端自定义Cookie实现实例

2017/04/28 Python

详解python里使用正则表达式的全匹配功能

2017/10/19 Python

基于python中theano库的线性回归

2018/08/31 Python

pycharm 配置远程解释器的方法

2018/10/28 Python

详解Python3 基本数据类型

2019/04/19 Python

python+selenium+chrome批量文件下载并自动创建文件夹实例

2020/04/27 Python

基于PyQT实现区分左键双击和单击

2020/05/19 Python

关于tf.matmul() 和tf.multiply() 的区别说明

2020/06/18 Python

一款html5 canvas实现的图片玻璃碎片特效

2014/09/11 HTML / CSS

美国奢侈品在线团购网站：Gilt City

2017/11/16 全球购物

达拉斯牛仔官方商店：Dallas Cowboys Pro Shop

2018/02/10 全球购物

瑜伽国际：Yoga International

2018/04/18 全球购物

将一个文本文件的内容按倒序打印出来

2015/01/05 面试题

美容院营销方案

2014/03/05 职场文书

拯救大兵瑞恩观后感

2015/06/09 职场文书

vue项目proxyTable配置和部署服务器

2022/04/14 Vue.js

2022微信温控新功能上线

2022/05/09 数码科技

MySQL数据库表约束讲解

2022/06/21 MySQL

Python实现聚类K-means算法详解

2022/07/15 Python