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 相关文章推荐
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
微信小程序 教程之事件
Oct 18 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
小程序调用微信支付的方法
Sep 26 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
php 图片上传类代码
2009/07/17 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
限制复选框的最大可选数
2006/07/01 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
angularJS 入门基础
2015/02/09 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
Python设置默认编码为utf8的方法
2016/07/01 Python
python删除过期log文件操作实例解析
2018/01/31 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python分布式计算dispy的使用详解
2019/12/22 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python 进程池pool使用详解
2020/10/15 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
金融专业个人求职信范文
2013/11/28 职场文书
个人对照检查材料
2014/02/12 职场文书
大学生活动总结模板
2014/07/02 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js