JS组件Bootstrap按钮组与下拉按钮详解


Posted in Javascript onMay 10, 2016

本文先为大家分享按钮组的使用方法,具体内容如下

一、按钮组(Button Groups)

1、单个按钮组
用.btn-group封装多个带.btn的<button>

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div>

2、多个按钮组
将多个<div class="btn-group">放进<div class="btn-toolbar">中。

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div>

3、垂直按钮组
向.btn-group添加.btn-group-vertical。

<div class="btn-group btn-group-vertical"> 
 ... 
</div>

二、下拉按钮(Button Dropdowns)

例子

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  Action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

1、控制大小
同样使用.btn-large、.btn-small、.btn-mini控制大小。

2、分割的下拉按钮

<div class="btn-group"> 
 <button class="btn">Action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

3、向上出现的菜单

<div class="btn-group dropup"> 
 <button class="btn">Dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

三、JavaScript

例子
加载状态。添加data-loading-text="Loading..."。

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> 

开关状态。添加data-toggle="button"。

<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
 

复选框。在btn-group后添加data-toggle="buttons-checkbox"。

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div>

单选。在btn-group后添加data-toggle="buttons-radio"。

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div>

用法
JavaScript代码触发开关状态。
$().button("toggle") 
也可添加data-toggle属性自动触发。
<button type="button" class="btn" data-toggle="button" >…</button> 

使用JavaScript代码触发加载状态,同时按钮显示data-loading-text属性指定的值。

$().button("loading") 

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button> 
注意:Firefox在页面载入时会保持按钮无效状态。变通方案是在按钮上应用autocomplete="off"。

使用JavaScript代码重置按钮状态。
$().button("reset") 

重置按钮状态,并将按钮文字变成指定的文字。下例的complete仅为例子,可以替换。

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
简单的js分页脚本
May 21 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 #Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 #Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 #Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 #Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
You might like
重置版游戏视频
2020/04/09 魔兽争霸
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
python中__call__内置函数用法实例
2015/06/04 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python tkinter label 更新方法
2018/10/11 Python
Python同步遍历多个列表的示例
2019/02/19 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
保护环境建议书
2014/03/12 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
交通事故案件代理词
2015/05/23 职场文书